마크다운 오류수정 및 최적화

2025년 03월 21일

ReactProgrammersFrontendBlogNext.js
마크다운 오류수정 및 최적화

기본적인 마크다운 기능은 완성

아.. 어제 새벽부터 지금까지 밤을 새면서 하루종일 씨름한 것 같다. 최신버전을 사용하면서 실험적인 내용들도 시도해보려고 했는데
아무래도 호환성문제가 발목을 잡았다. 어쩔 수 없이 React 버전을 18.3으로 낮추니까 그제서야 마크다운이 적용되었다. 😅

서버컴포넌트 & 클라이언트 컴포넌트

React를 하다가 Next로 넘어오는 대부분의 초보 개발자들은 나와 비슷한 생각을 하지 않았을까? 라는 생각을 해본다. 처음에는 기능 개발 구현에만 집중하다보니 클라이언트 컴포넌트로 작성해서 기능을 구현했다가 뒤를 돌아보니 이건 그러면 왜 Next를 사용하는거지? 라는 생각에 아차! 싶었다. 다시 한번 docs를 살펴보고, 다른 블로그 글들의 내용들을 살펴보면서 컴포넌트를 분리하고 최적화 하는데에 집중했다.

Next.js의 철학

  1. 기본은 서버 컴포넌트로 동작해서 SSR을 최대한 활용하여 SEO를 높이는 것이 핵심이라고 생각했다.
  2. 필요할 때만 클라이언트 컴포넌트로 전환하는 것도 중요하다. 정확하게는, 서버에서 렌더링시 클라이언트로 전송되는 JavaScript 양을 줄여서 성능을 향상 시키는 것이 목적이라는 생각이 들었다.

결론

서버에서 할 수 있는 일은 서버에서, 클라이언트에서 해야만 하는 일은 클라이언트에서 동작하게 해서 관심사를 철저히 분리하고 최적화 하는것이 Next의 핵심이고 제일 어려운 부분이 라는 생각이 들었다. 그리고 아직은 초기 단계라서 간단하게만 작성하고, 추후에는 내용들을 정리해서 코드들을 리뷰해서 어떤식으로 개선을 했는지도 구체적으로 적어야 겠다는 생각이 들었다. 이번에 특히 컴포넌트들을 계속 나누다보니 Atomic Design의 유행도 여기서 시작한게 아닌가 라는 생각도 들었다.