Gatsby 프로젝트 개발환경 생성부터 alias, git 설정까지.
목차 펼치기
머리말
머리말
사람들이 많이 사용하는 기술스택의 장점은 손쉽게 프로젝트 개발 환경을 구축할 수 있게 공식문서에서 가이드를 해주고 있다는 것이다. 그리고 Gatsby는 이미 많은 사람들이 정적 사이트를 생성, 운영하는데 사용하고 있는 기술이다.
덕분에 공식 문서를 참고해서 쉽게 프로젝트를 생성하였다.
막연히 배포까지도 손쉽게 되어있겠거니, 하고 생각했는데 역시나 자체적인 Cloud 시스템도 있어 github reamde에 안내하고 있기도 하고, Netlify라는 서비스를 통해서도 간편한 배포가 가능하도록 되어있었다. 역시 풀이 넓은 기술을 사용하는 게 프로젝트 진행이 수월하다.
IDE : vscode
Git GUI : Sourcetree
Tool : Figma, Notion
디자인 및 라이브러리
디자인 및 라이브러리
UI asset을 조달한 사이트와 실제 적용하거나, 적용을 검토하기 위해 이런 플러그인도 있다고 정리한 내 용이다.
UI
UI
아이콘 관리 및 추출
로고 제작 등
Icon asset 조달처
Library
Library
프로젝트 구성을 준비하며 눈에 띄는 라이브러리들을 우선 아카이빙 해두었다. 이후 개발을 진행하며 실제 사용한 플러그인들과 추가한 플러그인의 목록이다.
프로젝트의 핵심이 되는 라이브러리로, Gatsby와 Notion의 통합을 도와준 다.
gatsby-plugin-canonical-urls
gatsby-plugin-google-gtag
gatsby-plugin-image
gatsby-plugin-manifest
gatsby-omni-font-loader
react-syntax-highlighter
노션 코드블럭의 데이터를 하이라이팅해서 보여주기 위해 설치했다.
Notion API에서 제공해주는 markdown 형식의 컨텐츠를 바로 화면에 보여줄 때 사용하기 위해 설치했다.
노션에서 md로 지원되지 않는 컴포넌트(콜아웃 등)가 있고, 프로퍼티들을 파싱해서 사용하기 힘든 구조로 되어 있어 테스트만 해보고 실제 렌더링은 json을 파싱해서 type별 커스텀된 UI로 뿌려주었다.
프로젝트 생성
프로젝트 생성
gatsby-cli 설치
프로젝트 생성