반응형
프로젝트 명
가계부 프로젝트
프로젝트 설명
자신이 소비한 항목들을 리스트로 볼 수 있는 가계부 웹 어플리케이션을 만들어 봅시다.

요구사항
- create-react-app 으로 프로젝트를 세팅합니다.
- 다음과 같은 항목들을 form input을 통해 입력을 받습니다.
- 이름 : string
- 가격 : number
- 유형 : string
- 구입 날짜 : date
- 메모 : string
- 체크박스로 체크가 된 경우만 메모 input을 보여주고 값을 받습니다.
- 재구매 의사 : boolean
- 라디오 버튼을 통해 구현
- 입력받은 소비 항목들은 최신 순서대로 리스트로 보여집니다.
- 유형별 필터를 통해 유형에 맞춰 필터링된 리스트를 볼 수 있습니다.
- 정렬 기준을 다음과 같이 가지고 정렬해 줄 수 있습니다.
- 가격 높은 순
- 가격 낮은 순
- 최신 순
- 오래된 순
- 기간을 정해서 해당 기간에 소비한 내역만 볼 수 있습니다.
주의사항
- HTML과 CSS는 와이어프레임을 참고해서 레이아웃이 구분될 정도로만 만들어 주시면 됩니다. 너무 디자인에 집착하지 않아도 됩니다.
- css 클래스명은 BEM 방식을 따르기를 권장합니다.
- 주어진 프로젝트 설명을 명확하게 이해하고 해당 요구사항대로 정확하게 구현을 하는 것에 집중합니다.
- state, props, event handler를 적절하게 목적에 맞게 사용합니다.
- 하나의 컴포넌트는 하나의 역할을 하는 방향으로 만들어 봅니다.
- 변수명, 함수명을 명시적으로 바로 잘 이해할 수 있게 작성해 봅니다.
https://www.notion.so/supercoding/_-_FE-9dcabeeb6bde48c6956ee7355321774f?pvs=4
반응형
'취미 공부 > Practice' 카테고리의 다른 글
회원가입 페이지 연습 (4) | 2024.09.24 |
---|---|
부트스트랩 연습 (0) | 2024.09.24 |
7주차 스노우 DAY01 팀장님 문제 - 20240617 완성 (1) | 2024.06.10 |
jQuery 연습 -20240612 완성. (1) | 2024.06.10 |
1주차 - Day04 [당근마켓 채팅방 클론 코딩] (3) | 2024.05.03 |