offer-design-system 크로마틱 빌드 이슈 해결 (feat. storybook 6.5 에러)

History

• offer-design-system 작업이 잠시 홀딩된 이후 다시 작업을 하는 순간 변화없던 크로마틱 배포 오류가 발생

• 따로 변경 사항은 없는데 갑자기 에러가 발생한다.
• 오류 발생 이전 PR
fix: radio 이슈 해결
• 오류 발생이 시작된 PR
config: eslint 설정 추가, 변경

Issue

• Node.js v17 이후로는 OpenSSL 3.0으로 업데이트되었음

• 오류 발생 이전 PR의 Node LTS 버전은 v16이어서 문제 발생 X

• 오류 발생 이후 PR의 Node LTS 버전은 v18이어서 문제 발생 O

• OpenSSL 3.0에서 많은 기능, API 도입 ⇒ 일부 라이브러리 및 플러그인에서 대응되지 않은 경우 새로운 기능과 충돌 유발 ⇒ chromatic이 아닌 storybook에서 충돌

Solution

• --openssl-legacy-provider을 이용하여 레거시 모드로 동작할 수 있도록 build storybook script 실행 시, 옵션 추가
• FYI) mac, window, linux 운영 체제에 따라서 위 명령어의 동작 형태가 다르다고 한다!

• setup-node action을 활용하여 .nvmrc의 node 버전을 이용할 수 있도록 하기 (✅)

Reference

• 오픈소스로 제공되는 암호화 라이브러리

• 보안 통신을 위한 SSL 및 TLS 프로토콜을 구현

• 웹 서버, 클라이언트, 앱, 기타 여러 시스템에서 보안 통신을 위한 기본 구성 요소로 널리 사용되고 있음

Releases

Releases | Node.js

https://nodejs.dev/en/about/releases/