개발 일지

현재 팀 내에서 ESLint Airbnb 컨벤션을 따르고 있다. Github Action으로 PR 템플릿이 열릴때마다, 그리고 오픈된 PR 에 새로운 커밋이 추가될 때마다 Docker local build를 실행하고 있는데, lint 설정에 오류가 있으면 build가 실패처리 된다. build가 성공해야 PR을 close 할 수 있기 때문에, 빌드시 lint 설정을 끌 수 있는 방법을 알아보자. 먼저, 다음의 명령어로 로컬 환경에서 lint 검사를 수행한다. next lint * 일반적으로 next production build 시 ESLint 오류가 감지되면 빌드가 실패한다. next.js 공식 홈페이지에서 다음과 같은 방법을 안내하는데, 이미 워크플로우의 별도 부분(예: CI 또는 pre-commit..

클라이언트 전용 애플리케이션으로 작업하는 데 익숙하다면 서버에서 localStorage에 액세스할 수 없다는 사실이 의외로 느껴질 수도 있다. 이는 localStorage가 window 객체에 정의되어 있지 않고 Next.js가 클라이언트 렌더링 전에 서버 렌더링을 수행하기 때문에 발생하는 이슈이다. 즉, 클라이언트에서 페이지가 로드되고 window 객체가 정의될 때까지 localStorage에 액세스할 수 없다는 의미이다. 따라서 window가 브라우저에 마운트 되었을때만 웹스토리지를 세팅하도록 코드를 변경하면 된다. view(string) 에 따라서 화면에 보여지는 UI가 달라진다. (list kanban) export const useViewName = () => { const view = useR..

1. next.js 설치 npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 설치 명령어 입력시 아래와 같이 세팅 항목들을 설정할 수 있다. yarn create next-app yarn create v1.22.17 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Installed "create-next-app@13.3.0" with binaries: - create-next-app ✔ What is your project na..