개발 일지

현재 팀 내에서 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..

Redirects 유저가 보는 URL의 path를 리다이렉트 시켜서 다른 path로 이동시킨다. next.config.js 에서 redirect를 설정할 수 있다. module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ]; }, }; 리다이렉션은 동기(async)함수로 source, destination, permanent 프로퍼티를 가지고 있는 매핑된 배열 객체를 반환한다. source : 유입되는 요청 경로 패턴 destination : 라우팅하려는 경로 permanent : true / false true : 클라이언트/검색 엔진에 리다이렉션을 영원히 캐싱하는 경우..

* 23년 5월 5일 Next.js 13.4.0 버전 에서 App Router(stable) 버전이 릴리즈 되었습니다. ** Next.js 12 이하 버전까지는 Page Directory를, 13 버전 이후부터는 App Router를 권장합니다. (방식에 차이가 있으므로 주의) (대표적으로 App Router에서는 Custom App 이 없습니다.) Next에서는 App 컴포넌트를 사용하여 페이지를 초기화한다. 즉, Next는 기본적으로 가장 먼저 App Component를 확인하고 index.js의 컨텐츠들을 확인하기 때문에 모든 페이지들이 통과하는 관문이라고 볼 수 있다. 어떤 컴포넌트가 어느 페이지에 있어야 하는지, 모든 페이지들을 한 눈에 볼 수 있는 청사진 역할을 한다. App 컴포넌트를 사용해..

1. CSS Modules Next.js에서는 module.css 확장자로 CSS모듈을 기본적으로 지원한다. CSS Modules는 유니크한 클래스네임(className)을 생성하여 css의 범위를 한정시켜 독립적으로 사용할 수 있다. 이는 같은 클래스네임을 여러 파일에서 사용해도 충돌이 나지 않게 해주는 장점이 있다. (사용예시) Nav.tsx import { useRouter } from "next/router"; import Link from "next/link"; import styles from ".//Nav.module.css"; export default function Nav() { const router = useRouter(); return ( Home Detail ); } Nav.mo..

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..