[React] Frietag 클론 프로젝트 후기

eslim·2020년 11월 26일
0

💻 Frietag 클론 프로젝트 후기

📆   작업 기간

  • 2020.10.05 ~ 2020.10.16 (12일간)

👩‍💻   팀원 구성

🛠   기술 스택

  • Python, Django
  • PyJWT, Bcrypt
  • MySQL
  • React, React hooks
  • Javascript(ES6+)
  • styled-component
  • Github
  • Trello

🖥   기능 구현 사항

  • 메인 페이지

    • navigation bar
  • 스토어 페이지

    • Google Map Library
    • Google Map Customising
    • faker.js, randomLocation Library
  • 회원가입, 로그인 페이지

    • Back-end API 통신
    • Validation
  • 상품 리스트, 상세 페이지

    • Category 제품 정렬, filtering
    • 각 제품별 상세페이지
    • Filter 기능 (Back-end API) 가격별 기능 추가
  • 장바구니 페이지

    • 상품 추가 및 삭제
  • 결제 페이지

    • 레이아웃(백엔드 기능x 문제로 레이아웃만 구현)

✍   내가 맡은 역할

  • 장바구니 페이지
    • 장바구니 레이아웃 구현
    • 장바구니 수량 count
    • 장바구니 수정, 삭제 기능
    • Back-end API 통신

👀   기록하고 싶은 코드

1. 컴포넌트 재사용

  • 장바구니 페이지 레이아웃에는 상품에 대한 정보가 담긴 리스트를 한 컴포넌트로 재사용하기 때문에 CartItem 컴포넌트를 map을 돌려서 재사용이 가능하게 해주며, 상품이 없을 때에는 상품 리스트가 나타나지 않도록 해준다.

  • count 의 경우에도 같은 컴포넌트를 재사용하여 함수의 id값과 index 값을 비교하여 각 해당하는 상품의 수량을 수정할 수 있도록 구현했다.

2. Back-end API 통신

  • 이번 2차 프로젝트에서는 백엔드 API 통신을 다양하게 해볼 수 있었다. axios 라이브러리를 사용하여 통신 구현. get, post, patch, delete 일 때 각각 다름 주의!

  • 장바구니 데이터 불러오기
  useEffect(() => {
    const fetchData = async () => {
      const {
        data: { cart_list },
      } = await axios.get(`${URL}/cart`, {
        headers: { Authorization: localStorage.getItem("token") },
      });
      setProducts(cart_list);
    };
    fetchData();
  }, []);
  • 장바구니 수량 수정
	const updateFech = async (btn, index) => {
    try {
      const result = await axios.patch(
        `${URL}/cart/${products[index].id}`,
        {
          cart_button: btn,
        },
        { headers: { Authorization: localStorage.getItem("token") } }
      );
    } catch (err) {}
  }; 
  • 장바구니 상품 삭제하기
const handleRemove = async (id, index) => {
    try {
      const result = await axios.delete(
        `${URL}/cart/${products[index].id}`,
        {
          headers: { Authorization: localStorage.getItem("token") },
        },
        {}
      );
    } catch (err) {}

    const temp = [...products];
    const filteredItems = temp.filter((item) => item.product_id !== id);
    setProducts(filteredItems);
  };
  • axios 에 관한 정리 내용을 따로 추가해야겠다...!

📌   2차 팀 프로젝트 후기

2차 팀 프로젝트로 FREITAG 웹사이트 클론을 진행했다. FRIETAG은 1993년 스위스의 그래픽 디자이너 형제가 만든 브랜드이며, Recycling이 아닌 Upcycling(단순한 재활용이 아닌 버릴 물건으로 뭔가 생상적인 것을 만들어 새로운 의미를 찾자는 개념으로 recycling과는 다르다)을 하자는 친환경 에코백을 판매하는 커머스 사이트이다.
팀은 프론트엔드 4명과 백엔드 2명, 총 6명으로 진행되었다. 그 중에서 나는 상품 장바구니 페이지 기능 구현을 맡았다. 장바구니 페이지에서 1차 때 아쉬웠던 부분인 백엔드와의 통신을 많이 해볼 수 있을 것 같아서 장바구니 페이지의 기능 구현을 맡았다. 실제로 장바구니 한 페이지에서만 get 요청, patch, delete 등 다양하게 해볼 수 있었다.

좋았던 점

  • 기능 구현
    2차 프로젝트 때에는 내가 PM을 맡아서 진행을 했고, 좀 더 책임감을 가지고 진행할 수 있도록 노력했다. 그리고 매일 아침 하루도 빠지지 않고, 스탠드업 미팅을 진행하며 진행 사항을 공유할 수 있도록 했다. 1차 때에는 제품 상세페이지를 해본 경험이 있기 때문에 같은 경험해본 페이지보다는 해보지 않은 페이지를 우선적으로 해보고 싶었고 1차 때 욕심을 냈었지만 구현하지 못 했던 기능을 해볼 수 있어서 좋았다.

아쉬운 점

  • 프론트&백엔드의 소통

    1차 때와 마찬가지로 전체적으로 백엔드와의 소통이 부족함을 많이 느꼈던 것 같다. 2차 프로젝트에서 특히 많은 문제들이 있었던 것 같다. 나는 장바구니 페이지 기능을 구현을 마치기 전 백엔드 장바구니 기능을 담당하신 분에게 데이터 구조라던지 키값을 꾸준히 이야기하여 기능 구현을 마쳐 Back-end API 통신이 어렵지 않았고, 1차 프로젝트 때보다 수월하게 협업이 이루어지고 있다고 생각했다.
    하지만 팀원들 중 몇몇은 미리 작업해 둔 Mock data와 발표 전 날 실제로 Back-end에서 나온 API의 데이터의 구조가 너무 많이 달랐고, 나는 발표 당일 새벽까지 밤을 새어 가며 함께 수정했었다.
    그리고 결국 발표 전날까지 전체 페이지를 이어 붙여보지 못 했고, 당일까지 프론트의 페이지 전체를 연결하지 못해 따로 발표하는 일이 벌어졌다...😓😓
    내가 처음 PM를 맡아서 진행했던 프로젝트였는데 내가 맡은 부분만 신경쓰느라 다른 팀원들에게 신경쓰지 못 한 것 같고 프로젝트를 잘 진행하지 못해 아쉬운 점이 많은 2차 프로젝트였다.

0개의 댓글