강의 수강 및 회고

이번 주는 프론트엔드 개발자로서 보이지 않는 것들을 고려하고 사용자 경험에 맞게 최적화 하는 것을 배웠다.

1. 기본 UI 와 기능 구현은 이번주 초에 거의 다 끝냈었다. MDX 를 적용하고 그 과정에서 다시 한번 다양한 라이브러리를 찾고 활용하는 능력도 중요하다는 걸 깨달았다. remark 와 rehype 라이브러리 기능들을 하나하나 다 구현했으면 정말 오래 걸렸을 것이다. 노션 페이지를 notion-to-md 라이브러리를 사용해 markdown 형태로 변환한 후 브라우저에 syntax highlighting 을 유지하게 도와주는 라이브러리들을 사용해서 렌더링한다.

2. 클라이언트 컴포넌트와 서버 컴포넌트의 차이를 많이 다뤘다. useState 같은 React Hook 을 사용하거나, DOM API 에 접근하거나, 무한 스크롤 같이 API 요청이 자주 있어 서버에 부담이 될 수 있을 때 클라이언트 컴포넌트를 사용한다고 이해했다. 서버 컴포넌트는 SEO 최적화에 유리하고, 유저 네트워크 상태와 상관이 없어 데이터 패칭과 fcp가 더 빠르다. 서버에서 서버 컴포넌트들을 렌더링 한 후 클라이언트 컴포넌트가 아직 없는 HTML 파일을 브라우저로 보낸다. 페이지와 관련된 자바스크립트 파일을 번들링해서 보내면 브라우저에서 클라이언트 컴포넌트를 렌더링하고 hydration 이 적용된다. 이 외에도 둘의 차이점을 환경 변수, 데이터 패칭 등 다양한 관점에서 살펴보았다. 아직 둘의 차이는 많이 헷갈리지만 이건 개발해나가면서 경험을 통해 배워야 하기에 꾸준히 공부하면 될거라고 믿는다.

3. CORS (Cross Origin Resource Sharing) 핸들링과 Next.js route 핸들러에 대해서도 공부할 수 있었는데, 클라이언트 컴포넌트에서 노션 API 로 데이터를 요청할 때 볼 수 있는 에러를 어떻게 우회할 수 있는지 배웠다. 서버 컴포넌트에서는 브라우저-서버 간의 요청이 아니기 때문에 이런 오류를 못 봤었던 것. 이렇게 프론트 개발을 하면서 다양한 경우의 수를 배우는게 너무 재밌었다. 보안 관련 문제들은 개인 프로젝트를 만들때는 절대 크게 고려하던 부분들이 아니었는데 이런 부분들도 하나하나 짚고 넘어가서 개발을 새로운 관점으로 배울 수 있었던 것 같다.

4. 사용자 경험을 향상시키기 위한 방법도 살펴봤는데 LCP (Largest Contentful Paint), Suspense, Loading UI, Streaming 등 다양한 기술들이 있었다. 하나하나 구현해보면서 비교를 해보는데, 제품을 구현하는 것 외에도 이렇게 자잘한 것들이 사실 사용자 경험에 정말 큰 영향을 미친다는걸 깨달았다.

5. 마지막으로 무한 스크롤링을 구현했었는데 이 부분은 강의 끝내고도 코드를 다시 뜯어봤어야 했다. 조금 복잡했고 사실 지금도 완벽히 이해하고 있는 것 같지는 않다. 여러번 더 보면 언젠가는 익숙해 지지 않을까?

벌써 2주가 되었다. 바빠서 그런지 시간 가는 줄 몰랐는데 돌아보니 지난 5일동안 정말 많을 것을 배웠고 공부하는 내내 내가 무엇을 모르는지도 몰랐다는 생각을 많이 했었다. 매일이 바쁜 것 같아도 개발자로서 성장은 하고 있는건지 내가 걷고 있는 길이 맞는건지 항상 고민이 되는데 회고하는 시간을 가져보니 이번주만 해도 작은 발전이 있었던 것 같다. 마지막 주도 이렇게 꾸준히, 재밌게, 최대한 많은 것을 얻어가자.