shopping basket 프로젝트

 

프로젝트 소개
쇼핑목록을 관리하는 메모장이다.

👉 배포사이트 보러가기
👉 깃허브보러가기

 

🖥

제작기간: 2일 (2023.3.21-3.22)

제작인원: 1명 (개인프로젝트)

기술스택: React, styled-components

추가 라이브러리: uuid, react-icons

배포: Netlify

 

 

1. 기능

✅  추가하기(create)

-useState() : useState를 통해서 state관리

-name: 2개의 input에 각각 들어오는 것을 name을 통해서 한번에 관리

- uuid: 새롭게 create되는 값들의 key에 uuid를 통해서 고유한 값들을 부여

추가하기

 

 

✅  읽기 (read)

컴포넌트: 재사용성이 높은 것들을 component화하여 불러옴

map(): item리스트들을 일일이 적는것이 아닌, map()을 이용하여 코드 간결화

react-dom 이용

 

 

 

✅  수정 (update)

클릭시 줄그어짐: items 객체 안의 active프로퍼티를 이용해서 onToggle함수의 스타일을 변화시킨다.

 

수정하기

 

 

✅  삭제 (delete)

filter()로 id값 비교: filter를 통해 id값이 일치하는 것만 삭제해준다.

 

삭제하기

 

 

 

2. 배운점

- 기본적인 crud 기능

- useState()와 props를 이용한 상태관리

 

- 라이브러리

1️⃣ uuid

2️⃣ react-icons

 

- Netlify 배포하기

 

- 버튼 디자인주기

webkit, transition, transform

 

 

 

3. 아쉬운점 & 앞으로 바꿀것!

- 페이지를 벗어나면 기록 사라짐  ➡️  localStorage로 저장해보기

- props drilling을 통한 상태관리 ➡️ contextAPI로 전역 상태관리해보기

 

 

 

 

만들어서 깃허브에만 올려봤는데, 배포까지 하는건 처음이라 더 의미가 있는 프로젝트이다.

기본적인 crud로만 구성이 되어있어서 만드는데에 오래 걸리지는 않았다.

이걸 기본 뼈대로 해서 앞으로 더 기능을 추가해볼 예정이다.

 

더 기능을 추가한뒤, 후속글도 올려봐야지 😎