week2_output

🚀 Week 2 산출물 정리

🔖 BackLog

• Account-book-B조 BackLog

🔖 기술 관련 공유

• Redux-toolkit
• Webpack-config
• Rechart
• d3-scale, d3-scale-chromatic

🔖 Github Action Script 적용

• Github Action Script 적용

🔖 FE 구조설정

📦src
 ┣ 📂components
 ┃ ┣ 📂containers
 ┃ ┃ ┣ 📜DashboardContainer.jsx
 ┃ ┃ ┗ 📜LoginFormContainer.jsx
 ┃ ┗ 📂presentational
 ┃ ┃ ┣ 📂common
 ┃ ┃ ┃ ┣ 📜Header.jsx
 ┃ ┃ ┃ ┣ 📜Layout.jsx
 ┃ ┃ ┃ ┣ 📜Sidebar.jsx
 ┃ ┃ ┣ 📜DashboardPieChart.jsx
 ┃ ┃ ┣ 📜DashboardVisualExpense.jsx
 ┃ ┃ ┗ 📜LoginForm.jsx
 ┣ 📂pages
 ┃ ┣ 📜AccountBookPage.jsx
 ┃ ┣ 📜AnalysisPage.jsx
 ┃ ┣ 📜CalendarPage.jsx
 ┣ 📂services
 ┃ ┗ 📜api.js
 ┗ 📜App.jsx

• presentational / container component 로 분리
  

      - presentational: 상태관리가 이루어지 않는 컴포넌트
      - container: 리덕스와 연동되어 있는 컴포넌트

• slice.js -> ducks 패턴을 적용
  

🔖 DashBoard 디자인

• 대시보드 화면 (Main 화면)

  • Header & sidebar 구현

• 반응형 웹 구현

  • @media query 적용
  • 특정 사이즈 이하면 햄버거 버튼 생성 + sidebar 사라짐

• recharts 라이브러리를 활용한 통계 차트 구현