[인프런 워밍업 스터디 클럽 4기_FE] 1주차 발자국 회고

[웹 렌더링 방식 비교]SPA: 클라이언트 사이드 렌더링, SEO 적합도 낮음, 초기 속도 느림, 실시간성 높음CSR: 클라이언트 사이드 렌더링, SEO 적합도 낮음, 초기 속도 느림, 실시간성 높음SSR: 서버 사이드 렌더링, SEO 적합도 높음, 초기 속도 빠름, 실시간성 중간SSG: 빌드 타임 렌더링, SEO 적합도 높음, 초기 속도 매우 빠름, 실시간성 없음ISR: 빌드+백그라운드 사이드 렌더링, SEO 적합도 높음, 초기 속도 매우 빠름, 실시간성 중간[Cursor AI 공식문서 탐색]Tab (AI 자동완성 및 다중 라인 편집)Chat (코드 기반 대화형 AI 어시스턴트)Inline Edit (인라인 코드 수정)Context (코드베이스 인식 및 커스터마이징)[Next.js 프로젝트 셋팅 가이드 ver.2025]1. Next.js 프로젝트 생성 및 기본 설정create-next-app을 통해 프로젝트를 시작.기본 생성 명령어npx create-next-app@latest my-app 2. TypeScript 통합 방법프로젝트 생성 시 --typescript 옵션을 선택.수동 통합 방법npm install --save-dev typescript @types/react @types/node 이후 프로젝트 루트에 .ts, .tsx 파일을 추가하면 Next.js가 자동으로 tsconfig.json을 생성.3. ESLint & Prettier 설정ESLint (Next.js 내장)--eslint 플래그로 활성화하면 자동으로 .eslintrc.json이 설정됨..eslintrc.json에 Prettier 연동{ "extends": [ "next", "next/core-web-vitals", "plugin:prettier/recommended" ] } 4. Tailwind CSS 적용자동 설치 (추천)create-next-app 생성 시 --tailwind 옵션을 추가하면 자동 설정.globals.css에 Tailwind 디렉티브 추가@tailwind base; @tailwind components; @tailwind utilities; 5. shadcn/ui 컴포넌트 라이브러리shadcn/ui는 Tailwind 기반의 UI 컴포넌트 라이브러리.설치 방법npx shadcn-ui@latest init 설치 시 선택 사항:App Router 사용 여부Tailwind config 경로컴포넌트 디렉토리 위치 (components/ui)사용하려는 theme (default, zinc, rose, 등)[회고]현재 회사에서 진행 중인 업무와 공통되는 부분이 많다. 기존 업무를 할 때는는 그냥 하던대로 진행하는 방식이었으나 학습을 진행하면서 왜 이 설정이 필요한지, 초기 세팅은 어떻게 해야하는지 짚고 넘어갈 수 있는 기회가 되었다. 무엇보다 Cursor에 대해서 관심이 있었는데 인강 수강하면서 Cursor에 대해 학습할 수 있어서 좋았다.