OSULLOC_Basket

Jungyub Song·2020년 6월 6일
0

첫 번째 프로젝트에서 내가 맡은 마지막 페이지는 장바구니였다.
비교적 간단한 구성이라 HTML/CSS에 시간을 크게 들이지는 않았지만, 이제까지 했던 signup, navbar에 비해서 기능구현이 많아서 개인적으로 재밌게 작업했던 페이지이다.

  1. 구현 페이지

  2. HTML

    Basket Page

Basketfeeds Component

Basket 페이지 내에서도 백엔드로부터 정보를 받아 업데이트 시켜줄 제품 피드 페이지(현재 담긴 상품이 없는 부분)는 컴포넌트로 나누어 작업하였다.
크게 header, section(table), footer로 나누어 구성하였으며, 가장 주가 되는 section(table) 부분에서 피드 부분을 Basketfeeds로 컴포넌트화하였다.

section은 table 태그를 사용하였는데, div로도 충분히 구현이 가능했지만, 이론 상으로만 공부하고 실제로는 처음 사용해보는 table 태그를 사용함으로써 익숙해지고 싶었다.
t-head 부분을 6개의 cell로 나누고 t-body 부분은 전체를 한 개의 cell로 채우고 싶었는데, 그게 잘 되지 않았다.
해답은 colSpan이었으며, t-body부분에 colSpan="6"을 주니 6개의 칸이 하나로 합쳐지는 것을 볼 수 있었다.

  1. CSS
    CSS 부분에서 크게 어려웠던 점은 없었으며, 장바구니에 담긴 제품이 없을 때에만 숨겨두었던 html이 나올 수 있도록 display: none과 block으로 className을 변경할 수 있게 만들어두었다.

  2. Javascript

  • componenetDidMount에서 get method를 통한 fetch 함수
    첫 장바구니 페이지 진입, 혹은 페이지 리로드 시 해당 데이터를 먼저 받기 위해 componentDidMount 부분에 fetch 함수를 넣었고,여기에서 받은 데이터를 빈 array에 넣어 component 및 부모 component에서 필요한 부분에 map으로 뿌려주었다.

  • +, - 버튼 클릭에 따른 fetch 함수
    상품 주문 버튼을 눌렀을 때에만 backend에 제품 id 및 수량 정보를 알려주게 되면 중간에 장바구니 페이지를 나갔다 들어왔을 때 backend에서 저장한 것이 없기 때문에 장바구니 정보가 초기화되게 된다.
    이를 방지하기 위해 수량에 대한 +, - 버튼을 누를 때마다 patch method로 fetch 함수를 호출하게 하여 backend에게 제품 id 및 수량 정보를 전달해주고, 이를 바탕으로 데이터베이스에서 로직을 통해 바뀐 수량에 대한 가격을 다시 보내주기로 하였다.
    이 변경된 값을 받기 위해 get method를 한 번 더 사용해야 했으며, 이렇게 자주 사용되는 get method를 함수화하여 patch가 실행되고 res.status === 200 값을 받았을 때 바로 get method fetch가 호출될 수 있도록 하였다.

  • 제품명 클릭시 제품 디테일 페이지로 이동
    URL parameter를 사용하여 미리 Routes.js의 detail 페이지 경로 부분에 /:id 값을 설정하였고,

    onClick={() => this.props.history.push(`detail/${id}`)}

    해당 함수를 콜백 형태로 입력하여 제품명을 클릭하였을 때 해당 제품의 상세 페이지로 이동하도록 하였다.

  1. 배웠던 점
  • 삼항연산자
    이번 프로젝트를 진행하여 className에 대한 state 관리를 주로 사용했다.
    이 때에, 굳이 this.state 부분에 className을 직접 넣어주었고, 함수를 통해 setState를 할 때에도 className을 직접 다 넣었기 때문에 코드 자체가 길어지고 지저분해 보였다.
    삼항연산자를 사용하여 state 값을 true/false로 관리하고, JSX 부분에만 className을 적으니 코드 자체도 깔끔하고, JSX 부분을 볼 때에도 className을 바로 볼 수 있어 훨씬 가독성이 좋아졌다.

  • destructuring의 습관화
    destructuring 역시 코드를 깔끔하게 유지할 수 있는 좋은 습관이다.
    컴포넌트화를 하면 할수록, 페이지가 복잡해질 수록 props가 많이 생기고 관리해야 할 state 값이 많아진다.
    JSX 부분에 이 많은 this.state / this.props를 사용하면 차후에 코드를 볼 때에도 더 시간을 많이 잡아먹게 된다.
    애초에 return 직전에 destructing을 통해 이러한 부분을 JSX에서 간결하게 만드는 것을 습관화하여 2차 프로젝트를 진행할 예정이다.

  • commit과 pull request를 주기적으로 하자
    이 부분은 나 뿐만 아니라 팀원들 모두가 협동해야 하는 부분이라고 생각한다.
    이번 프로젝트같은 경우는 모두 첫 프로젝트이다보니 commit과 push의 중요성을 잊고 모두 어느정도의 결과물이 나와야만 pr을 보내는 식이었다.
    이렇게 되다 보니 프로젝트 마지막 날이 되어서야 방대하게 modified된 master를 merge해야 했고, 각자의 branch에 merge하는 과정에서 일어난 충돌 중에 예기치 못한 파일 삭제 같은 것을 야기시켰다.
    이러한 경험을 통해 commit과 pr에 대한 중요성을 알게 되었고 항상 마음 속에 두고 프로젝트에 임하려 한다.

0개의 댓글