컨버스 프로젝트 리뷰

1. 끝

지난 5월 1일, 약 2주간의(4.20 ~ 5.1) 프로젝트를 마쳤다. 프로젝트 시작 전, 컨버스에 작업할 페이지 양이 생각보다 많아 2주만에 끝낼 수 있을까 조금 걱정도 있었는데, 내가 담당한 파트들은 2주차 초에 끝내고 미뤄둔 자잘한 부분 수정과 함께 팀원들을 도우며 나름 성공적으로 끝낼 수 있었다! (정말 열심히 달려준 팀원들에게 존경과 박수를 보낸다)


2주간 작업한 결과물을 잘한점과 아쉬운점을 짚어보며 정리해보도록 하겠다.

2. 메인

잘한점

• 내가 가장 첫번째로 작업한 페이지다.
  위 페이지를 작업하면서 React의 컴포넌트 재사용성에 대해 정말 많이 익숙해질 수 있었다.
  
  위 메인 페이지의 render()다.
  
  ContentsContainer에 메인의 모든 신발 정보와 타일의 공간을 차지하는 사이즈 정보가 담긴 JSON형식의 객체를 전달한다.
  CommunityContainer는 하단의 CONVERSE COMMUNITY를 위한 인스타그램 정보 객체 instagrams를 전달한다.
  FloatingBar는 동영상에서 볼 수 있듯이 화면 우하단에 항상 존재하고 hover시 나타나는 컴포넌트다.
  
  
  컨버스의 메인 홈페이지는 4x2 사이즈의 총 8칸 타일이 하나의 제품군(section)으로 묶여있는 형식으로 구성되어있다. 그런데, 어떤 섹션은 4칸짜리 타일이 먼저 등장하고 어떤 섹션은 2칸, 1칸 타일이 먼저 배치되는 등 한마디로 정해진 규칙이 없다.
  
  그래서, 하나의 섹션은 8칸으로 구성되고 각 타일의 크기(1, 2, 4, 8)은 정해져 있다는 점에 착안하여 백엔드 팀원에게 API에서 보내주는 Json 데이터 객체에 타일의 크기를 포함해달라고 요청하였다.위의 Json객체를
  makeGroup() 함수를 통해 sectionHalf 배열에 총 합 size가 4가되는 배열을 담도록 하였다. 만약 타일의 size가 8이라면 한 section을 독차지하므로 역시 배열로 sectionHalf에 담아준다.
  이렇게 배열로 그룹지어진 contents는 ContentsContainer에 props로 전달된다.
  
  ContentNav는 section 등장 후 CHOOSE YOUR ICON 부분을 삽입하기 위해 넣어주었다.
  
  ContentFull은 8칸, section전체를 차지하는 원소 하나의 배열을 받아 아이템을 render하고 return해준다.
  
  ContentHalf가 props로 받는 배열의 원소로 makeGroup() 과 위의 this.state.contents.map() 에 의해 이미 1칸, 2칸, 4칸 짜리의 합이 4가 되는 배열이 담기게 된다.
  
  이렇게 contents의 배열안의 1칸, 2칸, 4칸짜리 아이템들은 차곡차곡 담겨 최대 크기가 4인 ContentHalf div를 채우고, 여러개의 ContentFull과 ContentHalf로 Main 페이지의 타일이 완성된다.
  React를 처음 사용해보는 데 나름 최선의 방법으로 React Component를 활용한 것 같아서 뿌듯했다.

• 컴포넌트를 쪼개고 쪼개다보니 Main.js에서 State가 저장되기도 전에 render()에서 자식 컴포넌트의 props로 보내져 빈 값에 접근해 에러가 발생하는 문제가 있었다. 에러메세지를 확인하니 componentDidMount()에서 State가 설정되기 전 render()가 먼저 실행되어 발생하는 문제라는 것을 알 수 있었다.
  당시, 프로젝트 초기로 시간적 여유가 있어 시간이 얼마나 걸리던 혼자 해결하려고 하였는데 알고리즘 문제를 풀며 자바스크립트의 &&와 ||연산자 활용법에 대해 찾아본 것이 떠올라
  
  위와 같이 setState()에 의해 배열에 값이 들어온 이후에만 자식 컴포넌트를 render() 하도록 하여 문제 해결을 할 수 있었고, 다른 페이지 작업에서도 유용하게 사용했다. 후에 찾아보니 Redux를 활용하지 않는다면 위와 비슷한 방법으로 처리하는 것이 일반적인 방법인 것 같다.

  더 단순한 방법으로는, [] && false를 하지 않고, return()에서 배열의 원소가 1개 이상일 때 컴포넌트를 표시하도록 할 수 있다.

아쉬운점

• Json으로 들어오는 타일을 객체를 분류하는 과정에서 sectionHalf는 4x2 사이즈 섹션의 절반인 2x2 만큼의 타일을 하나의 배열로 모아 담아주기 위해 sectionHalf로 명명하였는데,
  로직상 4x2 전체를 차지하는 8사이즈도 하나의 배열로 sectionHalf에 담아주는게 깔끔해 sectionHalf에 section이 담긴 셈이라 아쉽다.
  sectionHalf 대신 더 적합한 이름을 지어줄 수 있을 것 같다.

• 사실 처음에는 fetch("data/main_page.json")에 백엔드에서 보내주는 API주소가 들어있었다. API는 위의 main_page.json과 100% 동일한 형식으로 아무 문제가 없었는데, 규칙이 없는 메인페이지 특성 상 백엔드 멘토님이 이렇게 하면 백엔드에서 수작업으로 API를 만들어야한다고 프론트에서 하드코딩을 하라고 하셨다.
  허나 이미 만든 백엔드 API 와 프론트 로직이 있는데 메인의 수많은 타일을 한땀한땀 다시 만들긴 너무 비효율적이지 않는가. 그래서 아쉽지만, 백엔드API를 Mock data 형식의 Json으로 쓰기로 합의를 봤다.

• 실제 컨버스 홈페이지는 하단의 Instagram 사진들을 클릭하면 Modal이 나타나는데, 이번 프로젝트에서는 팀원들과 보다 핵심적인 기능 완성을 돕느라 구현하지 못했다.
  2차 프로젝트 때는 프로젝트 초기부터 팀원들의 진행상황을 체크하고 나도 더 많은 시간을 투자할 수 있도록 해야겠다!

• 1칸 혹은 2칸 타일에 동영상이 포함되는 div들이 있다. 포함된 동영상은 Image와는 비율이 달라 타일 블럭들의 높이가 일정하지 않은 문제가 존재한다.
  전체화면일 경우에는 max-height로 높이를 제한하고 object-fit:cover 속성으로 비율을 일정하게 맞출 수 있었는데, 높이가 max-height 보다 낮아지면 공백이 발생한다.
  동영상을 백엔드 API와 연동한 후에 적용하여 나중에 알게된 문제라 수정을 못해서 아쉬운데, 비율이 다른 것을 처음부터 알았다면 1칸, 2칸짜리 div를 감싸는 상위 div를 만들어 해결을 할 수 있을 것 같다. 다음 프로젝트 때는 발생 가능한 문제를 고려하여 더 꼼꼼하게 설계를!

메인답게 내가 담당한 메인, 제품정보, 매장정보 중에서 작업에 가장 많은 시간이 소요됬다.
그만큼 배운 것도 많고 기억에 남는 페이지이다.
내용도 길어져 제품정보, 매장정보 리뷰는 2편에서 쓰도록 하겠다.

Github: Converse-frontend