📍목표- PNPM 패키지 매니저 사용해서 Next.js 프로젝트 만들기- Tailwind 사용 조건으로 ESLint, Prettier 빠르게 설치하기📍create-next-app- create-next-app으로 최신 Next.js 프로젝트 생성- pnpm 사용 npx create-next-app@latest [project-name] --use-pnpm 이후 터미널에서 이어지는 질문에서 ESLint 사용을 체크했다면 ESLint를 설치할 필요 없다 📍Prettier 설치- Prettier 및 Prettier와 ESLint와의 충돌을방지하는 플러그인과 익스텐션 설치- Prettier Tailwind 플러그인도 설치- ESLint Tailwind 플러그인도 설치 pnpm install -D prett..

📍Q1. Yarn Berry로 프로젝트를 시작하려면? 일반적인 Yarn은 클래식 (1.X) Yarn Berry 는 2.X 버전 이상을 말한다 - Node.js 18.15.0 - Yarn 3.5.0 기준 yarn init -2 생성된 프로젝트 구조가 꽤 달라서 당황.. Yarn Berry의 핵심인 zero-install 및 plug-n-play 에 대해서 나중에 알아봐야겠다 zero-install 덕분에 - 커밋, 푸쉬하는데 시간이 오래 걸림 ㅠㅠ - zero-install 기능을 해제하려면 .yarn/cache 를 .gitignore에 추가하면 됨. 단 이는 node_modules 처럼 초기에 yarn install 필요 (현재는 !가 붙어서 gitignore의 부정 상태) ⭐zero-install 덕분..

📍Styled-components는.. ✅장점 - React 친화적 (React를 위해 만들어짐) - style이 자동으로 주입된 컴포넌트를 만들 수 있음 - props를 통한 다이나믹 스타일링 가능 :disabled or :hover 상태에 따라 스타일링 변화 ✅단점 (Next.js 측면에서) - SSR 지원을 위한 추가 설정 필요 - 컴파일 이후 스타일에 랜덤한 클래스명이 생성되어 디버깅이 어려움 📍_document.tsx를 수정하여 SSR 지원 ✅기본적으로 CSR 방식으로 동작하는 styled-components를 SSR 방식으로 동작하게 수정 import Document, { Head, Html, Main, NextScript } from 'next/document' import { ServerS..

📍에러 에디터에서는 에러가 없었는데, 배포하려고 하니 vercel 에서 에러를 띄웠다 에러 메시지 found page without a react component as default export in pages/index.styled.ts styled-copmonents 를 쓰고 있는데, pages 폴더에 있는 index.tsx를 스타일링 하기 위해 index.styled.ts를 만든 것이 화근이었다 📍pages 폴더 주의사항 ⭐Next.js 프로젝트에서 pages 폴더는 routing 공간이므로, 각각의 파일이 page가 된다 따라서 index.styled.ts 파일이 존재하면 안된다! 디폴트 페이지 확장자 : .tsx, .ts, .jsx, .js 이며 next.config.js 에서 추가 가능 mo..

Next.js 공식문서 읽기 📍Next.js 란? 1️⃣어플리케이션을 구조화하기 위한 프레임워크를 제공 2️⃣개발 프로세스 및 어플리케이션 속도를 최적화 - Development Env. 와 Production Env. 모두에 도움 🛠️개발 환경(+DX)에 도움을 제공 - TypeScript - ESLint 통합 - Fast Refresh 등등 👨‍💻Production 환경에 도움을 제공 - 성능 최적화 - Minifying(tree shaking 과 비슷) 등등 Rust와 SWC로 작성된 컴파일러를 통해 빠르게 번들링, 컴파일 등을 실행 📍컴파일이 필요한 이유 - JSX는 브라우저가 이해할 수 없기 때문에, 브라우저가 이해할 수 있는 JavaScript 버전으로 변환되어야 함 📍Minifying - 불..