일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 클린코드
- webpack
- git hooks
- 협업
- string-width
- 유틸함수
- 프로젝트
- eslint 자동화
- 성능 베이스캠프
- 우테코
- prettier 자동화
- 프로젝트 카페인
- import정리
- importOrder
- vscode
- CSS
- 이슈번호자동화
- IDL attributes
- storybook
- eslint에러 자동fix
- 카페인
- react
- Husky
- 클로저
- 자바스크립트
- 크로마틱
- css instead of js
- JavaScript
- 우아한테크코스
- chromatic
- Today
- Total
목록카페인 (2)
FEB:)DAIN
0. 리팩터링을 진행한 이유와 요구사항 팝업 메뉴를 구현한 팀원의 코드를 보니 ref를 쓰지 않고, css만으로도 간단하게 구현할 수 있을 것 같아 리팩터링을 진행했다. 팀원의 요구사항은 다음과 같았다. 1) 트리거의 위치가 바뀌어도 팝업 메뉴가 그 트리거 옆에 있어야 한다. 1-1) 얼마나 떨어져 있을지도 정할 수 있어야 한다. 2) 팝업 메뉴 크기는 자식 메뉴에 맞춰 유동적으로 바뀌어야 한다. 2-1) 자식 메뉴 수는 줄이거나 늘릴 수 있다. 메뉴 수에 따라 팝업 메뉴 높이가 바뀌어야 한다. 2-2) 자식 메뉴 글자 수가 길어지면 그 길이에 맞춰 팝업 메뉴 너비가 늘어나야 한다. 1. 코드 비교 1) Ref를 이용한 팝업 메뉴 - 리팩터링 전 // Menu.tsx // PopupMenu.tsx imp..
목차1. 기획 1-1. 페르소나 2. API 결정 2-1. 충전소 정보 API 2-2. 지도 API 3. 개발 라이브러리 결정 4. 기능 목록 5. 디자인 1. 기획1) 급속 충전 기계가 모든 충전소에 있는 것이 아님 2) 충전소 회사 별로 할인 혜택이 다름 3) 차종에 따라 충전 단자가 다름 4) 충전소와 충전기 부족 ⇒ 원하는 전기차 충전소를 쉽게 찾을 수 있게 하자 5) 충전 속도가 느림 (완속 기준, 8 ~ 14시간 소요) 6) 충전 다하고 나서도 자리 차지하는 문제 발생 7) 주차 공간 부족 ⇒ 각 충전소 별 혼잡도를 제공해 사용자들이 혼잡한 충전소를 피할 수 있게 돕자 기획자의 발표를 듣고 현재 전기차 충전소의 문제를 인식했다. 사용자가 원하는 전기차 충전소를 쉽게 찾을 수 있고, 혼잡도를 확..