FEB:)DAIN

1. 데이터를 효과적으로 시각화 개선 전 개선 후 1) 혼잡도라는 말이 명확하지 않다고 생각해 혼잡도 → 사용량으로 이름 변경 2) 사용량에 관계없이 단조로운 색깔이라 차이가 눈에 확 들어오지 않음 ⇒ 사용량이 많아질 수록 빨간색이 보이도록 변경해 데이터를 효과적으로 시각화 3) 전체적인 디자인 개선 2. 사용자의 편의성 증대 [수정 전] 왼쪽 네비게이션 바에 있는 메뉴(목록, 필터)는 열기 전용 버튼 여러 사용자가 열려 있는 패널을 닫기 위해 목록 버튼을 한 번 더 클릭하는 것을 목격 → 편의성을 위해 네비게이션 바 메뉴 버튼을 열기 버튼이 아닌 토글 버튼으로 바꾸면 좋겠다고 생각했다. 하지만 열기 버튼을 토글 버튼으로 바꾸기 위해서는 컴포넌트 비교가 필요했다. // NavigationBar/Menu...

0. 🧐 어떻게 에러 핸들링을 해야 할까?사용자 경험을 해치지 않으면서, 에러가 발생했다는 것을 사용자에게 알리고 싶었다. 그러기 위해서는 1) 사용자에게 무슨 에러가 발생했는지 친절하게 알려주어야 한다. (에러 재발생 방지) - 어떤 에러가 발생했는지 개발자가 아닌 사용자도 알 수 있도록 알려주어야 한다. - 다음 동작은 어떻게 해야 하는지 정확하게 안내해야 한다. 2) 화면이 최대한 많이 변경되지 않아야 한다. - 필요없는 화면 전환이 발생하면 사용자 경험이 저하된다. 위 사항을 염두에 두면서 에러를 처리했다. 1. GET 요청시 에러가 발생하면 해당 컴포넌트를 에러 컴포넌트로 변경예를 들어 충전소 시간별 사용량 정보를 GET 요청을 통해 받아올 때, 에러가 발생하면 (데이터를 가져오는 데 너무 오래..

0. 리팩터링을 진행한 이유와 요구사항 팝업 메뉴를 구현한 팀원의 코드를 보니 ref를 쓰지 않고, css만으로도 간단하게 구현할 수 있을 것 같아 리팩터링을 진행했다. 팀원의 요구사항은 다음과 같았다. 1) 트리거의 위치가 바뀌어도 팝업 메뉴가 그 트리거 옆에 있어야 한다. 1-1) 얼마나 떨어져 있을지도 정할 수 있어야 한다. 2) 팝업 메뉴 크기는 자식 메뉴에 맞춰 유동적으로 바뀌어야 한다. 2-1) 자식 메뉴 수는 줄이거나 늘릴 수 있다. 메뉴 수에 따라 팝업 메뉴 높이가 바뀌어야 한다. 2-2) 자식 메뉴 글자 수가 길어지면 그 길이에 맞춰 팝업 메뉴 너비가 늘어나야 한다. 1. 코드 비교 1) Ref를 이용한 팝업 메뉴 - 리팩터링 전 // Menu.tsx // PopupMenu.tsx imp..

가끔 팀원 중 한 명이 prettier 적용을 하지 않고 push하는 일이 있었다. 그래서 이런 실수를 아예 방지하기 위해 husky를 이용해 prettier, eslint 적용을 자동화하기로 했다. 1) husky 설치 yarn add -D husky // or npm install --save-dev husky devDependency로 husky를 설치한다. husky v5에서 잠깐 라이선스 문제가 있었지만, 지금은 괜찮다. 최신 버전으로 설치해도 된다. 1-1) script 설정 후 실행 //package.json "scripts": { ... "prepare": "cd .. && husky install frontend/.husky && cd frontend", "prepare:mac": "cd..

프로젝트를 진행하다가 규칙도 없고 중구난방인 import를 정리하고 싶어졌다. import 순서를 eslint, prettier로 정리할 수 있는데 나는 prettier로 정리하기로 했다. 아래의 순서대로 진행하면 import를 깔끔하게 정리할 수 있다. 1) @trivago/prettier-plugin-sort-imports 설치 yarn add -D @trivago/prettier-plugin-sort-imports // or npm i --save-dev @trivago/prettier-plugin-sort-imports 2) .prettierrc 설정 // .prettierrc { "importOrder": [ "^react(.*)", "^@tanstack/(.*)$", "^@map/(.*)$",..

목차1. 기획 1-1. 페르소나 2. API 결정 2-1. 충전소 정보 API 2-2. 지도 API 3. 개발 라이브러리 결정 4. 기능 목록 5. 디자인 1. 기획1) 급속 충전 기계가 모든 충전소에 있는 것이 아님 2) 충전소 회사 별로 할인 혜택이 다름 3) 차종에 따라 충전 단자가 다름 4) 충전소와 충전기 부족 ⇒ 원하는 전기차 충전소를 쉽게 찾을 수 있게 하자 5) 충전 속도가 느림 (완속 기준, 8 ~ 14시간 소요) 6) 충전 다하고 나서도 자리 차지하는 문제 발생 7) 주차 공간 부족 ⇒ 각 충전소 별 혼잡도를 제공해 사용자들이 혼잡한 충전소를 피할 수 있게 돕자 기획자의 발표를 듣고 현재 전기차 충전소의 문제를 인식했다. 사용자가 원하는 전기차 충전소를 쉽게 찾을 수 있고, 혼잡도를 확..