728x90 반응형 TypeScript28 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. 모노레포를 위한 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. 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. [React] Jest에서 path alias 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 jest에서 path alias 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Path Alias 설정이 필요한 경우 일반적으로 react를 활용하여 개발할 때 path alias를 사용하는 경우는 상대 경로 대신 절대 경로를 활용하기 위해서입니다. 그래서 path alias를 적용하고 있는 프로젝트 같은 경우는 이를 위한 설정 값들을 적용해 둔 경우가 존재하는데 typescript를 활용하시는 분들은 보통 다음과 같이 tsconfig.json에 설정되어 있을 확률이 매우 높습니다. { "compilerOptions": { "paths": { "@/*": ["./src/*"] // path alias 설정 (./src 경로의 하위 경로를 표현할 때 ./.. 2024. 1. 18. [React] Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Vite 사용하기 Jest 사용 환경 설정 Jest를 이용하여 테스트 케이스를 작성하는 경우는 여러 가지 존재합니다. Jest 내부에서만 작성되어 테스트하는 경우, 정의해 둔 모듈을 로드하여 테스트하는 경우, HTML element까지 접근하여 테스트하는 경우 등이 있습니다. 내부에서만 작성하는 경우부터 HTML element까지 접근하는 경우까지 점점 갈수록 더 많은 설정들이 필요한데, 일반적으로 React에서 Jest를 활용하는 경우 HTML element까지 접근하여 사용하기 때문에 이번 글에서는 한 번에 모든 설정을 해보겠습.. 2023. 10. 6. [React] 타입 스크립트(TypeScript) 환경에서 Jest를 이용하여 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트(TypeScript) 환경에서 Jest를 이용하여 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 테스트 (1) - JS 작성하여 테스트 가장 먼저 테스트 파일에 JS를 작성하여 테스트를 진행해보겠습니다. [ 1. 패키지 설치 ] $ npm install -D jest @types/jest [ 2. package.json에 jest 추가 ] { "scripts": { "test": "jest", }, } [ 3. 테스트 파일 생성 ] /src/test 경로를 생성한 뒤 테스트를 위한 js.test.ts 파일을 다음과 같이 생성하겠습니다. 그리고 테스트 코드를 다음과 같이 작성하겠습니다. describe('js test', () => { i.. 2022. 3. 24. [React] 타입 스크립트 환경에서 ESLint / Prettier 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 환경에서 ESLint / Prettier 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 설정하는 방법 React를 이용해 개발할 때 코드 점검과 포맷팅을 위해 ESLint와 Prettier를 사용합니다. 또한 이 두 개를 연동하여 코드를 점검함과 동시에 올바른 코드 상태가 아닐 경우 자동으로 포맷팅을 해줄 수 있습니다. 이번 글에서는 ESLint와 Prettier를 함께 사용할 수 있도록 환경 설정을 해보도록 하겠습니다. [ 1. Extension 설치 ] 대부분 VSCode를 이용해 개발하실 것으로 생각됩니다. VSCode에서 ESLint와 Prettier를 사용하기 위해서는 Extension 설치를 해줘야 합니다. 다음과 같이 2개의 .. 2022. 3. 21. 이전 1 2 다음 728x90 반응형
