[프로젝트 회고] '개인 지출 관리' 애플리케이션 만들기 (일명: 가계부)

0. 기본 정보

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) #30일/94일

<프론트엔드 React 5기 과정> 어디까지 왔을까?

<React 과정 안내>

0. 개강 및 OT

1. 팀 소개 페이지 미니 프로젝트

2. 프로그래밍 기초

     2-1. 개인과제

     2-2. 개인과제

3. 주특기 기초

     3-1. 주특기 입문

     3-2. 주특기 숙련 ◀️◀️◀️◀️ 여기!

     3-3. 뉴스피드 프로젝트

4. 주특기 심화

     4-1. 주특기 심화

     4-2. 아웃소싱 프로젝트

5. 주특기 플러스

     5-1. 주특기 플러스

     5-2. 심화 프로젝트

6. 최종 프로젝트

7. 지원 주차

---

1.  프로젝트 설명

- 프로젝트 주제 : 개인 지출 관리 애플리케이션

- 프로젝트 기간 : 2024. 5. 20. ~ 5. 29. (총 10일)

- 프로젝트 목표 : 

• react-router-dom 을 활용한 페이지 이동처리
• styled-component 를 이용한 스타일링 적용
• context api 를 이용한 전역 상태 관리
• redux 를 이용한 전역 상태 관리

- 구현할 웹사이트 예시 : https://team-sparta-assignment-1.vercel.app/

- 관련 공지(노션) : https://teamsparta.notion.site/React-8e52eb6a3ee6472da6d79d420866e81b

- 가이드 영상(이강민 튜터님): https://teamsparta.notion.site/React-5-af8496e4d4ab48c1a5433e4491be0300

- 해설 영상(이강민 튜터님): https://teamsparta.notion.site/React-5-7fa784f014af43bfbd0f799ed08517d9

---

2. KPT 회고

KPT 회고법이란?

• Keep : 프로젝트 완료 후에도 간직하고 싶은 잘했던 것 / 좋았던 것
  ex) "~기술 적용을 했더니 효율적으로 ~를 할 수 있었다."
• Problem : 프로젝트 중 겪었던 어려움(기술, 소통, 협업, 에러 등 프로젝트 진행 관련된 그 어느것이든) / 프로젝트 완료 후에도 아쉬움으로 남는 것
  ex) "~기능 적용 중 ~이슈가 발생하였다."
• Try : Problem 중 해결된 사항에 대한 해결 방법 / 해결되지 않은 사항에 대한 피드백
  *ex) "~기능 적용 중 발생한 ~이슈 해결을 위해 ~를 하였다.

1) Keep

- 기본 강의(내일배움캠프 자체 제작 강의)를 빠르게 1회독하여, 앞으로 배울 내용의 '키워드' 감 잡기

(이번 주차 새로 배운 내용의 키워드 정리)

• styled-components
• useState : 함수 업데이트
• useEffect, clean-up
• useRef
• useContext
• memorization - memo, useCallback, useMemo
• custom hook
• redux - useSelector, dispatch action 객체, payload, ducks, RTK(devtools)
• react-router-dom - 세팅, useNavigate, useLocation, Link, children, dynamic, outlet
• supabase - 세팅, 등록, 수정, 삭제

(표시: 사용방법을 알고 구현해본 적 있는 키워드, 사용방법을 알지만 구현해본 적 없는 키워드, 잘 모르는 키워드)

- 기본 강의보다 조금 더 쉬운 외부강의로 보충하기

• [인프런] 처음 만난 리액트 by 소플
  https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8
• [유데미] React 완벽 가이드 2024 with React Router & Redux (유료강의) by Max
  https://www.udemy.com/course/best-react/learn/quiz/6159778#learning-tools
• [노마드코더] ReactJS 로 영화 웹 서비스 만들기 by 니콜라스
  https://nomadcoders.co/react-for-beginners

 

2) Problem

• 기본 강의 1회독, 과연 효과가 있었나?
• (해결책) 주어진 시간 안에 1회독은 하되, 중요한 개념은 2~3회독 더 돌려볼 것

 

3) Try

• Redux 개념
• Supabase 개념