Storybook 도입하기

이 글은 스토리북에서 개시한 리엑트 튜토리얼 > 간단한 컴포넌트 를 참고하여 작성되었습니다. 이제 컴포넌트를 독립적으로 만들어보자! 스토리북 튜토리얼에서 만드려고 하는 컴포넌트는 Task 컴포넌트인데, 우리 회사 UI에서 이런 컴포넌트는 쓰고 있지 않기 때문에,, 모든 화면에서 사용중인 Button 컴포넌트를 만들어보도록 하겠다. 1. 설정하기 먼저 Button 컴포넌트와 스토리 파일을 만들어야한다는데 이미 만들어져 있는 Button 파일을 수정해 보는 것으로 하겠다! 우리가 건드릴 파일은 총 세가지이다. 1. (.../taskbox/.storybook/src/Button.css) 2. (.../taskbox/.storybook/src/Button.stories.ts) 3.(.../taskbox/.storybook/src/Button.tsx) 우선 현재 회사에서 쓰고 있는 버튼의 디자인시스템을 피그마로 확인하면 아래와 같은 것을 확인할 수 있다. 4가지 상태(Default, Hover, Focused, Disabled), 5가지 사이즈(Small, Medium, Large, XLarge, XXLarge), 7가지 스타일(Primary, Secondary gray, Secondary color, Tertiary gray, Tertiary color, Link gray, Link color) 1) 사이즈 추가하기 우선 사이즈를 먼저 맞춰보겠다. (.../taskbox/.storybook/src/Button.tsx) 파일을 VScode로 열어서 각자 회사가 가진 버튼의 사이즈로 변경하고 저장(Ctrl+C)해준다. (.../taskbox/.storybook/src/Button.storeis.ts) 파일로 이동하면 에러가 발생한걸 볼 수 있고

드디어 스토리북의 튜토리얼을 따라할 수 있게 되었다! 하지만 바로 고비에 직면했다. 튜토리얼 시작부터 무슨 말인지 이해가 안된다. 일단 명령을 실행하보라고 하길래 실행해보았지만 이 모양이였다. 근데 이제 우리는 뭐가 있다? 우리 팀 프론트엔드 개발자 물어본다. 자리에 오시더니 VScode(비주얼 스튜디오 코드)를 열어서 터미널칸을 열어보신다 파란 라인에 마우스 오버하고 위로 드래그앤드롭하면 열린다. 요렇게! 여기에 어제 이유도 모르고 넣어봤던 코드를 입력해보신다 근데 이럴수가 오류 발생!!!

이전에 Next.js 프로젝트를 생성했다면 이제 개발 서버를 실행할 차례이다. 1. Next.js 개발 서버 실행하기 생성해둔 프로젝트의 경로를 명령프롬프트에 입력한다. 그리고 개발 서버를 실행하는 코드를 입력한다! 그럼 이렇게 개발 서버가 실행되고 내 로컬 환경에 접속할 수 있게 되는데, 브라우저에서 아래 주소로 접속하면 된다. http://localhost:3000/ 로컬 환경 세팅만 한 상태라 화면은 이렇게 뭔가 작업이 되어있지 않은 상태이다. 2. 프로젝트 파일 확인 자 그럼 본격적인 작업에 앞서 생성된 프로젝트 폴더를 확인해 보자 나는 비주얼 스튜디오 코드(Visual Studio Code)를 이용하려고 한다.

나는 4년차 UXUI 디자이너 Jay이다. 최근 스타트업에 입사를 했는데, 한가지 문제가 있었다. 기존에 있던 디자이너가 디자인 시스템 없이 매번 새로운 디자인을 뽑아내지만 우리 회사는 다른 업체에 납품해야 되는 형태로 완료 기간은 짧기 때문에 프론트엔드가 항상 프로젝트 납품에 치이는 것 이었다. 나는 이러한 문제점을 해결하기 위해 디자인 시스템을 구축해야겠다는 생각을 하게되었고 그러던 중 기존 디자이너가 퇴사를 하게 되면서 본격적인 디자인 시스템 구축을 시작하게 되었다. 그동안 피그마에서 디자인 시스템을 관리해 오긴 했지만 프로젝트 마무리 만으로도 힘든 FE들에게 도움을 주기에는 어렵다고 판단이 되었고 결국 혼자서 스토리북을 도입해 보기로 했다. 1. 리액트 개발환경 세팅 나는 개발자가 아니다 보니 여기서 부터 허덕이게 되었다. 아무래도 스토리북이 개발자들을 위한 서비스이다 보니 디자이너들이 시작하기에는 어려운감이 있다. 하지만 우리는 할 수 있다! 리액트 개발 환경 세팅부터 천천히 시작해보자. 우선 터미널을 열기 위해 Node.js를 다운받고 명령프롬프트(cmd)에 아래 코드를 입력한다. 그럼 이런 코드를 답변으로 뱉어내는데 이럼 성공이다. 이건 npm 설치를 확인한 것이고 왜 해야하는지는 음. 모르겠다..... 암튼 다음에는 next.js 설치를 확인하는 코드를 입력해보자 그리고 또 이렇게 뱉어내면 성공인데.. 역시 왜 해야하는지는 모른다..^0^.. 자 그럼 이제 Next.js 프로젝트를 생성하고 실행할 수 있다. 2. Next.js 프로젝트 생성 우선 프로젝트를 만들고 싶은 폴더로 이동해야 한다는데..