소스코드: https://github.com/skdding3/gr-commerce-Front
- 장바구니
장바구니에서 사용되는 기능에 대해 고민하고 1차적으로 장바구니 항목을 넣어보았다.
우선 제품에 대한 정보값이나 수량에 따른 가격 계산 그리고 총 주문 내역에서 나중에 할인이나 배송료 등 일단 기본적인 항목을 고려해서 배치를 시켰다.
이후 결제를 통해 넘어가게 되는 부분에 데이터가 어떻게 움직여질지 고민을 해봐야겠다.
- 데이터 요청과 전달 받기 위한 filter handling
필터링에 따른 원하는 항목이 노출이 되게끔 우선 구조적으로 핸들링이 가능하게 구성을 하였다.
- axios 세팅
위에 있는 내용과 동일선상 과정에 작업인데 데이터에 대한 response를 고민해서
구조적으로 틀만 짜두었다. 이후 실제 db에서 호출하는 작업을 다음 과정으로 진행하려한다.
- 회고
이번 작업은 페이지를 만드는 일에서, 데이터를 뿌려주는 부분에 대해서 고민하는 단계로 넘어갔다. 사실 이번 작업부터는 처음 겪는 과정이라 다소 작업 구상이나 어떻게 데이터를 전달 받고 요청할지 고민이 많은 단계라 다소 생각이 되어졌는데, 지난 프론트 프로젝트들과 달리 처음으로 백엔드와 협업을 겪는 부분이라, 어떻게 구성을 할지 다소 기대가 되는 맘으로 미팅을 진행했다.
사실 위와 같이 회원 가입툴을 프론트 페이지로 만드는 작업은 그리 어려운 부분이 아니였다. 그치만 의문이 드는 부분은 백엔드와 연결을 지었을땐, 어떻게 각 사용자마다 다른 뷰를 보여주게 되는 부분이 궁금해졌다.
백엔드는 현재 스프링 부트로 백엔드가 진행이 되고 있는데, 프론트에서 요청을 내려주면 백엔드에서 각 유저에 관한 보안에 대한 구조적인 이야기 (토큰값)가 진행되는데, 사실.. 구조적으로 이해하는거 같지만 굉장히 어렵게 다가왔다. 하지만 각 사용자 고유 인증은 이런 일련의 과정을 통해 이루어 지는 큰 그림은 그려져와서, 확실히 프론트쪽에서 크게 고민해본적없는 경험을 하게 되는부분이었다. 이후에 각 유저에 대한 쿠키값도 프론트에서 나중에 고려해야한다고 첨언을 들어서, 백엔드와 프론트에 경계를 두는게 아니라 조화롭게 이해하는 부분이 웹개발에서 필요하다는 부분을 경험했다. 굉장히 유익한 주차라고 생각이 들었다. 각기 다른 이해가 필요하다..(백엔드랑 사이좋게 지내야지~ 🫶)
