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

강의 수강서버액션 & 캐시서버액션 & 캐시, Giscus 댓글 & 다크모드반응형 웹 & 에러 핸들링, Next.js 성능 최적화Next.js SEO 최적화, 라우트 그룹고급 라우팅 기술, 마무리 & 심화 미션블로그 정리하기 - 서버 액션 (Server Actions) 회고마지막 3주차가 되었는데, Next.js를 재밌게 학습할 수 있어서 좋았다!이번에 미션으로 했던 '서버 액션'도 매우 흥미로웠다.이전에도 내 개인 사이트를 만들어서 그 안에서 블로그 글도 올리고, 포트폴리오도 올릴 수 있는 작업물을 만들어보려고했었는데, 이렇게 좋은 기회에 인프런 워밍업 클럽에 참여할 수 있게 되었고 물론 개발 작업은 각각 개인으로 따로 하지만 그래도 같이 하나의 같은 주제를 가지고 여러 사람들과 같이 스터디한다는점도 은근히 의지가 되고 좋았다!그리고 학습하면서 공식 문서를 잘 봐야겠다는것도 계속 리마인드 시킬 수 있어서 좋았다!여기에 블로그를 조금 더 내것으로 만들기 위해 더 다듬고 바꿀 예정이다! 화이팅!!!!

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

강의 수강모던한 블로그 UI 만들기, 노션 블로그 템플릿 및 API 키 설정Notion API 연동 블로그 구현, Markdown and MDXMarkdown and MDX, 환경변수 설정 및 Vercel 배포서버 컴포넌트 vs 클라이언트 컴포넌트, React Suspense와 Loading UILoading UI와 스트리밍, React Query 무한 스크롤링 미션블로그 사이트 URL 제출하기 회고1주차때 기본 개념과 셋팅을 넘어 이제 본격적으로 무언가를 만들어보는 단계라 더 재밌었다.실무에서 리액트를 사용하고 있기 때문에, 리액트에 많이 익숙해져 있어서 그간 Next.js를 사용하는 방식이무척이나 궁금했었는데 특히나 노션 블로그 템플릿과 API 키를 설정해서, 노션으로 작성한 글이 바로 내 블로그에 보여지는것이 흥미로웠다!처음으로 Vercel을 사용해서 배포해보았는데 생각보다 셋팅이 복잡하지 않아서 좋았고,리액트와는 또 다른 재미를 느꼈다!

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