react

[storybook] storybook 컴포넌트 설계 및 문서화하는 법 (+ Emotion, Typescript)

Storybook 폴더 구조 스토리북을 설치하면 stories 폴더가 새로 생겨있을 것이다. 이 sotries 폴더 하위에에 문서화할 컴포넌트 명을 넣어 다음과 같이 stories 파일을 새로 생성한다. [컴포넌트명].stories.ts파일 '이미 components 폴더에 만들어놓은 컴포넌트 중 문서화를 해줄 컴포넌트를 stories 파일에서 import해온다 -> 그에 대해 서술하는 내용을 코드로 적는다'가 바로 스토리 작성이다. 컴포넌트 설계하기 Storybook을 실행하면 들어있는 예제 중 Button 컴포넌트를 뜯어보며 재사용하기 좋은 컴포넌트, 그리고 Storybook으로 문서화하기 좋은 컴포넌트는 어떻게 설계하면 되는지 알아보자. 1. 해당 컴포넌트의 특성 파악하기 이 버튼이란 녀석은 버튼 ..

[Project/React] 다크모드 구현으로 Context API 학습하기

개요 context API를 학습하기 위해 다크모드 on/off 기능을 만들어보기로 했다. 스위치를 토글하면 이미지가 해 -> 달로 바뀌고 테마 색이 바뀌는 간단한 사이트이다. 순수하게 React의 기능만 사용해 만들고 싶어서 styled-components를 쓰지 않고 만들었다. 👉github로 전체 코드 보러가기 만들면서 참조한 글 (Thanks to) 리액트 다크모드 구현하기 feat. styled-components & context API 토글 스위치 버튼 만들기 Context API란 우리가 Context API라고 하는 것은 js의 history API처럼 Context 라는 기능을 사용할 수 있도록 해주는 기능 모음을 의미한다. Context는 전역적으로 컴포넌트끼리 값을 공유할 수 있도록..