logo

스토리북이란?

etc · 2022년 9월 19일 · 3 min read

storybooklink icon은 UI Component들을 모아서 보여주고,
문서화 해주는 오픈소스 도구이다.

만약 조직에서 CDD(Component Driven Development)를 추구한다면, 스토리북이 필수일 것 같다.
또한 FrontEnd framework들과도 친화적이어서
개발된 component들을 테스트하고 싶다면 스토리북을 통하여 테스트까지 가능하다.

오늘 당장 사용해보려고 레포지토리link icon까지 생성했지만 ...
storybook이 현재 npm 버전과 관련하여 이슈link icon를 가지고 있어서 알아보기로 하였다.

ex_screenshot" ex_screenshot"

아직은 프로젝트 폴더에 .npmrc를 추가하는 workaround(임시 조치) 밖에 없으며, 근본적인 해결방법은 제시되지 않았다고 한다.
해당 이슈를 계속 구독하며 기다리기로 하고 오늘은 포스트 몇개 올리고 자야겠다.

이전 포스트
.npmrc 파일이란?
다음 포스트
TTV와 TTI란?
관련 포스트
post image
npm ci란?
이슈를 마주쳤을 때, 구글링을 하다보면, 가끔 npm ci를 사용하라는 솔루션을 만나고는 했다. 오늘은 npm ci에 대해 좀 더 알아보고자 한다. npm install과 다른점은? package-lock.json이 존재해야 한다. npm ci는 npm install과는 다르게 package-lock.json이 존재하는 환경에서만 실행 가능하다. lock파일과 package.json 파일이 다른 의존성을 가지면 안된다. 만약 package-lock.json파일이 package.json파일과 다른 의존성을 가지고 있다면,npm ci는 package-lock.json을 업데이트하는 대신 error와 함께 종료된다.
etc·2022년 9월 19일·4 min read
post image
.npmrc 파일이란?
storybook을 사용해보려고 하다 마주한 이슈의 해결법을 알아보다가 등장한 .npmrc라는 파일에 대해 공부해보았다. .npmrc 파일이란? .npmrc 파일은 npm에 대한 config 파일이다. (npm에 대한 rc 파일) 주로 환경변수 등을 설정할 때 사용된다는데, 흡사 자주 사용하는 dot-env의 .env파일처럼 작동한다고 보면 되는 것 같다.
etc·2022년 9월 19일·3 min read
post image
TTV와 TTI란?
TTV는 Time to View이며, 사용자가 화면을 보는 시점을 의미한다. TTI는 Time to Interact이며, 사용자가 웹에서 특정 동작을 수행할 수 있는 시점을 의미한다.
etc·2022년 9월 14일·1 min read
post image
Maria DB 외부 접속 설정하기
안녕하세요. 오늘은 Maria DB 초기 세팅 시, 외부에서 접속이 안될 때 매뉴얼을 작성해보겠습니다. dotenv 패키지를 통해서 환경변수로 관리한다면, 별도의 추가 작업을 할 일이 없으실 겁니다.
etc·2021년 7월 14일·4 min read
post image
package-lock.json 파일의 역할
안녕하세요. 오늘은 node 환경의 개발자라면 한번쯤 궁금했을만한 package-lock.json의 역할에 대해 알아보겠습니다. 우리는 node 환경에서 개발을 할 때 다양한 패키지들을 설치하여 활용하곤 합니다. 우리가 설치하는 패키지 또한 다른 npm 패키지를 활용하여 만든 패키지들이고 이들 또한 설치를 하게 됩니다. 이렇게 직간접적으로 설치된 패키지들은 대부분 호환성을 "^1.1.5"와 같이 표현하여, 범위로 지정해두고 있습니다.
etc·2021년 6월 8일·3 min read
post image
Linux 환경 배포 자동화 체험해보기
안녕하세요. 요즘 포트폴리오를 만들면서 서버 상에 자주 반영할 일이 생겼는데, 매번 명령어들을 타이핑하는 것이 비효율적이라 생각이 들어 배포 자동화를 생각해보게 되었습니다. 현재 레벨에서는 단순히 명령어들만 단축시켜도 효율적이라 생각이 들어 간단한 쉘 스크립트만 작성하였습니다. 정말 간단하니 여러분도 도전해보시길 바랍니다.
etc·2021년 6월 7일·4 min read
post image
협업 필수품. Prettier
안녕하세요. 오늘은 Prettier이라는 도구에 대해 알려드리고자 합니다. 개발자는 각자의 코딩스타일이 존재합니다. 그러다보니 같은 프로젝트에서도 작성하는 소스마다 스타일이 제각기 다르기 일쑤입니다. 그럴 때 도입하면 좋은 것이 Prettier입니다. 프로젝트 root 폴더에 .prettierrc 라는 파일을 생성한 뒤, 위 예시와 같이 원하는 옵션을 JSON 형식으로 작성해주면 됩니다.
etc·2021년 6월 6일·4 min read