1차 팀 프로젝트 (디스커버리 클론코딩) 진행 중 '제품 리스트페이지 데이터'를 백엔드에게 받아오는 도중 알 수 없는 오류 때문에 하루를 꼬박 날렸다😭

⬇️ 디스커버리 제품리스트 이미지

상단/하단 모두 하나의 컴포넌트로 map을 이용해 재사용하였다.

문제는 목데이터를 이용하여 test를 했을땐 화면에 잘 보여지다가 서버와 맞춰보면 card들이 화면에 보이질 않았다. 부모요소에서 props로 받은 데이터를 알맞게 잘 넣었다고 생각했다.

//카드의 이미지 부분 로직
<img
key={id}
className={this.state.imgHover ? 'defaultImg' : 'hoverImg'}
alt="shoesCardImg"
src={ //삼항연산자 사용
this.state.imgHover ? image[1].image_url : image[0].image_url}
//배열로 이루어진 데이터에서 image[1]의 image_url를 가져온 것이다
/>

fetch주소, 키값 하나하나 다 따져보고 여기 저기 콘솔을 찍어봐도 이유를 찾지 못했다.render()아래로 콘솔을 찍어 데이터를 가져오는 것에도 문제가 없었다.가져온 데이터를 삼항 연산자에만 넣으면 계속 undefined이 떴다.

👿 문제는 백에서 넘어온 데이터의 배열 속에 빈배열이 있어서 이미지를 읽어, 렌더 되는 과정에서 계속 오류가 났던것.

🖍 피드백 후 오류를 해결한 로직

//조건부 렌더링을 이용해 문제 해결
{image.length > 0 && (
  //image.length가 0보다 클경우에만 아래 로직 실행
  //결과적으로 빈배열이면 아무것도 실행되지 않음
    <img
    key={id}
    className={this.state.imgHover ? 'defaultImg' :'hoverImg'}
    alt="shoesCardImg"
    src={this.state.imgHover ? image[1].image_url : image[0].image_url}
/>
)}

Hikicovery

🖥 CLONE PROJECT REVIEW

디스커버리 웹사이트 클론 코딩 프로젝트를 2주간(21.04.12 - 21.04.23) 짧게 진행했다.

프론트/백 각자 구현할 부분을 페이지 별로 나누어 매일 아침 데일리 미팅을 통해 작업 컨디션을 확인하며 스케쥴 조정을 했고, 다사다난했던 프로젝트는 AWS를 통한 배포까지 하나의 홈페이지를 완성했다.

⌨️ 기술 스택

frontend 3명HTML/CSS/SASSJavaScript(ES6+)React

backend 3명DjangoPython

⌨️ 협업툴

slackgitnotiontrello

💡 필수&추가 기능

팀원 모두가 처음 진행하는 협업 프로젝트였기 때문에 기간 내에 온전히 우리가 소화해 낼 수 있을 만큼 목표 설정을 하기로 했다.웹 홈페이지에서 꼭 있어야 할 뼈대들을 필수 기능으로 잡고 이외에 것들을 추가 기능으로 빼두었다.

필수기능

• 메인페이지플러그인 없이 구현한 slide배너 / navigation bar / sider bar
• 로그인 & 회원가입POST 방식을 이용한 회원가입 / localStorage에 담기는 access token 로그인 창
• 제품리스트 페이지제품 (신상품순,판매순,높은가격순,낮은가격순)필터링 / Pagination(Paging) / card hover시 간략한 정보 노출
• 제품 상세페이지상품 수량/사이즈/컬러 선택, 찜기능 / 리뷰 노출 및 필터링 기능

추가기능

• 장바구니 페이지장바구니에 담긴 제품 수량 선택 및 가격 측정
• 결제 페이지
• 결제 완료 페이지

⭐️ 칭찬 스티커

소통과 배려 굿굿

매일 아침 Daily Meeting을 가지며 Trello와 Notion에 진행상황을 기록하고 공유했다.미팅을 진행하면서 팀 전반적으로 백엔드에 비해 프론트엔드가 반템포 느리다는 것이 느껴졌다.프론트에서 처리하여 진행하고자 했던 문제를 백에서 처리 후 데이터를 보내주는 과정을 통해 남은 시간을 효율적으로 쓸 수 있었다.

🤝 상품 배열을 처리하는 과정에서 제품 리스트를 프론트에게 전부 보내주어 프론트가 정렬할 수 있지만, 백엔드에서 미리 페이지별로 정렬 후 fetch를 통해 데이터를 보내주고 프론트는 query string url을 사용하여 브라우저에 노출 시키면 됐다.

프론트의 진행 상황을 배려해 주는 백엔드 팀원들 덕에 차분히 하나씩 기능 구현들을 해낼 수 있었고 조금 더 작업 속도를 내게 되는 좋은 자극제가 되었다.

FRONTEND의 파트 분배와 초기셋팅

초기세팅 (협업툴 셋팅, 공통 Component 맞추기) 다음으로,필수/추가로 나누었던 파트에서 이제는 프론트끼리 각자 어떤 파트를 맡을 것인지 정했다.

전체 페이지의 난이도의 격차가 크게 없다고 판단한 우리는 각자 더 해보고 싶은 기능이 담겨있는 페이지를 선택했다.

git hub에 PR을 작성하고 merge 후 각자의 브랜치에 pull을 받는 부분에 윈도우-맥 사이의 알수 없던 충돌이 있었다.

첫날 이부분을 잡는다고 다름팀들에 비해 조금 늦게 작업을 시작했으나 작업 막바지에 각자의 작업물을 합쳐보는 과정에서 별 탈없이 순조롭게 작업이 진행되어서 첫날 작은 시간투자에 칭찬 스티커를 주고 싶다.

🤥 아쉬운 점

내가 소화해 낼 수있는 계획인가?

많은 것들을 잘 해내고 싶은 마음에 이것저것 하겠다고 했지만 마감시간은 다가오고 하나도 놓치고 싶지 않고..멘토님이 너무 급하다며 천천히 하라고 하셨지만 머리와 몸이 자꾸 따로 놀았다...ㅜ_ㅜ

mock데이터로 작업만 해오다가 백으로 부터 어떤 데이터를 받는지, 데이터 형식과 key값 어떻게 맞춰가야 할지 등 이전 작업환경과는 다른 환경에서 많은 정보들이 정신없이 머릿속으로 들어왔다.

한 줄 한 줄 정리하며 넘어갔어야 했는데 프로젝트 기간에 그러지 못했다.물론 주말 사이 하나하나 머릿속에 정리하며 다시 보는 중이다. (페이지별로 시리즈 블로깅 할 예정 )

온전히 내 것으로 소화 해낼 수 있는 계획을 세우고 무너지지 않도록 차곡차곡 많은 지식들을 쌓아나가는 것을 목표로 작업을 진행해야겠다.

➕➕) 직관적인 변수명과 함수명, sass 규칙적인 적용 잊지말자!

👩🏻‍💻 처음과 끝, 그리고 다음

첫 프로젝트로 처음 해보는 기능 구현들과 다양한 컴퍼넌트들이 합쳐지고 백엔드에게 데이터들을 받고, 당연하게도 많은 난관들이 있었다.팀에게 마이너스가 되기 싫었고, 또 많은 것들을 잘하고 싶었다. 그래서 질보다 양을 우선으로 작업을 진행했었던 것 같다.

멘붕의 멘붕이 터진날 어떻게하면 내가 좋은 컨디션으로 롱런 할 수 있을지 생각했다. 또 뭐가 문제인지도..🤮

❗️개발 공부를 처음 시작하면서 양보단 질을 우선순위로 두고 양을 늘려나가자 했던 다짐이 프로젝트하면서 무너졌다.

다시 초심으로 돌아가 내가 할 수 있는 만큼 하되 최선을 다하기로 했다.

현 상황에서 내가 시간 내에 꼭 할 수 있는 것과 그렇지 않은 것을 나눴고, 팀원들에게 공유했다.중간점검으로 우리팀은 현 상황에 대한 정확한 진단을 내렸다.첫계획 이후로 생각보다 더딘 진행상황에 앞으로 남은 기간동안 할 수 있는것과 과감히 버리고 진행할 것을 다시 분리했다.재정비하는 시간을 통해 다시 세운 목표는 무던히 해냈고 프로젝트는 마무리 되었다.

이번 프로젝트를 통해 나와 팀의 정확하고 현실가능한 목표설정과 너무나도 중요했던 소통을 배웠다.처음 프로젝트를 같이한 팀원들의 열정과 배려가 진짜 너무 감사했다👍

다음 프로젝트 포스팅에서는 칭찬스티커를 더 많이 주고 있는 나로 발전했음 좋겠다.