🌞wecode 1st project
위코드 1차 프로젝트로 '더피커'사이트의 클로닝을 진행했다.
프론트엔드 2명 백엔드 1명으로 진행되었다.
코드확인🔻
https://github.com/wecode-bootcamp-korea/Wepicker-frontend
사용 기술 스택
React / Sass / HTML / Java Script /
Slick Slider / React-Router-Dom
구현 페이지
(이모지 표시 글쓴이 작업)
메인 페이지🙋♂️
로그인/회원가입
상품페이지
장바구니🙋♂️
위시리스트
기억나는 코드
장바구니 페이지
1.포인트 계산 표시 code
state의 총 가격 값을 가져와 parseInt화 시켜서 포인트로 표시한 부분이 기억에 남는다. 이전에는 파스인트를 어떻게 사용해야할지 감이 잘 오지 않았지만 민선님께 해당 방법을 배우고 실사용할 수 있어서 장바구니에서의 포인트 표현 부분을 손쉽게 구현할 수 있었다.
2.장바구니 추가 및 총 가격 계산 code
우선 민선님과 성현님께 배운 인풋-체크박스 태그의 속성을 알아내는 방법이 매우 인상적이었다.
디버깅 시 사용하는 console.log() 말고,
console.dir() 이라는 API로 해당 태그의 여러 속성을 알아낼 수 있었는데
그 중에 checked라는 속성은 true 혹은 false로 구성된 boolean 값이었고, 이걸 체크 및 체크해제의 개념으로 이어서 사용할 수 있었다.
console.log() 공식문서 🔻
https://developer.mozilla.org/en-US/docs/Web/API/Console/dir
체크와 체크해제를 어떻게 이벤트 인식할지 부터가 고민이었는데
저 방법을 사용했던 점이 매우 인상적이어서 기억에 남는다.
또한 갯수 증가와 감소 및 체크 추가 둘 다 공통적으로
콜백함수에서의 인자를 받아서 스테이트의 밸류와 인자의 밸류를 비교해서
연산하는 개념 자체가 너무나도 신기했고 재밌었던 부분이었다.
아쉬웠던 부분
1.컴포넌트 사용의 부족
프롭스 등의 개념부터가 많이 어려워서, 프롭스 사용은 커녕 거의 통으로 코드를 작성했다. 이는 뒤로 갈 수록 코드가 길어져 오히려 수정 시 시간이 더 걸리게 되는 등 리액트를 리액트스럽게 사용하는 법을 쓰지 않은 문제점을 뼈저리게 느낄 수 있었다.
2.코드의 고민 부재
막판 장바구니에서의 기능은 거의 민선님과 성현님의 도움으로 작성할 수 있었다. 대략적인 흐름은 그들과 일치했으나 실제 코드를 칠 수 없다면 프로그래머라고 할 수가 없지 않을까라는 생각을 했었다. 남의 코드를 가져다가 쓰는 것과 다름 없는 이러한 문제점은 2차 때 여러 동기들이 장바구니에 대한 개념을 물어볼 때, 제대로 설명할 수 없었던 점으로 이어진다.
머리로 아는 것과 실제 그것을 그려내는 것은 실로 엄청난 차이인 것 같다.
3.장바구니에서의 디테일
내 장바구니는 체크를 한 상태에서 수량의 증감이 일어나면,
그것은 또 총액에 반영이 되지 않았다. 체크라는 이벤트가 일어나야만
총액의 증감이 되었다.
또한 수량의 감소 또한 마이너스 값으로 표현되는 등의 디테일에서의 부족함이 있었다.
앞으로
프롭스의 개념을 확실히 알고 여러 컴포넌트를 자유자재로 사용해야함을 느꼈고, 함수를 구성하는데에 있어서 큰 어려움이 있으므로 함수를 짜는 방법을 열심히 공부해야할 것 같다.
