들어가기에 앞서

프로젝트를 위해 지금까지 달려왔다. 사람들과 협업하여 하나의 큰 결과물을 내는 경험은 조별과제의 업그레이드 버전인 게 아닐까 막연히 생각했다. 물론 그것보다 치열하고 더욱 존중이 필요한 일이었다. 빠듯한 기간 내에 할 분량이 조금 버거운 게 아닌가 싶다. 끊임없이 묻고 답해야 했고 그 과정에서 폐도 끼치지 않았나 돌아봐야겠다.

팀명 - 크로우즈세븐

구성인원

• FE: 염종은,유하은,박슬기,김완영,신윤지
• BE: 박상연,김민정

기술스택

• FE: JavaScript, ReactJs, react-router, HTML5, SASS
• BE: Python, Django, Bcrypt, MySQL, pyjwt

기간

2022.05.23 ~ 2022.06.03

클론한 사이트

크로우 캐년 - 식기를 판매하는 커머스 사이트

목표

협업 툴

• Git-Hub
• slack
• trello

trello를 이용한 초기 계획

• 메인 - Nav, UI, 자동 슬라이드, 캐러셀, full page, search 결과 페이지, footer
• 로그인 - UI, 토큰 관리
• 회원가입 - UI, 모두 동의 시 전체 체크박스, 유효성 검사
• 상품페이지 - UI, 제품상세페이지, 카테고리 구분, QuickShop 모달 창
• 장바구니 - UI, 수량수정, '제품 선택, 전체 삭제', '제품 선택, 전체 주문',
• 결제창 - UI, 주문완료 모달, 주소 받아오기
• 마이페이지 - UI, 내역 조회 페이지
• 주문내역페이지 - UI, 결제 후 제품 받아오기,
• 리뷰페이지 - UI, 상세리뷰페이지, 리뷰작성, 수정, 삭제, 작성 시 결제완료 물품 받아오기

1주차

멘토님께 물어본 결과 트렐로에 목표를 작성하기 전에 추가구현으로 넘어간 시작목표들이 많았다. 기간 내에 완성하기 힘들거나 성장에 도움이 안되거나 단순 노가다거나 하는 것들이었다.

초기세팅을 완료하고 각자 UI 작업으로 들어갔다. 브랜치명을 기준을 정하고 통일해서 만들었는데 후에 feature/작업내용 형태로 바꿔달라는 공지가 내려왔다. 컨벤션은 카멜케이스, 폰트, 패딩 등등을 대충 정했다. 이 점이 merge 후에 문제를 발생시켰다.

내가 맡은 부분은 테이블 형태가 대부분이라 구현이 빨랐다. 이때부터 로직을 짰어야 했는데 이해 못하는 개념이 많아서 작업속도가 상당히 느려졌다. 거의 질문하거나 검색으로 만들게 되었다. 트렐로에 api 명세서를 작성했다.

2주차

휴일이 중간에 끼어서 백과 연결하는 세션을 들은 후 멘토님들이 없어서 큰 어려움을 겪었다. 백엔드에 인원이 적다보니 프론트와 1:1 대응이 안되기에 인력이 달리는 현상을 많이 느꼈다. 기다림의 시간이 늘어났다. 백엔드가 너무 바빠서 말을 걸기가 미안했다.

주문내역 페이지는 백과 연결할 시간이 부족해 시연에서는 사라졌다. 나의 글 수정 기능도 api가 더 필요하다는 걸 뒤늦게 깨달았고 내가 구현하기에 너무 복잡했으므로 빠지게 되었다.

도움을 너무 많이 받게 되었다. 내 코드가 된 것 같지가 않고 타자연습, 또는 이해하기에 벅찬 코드들이 늘어갔다. 완성 후에 세션을 다시 보고 실습도 하며 이해하려고 노력하고 있다.

결과

시연영상

나의 구현부분

• fetch - get, post, delete를 사용하여 back과 데이터를 주고 받았다. back이 "SUCCESS"라고 메시지를 정해놓았을 경우, res.ok, res.success, res === "SUCCESS" 모두 잘못된 요청으로 넘어가고 사진에 있는 경우만 성공하는 것이 인상 깊었다.

• navigate - 글쓰기, 삭제, 상세페이지 등의 이동을 navigate로 처리했다.

• token - 토큰 유무에 따라 글쓰기 버튼을 나타났다 사라지게 했고, 토큰이 있어야만 POST가 가능하게 했다.

fetch 구현

• Mock Data

상수데이터와 하드코딩으로 백과 연결하기 전에 데이터를 보고 있었는데 이후에 수정이 어렵다는 피드백을 받고 사진과 같은 형식의 목데이터를 만들어 상세페이지와 전체페이지, 추천페이지에 동시에 적용했다. 같은 데이터를 쓰기 때문이다.

필터로 페이지마다 필요한 데이터의 수를 조절하거나 거르는 게 가능했다.

• params - 삭제할 리뷰페이지의 id 값을 상정하여 현재 위치한 게시글을 삭제한다.

• location - location.pathname에 저장된 주소가 변할 때만 리렌더링 한다.

페이지별 구현부분

잘한 점과 아쉬운 점

• 잘한 점 - 트렐로를 사용하는 법을 알게 되었고 깃도 전보다 다루는 능력이 늘어났다. 그리고 fetch api에 대해 많은 공부를 하게 되었다.

• 아쉬운 점 - 백엔드와 원활한 소통을 하지 못해 수많은 키 값 수정과 주소 수정이 있었다. 막바지에 작업이 몰려서 마냥 기다려야 하는 시간도 길었다. 초기 계획을 잘 세우는 일이 정말 중요하다는 걸 깨달았다. 기능들에 대한 난이도를 잘 알지 못해 처음에 세웠던 계획을 다 완성하지 못했다. 내가 모르는 점이 너무 많았고 팀원들의 도움을 지나치게 받아야만 했다. 다음번엔 내가 도움을 주는 사람이 되고 싶다.