my-pocket

KO | EN

gitlite — search

#python #llm #rust #linux #docker #macos #cli #kubernetes #awesome-list #vue #pytorch #ios #openai #open-source

(★ 9)

My Pocket : React 가계부 프로젝트

my-pocket Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# My Pocket
![13](https://user-images.githubusercontent.com/105365737/183795715-ecfe80ef-1ecf-412b-adcb-0eead707a7e3.gif)
> React 연습을 위해 진행한 가계부 프로젝트입니다. 
> 선택한 연도 별로 수입/지출 내역을 확인할 수 있고, 월별 지출 차트를 확인할 수 있습니다. 
> Demo Page : https://sypear.github.io/my-pocket/ (반응형 디자인 미적용)

## 💻 프로젝트 실행 방법
프로젝트 폴더 안에서 아래 명령어를 실행합니다.
> npm i 
> npm start

## 💪 프로젝트 목적
* React에 익숙해지자
 - 직접 컴포넌트 구조 생각해보기
 - <a href="https://ko.reactjs.org/docs/faq-structure.html">React 도큐먼트</a>를 참고해서 기능에 따라 분류하는 방식으로 접근했습니다 😀
 - 컴포넌트들을 결합해서 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

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) Opera |
| --------- | --------- | --------- | --------- |
| last version(103.0.1264.77)| last version(103.0.5060.134)| last version(103.0.1)| last version(89.0.4447.83)

## 👇 자세한 구현 내용 보러가기
![오예2](https://user-images.githubusercontent.com/105365737/184570147-bfb8eb05-a7d8-46ac-9354-d6c168360cd6.PNG)
* velog 포스팅 (velog 트렌딩 상위 진출👏)
 - <a href="https://velog.io/@sypear/React-%EA%B0%80%EA%B3%84%EB%B6%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-My-Pocket">[React] 가계부 프로젝트 | My Pocket</a>

my-pocket

my-pocket Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

my-pocket

my-pocket Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README