My Pocket

React 연습을 위해 진행한 가계부 프로젝트입니다.
선택한 연도 별로 수입/지출 내역을 확인할 수 있고, 월별 지출 차트를 확인할 수 있습니다.

Demo Page : https://sypear.github.io/my-pocket/ (반응형 디자인 미적용)

💻 프로젝트 실행 방법

프로젝트 폴더 안에서 아래 명령어를 실행합니다.

npm i
npm start

💪 프로젝트 목적

• React에 익숙해지자
  • 직접 컴포넌트 구조 생각해보기
    • React 도큐먼트를 참고해서 기능에 따라 분류하는 방식으로 접근했습니다 😀
  • 컴포넌트들을 결합해서 UI 구현하기
  • state를 이용해서 동적인 화면 만들기
  • 사용자 이벤트 발생 시 state 업데이트 하기
  • props를 이용해 부모 → 자식 컴포넌트로 데이터 전달하기
  • state 끌어올리기를 이용해 자식 → 부모 컴포넌트로 데이터 전달하기(부모 컴포넌트로부터 전달받은 함수에 데이터를 보내는 방식)

🗓️ 프로젝트 기간

기획 및 디자인 : 2022-08-02
퍼블리싱 : 2022-08-02 ~ 2022-08-03
기능 구현 : 2022-08-03 ~ 2022-08-04
코드 리팩토링 및 버그 픽스 : 2022-08-05 ~ 2022-08-06

🌐 지원 브라우저

확인 일자 : 2022-08-04

Edge	Firefox	Chrome	Opera
last version(103.0.1264.77)	last version(103.0.5060.134)	last version(103.0.1)	last version(89.0.4447.83)

👇 자세한 구현 내용 보러가기

• velog 포스팅 (velog 트렌딩 상위 진출👏)
  • [React] 가계부 프로젝트 | My Pocket