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

스터디 최종 회고 Next.js에 대한 지식이 부족해 스터디에 참여하게 되었고, 3주 동안 매일 조금씩 시간을 들여 열심히 따라가며 많은 것을 배웠습니다. 처음에는 기본적인 기능부터 시작해, 마지막 주에는 서버 액션, 캐시 전략, 고급 라우팅, SEO 및 메타데이터 설정 같은 고급 기능까지 학습할 수 있었습니다. 강사님이 강의 자료를 정말 꼼꼼하게 정리해주신 덕분에 Next.js에 익숙하지 않았던 저도 끝까지 잘 따라갈 수 있었어요. 강의도 너무 재미있게 진행해주셔서 더욱 집중해서 들을 수 있었고요. 😊 아직 개념적으로 부족한 부분도 있어서, 강의 자료와 공식 문서를 참고하며 꾸준히 익숙해지려 합니다. 무엇보다 이 스터디에 참여한 가장 큰 이유는 개인 블로그를 만들기 위해서였는데, 드디어 미뤄왔던 블로그를 직접 만들 수 있게 되었습니다! 이 점만으로도 스터디에 참여하길 정말 잘했다고 느낍니다. 좋은 강의 만들어주셔서 진심으로 감사드립니다 🙏

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

Notion API 연동 & MDX 렌더링 Notion API를 활용해 데이터를 가져오고, 이를 MDX 형식으로 렌더링하는 작업을 진행했습니다. Notion에서 작성된 콘텐츠를 웹에서 자연스럽게 보여주기 위해 MDX와 통합하는 과정이 있었는데, MDX를 이용하는 방법이 단순 마크다운을 다루는 게 아니라, 컴포넌트를 함께 다룰 수 있다는 점에서 유연함을 체감했습니다. 실무에서도 기술 블로그나 문서 페이지 제작 등에 응용할 수 있을 것 같다는 생각이 들었습니다. 또한 MDX 문서를 렌더링하는 과정에서 기존 콘텐츠와 렌더링 방식이나 스타일이 달라질 수 있는 부분들을 발견했고, 이를 조율하기 위해 remarkPlugins와 rehypePlugins를 옵션들을 활용했습니다. 덕분에 마크다운 문법에서 어색하게 렌더링될 수 있는 스타일들을 더욱 자연스럽게 나타낼 수 있게 되었고, components props를 통해 상황에 따라 다양한 커스터마이징을 처리할 수 있게 되었습니다. Suspense & Loading UI & Streaming React의 Suspense와 스트리밍 개념을 학습하며, 사용자 경험을 고려한 로딩 처리 방식에 대해 고민해볼 수 있었습니다. 기존에는 단순히 페이지 전체에 대한 로딩 상태를 스피너를 통해 표현했다면, 이제는 컴포넌트 단위 혹은 특정 영역에 대해 스켈레톤 UI 방식을 이용해 어떤 데이터가 렌더링될 지 미리 나타낼 수 있게 되었습니다. Notin API Pagination & useInfiniteQueryReact Query의 useInfiniteQuery 훅과 react-intersection-observer를 함께 활용하여 무한 스크롤 기능을 구현하였는데, react-intersection-observer 라이브러리의 강력함을 체감할 수 있었습니다.

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

수강 내용 웹 렌더링 개념웹 개발을 하는 사람이라면 반드시 알아야 하는 웹 렌더링에 대한 지식을 짚어본다. CSR, SSR, SSG, ISR 용어들은 어떤 렌더링 방식을 의미하는 것인지부터 천천히 살펴보게 된다. 직접 렌더링 방식을 구현해보지 않은 경우라면, 내용을 한 번에 이해하기란 굉장히 어려운 법이다. 그래서 블로그 글을 작성하게 되는데, 이 블로그 글을 작성하는 과정에서 렌더링의 동작 방식, 장/단점 그리고 사용 사례에 대해 조사하며 직접 구현해보지 않았음에도 렌더링 방식에 대한 이해를 할 수 있게 된다. Cursor AI 사용법과거에는 프로그래밍 패러다임 등 다양한 패러다임이 존재하며 어떤 코드가 더 가독성이 좋은지, 어떤 코드가 더 안전하지 이런 내용이 주로 화제가 되었다. 하지만 AI가 발전함에 따라 앞으로 개발자들은 "AI를 얼마나 잘 활용할 수 있냐?"라는 질문에 답을 해나가야 한다 생각한다. 이런 대답을 하기 위한 첫 번째 단계로 Cursor AI를 사용하는 방법에 대해 배우게 된다. Cursor AI를 활용해서 개발 경험이 많지 않았기 때문에, 이 수업이 나에게는 정말 큰 도움과 앞으로의 방향성을 제공해주었고 앞으로 있을 프로젝트에도 적용해 나가려고 한다. Next.js 프로젝트 초기 설정현대 웹 개발에서 프론트엔드 개발자라면 반드시 짚고 알아야 하는 Next.js 프로젝트의 초기 설정을 배우게 된다. 또한 이 과정에서 Shadcn ui와 같은 인기있는 라이브러리도 함께 활용한다. 미션 웹 렌더링 개념CSR, SSR, SSG, ISR에 대한 기본적인 개념부터 동작 방식, 장/단점, 사용 사례에 대해 알아본다.또한 렌더링 방식별 적합한 사용 사례에 대해서도 알아본다.Cursor AI 소개Cursor AI의 주요 기능 및 특징에 대해 알아본다.개인적인 관점에서의 Cursor AI의 활용 방법을 고민해보았다.Next.js 프로젝트 셋팅 구체적인 설명은 생략하고 Next.js 프로젝트를 세팅하는 과정을 간단하게 정리해보았다.