위코드에서 첫번째 프로젝트로 LUSH를 클론코딩하기로 했는데 나는 그 중 Nav, Footer, 장바구니 페이지를 리액트로 구현했다.
❗️ 프로젝트명 : WISH KOREA
❗️ 프로젝트 기간 : 2022.06-20 ~ 2022.07.01
❗️ 프로젝트 구성 : frontend - 4명, backend - 1명
1. Nav
- 목표 : 레이아웃 및 마우스오버 기능 구현
-마우스를 지정한 카테고리에 올리면 하위 카테고리가 나올 수 있도록 기능구현을 했고, 마이페이지 아이콘에도 마우스를 올리면 로그인, 회원가입을 할 수 있는 박스가 나오도록 구현했다.
2. Footer
푸터에는 특별한 기능구현을 넣지 않고 반복되는 코드를 map() 함수를 이용했다.
const TITLE_LIST = [
{ id: 1, title: '스카우트' },
{ id: 2, title: '회사소개' },
{ id: 3, title: '개인정보처리방침' },
{ id: 4, title: '영상정보관리지침' },
{ id: 5, title: '이용약관' },
{ id: 6, title: '고객센터' },
];
const COPY_LIST = [
{
id: 1,
text: '서울특별시 강남구 테헤란로 427 위코드 | 운영자: 주식회사 위시코리아',
},
{ id: 2, text: '대표이사 : 정진관(Backend Developer)' },
{ id: 3, text: '사업자 등록번호:523-34-20226' },
{ id: 4, text: '통신판매업 신고번호 : 2022-안중영-02857' },
{ id: 5, text: '개인정보보호책임자 : 정예지' },
];리스트에 해당하는 내용들을 가독성과 유지보수를 위해 상수데이터로 작성했다.
3. Cart
- 기능목표
- 체크박스 전체선택 및 개별선택 ✅
- 선택한 상품 삭제 및 전체삭제 ✅
- 선택한 상품 수량이 총 주문금액에 적용되는 기능 구현 ✅
- 제품 리스트를 백엔드와 통신 전 mock data를 이용해 나타냈다.
- 반복되는 리스트 부분을 map()함수를 이용해 구현했다.
- 수량버튼을 ProductCount 컴포넌트로 따로 만들어 관리했다.
- 공유하고싶은 코드
const [checkedBox, setCheckedBox] = useState([]);
// const [isAllchecked, setIsAllChecked] = useState(false) 처음 작성한 코드
const isAllChecked =cartList.length !== 0 && cartList.length === checkedBox.length;//리팩토링 후 작성한 코드
const handleCheckAll = () => {
setCheckedBox(cartList.map(el => el.cart_id));
if (isAllChecked) {
setCheckedBox([]);
}
}; //전체 체크박스
const handleCheck = e => {
const { id, checked } = e.target;
setCheckedBox([...checkedBox, Number(id)]);
if (!checked) {
setCheckedBox(checkedBox.filter(item => item !== Number(id)));
}
};//개별 체크박스
체크박스 기능구현 중 전체 체크박스와 개별 체크박스를 각각의 state로 저장했는데 리팩토링 중 하나의
state로도 계산이 가능하다는 리뷰를 받고, 4시간동안의 고민 끝에 팀원의 도움으로state가 아닌 변수에 저장하는 방법을 알게되었다.
리액트 하면state에 저장하는것을 당연하게 생각했던 점을 반성하게 되었다.역시 정답은 없는 개발의 세계...
<전체영상>
4. 회고
4-1. 좋았던 점
- 매일 아침 스탠드업 미팅을 통해 누구 하나 빠지지 않고 전체가 소통하면서 과정을 공유하는 점이 좋았다.
- Trello를 활용하면서 실제 협업에서 쓰이는 툴들을 사용할 수 있던 점이 너무 좋았다.
- 맡은 페이지들을 시간분배를 적절하게 해서 기간내로 마무리 지은 점에서 스스로 뿌듯했다.
- 프로젝트를 하면서 협업 마인드를 배우게 되었다.
4-2. 아쉬웠던 점
처음해보는 프로젝트이다보니 기간내에 끝내야한다는 생각에 늦게까지 하다보니 빠르게 마무리되고, 시간이 지나고보니 우선순위 파악이 어려웠다. 다음 프로젝트때는 우선순위를 파악하고 전체적인 흐름을 파악해나가면서 작업을 해나가야겠다.
4-3. 위코드 한달간의 회고
프로젝트를 하면서 코드를 대하는 태도가 달라졌다. 그동안 위스타그램과 레플릿 문제를 접하면서 안풀리면
'나는 왜이렇게 못할까','이 직종이 안맞나'하면서 우울해했는데 이제는 우선 문제를 생각해보고, 검색을 하고, 그럼에도 안풀리면 질문을 하는 코드를 놓지 않는 태도로 바뀌었다.
한달 전 나의 모습과 생각한다면, 포기를 쉽게 하던 내가 팀원들에게 피해를 주고싶지 않은 마음이 크다보니 태도가 바뀌게 된 계기가 된 것 같았다.
결국엔 이러한 태도가 나에게 부정적인 영향은 끼치지 않는다는 점과 프로젝트로 인해 더 나아진 모습으로 변한 점에서 2주의 기간동안 아쉬웠던 부분보단 얻은게 많은 기간이 되었다.
