[아티클 프로젝트 025] React밖에 모르는 당신에게. GatsbyJS한 잔, '채용~'

 

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

 

채용 사이트관련해서 이야기를 하며서 재미있게 풀어가는 글인것 같다.

뱅샐은 프로젝트 진행 전 팀원이 다함께 기획부터 자유롭게 의견을 내고 참여를 한다고하는데, 프로젝트에 애정도 생길 것 같아서 좋을 것 같다. (아닌가?)

 

글에서 나온 이야기는 새로운 Stack을 도입해서 채용사이트를 제작하는 제작기(?)이다.

채용 사이트는 사용자 유입이 많아야하기때문에(검색으로) SEO 최적화가 필요한것 부터 이야기가 시작된다. 

내가 처음 React라는 것을 접했을 당시에는 CSR(Client Side Rendering)에서 SEO가 굉장히 난감했었는데, 현재는 충분히 가능해졌다.

하지만 유리한 측면이 있는 SSR(Server Side Rendering)을 두고 굳이 CSR로 진행할 필요가 없기에 SSR로 개발을 진행했다고했다.

여기서 GatsbyJS라는 키워드가 나오는데,

GatsbyJS는 React를 기반으로 한 무료 오픈 소스 프레임워크며 GatsbyJS는 블로그 제작에 많이 사용되었던 Jekyll와 같은 정적 사이트 생성기라고한다.

읽어야 할 아티클이 또 생겼다.

https://medium.com/@pks2974/gatsby-%EB%A1%9C-blog-%EB%A7%8C%EB%93%A4%EA%B8%B0-ac3eed48e068

하나의 아티클을 읽으면 몇개의 새로운 키워드가 나오고.. 읽어야할 아티클들이 증가한다.ㅎㅎㅎㅎ

SPA와 다르게 Build 할때 마크업이 생성된다고 한다.

 

새로운 Stack을 도입할때는 문서화 작업을 하여 공유하고 피드백을 받는다.

또한 코드가 복잡해지면 다른 사람의 유지보수 시간이 증가함으로 최대한 단순하고 직관적으로 가져가려했다고한다.

이것은 내가 vue로 간단한 사내 사이트를 제작한 적이 있을때도 똑같이 경험했다.

내가 알고 있는 지식(관심사)을 모두 쏟아 만들기보다는 단순, 직관이 중요한것을 이때 깨닫았었다.

 

파일구조

• components - 재사용 가능한 컴포넌트
• containers - 컴포넌트로 화면 구성(section), 비즈니스로직, 추가 콘텐츠들
• pages - containers롸 1:1 매칭되는 구조, 파일이름으로 서비스에 경로가 생성된다. SEO를 위한 작업(title, description등)

 

Gatsby Plugins

• gatsby-plugin-sitemap  사이트맵 
• SEO
  • gatsby-plugin-react-helmet: meta tag를 쉽게 바꿀 수 있음
  • gatsby-plugin-robots-txt: robot.txt 자동 생성
  • gatsby-plugin-sitemap: 빌드 시 sitemap 자동 생성
  • gatsby-plugin-canonical-urls: canonical 이슈 해결

 

그 외

• gatsby-plugin-s3: 원하는 AWS S3 버킷에 빌드시 자동 Deploy
• gatsby-image: GraphQL 쿼리를 사용하여 advanced image loading 구현
• gatsby-plugin-feed: 자동으로 RSS feed 생성
• gatsby-plugin-scroll-reveal: Scroll Animation 이벤트 구현
• gatsby-plugin-netlify-cms: Netlify 기반의 CMS 자동 생성

 

원본글에 나온 플러그인들이다. 나중에 언젠간 GatsbyJS를 사용한다면 참고해보도록 해야겠다.

 

이슈로는 

빌드 도중에는 window객체가 브라우저환경이 아닌 Node 환경이어서 존재하지 않는다고 한다.

useEffect hook이나 componentDidMount와 같은 곳이 아니면 우회해야한다고...

당장에 사용할 이유는 없겠지만, 키워드도 얻고 스토리에 이입되서 순식간에 읽게된 글 인것 같다.

 

---

 

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

https://blog.banksalad.com/tech/build-a-website-with-gatsby/