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

간단 소개

뱅크샐러드 채용 사이트 개발에 GatsbyJS를 도입한 과정, 장점, 그리고 개발 중 발생한 문제점과 해결 방안을 공유합니다.

AI Summary

GatsbyJS 도입 배경 및 장점
- 뱅크샐러드 채용 사이트 및 기술 블로그 개발에 GatsbyJS를 사용, React 개발 경험을 활용.
- SEO 최적화, 성능 향상, 콘텐츠 관리 용이성을 확보하기 위해 선택.
- JAMstack 기반으로 Markdown 콘텐츠 관리 및 CMS 연동 용이.
개발 과정 및 주요 고려 사항
- 개발 전 기술 스펙 문서 공유를 통해 다양한 직군 팀원들의 피드백 반영.
- 관심사 분리를 통해 코드 복잡도를 줄이고 유지보수성을 높임 (pages, containers, components 구조).
- 데이터 호출 시 react hook을 사용하여 코드 간결성 유지.
GatsbyJS 사용 시 어려움 및 해결
- 빌드 시 window 객체 사용 불가 문제 발생, 조건부 렌더링 또는 useEffect hook 활용.
- 최초 진입 시 SSR 미적용으로 인한 화면 렌더링 문제 발생, 미디어 쿼리 활용 또는 GatsbyJS 동작 원리 이해를 통해 해결.
- 다양한 Gatsby Plugins 활용 (SEO, 이미지 최적화, RSS 생성 등).
- Metadata를 활용하여 채용 공고 페이지 구현.