1차 프로젝트 회고록

프로젝트 시작

어느덧 벌써 한달. 이제는 선릉역 10번출구에 매일 가는것도 당연하게 받아들여지고
어색했던 동기들 이름이 이제는 얼굴만 봐도 대부분 알게 되었다 처음과 비교하면 시작했을때 보다 달라졌고 성장한게 분명하지만, 여전히 불안하고 나에 대한 확신이 없었다. 그럼에도 시간은 빠르게
흐르고 벌써 1차 프로젝트를 시작한다고 하니 나와 같은 팀원들에게 피해를 줄까봐 덜컥 겁이 많이 났었다.
하지만 나만 그런게 아니겠지란 생각으로 그냥 부딪혀보자는 심산으로 시작하였다.

클론 사이트

반려소반

1차 프로젝트로 클론하며 기반으로 삼은 사이트는 프리미엄 천연 펫푸드 브랜드 반려소반 이었다.
해당 사이트는 전체적으로 색상이 많이 들어가지 않은 Ui와 딱 적절한 기능만 필수적으로 잘 구현되어있는
사이트처럼 보여서 시작하기에 앞서 상당히 마음에 들었다.

기간

2022.05.23 ~ 2022.06.03

2주동안 페이지 별로 나누어서 각자 맡은 파트를 진행.

인원

프론트엔드 엔지니어 4명

백엔드 엔지니어 2명

기술스택

• Front-end: HTML/CSS , Javascript , React.js , Sass

• Back-End : Python , Django

협업도구

트렐로

우리는 서로의 진행사항과 구현 목표들을 공유하기 위해 Trello 를 활용했다.
다들 아무해도 처음으로 만져보는 툴이어서 해당 도구의 많은 부분을 이용하지는 못한 기분이다
초반에는 본인 목표하는 기능들만 나열해놓은 느낌이었고 딱히 자주 들어가서 확인하지도 않은 분위기였다
그래서 그런지 프로젝트 진행내내 가장 많이 지적받은 부분이 해당 도구를 잘 활용하지 않는 다는 지적과 함께
소통의 부재로 인한 문제가 여러번 발생하였다.
그래도 점점 시간이 지나면서 소통의 필요성이 점점 발생하면서 본인의 현재 상황과 구현하고자하는 목표를 공유하면서 초반보다 프로젝트 진행속도가 많이 개선 되었던거 같다. 결과론적으로는 해당 도구에 대한 어색함으로 이번 프로젝트를 진행하면서 잘 활용하지 못했다는 아쉬움이 크다.

내가 구현한 페이지

Nav

나는 장바구니 페이지와 해당 페이지에 전체적으로 따라오는 Nav Bar , Footer를 함께 만들기로 했다.
시작하기에 앞서 반복되는 UI가 있으니 기본적인 HTML 레이아웃을 짜고 map()함수를 통한 카테고리를 복사하기만 하면 되겠지란 생각으로 시작하였으나 해당 알고보니 Nav바에서 모든 페이지가 이동이 가능하게 기능을 구현해야하고 반복되는 카테고리 안에 또 세부적으로 카테고리가 들어가 있어 map()함수안에서 다시 한번 map()을 써야하는 상황, 그렇기에 목표했던 기간을 초과해서 Nav에만 내가 메달리는 문제가 발생하였다

정작 장바구니 페이지는 레이아웃도 만들지 못하고 우리 팀의 전체적인 속도도 늦어지고 있었고 해당문제는 우리팀만의 문제가 아니고 여러 팀에서 발생하는 문제였어서 , 진행도중 회의를 진행하였고 대부분의 작업이 끝나가는 메인페이지를 담당하는 경연님과 철회님께 해당 부분을 넘기고 Footer 와 Cart 초기 레이아웃에 들어갔다.

Nav는 우리가 구현하고자 하는 모든 사이트에 공통적으로 따라오고 그렇기에 모든 페이지를 만들때 해당영역을 비워두고 시작해야하기에 작은 부분이지만 가장 어렵던 기능구현 중에 하나라는것을 깨달았다. 결국 전체적인 레이아웃과 디자인은 내가했지만 , 기능적인 부분은 팀원들이 전부 머리를 싸매서 해결하였다. 소통과 협업을 중요성을 느끼게 뼈져리게 느꼈던 순간이였다. 팀원들에게 늘 감사하다

Footer

footer에 대한 부분은 크게 부담없이 반려소반 사이트의 전체적인 레이아웃과 Css를 기준으로 텍스트와 색깔만 바꾸어서 사이트와 전체적으로 어울리게만 꾸며서 바로 깃허브에서 리뷰요청을 진행하였다. 다른 사이트에 비해서 기능적으로 들어갈게 전혀없고 인스타그램 페이지와 연동되는 링크만 걸면 되는거라 어렵지 않았다. 주로
css의 플렉스를 이용하여 박스 위치를 조정하며 구현했다.

footer.js

footer.scss

Cart

내가 메인으로 맡은 페이지는 장바구니이다.
처음에는 눈에 보이는 기능이 많이 없어보여 상대적으로 수월하게 진행할수 있을줄 알았으나, 상품이 담겨져있을때와 없을때의 UI가 다르다는것을 알았을때 부터 어떻게 시작을 해야할지 고민하는 시간이 상당히 길었다.

결국 떠오른 방법은 데이터가 담겼을때를 가정해서 Mock 데이터를 작성해서 UseEffect와 fetch를 활용하여 해당 데이터를 초기값을 빈배열로 만든 State에 담고자했고 배열의 길이가 0일때와 아닐때 보여주는 컴포넌트를 다르게 만드는것으로 시작했다

Cart컴포넌트는 최상이 컴포넌트이며 setartList()통해 CartList배열에 담기는지를 우선 확인한다 length가 0일때를 Empth의 변수의 담아서 해당 조건이 맞으면 삼항연사자로 통해 EmptyUi가 보여지고 아니면 상품이 담길 컴포넌트인 ListOn이 보여진다

total변수에는 length를 그대로 담아 상품의 갯수를 보여지는 ui도 표현했다.

해당 데이터들은 자식 컴포넌트에서도 계속 사용해야하기에 필요한것들은 props를 통해 전달해주었다.

List On

ListOn은 데이터들이 담길 컴포넌트를 감싸고 있는 컴포넌트이다
우선은 HTML로 기본적인 틀을 마련하고 상품리스트들이 담길
table부분에 map()활용하여 반복적인 UI를 cartList의 갯수 만큼 보이게 만들었다.

또한 상품들의 가격이 보여지는 계산수식이 필요하기에 해당 부분도 틀을 짜고 useState와 삼항 연산자로 보여지는 금액이 조건에 따라 상품총합 혹은 배송비 3000원이 포함된 상품총합이냐를 보여지게 틀을 마련했다.

원래는 State의 함수를 통해 자식에서 올라오는 계산수식을 이용하면서 더 복잡했었는데 backEnd에서 아예 계산이 다 되어져있는 데이터 {totalBill} 를 넘겨준다고 해서 간편하게 수정했다

나중에 떠오른 아쉬운점이 있는데 숫자에 가독성이 있게 ,가 나오게 했어야 했는데 정신이 없어 구현하지 못했다..

List

List컴포넌트에서는 각 상품리스트의 체크박스에 접근하는 기능과 상품의 수량의 변화에 따른 가격의 계산하는 기능 , 삭제버튼을 구현했다. 대부분 props 로 전달받은 함수를 통해 위쪽으로 넘겨주는 방식으로 진행했는데 기능 구현 하는데 상당히 애를 많이 먹었다. 왠만하면 상위 컴포넌트에서 관리하는 식으로 진행하는게 좋다고 말씀 많이 하셨다. cartList 배열에 들어오는 객체의 키값 (item...)을 활용하여 쉽게 구현할수 있었다.

• 수량버튼 조절

• 해당 함수를 +/-버튼의 온클릭 이벤트에 전달했다.
  

• 삭제버튼 구현

• 복사본을 만들어 splice함수를 써서 해당 항목을 삭제하였고

• 셰터함수를 통해 CartList에 전달하였고

• 해당항목이 삭제되면 총합에서 해당항목의 값을 뺴주는 함수를 만들어 x버튼에 온클릭이벤트로 전달

프로젝트 구현 영상

내가 공부하고 배워온것들을 토대로 드디어 개발을 하였다. 해당 프로젝트를 하면서 어떤식으로 진행하여야 효율적으로 코드를 짜고 로직을 만들어야할까 고민을 많이 했다. 내 자신이 부족하여 할수 있을지 참 많이 걱정했지만 팀프로젝트인 만큼 팀원들이 많은 도움과 가르침을 주었다. 내가 생각해낸 코드가 정상적으로 출력되고 실행이 될때마다 느꼈던 짜릿함이 아직도 잊혀지지 않는다. 내가 아직 모르는게 많구나 라고 느끼는 순간도 많았지만 오히려 내가 이걸 만들었다니라는 순간도 많았다 자신감은 자신감대로 얻을수 있었고 부족한 점은 명확히 알수 있게 해준 좋은 경험이였다. 팀원들의 도움도 정말 많이 받았다 단 한사람도 안고마운 사람이 없다. 모두 즐겁게 목표했던 기능들은 다 구현한것 같아 너무 좋았다.