FEB:)DAIN

1. 요청 크기 줄이기 1-1. 소스코드 크기 줄이기 - minify/uglify const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); plugins: [ ... new MiniCssExtractPlugin() ], module: { rules: [ ... { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, ... optimization: { minimize: true, minimizer: ['...', new CssMinimizerPlugin()]..

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) 주차 공간 부족 ⇒ 각 충전소 별 혼잡도를 제공해 사용자들이 혼잡한 충전소를 피할 수 있게 돕자 기획자의 발표를 듣고 현재 전기차 충전소의 문제를 인식했다. 사용자가 원하는 전기차 충전소를 쉽게 찾을 수 있고, 혼잡도를 확..