설치 우선 기본 패키지 2개 설치 $ pnpm add eslint eslint-config-next package.json에 scripts 추가 "scripts": { ... "lint": "next lint --no-cache" }, --no-cache는 생략 가능 : 붙여줄 시 변경사항만 검사하지 않고 전체를 다시 검사하는 차이 Standard package 설치 $ pnpm add eslint-config-standard .eslintrc.json을 root에 생성하고 다음 입력 { "extends": ["next/core-web-vitals", "standard"] } ESlint config for Tailwind CSS $ pnpm add eslint-plugin-tailwindcss tail..

저희 테크팀에서는 nextjs 상태관리에 대한 많은 고민 끝에 zustand를 사용하기로 하였습니다. 아래는 zustand를 사용하는 학습과정입니다. Zustand Zustand는 간단하고 빠르며 확장성 있는 상태관리 솔루션입니다. hook를 기반으로 한 편리한 API를 가지고 있어서, 보일러플레이트 코드가 없습니다. 특히 Zustand를 사용하면 기존 React 동시성, 그리고 혼합랜더러 같은 곳에서 나타나는 컨텍스트 손실 같은 일반적인 문제들을 개선하는데 도움이 많이 됩니다. 그리 어렵지않으니, 예제 코드를 통해 사용법을 살펴보겠습니다. const useBearStore = create((set) => ({ // 초기값이 0으로 설정된 bears라는 상태 속성 bears: 0, // bears를 증가..

Typescript 설정 src/app/layout.jsx 파일 이름을 .tsx로 수정하고 다시 $ npm run dev 하면 package.json에 자동으로 다음 dev. dependencies가 생성된 것을 볼 수 있다. "devDependencies": { "@types/node": "20.10.4", "@types/react": "18.2.45", "typescript": "5.3.3" } 추가로 root 폴더에 next-env.d.ts 와 tsconfig.json 이 생성된 것을 볼 수 있다. → 이 두 파일을 수정 필요없음. layout.tsx는 확장자만 tsx로 바꿨으므로 코드도 typescript로 바꿔줘야한다. 다음 코드로 수정한다. import React from "react"; im..

개요 Next.js 14 주요 업데이트 4가지 중 하나는 공식문서에서 교육과정을 제공해준다는 것입니다. Next.js framework의 이해는 공식문서 Learn Next.js 를 참조해주시길 바랍니다. Prerequisites node : 현재 기준 최신 Next.js 14.0.4는 node version 18.17이상만 지원하므로 버전 20 설치를 추천함. (현재 LTS 최신 버전은 20.10.0) Set up app 이름을 정하고 폴더를 만든다. 예: app 이름 : x2bee-fo-dev $ mkdir x2bee-fo $ cd x2bee-fo $ code . // 자신이 쓰는 IDE 열기 package.json 파일 생성하고 아래 입력 { "name": "x2bee-fo", "private": ..