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 설치
1$ npm i -g gatsby-cli프로젝트 생성
1$ gatsby new
2// 또는 gatsby new {your-project-name} {link-to-starter}터미널에서 커맨드를 입력하니 git 을 설치하라고 나오면서 자동 설치가 진행됐다.
찾아보니 Mac OS Mavericks(10.9) 버전 이상에서는 터미널에서 처음 git을 실행하는 것으로 설치가 진행된다고 한다.
오호. gatsby로 생성하는 중 git clone 명령어가 실행되어져서 그런가보다.
사실 새 맥북 에어 M2 모델을 사자마자 바로 진행한 첫 프로젝트여서 node도 방금 막 깔았다.
진행되더니 권한 문제로 보이는 오류 메시지가 발생해서, 하란대로 했다. 그리고 다시 생성하니 성공!
오류 화면
프로젝트 이름을 따로 지정하지 않으니, 프로젝트 환경에 대한 커스텀을 할 수 있었다.
typescript와 sass, 일부 플러그인을 포함하여 프로젝트를 생성했다.
saas에 필요한 플러그인 등의 설치도 권고해준다.
생성 화면
Alias 설정
Alias 설정
../../../../../…… import 하는 파일과의 상대적 경로에 따라
../를 반복하여 찾은 후 import를 진행하는 건 너무나 비효율적인 일이다. alias import가 적용되어 있지 않은 코드는 보기에도 이쁘지 않다. 나중에 작업하면 할 수록 부채가 쌓이는 일일 수밖에 없으므로, 개발 환경 초기 단계에서 잡고 가자.
alias 설정은 프로젝트와 IDE 두 곳에 설정해주어야한다.
프로젝트에만 설정해주면
Cannot find module '@~~' or its corresponding type delarations.ts(2307)에러가 발생하는 모습을 볼 수 있다.
gatsby alias 라고 구글에 검색해보니 바로 나오는 플러그인이 있어 사용했다. github의 start수는 적지만 npm trends로 확인 결과 많이 사용되고 있는 걸 볼 수 있었다.
npm trends : gatsby-plugin-alias-imports
1$ yarn add -D gatsby-plugin-alias-importsgatsby-plugin-alias-imports 설치
가이드를 참고하여 플러그인을 설치했는데,
devDependencies로 설치를 진행했다. dev로 뺄 수 있는 패키지들은 빼는게 좋으니까.
1{
2 resolve: 'gatsby-plugin-alias-imports',
3 options: {
4 alias: {
5 '@components': 'src/components',
6 '@layout': 'src/layout',
7 '@module': 'src/module',
8 '@pages': 'src/pages',
9 '@types': 'src/types',
10 ...
11 },
12 extensions: ['js', 'jsx', 'ts', 'tsx'],
13 },
14},gatsby-config.js alias 설정
그 다음
gatsby-config.js파일에 설정해주는 것으로 프로젝트에 alias를 설정하는 건 끝이다.
1"baseUrl": "." /* Specify the base directory to resolve non-relative module names. */,
2"paths": {
3 "@components/*": ["src/components/*"],
4 "@layout/*": ["src/layout/*"],
5 "@module/*": ["src/module/*"],
6 "@pages/*": ["src/pages/*"],
7 "@types": ["src/types"],
8} /* Specify a set of entries that re-map imports to additional lookup locations. */,tsconfig.ts alias 설정
이제
tsconfig.ts를 설정해주어야 하는데, 안그러면 위에서 말했던 Cannot find module 에러를 만날 수 있다.
@types에만
/*을 지정해주지 않았는데,
/types/index.ts파일을 통해 import를 하고 있기 때문에 아스터리스크를 빼고 사용했다.
alias 설정에 생각보다 삽질을 많이 했다. 중간에는 Chat-GPT에도 물어본 방법으로 적용을 해보아도 잘 안되었다. plugin 없이 설정하고 싶기도 했는데… 아쉬웠다. 지금은 가벼운 개인 프로젝트고 빨리 개발에 들어가고 싶은 마음이 커서 되었다에 의의를 두고 지나가려고 했다.
Chat-GPT께서 Gatsby에 Alias 설정하는 방법을 가르쳐주시는 모습.
1exports.onCreateWebpackConfig = ({ actions }) => {
2 actions.setWebpackConfig({
3 resolve: {
4 alias: {
5 "@components": path.resolve(__dirname, "src/components"),
6 "@pages": path.resolve(__dirname, "src/pages"),
7 }
8 }
9 });
10};gatsby-node.js 설정
Git 연결
Git 연결
git에서 빈 프로젝트 생성 후 로컬 프로젝트를 연결시켜주려고했다.
sourcetree에서 유저 설정 후 푸시하려는데, 토큰 문제로 인해 실패했다.
찾아보니 예전에 생성했던 토큰이 만료되어… 새 토큰을 하나 발행해서 연결해주었다.
배포
배포
추후 개발이 마무리 될 무렵 실제 배포할 때 사용하려고 북마킹해둔 두 서비스다. 공식 Gatsby Git에서 제안하고 있는 Gatsby Cloud와 많은 사용자들이 이용하고 있는 Netlify. 배포하기 전 성능과 요금, 지원 기능들을 비교한 후 선택하면 될 것 같다. 잘 연동된 툴을 사용해서 손쉽게 배포하고싶으니까 !
Notion 생성
Notion 생성
이후 블로그에 포스팅할 글들을 관리하기 위한 노션 셋팅을 진행했다. 새 페이지를 생성하여, 새 데이터베이스를 만들었다. 데이터베이스의 컬럼은 Gatsby에서 Property로 파싱해서 사용할 것이고, 각 row는 하나하나의 글들이 될 것이다. 정책을 어떻게 세워서 사용할 것인지는 개발하면서 차차 정해가기로 하고… 이제 연동해보자.
안되면…. 기술 스택과 구조를 다시 정해야 하니까…