Under the Sign of Saturn

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 3 (CRA + TypeScript + Prettier + ESLint + husky + lint-staged + Storybook + chromatic) TypeScript를 기반으로 하는 Create React App 준비는 첫 번째 시리즈에서 다뤘고, ESLiint와 Prettier는 두 번째 시리즈에서 다루었다. 2022.01.28 - [분류 전체보기] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 2022.02.04 - [🛠/Dev Tool] - [storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 2..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + Prettier + ESLint + TypeScript + Storybook + chromatic) 2022.01.28 - [🛠/Dev Tool] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + ESLint + TypeScript + Storybook + chromatic) 예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 uiyoji-jou..

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 (CRA + ESLint + TypeScript + Storybook + chromatic) 예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 체계도 제대로 이루어지지 않아서 어느 것이 최신 버전인지, 유효한 디자인인지 확인하기 어려웠다. Theme이 세 가지나 다른 디자인에 대해 각각 컴포넌트와 페이지를 다루기가 너무 난감했다. 작성하고 있는 컴포넌트는 재사용을 위한다고 가면, 너무 많은 prop이 걸려서 번번히 테스트 코드도 없는 와중에 디버깅 하기가 힘들었다. 그래서 이번 프로젝트에서는 디자이너와 협업 효율도 높이고, 시각적으로 컴포넌트들을 따로 볼 수 있으며, 개별적으로 개발해서 bottom-up 방식으..

gh-pages로 리액트 앱을 배포할 때 URL 설정을 package.json에 homepages로 추가하는 것만으로는 안 돼서 검색하다가 나중에 또 잊을까봐 기록으로 남겨둔다 ..^^ package.json gh-pages를 install한 뒤 script에 predeploy와 deploy 명령어를 넣어준 뒤 "homepage"에 내 깃헙 아이디 + github.io + 현재 저장소 이름을 넣어준 것까지는 다른 튜토리얼에 나와 있는 내용과 동일하게 진행했다. 그런데 자꾸 빌드된 파일에 번들된 css나 js 파일을 참조하는 경로가 /github.io...로 시작하고 있었다. 즉, github io를 넣은 완전한 URL을 찾지 못하고 있었다. React-router 라이브러리를 사용할 때도 비슷한 문제가 ..