안녕하세요, 이상혁입니다

React 기반으로 CSR을 사용하던 중 SEO와 초기 로딩 속도 등의 이유로 SSR, 특히 Next.js에 관심을 가지게 되었고, SSR은 서버에서 초기 HTML을 생성해 제공하는 반면 CSR은 브라우저에서 생성하는 방식으로 각각의 장단점이 존재한다. React로 직접 SSR을 구현해보니 생각보다 간단했지만, 실제 서비스 수준의 개발에는 Next.js가 제공하는 코드 스플리팅, 라우팅, 최적화 기능들이 필요하다는 점도 실감하게 되었다. 결국 기술 선택은 트렌드보다 프로젝트 요구사항과 팀의 상황에 맞춰 신중히 결정해야 한다는 결론에 도달했다.

2년간 방치했던 Velog 기술 블로그에 대한 반성과 팀원의 옵시디언 블로그 배포 모습을 보고 자극받아 개인 블로그를 만들기로 결심했습니다. Jekyll 대신 React 기반의 Gatsby와 gatsby-starter-blog 템플릿을 활용하고 Netlify로 무료 호스팅하여 하루 만에 기본 블로그를 배포했습니다. 특히 Cursor AI를 활용해 GraphQL을 따로 학습하지 않고도 페이지네이션, 태그 필터링, 다크모드 등의 부가 기능들을 쉽게 구현할 수 있어서 AI의 개발 보조 능력에 크게 감명받았습니다.

이 글은 프론트엔드 공통 코드를 기존의 런타임 API 방식에서 빌드타임 코드 포함 방식으로 전환한 경험을 다룹니다. 빌드타임에 공통 코드를 객체로 변환해 타입 안정성과 자동완성을 높이고, 네트워크 의존성과 유지보수 부담을 크게 줄였습니다. 이로써 초기 화면 속도, 코드 관리 효율, 개발자 경험이 모두 개선되었습니다.