728x90 반응형 전체 글460 React Compiler와 Next.js 16: useMemo/useCallback이 사라지는 이유 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 stable로 전환된 React Compiler를 활성화하는 방법과, 기존 useMemo/useCallback/memo로 작성했던 코드를 걷어내는 방법에 대해 알아보는 시간을 가져보려고 합니다. React Compiler란 무엇인가 React로 리스트나 자식 컴포넌트를 다루다 보면 부모 컴포넌트가 리렌더링될 때마다 관련 없는 자식 컴포넌트까지 함께 리렌더링되는 상황을 자주 마주치게 됩니다. 이 문제를 해결하기 위해 그동안은 useMemo로 계산 결과를 캐싱하고, useCallback으로 함수 참조를 고정하고, memo로 컴포넌트 자체를 감싸는 방식을 직접 작성해야 했습니다. 저의 경우 useCallback의 의존성 배열에 값을 하나 빠뜨.. 2026. 8. 2. Turbopack, Next.js 16 기본 번들러 전환과 webpack 커스텀 설정 마이그레이션 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 Turbopack이 기본 번들러로 자리잡은 배경과, 기존 webpack 커스텀 설정을 Turbopack 설정으로 옮기는 방법에 대해 알아보는 시간을 가져보려고 합니다. Turbopack이 Next.js 16의 기본 번들러가 된 이유 Next.js는 오랫동안 webpack을 기본 번들러로 사용해왔고, 프로젝트 규모가 커질수록 dev 서버의 컴파일 속도와 프로덕션 빌드 시간이 체감될 정도로 느려지는 경우가 많았습니다. 저의 경우 페이지 수가 많은 프로젝트에서 코드 한 줄을 수정하고 Fast Refresh 결과를 확인하기까지 기다리는 시간이 점점 길어지는 것을 체감한 적이 있습니다. 그러면 Next.js 16은 번들러 문제를 어떻게 해결했.. 2026. 8. 1. Next.js 16 proxy.ts, middleware.ts를 대체하는 네트워크 경계 재정의 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 middleware.ts가 proxy.ts로 바뀐 배경과, 달라진 네트워크 경계를 실제 코드로 확인해보는 시간을 가져보려고 합니다. middleware.ts가 proxy.ts로 바뀐 이유, Next.js 16 네트워크 경계 재정의 Next.js 15까지는 요청이 라우트 핸들러나 페이지에 도달하기 전에 가로채는 진입점으로 middleware.ts 파일을 사용했습니다. 인증 체크, 리다이렉트, 헤더 조작처럼 애플리케이션 앞단에서 처리해야 하는 로직을 이 파일 하나에 모아둘 수 있었습니다. 다만 middleware라는 이름은 Express.js 같은 서버 프레임워크의 middleware 개념과 혼동을 일으키기 쉬웠습니다. Express의 .. 2026. 7. 27. Next.js 16 Cache Components: use cache부터 updateTag까지 캐시 무효화 총정리 안녕하세요. J4J입니다. 이번 포스팅은 Next.js 16에서 바뀐 캐싱 모델인 Cache Components와, use cache 디렉티브부터 revalidateTag, updateTag, refresh까지 캐시를 다루는 방법에 대해 알아보는 시간을 가져보려고 합니다. Next.js 16 캐싱 모델이 바뀐 이유, Cache Components란? Next.js 15까지는 무언가를 캐시하려면 상황에 따라 서로 다른 도구를 조합해야 했습니다. fetch 요청 하나를 캐시하려면 cache나 next.revalidate 옵션을 fetch 호출부에 직접 넘겨야 했고, DB 조회처럼 fetch가 아닌 임의의 함수를 캐시하려면 별도로 unstable_cache로 감싸야 했습니다. 여기에 정적 셸과 동적 콘텐츠.. 2026. 7. 26. onCaughtError, onUncaughtError로 완성하는 React 19 에러 로깅 정리 안녕하세요. J4J입니다. 이번 포스팅은 React 19에 새로 추가된 onCaughtError, onUncaughtError와 기존 onRecoverableError까지 함께 활용해 프로덕션 에러 로깅을 완성하는 방법에 대해 알아보는 시간을 가져보려고 합니다. Error Boundary가 잡은 에러를 놓치지 않으려면 React 18까지는 Error Boundary가 에러를 잡았을 때 그 에러를 컴포넌트 단위로만 처리할 수 있었고, 여러 Error Boundary의 에러를 한 곳에서 일괄적으로 받아 외부 로깅 서비스로 전달할 방법이 없었습니다. Error Boundary는 componentDidCatch 생명주기에서 에러를 받을 수 있었지만, 이는 클래스 컴포넌트 내부에 국한된 처리였고 루트 단위로 .. 2026. 7. 25. React 19 useTransition, Actions로 비동기 pending과 에러 한 번에 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 React 19에서 useTransition에 async 함수를 직접 전달하여 비동기 작업의 pending 상태와 에러를 한 번에 관리하는 방법에 대해 알아보는 시간을 가져보려고 합니다. useTransition에 async 함수를 사용하면 좋은 상황 정렬 변경, 검색, 탭 전환처럼 버튼 클릭 한 번으로 비동기 작업이 시작되는 화면을 만들다 보면 로딩 상태와 에러를 함께 관리해야 하는 상황을 마주치게 됩니다. 지금까지는 이런 화면을 만들 때 로딩 여부와 에러 메시지를 각각 별도의 state로 선언하고, try/catch/finally로 직접 관리해야 했습니다. 제가 처음 이런 화면을 만들 때는 finally에서 로딩 state를 내려주는 코드를 깜빡해서, 요청.. 2026. 7. 20. React 19 ref as prop과 Context 렌더링으로 완성하는 forwardRef 없는 컴포넌트 설계 안녕하세요. J4J입니다. 이번 포스팅은 React 19에 새롭게 추가된 ref as prop과 Context 렌더링 방식을 이용하여 forwardRef 없이 컴포넌트를 작성하는 방법에 대해 알아보는 시간을 가져보려고 합니다. forwardRef 없이 ref를 prop으로 받아야 하는 이유 재사용 가능한 Input, Button 같은 컴포넌트를 만들다 보면 부모 컴포넌트가 DOM 요소에 직접 접근해야 하는 상황을 마주치게 됩니다. 지금까지는 이런 컴포넌트를 만들 때 함수 컴포넌트를 forwardRef로 감싸고, ref를 두 번째 인자로 따로 받아야 했습니다. 제가 처음 컴포넌트 라이브러리를 만들 때 가장 번거롭게 느꼈던 부분은 TypeScript로 forwardRef의 제네릭 타입 두 개를 매번 맞춰.. 2026. 7. 19. React 19 문서 메타데이터와 리소스 프리로드, react-helmet 없이 직접 관리하기 안녕하세요. J4J입니다. 이번 포스팅은 React 19에 새롭게 추가된 문서 메타데이터와 리소스 프리로드 기능을 이용하여 react-helmet 없이 head를 관리하는 방법에 대해 알아보는 시간을 가져보려고 합니다. react-helmet 없이 React 19에서 문서 메타데이터를 다뤄야 하는 이유 Next.js를 사용하지 않는 순수 React 프로젝트에서 페이지마다 title이나 meta 태그를 동적으로 바꾸려면 지금까지는 react-helmet-async 같은 별도 라이브러리를 설치해야 했습니다. react-helmet-async는 Helmet 컴포넌트로 head에 들어갈 태그들을 감싸는 방식으로 동작합니다. // ❌ react-helmet-async로 head를 관리하는 기존 방식import.. 2026. 7. 17. React 19 useOptimistic, Server Action 없이 낙관적 업데이트를 처리하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 React 19에 새롭게 추가된 useOptimistic 훅을 이용하여 낙관적 업데이트를 처리하는 방법에 대해 알아보는 시간을 가져보려고 합니다. useOptimistic을 사용하면 좋은 상황 좋아요 버튼을 누르면 서버 응답이 돌아올 때까지 화면이 잠깐 멈춰 있는 것처럼 느껴지는 경험을 하게 됩니다. 지금까지는 이런 지연을 줄이기 위해 useState로 임시 상태를 직접 만들고, 요청이 실패하면 이전 값으로 되돌리는 로직을 컴포넌트마다 작성해야 했습니다. 저의 경우 이런 롤백 로직을 컴포넌트마다 반복해서 작성하다 보면, 실수로 이전 값을 잘못 저장해 두어 되돌리기가 엉뚱하게 동작하는 경우도 종종 겪었습니다. // ❌ useState로 직접 낙관적 업데이트와 롤.. 2026. 7. 13. React 19 use API, Promise와 Context를 조건부로 읽는 방법 안녕하세요. J4J입니다. 이번 포스팅은 React 19에 새롭게 추가된 use API를 이용하여 Promise와 Context를 다루는 방법에 대해 알아보는 시간을 가져보려고 합니다. use를 사용하면 좋은 상황 지금까지 컴포넌트 안에서 비동기 데이터를 다루려면 useState와 useEffect를 조합하는 방식이 일반적이었습니다. 데이터를 담을 state, 로딩 여부를 담을 state, 에러를 담을 state를 각각 선언하고 useEffect 안에서 fetch를 호출한 뒤 결과에 따라 각 state를 갱신하는 코드를 작성하게 됩니다. 제가 처음 이 패턴을 반복해서 작성할 때 가장 번거롭게 느꼈던 부분은 데이터를 사용하는 컴포넌트마다 동일한 형태의 보일러플레이트가 계속 늘어난다는 것이었습니다. //.. 2026. 7. 12. React Server Action, API Route 없이 서버 함수를 호출하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 React Server Action이 무엇이고, 실무에서 어떻게 활용할 수 있는지에 대해 알아보는 시간을 가져보려고 합니다. Server Action이란? Server Action은 서버에서 실행되는 비동기 함수를 클라이언트에서 직접 호출할 수 있게 해주는 기능입니다. React 19에서 공식 API로 안정화되었으며, Next.js App Router 환경에서 가장 자연스럽게 사용할 수 있습니다. 그러면 Server Action이 왜 필요할까요? 기존에는 클라이언트에서 서버의 데이터를 변경하기 위해 다음과 같은 과정이 필요했습니다. API 엔드포인트(Route Handler) 작성클라이언트에서 fetch로 해당 엔드포인트 호출응답 처리 및 상태 업데이트 Ser.. 2026. 7. 5. pnpm 도입기: React 프로젝트를 npm에서 pnpm으로 이관하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 pnpm은 무엇이고, react 프로젝트를 npm에서 pnpm으로 이관하는 방법에 대해 적어보는 시간을 가져보려고 합니다. pnpm pnpm은 node 기반의 패키지 매니저 중 하나로 우리에게 익숙한 npm, yarn 등과 동일한 목적으로 사용되는 도구입니다. 그러면 npm, yarn과 비교했을 때 pnpm이 가지고 있는 차이점은 무엇일까요? package.json에 설정되어 있는 의존성을 이용하여 node_modules 구성을 위해 npm, yarn을 지금까지 많이 사용해 왔습니다. 사용해 오면서 한 번씩 체감할 수 있는 것 중 하나는 node_modules가 정말 무거운 존재라는 것입니다. 어느 정도 규모가 있는 프로젝트를 내려받아 로컬 환경에서 동작을 하.. 2026. 3. 6. npm install vs npm ci: CI 환경에서 package-lock의 진짜 역할 안녕하세요. J4J입니다. 이번 포스팅은 npm install과 npm ci의 비교, package-lock의 역할에 대해 적어보는 시간을 가져보려고 합니다. npm install과 package.json node 기반의 프로젝트를 개발하는 곳에서 많이 입력하는 명령어 중 하나는 npm install입니다. 많은 사람들이 아는 것처럼 npm install은 새로운 패키지를 설치할 때 사용되기도 하고, 새로운 프로젝트를 내려받은 뒤 의존되어 있는 모듈들을 node_modules에 구성하기 위해 사용되기도 합니다. 그래서 어느 상황이든 의존되어 있는 모듈들을 설치해야 한다고 할 때 npm install 만을 사용하는 실수를 범할 수 있습니다. 의존성을 현명하게 설치하기 위해서는 npm install의.. 2026. 2. 19. Turborepo 원격 캐시 설정 방법 (Vercel / Self-hosted) 안녕하세요. J4J입니다. 이번 포스팅은 turborepo 원격 캐시 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 모노레포를 위한 Turborepo 기초 가이드 모노레포를 위한 Turborepo 기초 가이드안녕하세요. J4J입니다. 이번 포스팅은 모노레포를 위한 turborepo 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 모노레포란 ? 모노레포는 하나의 저장소에 애플리케이션 서비스, 라jforj.tistory.com Helm 이란? Helm 입문을 위한 기본 개념 설명 Helm 이란? Helm 입문을 위한 기본 개념 설명안녕하세요. J4J입니다. 이번 포스팅은 helm 입문을 위한 기본 개념 설명하는 시간을 가져보려고 합니다. Helm 이란? helm이라고 하는 것.. 2026. 2. 1. 모노레포를 위한 Turborepo 기초 가이드 안녕하세요. J4J입니다. 이번 포스팅은 모노레포를 위한 turborepo 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 모노레포란 ? 모노레포는 하나의 저장소에 애플리케이션 서비스, 라이브러리 패키지 등을 서로 구분하지 않고 여러 개의 프로젝트를 함께 관리하는 방식을 말합니다. 보통 저장소를 관리할 때 가장 많이 접하는 구조는 멀티레포가 될 것입니다. 멀티레포는 1개의 프로젝트마다 1개의 저장소를 소유하고 있는 것으로, 말 그대로 서로 독립적인 방식으로 관리되며 각자의 프로젝트에 관여하지 않는 구조를 말합니다. 간단하게 예시를 들면 멀티레포는 다음과 같은 구조가 나올 수 있습니다. // design-system repo- design-system// application service.. 2026. 1. 27. Tailwind로 만드는 React 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 안녕하세요. J4J입니다. 이번 포스팅은 tailwind로 react 컴포넌트 라이브러리 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리안녕하세요. J4J입니다. 이번 포스팅은 npm 패키지 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. NPM 패키지 배포 npm 패키지 배포라고 하는 것은 한 번 만들어진 javascript 기반의 라이jforj.tistory.com React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용안녕하세요. J4J입니.. 2026. 1. 23. Tailwind className 관리 가이드, clsx + twMerge + cva 역할 정리 안녕하세요. J4J입니다. 이번 포스팅은 tailwind를 사용할 때 className 관리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Tailwind를 사용하면 겪는 className 설정 문제점 요즘 react 프로젝트를 이용하여 페이지 및 컴포넌트 개발을 할 때 css를 이용한 스타일링을 제공하기 위해 tailwind가 많이 사용되고 있습니다. 함께 비교될 수 있는 도구인 styledComponents, emotion 등과 비교해보면 utility-first 기반의 tailwind가 최근에 많이 선택되고 있는 것으로 보입니다. tailwind를 이용하여 개발을 하다 보면 개인적으로 가장 크게 다가오는 이점은 css를 정의할 때 block-element-modifier (BEM)을 .. 2026. 1. 18. React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 안녕하세요. J4J입니다. 이번 포스팅은 react typescript 컴포넌트 라이브러리 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Vite 사용하기 [React] Vite 사용하기안녕하세요. J4J입니다. 이번 포스팅은 vite 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vite란? vite는 webpack, rollup 등과 같이 모듈 번들링을 수행할 때 사용되는 번들러 중 하나입니jforj.tistory.com npm 패키지 배포, 처음부터 자동화까지 한 번에 정리 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리안녕하세요. J4J입니다. 이번 포스팅은 npm 패키지 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. NPM 패키지.. 2026. 1. 10. 이전 1 2 3 4 ··· 26 다음 728x90 반응형