프론트엔드
React밖에 모르는 당신에게. GatsbyJS한 잔, '채용~'
두줄요약
GatsbyJS로 React 기반 채용 사이트를 정적 생성·CMS·metadata 구조로 구현했습니다. 빌드 환경의 window 제약과 최초 렌더링 차이도 함께 정리했습니다.
문제 상황
- 채용 정보·인터뷰·뉴스의 잦은 변경과 검색 노출 요구
- 개발자 의존 없이 콘텐츠를 관리하면서 다수 팀원이 유지보수할 구조 필요
선택 이유
- React 친화적 개발 경험과 정적 HTML 생성 기반의 SEO 대응
- Markdown·CMS 기반 콘텐츠 관리와 CSR·SSR·lazy loading 조합
- DB·서버 없이 metadata 기반 채용 공고 필터링 구현
구조와 흐름
- pages·containers·components 분리와 page-container 1:1 매핑
- GraphQL 데이터 호출을 React Hook으로 추상화
- Markdown frontmatter의 조직·직군·직무 metadata 기반 공고 분류
주의할 점
- 빌드 시 Node 환경으로 인한 window 객체 부재
- 정적 HTML 최초 진입과 이후 JavaScript 렌더링 차이
- 화면 분기 시 초기 상태 의존 대신 미디어 쿼리 우선 고려
