WECODE - 2차 프로젝트 회고 [WENABADA]

SeungMin·2022년 9월 11일

팀프로젝트 프로젝트

WECODE

목록 보기

18/19

프로젝트 이름

주제 : 번개장터
기간 : 2022 . 08 . 29 ~ 2022 . 09 . 07

프로젝트 팀

팀 이름 : WENABADA

번개장터가 중고거래 사이트라는 점에서 착안하여
관용구 아나바다를 이용해서 WENABADA라고 작명함

팀원 :
- FE
  
  박승민
  NavBar, Footer, 상품등록 페이지
  
  조민재
  소셜 로그인 관련 페이지, 상점 페이지
  
  문준기
  메인 페이지, 상품 목록 페이지, 상품 상세 페이지
- BE
  
  문정진
  소셜 로그인 관련 API, 검색 알고리즘 API, 추천상품 알고리즘 API, 상품 찜 API
  
  정재하
  내 상점 API, 카테고리 API(필터링), 상품 등록 API, 상품 상세 API

STACK

기술 스택

ERD

API Documentation

협업 도구 - Trello

현재는 프로젝트가 끝난 시점이라서 전부 Done 으로 넘어가있다..
각각의 Section 을 설명하자면

Backlog : 프로젝트에 끝내야 할 모든 티켓중 진행되고있지 않은 티켓이 위치한다.

To-Do : 이번 Sprint에 끝내야 할 티켓중 진행되고있지 않은 티켓이 위치한다.

InProgress : 이번 Sprint에 끝내야 할 티켓중 진행중인 티켓이.

InReview : 1차적으로 진행이 완료되고 PullRequest를 작성하고 merge를 기다리는 티켓이 위치한다.

Done : PR이 Submit 되어 Repositioy의 main에 merge된 상태인 티켓이 위치한다.

Minutes : Sprint첫날 PlanningMeeting 또는 DailyMeeting에서 이야기된 사안들을 기록해놓는다.

위의 Section들을 적극 활용하여 현재 진행률을 한눈에 파악하기 쉽게끔 정리하여
프로젝트 진행에 차질이 없게끔 진행하였다.

프로젝트 시연영상

이미지를 클릭하면 링크로 이동합니다!

구현 사항

상품 판매 등록 / FormData

내가 맡은 기능중 상품 등록 페이지에서는 상품의 정보를 기입하는 로직이 있다.
해당 정보중에서는 상품의 이미지도 포함되어 있는데, 한번에 같이 업로드를 해줘야 한다.

로컬에서 저장하여 처리하는게 아닌, BE의 DB에 실제로 파일정보를 넘겨주고
BE딴에서 S3기능을 이용하여 웹상에 업로드 한 후, 등록된 상품의 상세페이지에 접근할 때
상품의 상세정보 데이터를 넘겨받으며 이미지 주소를 같이 받아와서 페이지를 구현하는 방식이다.

내가 구현한 코드는 아래와 같다.

const handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('img',files[0].uploadedFile);
    formData.append('title',inputValue.title);
    formData.append('category',JSON.stringify(selectedCategoryId));
    formData.append('address',addressString);
    formData.append('price',inputValue.price);
    formData.append('description',inputValue.description);
    formData.append('userId', localStorage.getItem('token'));
    fetch(API.POST_PRODUCT, {
      method: 'POST',
      body: formData,
    });
  };

판매 등록 페이지에서 입력한 각각의 정보들을 한데 모아서 FormData에 삽입한 뒤
POST로 BE에 넘겨주는 것이다.

해당 코드의 fetch문에 왜 header가 없는지에 대한 이유는,
먼저 위의 함수는 상품 등록페이지를 하나로 묶는 form 태그의 submit 이벤트에 할당된 함수다.

form 태그에 enctype="multipart/form-data" 라는 구문을 넣어주게되면
전송할 데이터의 형식을 formdata라고 미리 알려주는 형태가 된다.

그리고 header를 선언하지 않거나, header:{} 처럼 선언한 뒤 통신하게 되면
위의 enctype에 의해서 자동으로 생성된 binary 코드가 뒤에 붙어서 전송되게된다.

자동으로 생성된 header를 보면

Content-Type: multipart/form-data; boundary=-----`-this-is-boundary`--

위와 같은 형태를 띈다, -this-is-boundary 부분에는 바이너리 코드가 들어간다.

이렇게 완성된 FormData를 콘솔로 찍어보면,

// 아래와같은 특수한 콘솔로그로 확인해야만 내용을 볼 수 있다.
// 브라우저 정책관련한 이슈로 간단하게 console.log(formData)의 형태로는 볼 수 없다.

for(const entries of formData.entires()){ console.log(entries)}

이렇게 생긴 데이터를 넘겨줄 수 있게된다.

NavDropdown

처음으로 드롭다운 메뉴를 구현해봤는데 마우스가 메뉴에 옮겨지면 순차적으로 렌더링되는 컴포넌트를
마우스가 건너가며 계속 onMouseLeave이벤트가 발생해서 애를먹었다.

해결법으로는 아직 렌더링되지 않은 나머지 컴포넌트를 모두 묶어서 하나의 Wrap으로 감싸고
해당 Div의크기를 BottomUp 방식으로 구현한 뒤 , 마우스 이벤트를 Wrap에 할당하면
새롭게 렌더링된 컴포넌트 또한 Wrap의 영역에 포함되기 때문에 드롭다운 메뉴가 사라지지않고 동작되었다.

노하우를 하나 찾았다고 생각한다.

회고

문준기
- 백엔드와 소통이 잘 이루어지지 않아 서로 다른 카테고리 id를 뒤늦게 통합할 시간이 없어 연산으로 돌아가게 한 점, 전역으로 카테고리를 바꿔주어야 할 때, 원활히 되지 않아 리코일을 뒤늦게 도입한 점, 게다가 자연재해 및 공휴일로 더 적어진 시간 때문에 리팩토링에 신경 쓰지 못해 완성도 높은 코드를 구현하지 못한 점이 아쉬웠다.
- 그래도 팀 프로젝트에서 상태 관리 라이브러리를 사용하여 원리 및 이점을 크게 체감하였고, 1차 프로젝트에서는 하지 않은 여러 알고리즘과 통신들을 한 점이 좋았다.
조민재
- 좋았던 점 : 스타일드 컴포넌트와 리베이스를 바로 배워 바로 사용하는 것이 쉽지는 않았지만, 현업에서 충분히 일어날 수 있을만한 일(급히 새 기술을 배워 실사용)을 경험할 수 있는 기회였다고 생각합니다. 소셜 로그인 API 사용은 어렵고 재밌었어요. 새로운 거 해볼 수 있어서 즐거웠습니다.
- 아쉬웠던 점 : 분명히 좀 더 효율적인 코드로 구현할 수 있을 것 같은 부분임에도, 시간 부족과 경험 부족, 실력 부족으로 더 나은 퀄리티의 코드를 뽑아내지 못한 점이 너무 아쉬웠습니다. 그리고 코드 치기 전에 충분히 백엔드와 소통이 이루어져야 했음을 깨달았습니다.
  무엇보다, 자기가 맡은 일에만 너무 몰입되어 프로젝트 전체와 팀원들의 일에 신경을 많이 쓰지 못했던 것에 대해 반성하고 있습니다.
문정진
- 좋았던 점 : 이번 프로젝트에서는 1차 때 사용하지 않은 외부 api도 사용하고 (카카오 소셜 로그인) aws를 통해 실제 배포도 해보고 (EC2, RDS) 기업 협업 전 큰 경험을 했다고 생각한다.
- 아쉬웠던 점 : 1차 때 했던 경험이 있어서 2차 때는 계획을 잘 세웠다고 생각했지만 오산이었습니다. 리뷰 이슈, 화재 이슈, 태풍 이슈 3개의 이슈 덕분에 마지막 날 밤을 새웠습니다. 시간 배분과 일정 관리를 더욱 타이트하게 짜지 않았던 점이 아쉬웠습니다.
- 배운 점 : jest를 사용하여 실제 내가 만든 api를 테스트해 보면서 테스트의 중요성을 배웠고 프로젝트를 2번 하면서 제일 중요한 소통 능력을 배웠습니다.
정재하
- 플로우에 따라 차근차근 작업을 진행했어야 했는데 조급한 마음에 연관된 페이지를 맞물려 작업을 하다 보니 기능 구현 면에서 놓치는 부분도 많았고, 작업 효율이 떨어져서 아쉬움이 많이 남는 것 같습니다.
- 그래도 블로커였던 S3를 이용한 이미지 업로드 기능 구현을 성공하여 좋은 경험이 되었던 것 같습니다

마치며..

1차 프로젝트에서 겪었던 스프린트별 티켓 분배의 아쉬움을 2차에서는 겪지 않겠다고 다짐했었는데 다른 부분에서 비슷한 느낌으로 이슈가 있었다.. 티켓을 전부 처리했지만 리뷰를 받는 데에 있어서 너무 오래 걸렸다.
추가로 이런저런 사유들이 2주 차에 한 번에 몰려들어 스노우볼이 굴러가버렸다 마지막에는 손쓸 방법이 없는 코드를 트러블슈팅 하고자 치트키로 Recoil 라이브러리를 도입하는 지경에 이르렀는데, 어찌어찌 프로젝트를 완료해서 다행이지만 완벽한 프로젝트라고 말할 수는 없었다.
오히려 이런 과정을 겪어서 프로젝트답다고 생각한다, 또 처음으로 FormData를 사용해 봤는데, 적용하는 과정에서 여러 가지 정보를 접하고 부수적으로 지식을 많이 얻어 간다고 생각한다. FormData의 형식, fetch의 header에 붙는 binaryData라든지 처음 알게 되는 지식을 많이 얻어 갈 수 있었다.