인프런 워밍업 클럽 Frontend - 1주차 발자국 👣

jhworld 3개월 전

📚 1주차 공부 내용 정리

Next.js 렌더링

CSR : React App의 기본적인 렌더링 방식으로 클라이언트인 브라우저에서 렌더링을 진행하는 방식이다.
SSR : 서버에서 완성된 HTML을 만들어 브라우저에 보내주는 방식이다.
SSG : 빌드 타임에 미리 페이지를 생성해두는 렌더링 방식이다.
ISR : SSG 페이지를 일정 시간마다 주기적으로 새로 생성해주는 방식이다.

Cursor AI

Tab
- AI가 코드를 자동으로 완성해주는 강력한 기능
- 여러 줄의 코드를 한 번에 작성할 수 있음
- Tab
Chat
- 코드 관련 질문에 정확한 답변을 제공
- 컨텍스트를 이해하고 관련 조언을 제공
- Ctrl/⌘ + L
인라인 코드 편집
- 편집기 창에서 새로운 코드를 생성하거나 기존 코드를 변경 가능
- Ctrl/⌘ + K

프로젝트 세팅

Next.js App 프로젝트 생성

npx create-next-app@latest # 최신 버전 설치

npx create-next-app@15.2.5 # 강의시 최신 버전 (권장)

npx create-next-app@15.2.5 ./ # 현재 디렉토리를 프로젝트로 설정

TypeScript 설정
- Next.js TypeScript Plugin : VS Code에서 Next.js 프로젝트 개발 시 타입스크립트 지원을 자동화해주는 확장 프로그램
ESLint, Prettier 설정
- ESLint : 코드의 품질을 검사하고 오류를 검사하는 도구
- Prettier : 코드를 일관된 스타일로 자동으로 정리해주는 도구
Tailwind CSS, shadcn/ui 설정
- shadcn/ui : Tailwind CSS를 기반으로 한 현대적이고 아름다운 컴포넌트 모음 (오픈소스 UI 시스템)

🏃‍♀ 미션

미션을 해결할 때는 주로 공식 문서를 참고했다. 내용을 완전히 나의 언어로 표현하는 데 어려움도 있었지만, 직접 글로 정리해보면서 이해를 더 깊게 할 수 있었다.

😵‍💫 회고

(혼자서만) 눈물나는 스토리

이번 워밍업 클럽 4기에는 Frontend뿐만 아니라 CS 과정도 참여했다. 하지만 워밍업 외에도 따로 준비하고 있는 중요한 일정(가장 중요한 ⭐️)이 있어서 모든 걸 병행하기엔 꽤 벅찼다.
그래서 Frontend는 완주 러너를 목표로, CS는 기간 내 완강을 목표로 달리기로 결정했다.

다행히도(?) 지난 기수에서는 우수 러너로 선정된 덕분에, 이번에는 모든 걸 욕심내기보다는 포기할 건 과감히 포기하고, 선택과 집중을 하자고 마음먹었다.
우수 러너는 안녕........ 그래도 완주와 완강은 포기 못 해!!!!

짐코딩 코치님의 강의 완전 짱짱

이번에 처음으로 짐코딩 코치님의 강의를 들었는데......
마치 내가 갓난아기가 된 것 같은 기분이랄까....
걸음마부터 손잡고 하나하나 알려주시는 친절함에 감동받았다...... 👶🍼👍

Cursor AI와의 첫만남

이번 강의를 통해 처음으로 Cursor AI를 사용해봤다.
아직은 낯설고 어색하지만, 써보니 정말 대박이다…! 앞으로 더 잘 활용해서 작업 속도도 높이고, 학습에도 적극 활용해보고 싶다.