-
Styled Components를 활용해 다양한 기능의 커스텀 컴포넌트를 구현할 수 있다.
o
-
Storybook을 사용해 컴포넌트들을 관리할 수 있다.
o
과제 React Custom Component 1
-
이번 과제에서 React, Styled-Component, Storybook을 활용해 UI 컴포넌트 개발을 경험해 본다. ✓
-
이번 과제에서는 Modal, Toggle, Tab, Autocomplete, ClickToEdit, Tag UI 컴포넌트들을 만들어보는데 목적을 둔다. ✓
-
현재는 App.js에서 모든 컴포넌트들을 불러와주고 있지만,
App.js에서 불러오지 않고 있는 UI 컴포넌트를 만들어야 한다면,
어떻게 눈으로 확인하며 개발을 진행할 수 있을까? -
UI 컴포넌트들을 개발하며 동시에 Storybook에서 각각의 UI들이 어떻게 작동하는지 확인할 수 있다. ✓
📚 [Bare minimum Requirement] 📚
지금까지 배운 React, Styled Components를 활용하여
React-custom-component를 완성한다.
- Modal, Toggle, Tab, Tag 컴포넌트를 구현한다. ✓
npm run test스크립트로 기본적인 기능을 테스트하는 테스트 케이스를 통과한다. ✓
- /src/tests/index.test.js 에서 구현할 컴포넌트의 테스트 주석을 하나씩 해제하면서 진행한다. ✓
npm run storybook스크립트로 컴포넌트들을 눈으로 확인하며 코드를 작성하여, 하단 GIF 파일과 같은 모양을 구현한다. ✓- 모든 테스트를 통과한 뒤,
npm run submit스크립트로 과제를 제출한다.
Modal Component 완성하기
Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다. (팝업창과는 차이가 있다.)
📚 [Advanced Challenge (Optional)] 📚
- Autocomplete Component 완성하기
- ClickToEdit Component 완성하기
소감
🔡➡️💻➡️🤓👍
페어분과 함께해서 비교적 빨리 과제를 할 수 있었다.
css 적용하는 부분은 각자 해보기로 하고,
큰 틀만 같이 코드를 작성하고 구현했다.
토글 구현에서 창문 열듯 on/off로 바뀌는 걸 구현하고 싶었다.
토글를 클릭하면 전체가 동시에 바뀌어서
transition 속도를 늦추면 된다고 생각했는데
늦게 색상이 바뀔 뿐 창문을 열고 닫는 듯한 느낌이
구현되지 않아서 내일 물어봐야겠다.
그리고 내일도 이어서 과제 하는 시간이라서
Advanced 도전해보기로 했다.
developerpyk