React밖에 모르는 당신에게. GatsbyJS한 잔, '채용~'

Context

채용 정보가 90개 직군, 200명 규모로 자주 변경되며, 기술 블로그와 채용 정보를 전담할 팀이 없는 상황에서 개발자 의존도를 줄이면서도 검색 엔진 최적화가 필요했다.

Technical Solution

• GatsbyJS 도입: React 기반 정적 사이트 생성기를 사용해 빌드 시 마크업이 미리 생성되는 구조로 변경
• SEO 최적화: CSR 방식의 SPA 대신 SSR/정적 페이지 방식으로 검색 엔진 크롤링 친화적 구현
• 마크다운 기반 콘텐츠 관리: JAMstack 방식으로 마크다운 파일을 템플릿에 빌드 시 렌더링하여 비개발자도 관리 가능
• 관심사 분리 아키텍처: pages/containers/components/templates 폴더 구조로 코드 복잡도 감소
• React Hook 커스터마이징: useStaticQuery 그래프QL 쿼리를 useBlogDetail() 같은 커스텀 훅으로 추상화해 컴포넌트 가독성 향상
• 렌더링 타이밍 고려: 빌드 시 Node 환경에서는 window 객체가 없으므로 typeof window 체크 및 useEffect 내에서만 접근하도록 구현

Impact

지원자 비율 200% 증가(2배)

Key Takeaway

React 팀이 있는 조직에서는 GatsbyJS로 전환하면 팀원 진입장벽을 낮추면서 DB 설계와 서버 개발 비용을 제거할 수 있으며, 빌드 환경과 런타임 환경의 차이(Node vs Browser의 window 객체 미존재, 초기 렌더링 전 마크업 완성)를 인식해야 한다.