연구

리액트를 배우다 보면 자연스럽게 훅(Hook)에 대해 접하게 된다. useState, useEffect 같은 기본적인 훅을 사용하며 컴포넌트의 상태를 관리하고, 생명주기를 다루는 방법을 익히게 된다. 동시에 리액트에서는 훅을 사용할 때 반드시 지켜야 할 몇 가지 규칙이 있으며, 이를 어기면 예기치 않은 오류가 발생할 수 있다는 이야기를 듣게 된다. 리액트 공식 문서에서도 이를 강조하고 있다. 훅은 최상위에서만 호출해야 하며 조건문이나 반복문 안에서는 사용할 수 없다. 반드시 리액트 함수 내에서만 호출해야 하며 클래스 컴포넌트에서는 호출할 수 없다.도전적인 개발자라면 주어진 규칙에 무조건적으로 순응하지 않는다. 대신, 그 규칙이 반드시 지켜야 할 절대적인 원칙인지, 아니면 단순한 관례인지 직접 검증해본다...

자바스크립트는 프로토타입 기반(prototype-based) 언어로, 객체 지향 프로그래밍에서 클래스를 사용하는 대신 프로토타입을 활용해 객체를 상속한다. 모든 객체는 __proto__라는 숨겨진 프로퍼티를 통해 프로토타입 객체에 정의된 프로퍼티와 메서드를 상속받을 수 있다. 또한, 자바스크립트에서는 number, string, boolean 같은 원시 값도 객체처럼 동작하는데, 이는 자바스크립트 엔진이 자동으로 해당 값을 감싸는 래퍼 객체(Wrapper Object)를 생성하기 때문이다. 덕분에 원시 값도 String.prototype.toUpperCase() 같은 메서드를 사용할 수 있으며, 메서드 호출 후 래퍼 객체는 즉시 사라져 원시 값의 특성을 유지한다.클래스 문법이 등장한 이후로도 프로토타입은..

이전에 Apollo Client 포스트를 통해 page router 환경에서 GraphQL을 사용하는 방법에 대해 알아보았었다. 하지만 며칠 간의 실험과 고민 끝에 나는 Apollo Client 대신 React-Query를 사용하기로 결정했다. TKDoDo가 올린 당신은 리액트 쿼리가 필요하지 않을 지도 모른다를 번역하면서도 느꼈지만, React-Query는 data fetching을 포함한 모든 종류의 비동기 작업을 관리하는 데 가장 뛰어나다고 생각된다.React-Query에는 Apollo Client에는 존재하지 않는 몇 가지 강력한 기능이 포함되어있다. 간단하게 구현할 수 있는 infiniteQuery와 일괄적으로 선언할 수 있는 retry 및 stateTime, 그리고 구체적으로 선언할 수 있는 ..

네트워크 인터페이스 계층(Network Interface Layer)네트워크 인터페이스 계층은 허브, 스위치 등을 사용하여 동일한 네트워크에서 데이터를 관리하고 전달하는 역할을 한다. 이때 네트워크에 연결된 각각의 기기를 식별하기 위해 MAC 주소를 사용한다. 데이터를 전송하려는 기기의 MAC 주소를 알지 못하는 경우 컴퓨터는 ARP 프로토콜을 사용해 IP 주소를 가지고 MAC 주소를 획득한다. ARP 프로토콜은 크게 세 단계로 나뉜다. 우선 데이터를 전송하려는 컴퓨터 A는 같은 허브나 스위치에 묶여있는 모든 기기에게 특정 IP 주소를 아는지 물어보는데(ARP request), 그러면 연결된 기기는 자신의 IP를 요청 받은 IP와 비교하게 된다. 만약 일치하는 기기 B가 존재할 경우 해당 기기는 자신의 ..

나는 꽤 오래 전부터 타입스크립트를 사용해 특정한 컴포넌트만을 걸러낼 수 있을지 궁금했다. 만약 이게 가능하다면 특정한 컴포넌트만을 children으로 받게 만들 수 있어 프로젝트의 전체적인 구조가 단단해질 거라 생각했다. 실제로 특정 컴포넌트를 걸러내기 위해서 나는 타입스크립트를 가지고 아주 다양한 시도를 해보았으며, 이 포스트는 수많은 삽질 속에서 알게 된 내용을 정리한 것이다. 컴포넌트를 이루는 타입들ReactNode나는 리액트 컴포넌트의 props로 children을 넘겨야 할 때, 항상 그 타입을 ReactNode로 선언했다. 습관 같은 것이었고 이에 대해 깊게 생각해본 적이 없었다. 결론부터 말하자면 ReactNode는 ReactElement를 포함하는 타입이다. 아래는 리액트에서 선언한 Re..

이전 포스트에서는 페이지 전체를 대상으로 어떤 아이템(네모난 상자, 나비 등)이 마우스를 따라오도록 했고, 이를 구현하기 위해 전역 객체에 이벤트 리스너를 등록하였다. 하지만 컴포넌트 수준에서는 각각의 이벤트 리스너를 ReactElement에 직접 연결할 수 있다. 아래의 커스텀 훅은 이전 포스트에서 작성했던 useFollowMouse 훅과 구조적으로 동일하나, 이벤트 리스너를 ReactElement에 연결할 수 있도록 리턴하는 부분이 조금 다르다.이벤트 리스너인 handleMouseMove를 잠시 살펴보면 e.terget이 아닌 e.currentTarget을 사용하고 있다는 점을 알 수 있다. 이는 이벤트 버블링으로 인한 오작동을 막기 위한 것이다. 사족이지만 나는 이벤트 객체의 이 두 프로퍼티가 이름..

합성 컴포넌트 패턴이란 무엇인가합성 컴포넌트 패턴(Composite Component Pattern)은 컴포넌트를 보다 유연하게 구성하고 재사용할 수 있도록 여러 하위 컴포넌트를 조합하여 만든 컴포넌트이다. 세간의 인식은 조금 더 복잡한 무언가를 예상하는 듯하지만, 실제로는 리액트를 사용하는 사람이라면 누구나 children을 통해 합성 컴포넌트 패턴을 사용하고 있다.function Dialog({ children }) { return {children};}function App() { return ( 이것은 합성 컴포넌트입니다. );} 만약 특정한 형태의 컴포넌트만을 사용하고 싶다면 children 대신 다른 props 이름을 사용하여 아래와 같이 구현할 수도 있다. pro..

댓글 기능의 모든 것을 재귀적으로 구현했던 이 포스트에서 이어집니다 lexical order 혹은 lexicographic order라고도 부르는 사전적 정렬은 ─ 다른 언어에서는 어떤지 모르겠지만 적어도 자바스크립트에서는 ─ 유니코드를 기준으로 오름차순으로 정렬하는 행위를 말한다. 배열을 정렬하는 sort 메소드의 경우 콜백 함수를 지정하지 않으면 사전적 정렬을 수행한다. 사전적 정렬에 따르면 acquaintance는 언제나 b보다 앞서며, 이러한 사전적 정렬의 특성을 활용하면 아주 간단하게 무한한 깊이의 대댓글을 구현할 수 있다.미리 남겨놓지만 lexical order를 활용하는 것이 모든 문제를 해결하는 만능의 도구는 아니다. 재귀적으로 구현하는 방식이 그 구조에 따른 문제점을 내포하고 있었던 것처..

내가 쓸 목적으로 만든 독후감 기록 및 공유 서비스가 하나 있다. 이름은 onef인데, 홍보에 그렇게 열중하지 않았더니 쓰는 사람이 나랑 내 후배들 정도 뿐이다. 하지만 상관 없다. 구현해보고 싶은 기능을 부담 없이 해볼 수 있는 테스트베드로서의 기능은 충분히 만족하고 있으니까. 이 서비스의 프론트와 백엔드는 모두 내가 구현했는데, 각각 NextJS와 NestJS를 사용했다. 데이터베이스는 postgreSQL을 썼는데, SQL을 모르는 관계로 ORM인 Prisma를 사용했다. 재귀적 관계 테이블댓글 기능을 추가하는 건 간단하다. 그런데 대댓글은 어떻게 구현해야 할까. 이에 대해 찾아보다가 RDB에는 재귀적 관계라는 게 있다는 걸 알게되었다. 풀어서 쓰면 자기 자신을 참조하는 모델 연결이라고 해야겠다. P..

예전에 멘토님께서 이런 이야기를 해주신 적이 있다. "각 라이브러리가 어떻게 라우팅을 구현하고 있는지를 외우고 있는 건 하나도 중요하지 않다. 정말 중요한 건 이들 라이브러리가 해결하고자 하는 어떤 공통된 문제가 존재한다는 것이며, 따라서 라우팅을 지원하는 라이브러리가 해결하고자 하는 문제가 무엇인지를 알아야 한다. 이걸 알고 나면 각각의 라이브러리가 이 문제를 어떻게 해결하는 지는 그냥 공식 문서 찾아보면 된다." 이 말은 비단 라우팅 뿐 아니라 '라이브러리' 전체에 동일하게 적용할 수 있는 격언이라 생각한다. NextJS는 페이지 라우터와 앱 라우터를 지원하고, React 수준에서는 오래전부터 React-Router를 사용해 CSR 라우팅을 처리해왔다. 이들은 모두 라우팅 문제 해결이라는 공통된 목적..

requestAnimationFrame는 브라우저에서 애니메이션을 효율적으로 실행하기 위해 제공하는 메서드다. 이는 rAF 메서드가 window 객체에 속해있다는 의미이며, node 환경에서는 접근할 수 없다는 뜻이기도 하다. rAF는 다음 리페인트 전에 지정된 콜백 함수를 호출해 애니메이션이 화면 재생 빈도에 맞춰 부드럽게 실행될 수 있도록 한다. 모니터가 60hz라면 초당 60번, 144hz라면 초당 144번 호출된다. 또한, rAF는 setTimeout보다 성능이 뛰어나며, 비활성 탭에서는 호출이 중지되어 리소스를 절약할 수 있다. MDN의 예시 코드만 봐도 바닐라 JS에서는 재귀함수의 형태로 requestAnimationFrame를 사용하는 듯하다. 그러나 리액트에서는 몇 가지 이유로 인해 다른 ..

앞서 작성한 input 연대기 초반에 잠깐 언급했었는데, 내가 프론트엔드 공부를 처음 시작했을때부터 지금까지 꾸준히 고민하고 있는 문제 중 하나가 'Button과 Link가 같은 스타일을 가질 때 어떻게 처리할 것인가'이다. 이 두 개의 컴포넌트는 받는 props의 타입도 조금 다르고, 클릭했을 때의 동작도 다른 편이지만, 결국은 '클릭할 수 있는 영역'이기 때문에 UI 적으로 비슷하거나 동일한 디자인을 가져가는 경우가 종종 있다. 처음에는 하나의 스타일시트를 만들고, Button과 Link 컴포넌트에 className으로 동일한 css를 넘겨줄 생각이었다. 그러나 이 방법은 곧 한계를 드러냈다. 내가 간과한 사실 중 하나는 '스타일은 결국 여러 옵션의 내용(size, color etc)을 중첩하여 사용..