ESLint 설치 ESLint라고 하는 것... 짜증 그 자체이다. 나혼자 나만의 프로젝트를 코딩할 때는 절대 설치하지 않는다. 하지만 ESLint보다 더 참을 수 없는 것은 여러 명이 한 프로젝트를 같이 코딩할 때 일어나는 다양한 일들이다. 그래서 이런 불편함을 감수하고 ESLint의 적용하는지도 모른다. 문제는 인터넷 강의에도 잘 나와있지 않고, 공식 문서에 설명도 제대로 안 되어있다. 그러나 분명한 것은 아직까지는 팀 프로젝트에서 가장 많이 쓰이므로 핵심적인 것은 확실히 알고 넘어가야한다. 참조: https://nextjs.org/docs/pages/building-your-application/configuring/eslint Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공한다..

지난 글 01-1. Create Next.js app에 이이서... Typescript 설정하기 지난 번에 생성한 layout.jsx의 파일 이름만 layout.tsx로 바꾼다. 그리고 다시 로컬 빌드를 다음과 같이 한다. $ npx next dev 그리고 package.json을 보면 자동으로 다음 3가지가 설치된 것을 볼 수 있다. "devDependencies": { "@types/node": "20.5.9", "@types/react": "18.2.21", "typescript": "5.2.2" } 추가로 next-env.d.ts라는 typescript 환경설정 파일과 tsconfig.json이라는 typescript compiler가 쓰는 config 파일도 자동으로 생성된 것을 볼 수 있다. ..

Introduction Meta에서 만든 React는 public/index.html에 이 하나의 div에 모든 걸 다 Javascript로, 또한 nested 구조로 때려박는 CSR (Client Side Rendering) 방식이다. (물론 예외적으로 createPortal 같은 modal창 만들 때 div 한 개 더 추가해주긴 하지만 개념적으로 그렇다.) SSR의 장점(빠른 초기 로딩, SEO)과 CSR의 장점(빠른 interaction)을 둘 다 섞은 Framework가 최근 더 점유율이 늘어나고 있다. Prerequisites 1. Visual Studio Code VS code를 https://code.visualstudio.com/download 여기서 다운로드받아 설치한다. 다른 IDE도 ..