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

강의 수강 내용 및 회고짐코딩님의 프론트 부트캠프의 마지막 주에는 사용자의 흐름, 데이터 흐름, 그리고 성능 최적화까지의 개발 과정을 배웠다. 특히 Server Components와 Server Actions, React Query, 캐싱 전략, 라우팅 등 주요 개념을 어떻게 적용하는지 더 살펴보는 시간이었다. 페이지 이동 방식 서버 컴포넌트에서 페이지를 리다이렉트할 때는 redirect클라이언트 컴포넌트에서는 useRouter페이지 내 링크 이동은 Server ActionAPI 라우트를 따로 만들지 않고 secure 하게 서버에서 사용자 이벤트 (form submission, data mutation) 을 처리할 수 있다. 브라우저에서 직접 호출하지 못하고 오직 form action 또는 prop으로 넘긴 함수에서만 실행전체 페이지 리렌더링이나 별도 네비게이션 없이 최소 범위의 컴포넌트 리렌더링에 의해 함수가 트리거 된다app/actions.ts 에 use server를 상위에 정의하고 클라이언트 컴포넌트에서 임포트해서 사용 유효성 검사: Zodzod 라이브러리를 활용해 데이터 타입 검증스키마 정의 후 parse를 통해 데이터를 검사하고 유효하지 않으면 에러 throw데이터 캐싱 전략캐싱은 서버와 클라이언트 양쪽에서 필요에 따라 적용Request memoization: 요청 함수 반환값 캐싱 Data Cache: 서버 데이터 캐싱unstable_cache로 무거운 DB 호출 캐싱, revalidate 함수로 서버에서 재검증 가능 export const revalidate = 3600; // ISR: 1시간마다 재검증 React Query 로 클라이언트 브라우저 메모리에 데이터 캐싱이 필요하다 useEffect(() => { if (state?.success) { queryClient.invalidateQueries({ queryKey: ['posts'] }); router.push('/'); } }, [state?.success, queryClient, router]);Full Route Cache: 전체 페이지 캐싱Router Cache: 유저 세션/시간 당 라우터 프리패치 캐싱라우팅 라우팅 그룹 (Route Groups)app/ └─ (marketing)/ └─ about/ → /about url 에 marketing 이 노출되지 않음병렬 라우팅 (Parallel Routes)@ 디렉토리 slot 생성layout에서 slot을 props로 받아 렌더링default를 넣어 fallback 페이지 제공 app/ ├─ @team/ │ └─ page.tsx ├─ page.tsx └─ layout.tsx인터셉팅 라우팅 (Intercepting Routes) (.), (..), (..)(..)으로 현재 경로를 가로채 모달로 soft navigation실제로 URL을 방문하면 full page로 렌더링SEO 최적화metadata 동적/정적 설정최적화 전략static 렌더링이 성능과 SEO 면으로 좋다 초반에 배운 ISR, SSG, SSR 렌더링 방식들을 실제 유즈 케이스 관점으로 바라보고 적용해볼 수 있었다. 이번에 배운 내용으로 블로그에 효율적인 렌더링과 클라이언트와 서버 간 데이터 흐름을 구현할 수 있었다. 사실 이걸 다시 나 혼자 만들라고 하면 쉽게 개발 할 수 있을 것 같진 않다. 아직 완벽히 이해가 되지 않는 부분들이 많지만 이런게 있고 프론트앤드 개발자로써 이런 고민들을 할 수 있구나 를 배운 것 같다. 배운 내용들이 많아서 내 개발 프로세스에 다 적용시킬 수 있을 것 같진 않지만 개발해나가면서 발전해야할 점들이 보일때 "이런게 있었던 것 같은데" 할 수 있으면 충분 할 것 같다. 경험을 통해 이런 내용들은 더 확고하게 자리 잡을 것이라 빌고 믿는다.

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

강의 수강 및 회고 이번 주는 프론트엔드 개발자로서 보이지 않는 것들을 고려하고 사용자 경험에 맞게 최적화 하는 것을 배웠다. 기본 UI 와 기능 구현은 이번주 초에 거의 다 끝냈었다. MDX 를 적용하고 그 과정에서 다시 한번 다양한 라이브러리를 찾고 활용하는 능력도 중요하다는 걸 깨달았다. remark 와 rehype 라이브러리 기능들을 하나하나 다 구현했으면 정말 오래 걸렸을 것이다. 노션 페이지를 notion-to-md 라이브러리를 사용해 markdown 형태로 변환한 후 브라우저에 syntax highlighting 을 유지하게 도와주는 라이브러리들을 사용해서 렌더링한다. 클라이언트 컴포넌트와 서버 컴포넌트의 차이를 많이 다뤘다. useState 같은 React Hook 을 사용하거나, DOM API 에 접근하거나, 무한 스크롤 같이 API 요청이 자주 있어 서버에 부담이 될 수 있을 때 클라이언트 컴포넌트를 사용한다고 이해했다. 서버 컴포넌트는 SEO 최적화에 유리하고, 유저 네트워크 상태와 상관이 없어 데이터 패칭과 fcp가 더 빠르다. 서버에서 서버 컴포넌트들을 렌더링 한 후 클라이언트 컴포넌트가 아직 없는 HTML 파일을 브라우저로 보낸다. 페이지와 관련된 자바스크립트 파일을 번들링해서 보내면 브라우저에서 클라이언트 컴포넌트를 렌더링하고 hydration 이 적용된다. 이 외에도 둘의 차이점을 환경 변수, 데이터 패칭 등 다양한 관점에서 살펴보았다. 아직 둘의 차이는 많이 헷갈리지만 이건 개발해나가면서 경험을 통해 배워야 하기에 꾸준히 공부하면 될거라고 믿는다. CORS (Cross Origin Resource Sharing) 핸들링과 Next.js route 핸들러에 대해서도 공부할 수 있었는데, 클라이언트 컴포넌트에서 노션 API 로 데이터를 요청할 때 볼 수 있는 에러를 어떻게 우회할 수 있는지 배웠다. 서버 컴포넌트에서는 브라우저-서버 간의 요청이 아니기 때문에 이런 오류를 못 봤었던 것. 이렇게 프론트 개발을 하면서 다양한 경우의 수를 배우는게 너무 재밌었다. 보안 관련 문제들은 개인 프로젝트를 만들때는 절대 크게 고려하던 부분들이 아니었는데 이런 부분들도 하나하나 짚고 넘어가서 개발을 새로운 관점으로 배울 수 있었던 것 같다. 사용자 경험을 향상시키기 위한 방법도 살펴봤는데 LCP (Largest Contentful Paint), Suspense, Loading UI, Streaming 등 다양한 기술들이 있었다. 하나하나 구현해보면서 비교를 해보는데, 제품을 구현하는 것 외에도 이렇게 자잘한 것들이 사실 사용자 경험에 정말 큰 영향을 미친다는걸 깨달았다. 마지막으로 무한 스크롤링을 구현했었는데 이 부분은 강의 끝내고도 코드를 다시 뜯어봤어야 했다. 조금 복잡했고 사실 지금도 완벽히 이해하고 있는 것 같지는 않다. 여러번 더 보면 언젠가는 익숙해 지지 않을까? 벌써 2주가 되었다. 바빠서 그런지 시간 가는 줄 몰랐는데 돌아보니 지난 5일동안 정말 많을 것을 배웠고 공부하는 내내 내가 무엇을 모르는지도 몰랐다는 생각을 많이 했었다. 매일이 바쁜 것 같아도 개발자로서 성장은 하고 있는건지 내가 걷고 있는 길이 맞는건지 항상 고민이 되는데 회고하는 시간을 가져보니 이번주만 해도 작은 발전이 있었던 것 같다. 마지막 주도 이렇게 꾸준히, 재밌게, 최대한 많은 것을 얻어가자.

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

짐코딩님이 코칭하시는 인프런 워밍업 클럽 Frontend 4기에 참여하게 되었다! 최고의 조합. 수강 내용 + 미션 회고웹 렌더링 개념CSR, SSR, SSG, ISR 의 차이점을 정확히 짚고 넘어가는 수업이였다. 아무리 여러번 듣고 읽어봐도 쉽게 recall 할 수 있는 개념들이 아니었는데 미션으로 이 차이에 대해 블로그를 작성해서 내가 따로 정리하고 작성하는 시간을 가지는게 도움이 된 것 같다. 물론 지금도 완벽하게 이해한 건 아니다. 공부하고 개발하면서 자연스레 익숙해지면 된다. 하지만 필요하면 바로 정리된 블로그를 참고할 수 있어서 편했고 앞으로도 개발 공부를 할 때 이렇게 따로 정리하는 습관을 가지는 게 중요하다고 느꼈다.take away는 hybrid rendering 이 제공되는 Next 에서는 페이지 내에 다양한 컴포넌트를 상황에 맞게 다른 렌더링 방식으로 구현해낼 수 있다는 점? 개인 프로젝트들을 만들때는 유명한 tech stack 을 찾아서 썼었는데 사실 이 프레임워크를 왜 사용하는지, 어떤 점이 좋은지 이런 부분들은 전혀 몰랐다. 강의를 들으면서 이게 왜 개발자들에게 인기가 많고 어떤 기능들이 개발자들의 삶을 편하게 하는지를 배워갈 수 있을 것 같아서 기대가 된다. 어떤 기능이 중요하고 필요한지를 구분할 수 있게 될 때까지 많이 공부하자.Cursor AI 사용법이렇게까지 다양한 기능이 있는지는 몰랐는데 듣는 내내 "설마 이게 된다고?" 라는 생각이 컸다. 프로젝트 룰을 따로 만들고 공식 문서들 미리 인덱싱 해놓는 기능들도 있는데 흥미로웠다. 사실 free plan 은 금방 limit에 도달하기 때문에 커서의 다양한 기능들을 풀로 써보지 못한다는 점에서 약간 아쉬웠지만 구독하면 정말 유용할 것 같다는 생각이 든다.미션 덕분에 커서 공식문서를 아주 꼼꼼히 읽는 시간을 가졌는데 문서 참고하는 습관도 들어야겠다고 생각했다. 최근에 ai 에 많이 의존하면서 궁금증이 있을 때 문서를 찾으며 답을 찾은 적이 많이 없다. 틀린 건 아니지만 문서에 정보와 답은 넘쳐나고 이걸 읽고 이해하는 눈을 기르면 큰 업데이트가 있을 때, 새로운 기술을 배워야 할 때, 등의 상황에 큰 도움이 될 것 같다.Next.js 프로젝트 초기설정ESLint, Prettier 설정부터 TailwindCSS, Shadcn/ui, 등을 사용할 때 초기설정을 잘 해놓으면 개발하는게 훨씬 편해질 수 있다. 전에는 초기설정에 신경을 많이 쓰지 않았는데 이 강의 들으면서 초기설정을 보는 관점이 조금 바뀐 것 같다.이번 블로그 미션에서도 공식 문서를 읽는 법을 배워나가는 시간이었다고 생각한다. 내 생각을 정리하고 쓰는게 더 수월해졌고 한국어 실력도 덤으로 느는 중이다. 개발자 소개 페이지 만드는 미션을 기회로 내 개발자 페이지를 다듬어봤다. 다크 모드와 언어 설정도 구현했는데 이것들은 따로 블로그를 작성해 볼 생각이다, 아직 responsive 하지 못해서 완성되었다고 할 수는 없다. Responsiveness 부분이 항상 귀찮게 느껴져서 큰일이다. 사용자 경험에 아주 중요한 요소인데 이 부분을 많이 연습하고 익숙해지지는 못할 망정 아예 외면을 하니... 노력하자. 마치며일주일간 스케줄에 맞춰서 강의와 미션을 잘 듣고 수행했다. 만들어갈 프로젝트도 기대되고 지금까지 배운 것도 재밌다. 다음주도 이렇게만 한다면 만족스러울 것 같다. 이번 부트캠프를 들어서 요즘 좀 신이 난다. 이런 커뮤니티가 있는것만으로도 외롭지 않은 공부를 할 수 있고 다른 사람들 사이에서도 많은 것들을 얻어가며 항상 겸손할 수 있다. 남은 2주도 화이팅.