WIL-클론주차를 마치며

 

이번 주는 어떤 사이트를 정해서 클론코딩을 해보는 주차였다.

우리가 정한 사이트는 롯데 온의 토이저러스

 

 

완성 영상

 

 

 

기능구현

1.로그인, 회원가입 - 회원가입 시에 유효성 검사

2.메인페이지에 목록 뿌려주기 - 각 카테고리 별로 받은 데이터를 나눠서 리스트를 뿌려주었다.

3.장바구니 기능 - 아쉬운 부분 중 하나인데 장바구니에 담고 수량을 변경하는 것 까지만 구현되었다.

 

내가 맡은 부분

지난 주에 로그인, 회원가입 부분을 맡아서 진행했기 때문에 이번 주에는 다른 기능들을 익혀보고 싶었다. 

뷰작업- 로그인, 회원가입, 상세페이지 부분

기능부분- 메인페이지 리스트 뿌려주기, 상세페이지,  장바구니 페이지에서 수량 변경해주는 기능

 

 

Trouble shooting

• detail page에서 이미지를 불러올 때 크롤링된 이미지가 iframe이어서 비율이 맞지 않았다.

→ifame요소에 접근해서 이미지 비율을 변경해주려 했는데 스타일이 inline으로 되어있어 불가하다 판단하고 전체 화면 비율을 늘려주었다.

• map함수를 사용하여 리스트를 뿌려줄때 TypeError: Cannot read property 'map' of undefined 라는 에러가 났다.

→React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다.

→&&을 사용하여 조건이 참일 때만 실행이 되도록 변경해 주었다.

• 장바구니에서 수량변경을 할 때 수량 +-한 값을 dispatch한 다음 리덕스에서 수정한 데이터를 다시 받아오는 것으로 생각을 했었는데 데이터를 어떻게 화면에 다시 나오게 해야할지가 의문

→리덕스에서 +-된 값을 list배열에 추가해 준 다음 useSelector로 데이터를 받아 사용

 

두번째 협업

나는 팀운이 정말 좋은 것 같다..

이번 팀원 분들도 다들 정말 열심히 해주시고 프로젝트 완성을 위해 노력해주셔서 감사했다.

협업을 하는데 있어서 크게 어려움 없이 완만하게 잘 진행이 되어서 너무 다행이었다.

뷰작업이 많아서 처음 스코프를 짤 때만 해도 시간안에 다 끝낼 수 있을까 하는 마음이 있었는데 진행하다보니 그래도 시간을 많이 들이니 어느정도는 완료가 된 것 같다.

아쉬운 점이 있다면 장바구니의 기능을 완전히 구현하지 못한 점.

수량을 변경할 때 리덕스에만 데이터를 저장해 두었기 때문에 새로고침을 하게되면 데이터가 날아가버렸다.

+삭제기능을 구현하지 못했다....이건 정말 아쉬운 점이지만 그래도 열심히 노력한 결과물을 보면 만족감이 느껴진다!

 

같이 고생해주신 규화님, 민지님, 한울님 정말 감사드립니당:)

 

 

실전프로젝트 발제

클론코딩 프로젝트를 완료하자마자 실전 프로젝트에 돌입하게 되었다.

디자이너 분들과 팀원 분들을 만나서 기획 회의를 하고 오늘 하루를 마무리했다.

실전 프로젝트는 6주 동안 한팀으로 진행되는 거여서 많이 설레기도 불안하기도 걱정되기도 하지만

최선을 다해서 꼭 내 몫을 해내고 싶다.