@tanstack/react-query의 `useInfiniteQuery`와 직접 만든 커스텀 훅 `useInfiniteScroll`을 사용해 무한 스크롤 페이지를 만들었다. 상세 페이지에서 mutation을 통해 목록 아이템의 좋아요 수를 변경한 후에 리스트 페이지로 돌아왔을 때, 브라우저 네트워크 탭에서 API 요청이 발생했음에도 리스트 UI에는 업데이트된 좋아요 수가 반영되지 않는 문제를 발견했다. const { data, fetchNextPage } = useInfiniteQuery(postQuery.list({ /* ... */ }));const { connect } = useInfiniteScroll({ onIntersect: () => fetchNextPage()});눈에 바로 띄는 원인을..
`next-auth 5.0.0-beta.30`에서 아이디/비밀번호를 통해 로그인하는 기본적인 방법에 대해 설명한다. 1. NextAuth 기본 설정// /lib/auth.tsimport NextAuth from "next-auth"import CredentialsProvider from "next-auth/providers/credentials";export const { handlers, signIn, signOut, auth, unstable_update: update} = NextAuth({ // 1️⃣ JWT 방식으로 인증 session: { strategy: "jwt" }, pages: { signIn: "/auth/signin" }, providers: [ Credenti..
여러 프로젝트가 별도의 레포에 존재해 서비스를 개발하려면 각각의 개발 서버를 구동해야 했다. 개별 개발 서버를 구동하는 건 별 문제가 되지 않지만 각 서비스 내에서 공통 서비스로 이동해야 하는 부분 때문에 개발 과정에 불편한 점이 존재했다. 예를 들어, /care에서 /common로 이동하는 링크가 존재한다면 care 프로젝트에는 /common으로의 라우팅이 정의되지 않았기 때문에 메인 페이지로 튕겨버리게 된다. CI, QA 등 배포 환경에서는 도메인과 포트번호(HTTPS)가 동일하기 때문에 /care → /common로 이동하는 기능을 테스트해야 한다면 결국 CI에 배포해야 한다. 하지만 배포 후에 문제가 해결되지 않기라도 하면 수정 → 빌드 → 배포 → 확인 → 수정 → ...의 과정을 반복적으로 수..
1. 브라우저 이벤트 루프(Event Loop)이벤트 루프가 처리하는 작업은 Task와 Microtask로 나뉘는데 이 Task가 일반적으로 Macrotask라 불리는 작업이다. WHATWG 명세에는 Macrotask라는 용어가 존재하지 않음에 유의하자.Event Loop Processing Model #1. Task Queue에서 작업 `oldestTask`을 하나 꺼낸다.2. `oldestTask`을 Event Loop의 currentlyRunningTask로 설정하고 처리한다. (Microtask는 여기에서 처리되는 task가 아니다!)3. currentlyRunningTask를 `null`로 되돌린다.4. Microtask 체크포인트 실행한다. i. Event Loop의 microta..
렌더 단계(Render Phase) 순서1. Fiber 스택 프레임 초기화2. hook 업데이트를 위해 저장해둔 `concurrentQueues`을 개별 `hook.queue`에 담는다.3. 이전 props와 다음 props를 비교해 컴포넌트 실행 여부 결정한다. 3-1. props가 동일하다면 자식 Fiber 노드만 생성/업데이트하고 넘어간다. 3-2. props가 달라졌다면 대응하는 컴포넌트를 실행해 반환된 ReactElement로부터 자식 Fiber 노드를 생성/업데이트한다.4. 자식 Fiber 노드가 없을 때까지 3번 과정을 반복한다.5. Complete Phase6. 정합성을 갖춘 트리가 되도록 렌더링 결과에 따라 다시 렌더링 후, 커밋 단계(Commit Phase) 준비 1. 렌더..
1. Renderer와 Reconciler #처음 React는 오직 DOM을 위해서만 개발되었지만 React Native와 같은 네이티브 플랫폼을 지원하게 되면서 Renderer와 Reconciler라는 개념이 생겨났다. 상태가 업데이트되어 UI가 업데이트되어야 한다고 했을 때, DOM과 Native에서 UI를 변경하는 방법은 다르다. 하지만 UI가 아닌 React 트리 구조가 어떻게 업데이트되어야 하는지는 두 플랫폼에서 동일한데 이것은 Reconciler의 역할이다. 정리하자면 Renderer는 React 컴포넌트 트리를 어떻게 각각의 플랫폼에 맞는 호출로 변환해 처리할 것인지를 결정한다면, Reconciler는 플랫폼에 상관없는 React의 컴포넌트, 상태, 생애주기 메서드 등이 일관되게 동작할 수 ..
// /package.json{ "name": "my-monorepo-project", "version": "0.2.0", "workspaces": ["packages/*"],}/packages├── /app ├── /hook├── /type└── /componenttsconfig.base.jsonnpm workspace 모노레포로 구성된 프로젝트(Vite + React + TypeScript)가 있다고 해보자. `packages/*`에 있는 개별 패키지를 `/app`이나 다른 패키지에서 가져다 쓰고 싶은 경우 `package.json`, `vite.config.ts`, `tsconfig.json`은 어떻게 작성해야 할까? 우선 `packages/*`에서 `extends`할 기본 `tsconfig...
1. package.json과 노드 모듈 탐색import { useState } from 'react';React에서 `useState`를 가져와서 사용한다고 해보자. `import` 구문에서 `"react"`는 상대 경로도, 절대 경로도 아니고 단순히 패키지 이름인데 어떻게 react의 node_modules 경로를 찾아내서 가져올 수 있는 걸까? ECMAScript 모듈(ESM) 표준은 모듈 식별자를 별도로 해석하지 않고 `"react"` 그대로 모듈을 찾기 때문에 오류가 발생한다. 반면에, CommonJS(CJS) 모듈에서는 Node.js 모듈 해석 방식을 따라 모듈 식별자가 상대 경로도, 절대 경로도 아니라면 `/node_modules/react/package.json` 파일을 찾아간다. { "..
const obj = { all: ['all'], list: () => [...obj.all, 'list'], detail: (id: string) => [...obj.all, 'detail', id],}이런 JavaScript 객체를 생각해보자. 이 객체의 list 속성의 함수는 내부에서 객체 `obj`를 참조하고 있는데 `obj`가 초기화되지 않은 상태에서 정의되는데 문제가 없을까? 놀랍게도(?) 객체 `obj`가 선언 및 초기화되는 것도, `obj.list()`가 실행되는 과정에서 아무런 에러가 발생하지 않는다. 함수 본문에서 참조하고 있기 때문에 문제가 없는 것 같기도 한데 JavaScript 함수에서 변수가 어떻게 참조되길래 이 코드가 정상적으로 선언되고 실행될까? 1. 실행 컨텍스트..
1. 문자열 인코딩의 역사A. ASCII 코드1960년대, 다양한 통신 시스템들이 각각 고유한 문자 인코딩 방식을 사용했기 때문에 서로 다른 통신 시스템 사이에 문자를 교환하는 것이 무척 까다로웠다. 이러한 문제를 해결하고자 통신 시스템에서 사용하는 문자 인코딩 방식을 통일하기 위해 미국 표준 협회(ANSI)는 아스키(ASCII; American Standard Code for Information Interchange)라는 표준 인코딩 방식을 개발하였다. ASCII 코드1. 7비트로 제어문자, 영문자 및 숫자, 일부 특수문자를 표현(총 128개 문자)2. 당시 많은 시스템, 장비들이 7비트를 기본으로 처리해 ASCII 코드에서도 7비트를 사용해 메모리를 절약하고, 1비트는 데이터의 오류를 확인하기 위한..
JavaScript/기타 라이브러리 2026. 3. 3. 16:07
@tanstack/react-query의 `useInfiniteQuery`와 직접 만든 커스텀 훅 `useInfiniteScroll`을 사용해 무한 스크롤 페이지를 만들었다. 상세 페이지에서 mutation을 통해 목록 아이템의 좋아요 수를 변경한 후에 리스트 페이지로 돌아왔을 때, 브라우저 네트워크 탭에서 API 요청이 발생했음에도 리스트 UI에는 업데이트된 좋아요 수가 반영되지 않는 문제를 발견했다. const { data, fetchNextPage } = useInfiniteQuery(postQuery.list({ /* ... */ }));const { connect } = useInfiniteScroll({ onIntersect: () => fetchNextPage()});눈에 바로 띄는 원인을..
JavaScript/Next.js 2025. 12. 8. 16:50
`next-auth 5.0.0-beta.30`에서 아이디/비밀번호를 통해 로그인하는 기본적인 방법에 대해 설명한다. 1. NextAuth 기본 설정// /lib/auth.tsimport NextAuth from "next-auth"import CredentialsProvider from "next-auth/providers/credentials";export const { handlers, signIn, signOut, auth, unstable_update: update} = NextAuth({ // 1️⃣ JWT 방식으로 인증 session: { strategy: "jwt" }, pages: { signIn: "/auth/signin" }, providers: [ Credenti..
기타 2025. 11. 15. 18:04
여러 프로젝트가 별도의 레포에 존재해 서비스를 개발하려면 각각의 개발 서버를 구동해야 했다. 개별 개발 서버를 구동하는 건 별 문제가 되지 않지만 각 서비스 내에서 공통 서비스로 이동해야 하는 부분 때문에 개발 과정에 불편한 점이 존재했다. 예를 들어, /care에서 /common로 이동하는 링크가 존재한다면 care 프로젝트에는 /common으로의 라우팅이 정의되지 않았기 때문에 메인 페이지로 튕겨버리게 된다. CI, QA 등 배포 환경에서는 도메인과 포트번호(HTTPS)가 동일하기 때문에 /care → /common로 이동하는 기능을 테스트해야 한다면 결국 CI에 배포해야 한다. 하지만 배포 후에 문제가 해결되지 않기라도 하면 수정 → 빌드 → 배포 → 확인 → 수정 → ...의 과정을 반복적으로 수..
JavaScript/React 2025. 6. 13. 09:09
1. 브라우저 이벤트 루프(Event Loop)이벤트 루프가 처리하는 작업은 Task와 Microtask로 나뉘는데 이 Task가 일반적으로 Macrotask라 불리는 작업이다. WHATWG 명세에는 Macrotask라는 용어가 존재하지 않음에 유의하자.Event Loop Processing Model #1. Task Queue에서 작업 `oldestTask`을 하나 꺼낸다.2. `oldestTask`을 Event Loop의 currentlyRunningTask로 설정하고 처리한다. (Microtask는 여기에서 처리되는 task가 아니다!)3. currentlyRunningTask를 `null`로 되돌린다.4. Microtask 체크포인트 실행한다. i. Event Loop의 microta..
JavaScript/React 2025. 6. 11. 12:42
렌더 단계(Render Phase) 순서1. Fiber 스택 프레임 초기화2. hook 업데이트를 위해 저장해둔 `concurrentQueues`을 개별 `hook.queue`에 담는다.3. 이전 props와 다음 props를 비교해 컴포넌트 실행 여부 결정한다. 3-1. props가 동일하다면 자식 Fiber 노드만 생성/업데이트하고 넘어간다. 3-2. props가 달라졌다면 대응하는 컴포넌트를 실행해 반환된 ReactElement로부터 자식 Fiber 노드를 생성/업데이트한다.4. 자식 Fiber 노드가 없을 때까지 3번 과정을 반복한다.5. Complete Phase6. 정합성을 갖춘 트리가 되도록 렌더링 결과에 따라 다시 렌더링 후, 커밋 단계(Commit Phase) 준비 1. 렌더..
JavaScript/React 2025. 5. 17. 16:55
1. Renderer와 Reconciler #처음 React는 오직 DOM을 위해서만 개발되었지만 React Native와 같은 네이티브 플랫폼을 지원하게 되면서 Renderer와 Reconciler라는 개념이 생겨났다. 상태가 업데이트되어 UI가 업데이트되어야 한다고 했을 때, DOM과 Native에서 UI를 변경하는 방법은 다르다. 하지만 UI가 아닌 React 트리 구조가 어떻게 업데이트되어야 하는지는 두 플랫폼에서 동일한데 이것은 Reconciler의 역할이다. 정리하자면 Renderer는 React 컴포넌트 트리를 어떻게 각각의 플랫폼에 맞는 호출로 변환해 처리할 것인지를 결정한다면, Reconciler는 플랫폼에 상관없는 React의 컴포넌트, 상태, 생애주기 메서드 등이 일관되게 동작할 수 ..
기타 2025. 3. 21. 12:51
// /package.json{ "name": "my-monorepo-project", "version": "0.2.0", "workspaces": ["packages/*"],}/packages├── /app ├── /hook├── /type└── /componenttsconfig.base.jsonnpm workspace 모노레포로 구성된 프로젝트(Vite + React + TypeScript)가 있다고 해보자. `packages/*`에 있는 개별 패키지를 `/app`이나 다른 패키지에서 가져다 쓰고 싶은 경우 `package.json`, `vite.config.ts`, `tsconfig.json`은 어떻게 작성해야 할까? 우선 `packages/*`에서 `extends`할 기본 `tsconfig...
TypeScript 2025. 3. 13. 17:23
1. package.json과 노드 모듈 탐색import { useState } from 'react';React에서 `useState`를 가져와서 사용한다고 해보자. `import` 구문에서 `"react"`는 상대 경로도, 절대 경로도 아니고 단순히 패키지 이름인데 어떻게 react의 node_modules 경로를 찾아내서 가져올 수 있는 걸까? ECMAScript 모듈(ESM) 표준은 모듈 식별자를 별도로 해석하지 않고 `"react"` 그대로 모듈을 찾기 때문에 오류가 발생한다. 반면에, CommonJS(CJS) 모듈에서는 Node.js 모듈 해석 방식을 따라 모듈 식별자가 상대 경로도, 절대 경로도 아니라면 `/node_modules/react/package.json` 파일을 찾아간다. { "..
JavaScript 2025. 2. 25. 10:33
const obj = { all: ['all'], list: () => [...obj.all, 'list'], detail: (id: string) => [...obj.all, 'detail', id],}이런 JavaScript 객체를 생각해보자. 이 객체의 list 속성의 함수는 내부에서 객체 `obj`를 참조하고 있는데 `obj`가 초기화되지 않은 상태에서 정의되는데 문제가 없을까? 놀랍게도(?) 객체 `obj`가 선언 및 초기화되는 것도, `obj.list()`가 실행되는 과정에서 아무런 에러가 발생하지 않는다. 함수 본문에서 참조하고 있기 때문에 문제가 없는 것 같기도 한데 JavaScript 함수에서 변수가 어떻게 참조되길래 이 코드가 정상적으로 선언되고 실행될까? 1. 실행 컨텍스트..
기타 2025. 1. 11. 19:13
1. 문자열 인코딩의 역사A. ASCII 코드1960년대, 다양한 통신 시스템들이 각각 고유한 문자 인코딩 방식을 사용했기 때문에 서로 다른 통신 시스템 사이에 문자를 교환하는 것이 무척 까다로웠다. 이러한 문제를 해결하고자 통신 시스템에서 사용하는 문자 인코딩 방식을 통일하기 위해 미국 표준 협회(ANSI)는 아스키(ASCII; American Standard Code for Information Interchange)라는 표준 인코딩 방식을 개발하였다. ASCII 코드1. 7비트로 제어문자, 영문자 및 숫자, 일부 특수문자를 표현(총 128개 문자)2. 당시 많은 시스템, 장비들이 7비트를 기본으로 처리해 ASCII 코드에서도 7비트를 사용해 메모리를 절약하고, 1비트는 데이터의 오류를 확인하기 위한..