[인프런 워밍업 클럽 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를 시작으로 본격적으로 기능 만들기에 들어간다.
  강사님 말씀처럼 강의를 여러번 보면서 공식문서를 열심히 참고해서 그저 따라하는 코딩이 아닌, 온전히 내 것이 될 수 있게
  스스로 배운 내용들을 정리하면서 나아가도록 할것이다!