[인프런 워밍업 클럽 4기 FE] 1주차 회고

강의 수강

웹 렌더링의 다양한 방식(CSR, SSR, SPA, SSG, ISR)
- CSR(Client-Side Rendering) : 말 그대로 클라이언트쪽에서 렌더링을 하는거다.
  
  서버는 클라이언트가 렌더링할 수 있게 기본 뼈대인 html과 javscript/css 파일만 ‘제공’
  
  클라이언트는 실제 콘텐츠가 만들어지도록 직접 ‘실행’
- SSR(Server-Side Rendering) : 서버에서 렌더링하는것
  
  클라이언트가 어떤 페이지(/home, /about 등)를 요청하면
  서버는 이미 화면이 완성된 HTML을 만들어서 내려준다.
즉, 서버가 직접 화면을 그려서 클라이언트에 넘겨주는 것!
- SPA(Single Page Application)
  : 초기에 한 번만 서버에서 리소스(html, js, css 등)를 받고 나면
  그 이후 페이지 이동(라우팅)시에는 서버에 다시 요청 X
  자바스크립트 라우터(Router)가 URL을 감지하고, 해당되는 컴포넌트만 클라이언트에서 '동적으로 렌더링'
- SSG(Static Site Generation)
  : 서버도 클라이언트도 아닌, '빌드 시점'에 렌더링이 끝나는 방식
- ISR(Incremental Static Regeneration)
  : 필요할 때마다 일부 정적 페이지를 다시 생성하는 방식
  즉,
  모든 페이지를 한 번에 다시 만들지 않고,
  요청이나 설정된 주기에 따라 일부 페이지만 새로 생성해주는 방식
Cursor AI의 다양한 기능과 특징
- 공식 문서 : https://docs.cursor.com/get-started/introduction#models
  
  주요 기능
- AI 기반 코드 자동 완성 (Tab 기능)
- 대화형 AI 인터페이스 (Chat 기능)
- 코드베이스 인덱싱 및 문맥 인식
- 문서 및 외부 자료 참조 (@Docs, @Web)
  
  특징
- 다양한 언어 지원: Python, JavaScript, TypeScript 등 다양한 프로그래밍 언어 지원
- 테스트 코드 및 문서 자동 생성: 단위 테스트 코드와 함수의 Docstring을 자동으로 생성하여 문서화 작업을 간소화
- VS Code 확장성 유지: 기존 VS Code의 확장 프로그램, 테마, 키 바인딩 등을 그대로 사용할 수 있어
  익숙한 환경 제공
- 보안 및 프라이버시: 프라이버시 모드를 활성화하면 코드가 원격으로 저장되지 않으며, SOC 2 인증을 통해
  보안성 확보
Next.js 셋팅
- 공식문서 : https://nextjs.org/
  
  Next.js : 리액트 기반의 프레임 워크
- Next.js 셋팅
  - 터미널에 명령어로 아래와 같이 입력
    
    npx create-next-app@latest
    또는 원하는 버젼이 있다면 뒤에 해당 버젼을 붙여준다.
    npx create-next-app@15.2.7
- Typescript 플러그인 설치
  - 확장 프로그램 입력창에 next.js typescript 검색
  - Always-on Next.js TypeScript Plugin 설치
  - 플러그인에서 사용할 타입스크립트 버젼 지정
- ESLint, Prettier 설정
  - ESLint 공식 문서 : https://eslint.org/
  - Prettier 공식 문서 : https://prettier.io/
    
    ESLint : 코드 품질 검사 & 일관된 코드 스타일을 유지하도록 도와주는 도구
    Prettier : 코드를 일관된 스타일로 자동 정리해주는 도구
- TailwindCSS 적용 방법
  - 공식 문서 : https://tailwindcss.com/
  - 현재 프로젝트에 설치된 버젼과 공식 문서에 있는 가장 최신 버젼이 다를 수 있다.
    
    이럴 경우에 최신 버젼으로 수정하는 방법!
    npx @tailwindcss/upgrade
  - VScode용 Tailwind CSS IntelliSense 확장 프로그램 설치
- shadcn/ui 컴포넌트 라이브러리
  - 공식 문서: https://ui.shadcn.com/
  - Shadcn/ui
    : Tailwind CSS를 기반으로한 컴포넌트 모음
    
    Next.js, React와 같은 프레임워크와 함께 사용할 수 있는 오픈소스 UI 시스템
    
    전통적인 컴포넌트 라이브러리와는 달리, shadcn/ui는 ‘컴포넌트 컬렉션’이라는 독특한 접근 방식을 가짐.

미션

웹 렌더링의 다양한 방식(CSR, SSR, SPA, SSG, ISR)
https://www.notion.so/CSR-SSR-SPA-SSG-ISR-2014060c302880cdaa8ce89ba17841d7?source=copy_link
Cursor AI의 다양한 기능과 특징
https://www.notion.so/Cursor-AI-2024060c302880208800e009d36c3a1f?source=copy_link
Next.js 셋팅
https://www.notion.so/Next-js-2034060c302880f5b1b8cd5b88ad398a?source=copy_link

회고
먼저 이번 워밍업 클럽 4기에 참여하게 된 이유!

이번 인프런 워밍업 클럽 4기 FE 주제가 Next.js라는걸 보고 곧바로 수강 신청을 하였다.
왜? 어떤걸 시작하던지 제일 중요한건 기초라고 생각한다.

탄탄하게 기초부터 쌓아놓아야 그 위에 무엇을 올리던 견고하게 쌓아올릴 수 있다.

강의 커리큘럼을 보니 내가 원하던, 기초를 잘 쌓으며 그 위에 여러가지를 올릴 수 있는 강의라 참 반가웠다!
웹 렌더링의 다양한 방식에 대해서 다시 리마인드 할 수 있어서 너무 좋았다!

강의를 보면서 강의 내용도 복기하고, 공식문서를 참고해서 읽어보고 또 그에 따른 내 생각을 글로 옮겨보는 과정이 참 좋았다
실무에서 VS code를 쓰다가 올해 초부터 Cursor AI를 사용하고 있었는데 쓰면서도 참 유용한 부분이 많다라고 생각이 들었는데, 강의를 듣고 꿀팁이 되는 부분도 참고할 수 있어서 도움이 되었다.
Next.js 셋팅을 하면서 리액트 프로젝트를 새로 만드는 순간들이 생각났다.
새 프로젝트를 시작할때마다 새 repository를 만들고 그에 따른 프로젝트를 생성하고..!

이제 Next.js를 잘 다룰 수 있는 개발자가 된다고 생각하니 신이 났다..! 그러려면 더 열심히 해야하는건 당연하다.
다음 강의부터는 이제 블로그 UI를 시작으로 본격적으로 기능 만들기에 들어간다.
강사님 말씀처럼 강의를 여러번 보면서 공식문서를 열심히 참고해서 그저 따라하는 코딩이 아닌, 온전히 내 것이 될 수 있게
스스로 배운 내용들을 정리하면서 나아가도록 할것이다!