refactor/#801 패키지의 버전을 업데이트한다

[cruelladevil]

작업내용

프로젝트의 패키지 버전을 업데이트하고, breaking changes들을 마이그레이션 합니다.

메이저 버전 업데이트

중요 업데이트

🚨 node 버전이 14 이상에서 18.12.0 이상으로 변경되었습니다.

package	before	after
gatsby	2.27.0	5.11.0
react 및 react-dom	17.0.1	18.2.0
typescript	4.1.2	5.1.6

개츠비 플러그인

🚨 gatsby 버전업에 따른 gatsby-image -> gatsby-plugin-image이 가장 큰 변화입니다.

• gatsby-image -> gatsby-plugin-image
• gatsby-plugin-global-styles 삭제
• gatsby-plugin-google-analytics 삭제
  • google-analytics 플러그인은 구글의 analytics.js 파일을 사용합니다. 하지만 구글에서는 gtag.js를 더 권장합니다.
  • 테코블은 gatsby-plugin-google-gtag를 사용하고 있었고, gatsby-plugin-google-analytics는 원본 템플릿에서 사용중입니다.
  • https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/
  • https://developers.google.com/analytics/devguides/migration/ua/analyticsjs-to-gtagjs?hl=ko
• gatsby-remark-abbr 삭제
  • 사용하지 않아서 원본 템플릿에서 삭제한 것으로 판단됩니다.

자세히 보기

package	before	after
gatsby-image	2.6.0
gatsby-plugin-image		3.11.0
gatsby-plugin-canonical-urls	2.5.0	5.11.0
gatsby-plugin-emotion	4.5.0	8.11.0
gatsby-plugin-feed	2.8.0	5.11.0
gatsby-plugin-global-styles	^1.0.17
gatsby-plugin-google-analytics	2.6.0
gatsby-plugin-google-gtag	^3.10.0	^5.12.0
gatsby-plugin-postcss	3.2.0	6.11.0
gatsby-plugin-react-helmet	3.5.0	6.11.0
gatsby-plugin-sharp	2.9.0	5.11.9
gatsby-plugin-sitemap	2.7.0	6.11.0
gatsby-plugin-typescript	2.7.0	5.11.0
gatsby-remark-abbr	2.0.0
gatsby-remark-copy-linked-files	2.5.0	6.11.0
gatsby-remark-images	3.6.0	7.11.0
gatsby-remark-prismjs	3.8.0	7.11.0
gatsby-remark-responsive-iframe	2.6.0	6.11.1
gatsby-remark-smartypants	2.5.0	6.11.0
gatsby-source-filesystem	2.6.0	5.11.0
gatsby-transformer-json	2.6.0	5.11.0
gatsby-transformer-remark	2.11.0	6.11.0
gatsby-transformer-sharp	2.7.0	5.11.0
gatsby-transformer-yaml	2.6.0	5.11.0

기타 업데이트

• rehype-react (마크다운이 변환된 html을 ast로 구성하는 라이브러리)
• cssnano (css style)

자세히 보기

package	before	after
rehype-react	6.1.0	7.2.0
cssnano	4.1.10	6.0.1

마이너 버전 업데이트

emotion 업데이트

• @emotion/core 삭제
• @emotion/styled-base 삭제
• emotion-server 삭제

자세히 보기

package	before	after
@emotion/core	11.0.0
@emotion/react	11.1.1	11.11.1
@emotion/styled	11.0.0	11.11.0
@emotion/styled-base	11.0.0
emotion-server	11.0.0

기타 업데이트

• date-fns (날짜 유틸)
• polished (css style)
• prismjs (syntax highlighting)
• prism-themes (syntax highlighting)

자세히 보기

package	before	after
date-fns	2.16.1	2.30.0
polished	4.0.3	4.2.2
prismjs	1.24.0	1.29.0
prism-themes	1.5.0	1.9.0

devDependencies 업데이트

• gatsby-plugin-emotion을 활용한 설정으로 인해 아래 패키지를 삭제하였습니다.
  • @babel/plugin-proposal-decorators 삭제
  • @emotion/babel-plugin-jsx-pragmatic 삭제
• eslint-config-xo-react의 의존성으로 자동 설치되는 항목을 삭제하였습니다.
  • eslint-plugin-react 삭제
  • eslint-plugin-react-hooks 삭제
• type과 eslint 관련 패키지가 업데이트 되었습니다.

자세히 보기

package	before	after
@babel/plugin-proposal-decorators	^7.12.1
@emotion/babel-plugin-jsx-pragmatic	^0.1.5
@types/lodash	4.14.165	4.14.200
@types/node	14.14.9	20.4.1
@types/react	16.9.56	18.2.14
@types/react-dom	16.9.9	18.2.6
@types/react-helmet	6.1.0	6.1.6
@typescript-eslint/eslint-plugin	4.8.1	5.62.0
@typescript-eslint/parser	4.8.1	5.62.0
eslint	7.13.0	8.44.0
eslint-config-xo-react	0.23.0	0.27.0
eslint-config-xo-space	0.25.0	0.34.0
eslint-config-xo-typescript	0.36.0	0.57.0
eslint-plugin-import	2.22.1	2.27.5
eslint-plugin-react	7.21.5
eslint-plugin-react-hooks	4.2.0

리뷰 참고사항

패키지 매니저

패키지 관리를 하나로 통일하기 위해 yarn.lock을 삭제하였습니다.

eslint

eslint는 xo 패키지들 기반으로 되어있어서 설정이 엄청 많습니다. 일단 원작자를 그대로 따라갔습니다.

tsconfig

incremental에 대한 리뷰가 필요합니다.

원작자가 tsconfig에 incremental이 추가했는데 정확히 적용되는 것인지 모르겠습니다.
incremental은 이전 컴파일 단계를 저장하여 빌드 타임을 세이빙하는 것입니다.
설정으로는 node_modules/.cache/.tsbuildinfo에 저장하도록 하는 것인데,
빌드 시에 해당 경로에 파일이 생성되지 않는 것으로 확인되어 제대로 적용되지 않는 것 같습니다.

AuthorYaml의 id 대신 name으로 변경

gatsby-transformer-yaml의 id 이슈와 같이 (d3bc0a8 커밋의 메세지를 확인해주세요)
gatby v4부터 gatsby 내부에서 id를 사용하면서 겪게 되는 에러에 대한 트러블 슈팅 방지차 원작자가 시멘틱하게 변경한 것 같습니다.

gatsby-plugin-feed

내용을 수정하였으나 정상 작동하는지 확인이 필요합니다.

Migrating from v3 to v4의 gatsby-plugin-feed 내용에 의하면 옵션이 필수적으로 변경되었습니다.
해당 내용을 바탕으로 수정하였으나 정상 적용되는지는 확인하지 못하였습니다.

https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-an-rss-feed/#customizing-the-rss-feed-plugin
https://www.gatsbyjs.com/plugins/gatsby-plugin-feed/

google analytics

구글 애널리틱스에 대한 정보가 필요합니다.

gatsby-plugin-google-gtag를 확인해보면 설정할 수 있는 사항이 많습니다.
구글 애널리틱스 id를 추가하는 것만으로 충분하다면 추후 고도화 해야할 부분으로 남겨두고,
필수 옵션이 또 있다면 수정이 필요할 것 같습니다.

버그 수정

• ending slash 제거 (12fa1af)
• 404 페이지에서 홈 링크 수정 (bbf4de3)
• 페이지네이션 이슈 해결 (98ae9fc)
• 포스트에서 meta og가 정상적으로 되지 않는 오류 수정 (16926db)
• html lang 속성을 ko로 변경 (0d2ecd5)

참고 자료

• gatsby - Migrating from v2 to v3
• gatsby - Migrating from v3 to v4
• gatsby - Migrating from v4 to v5
• eslint-config-xo-react
• eslint-config-xo-space
• eslint-config-xo-typescript

관련 이슈

close #801

[gyeongza]

코난과 함께한 오프라인 코드리뷰 정말 유익했습니다~
조금이나마 개츠비에 대해서 이해할 수 있었던 시간이었네요 ^^

• emotion 타입 관련해서 수정할 부분은 이슈 따로 파놓았습니다.

[woowapark]

PR관련

빌드가 영원히 끝나지 않을 것만 같은데 #805 이 PR이 반영되기 전이라 그런 걸까요...? 😂 gatsby-plugin-sharp을 실행하는 단계에서 거의 빌드가 멈추는 것으로 보입니다.

• 구글 애널리틱스가 있다는 것을 처음 인지했습니다ㅋㅋㅋ 애널리틱스로 볼만한 데이터가 있을지 다음 기수에서 이야기해보고 필요하다면 넣고, 아니라면 아예 제거해도 좋을 것 같아요
• incremental 플래그는 tsc 컴파일 속도를 빠르게 하기 위해 필요한 경우에 선택적으로 추가하는 것으로 알고 있는데요. 일단 빌드가 완결되지 않아 동작 확인이 어렵네요 🥲

+)

 ERROR  UNKNOWN

Unexpected key "pageData" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "typeOwners", "nodes", "logs", "pages", "redirects", "schema", "definitions", "staticQueryComponents", "status",
"webpack", "webpackCompilationHash", "config", "lastAction", "jobsV2", "pageDataStats", "components", "babelrc", "jobs", "nodesByType", "program", "resolvedNodesCache", "nodesTouched", "flattenedPlugins", "pendingPageDataWrites", "schemaCustomization",
"inferenceMetadata", "staticQueriesByTemplate", "queries", "visitedPages", "html", "functions", "telemetry", "nodeManifests", "pageTree", "requestHeaders", "statefulSourcePlugins", "slices", "componentsUsingSlices", "slicesByTemplate". Unexpected keys will be ignored.

빌드가 아직 정상적으로 끝나지 않는 게 이 영향인지는 모르겠으나...요런 에러 로그가 떠서 제보해둡니다 🤔 코난&에이든 로컬에서는 발생하지 않는 문제일까요? 전반적으로는 상세하게 잘 적어주신 것처럼 마이그레이션을 위한 가이드라인들을 따라 적용한 부분들인 것 같아 이견 없고요! 빌드 완료가 되지 않아...확인만 추가로 하려고 Request Changes로 남겨둡니다 🙏
고생 정말 많으셨어요~~~~!

업무 팁!

• 대대적인 마이그레이션인 경우, 오히려 코드에 대한 리뷰는 에이든과 하신 것처럼 오프라인 리뷰로 소화하고 PR 등에서는 동작 테스트를 같이 하는 것이 더 효과적일 수도 있는데요. 이 경우에는 어떤 것들이 정상 동작 상태인지에 대해 정의하고 이 부분에 대한 테스트를 요청한다는 내용을 PR에 포함해주시면 더 좋을 것 같아요 🙂
  • 예를 들어, 어떠한 빌드 명령을 입력해서 페이지가 잘 뜨는지 까지 확인해보면 된다 거나 어떠어떠한 부분이 잘 표시되는지 확인해야 한다는 구체적인 체크리스트가 있다면 그런 부분을 포함하거나요!
  • 어떤 부분이 변경되었는지 자체는 코드로 파악할 수 있지만, 그래서 이 PR에서 검증되어야 하는 것과 검증이 된 것이 무엇인지 빠르게 파악할 수 있으면 이후 히스토리를 찾아볼 때에도 편리했던 것 같아 코멘트로 남겨둡니다!

[cruelladevil]

작업한 것들

작업 여부	작업 이름	작업 커밋
✅	사용하지 않는 about 페이지 삭제	4b8cfdf
✅	사용하지 않는 gh-pages 패키지 삭제	317d171
✅	engines로 npm 및 node 버전 설정 및 engine-strict로 강제	17302e9
✅	mailchimp를 활용한 subscribe 기능 제거	5404444
✅	타입스크립트 incremental 플래그가 실제로 빌드 과정에서 캐싱이 되는건지 확인	참고 사항 확인

참고 사항

[engines로 npm 및 node 버전 설정 및 engine-strict로 강제]

node 최소 버전을 18.0.0으로 설정하고, node 버전에 따른 npm의 최소 버전은 8.6.0으로 설정하였습니다.
dependency 최소 기준을 확인하는 툴로는 ls-engines를 이용하였습니다.
아래 스크린샷에서 dependency graph engines가 설치된 node_modules를 통해 확인된 버전입니다.

[타입스크립트 incremental 플래그가 실제로 빌드 과정에서 캐싱이 되는건지 확인]

타입스크립트 옵션인 incremental은 적용되지 않는 것으로 확인하였습니다.
현재 프로젝트가 gatsby-plugin-typescript를 사용하고 있는데 해당 플러그인은 babel-plugin-transform-typescript을 이용하여 타입스크립트를 지원합니다.
즉, 빌드 과정에서 타입 체킹을 하지 않고 tsc를 사용하지도 않습니다.

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typescript#caveats

작업하지 않은 것들

작업 여부	작업 이름	작업하지 않은 이유
❌	사용하지 않는 emotion 패키지 삭제	#806 에서 진행
❌	사용하지 않는 코드나 불필요한 주석 삭제	새로운 이슈로 진행
❌	구글 애널리틱스	이후 기수에서 활용방안 의논
❌	eslint 설정 수정	이후 기수에서 린트설정 의논
❌	gatsby-plugin-feed 정상 동작 확인