1.프로젝트소개

2차프로젝트는 클론코딩이었다. 우리가 선택한 사이트는 와이들리라는 홈페이지였다.
와이들리라는 회사는 면도기를 판매하면서 저렴한 가격에 제품을 제공하며 사용자소비자들에게 좋은인기를 얻으며 면도기뿐만 아니라 다른 제품들도 자사제품으로 만들어 공급 가격을 낮쳐 소비자들에게 제공하면서 성장한 회사이다.

2.프로젝트 기간

2023.09.18~2023.09.22 // 2023.10.02~2023.10.06 // 2주간 진행되었던 클론코딩이었다.

3.팀 구성 (TEAM COOP)

프론트엔드 3명 (이청원,박민재,김기영)
백엔드 4명 (정현우,고은채,차승혁,이준호)

🥸🥸6팀 와이들리🥸🥸

4.Communication

1.Trello : 각팀원당 할일 진행상황을 티켓관리를 통해서 공유
2.Git.hub : 깃허브를 통해서 PR을 올려서 피드백등 결과물 공유
3.Slack : 실시간 대화방을 활용하여 실시간 상황을 공유 할수있엇음

5.프론트엔드 분업

🐥메인페이지🐥 // 박민재
🐥로그인/회원가입🐥 //박민재
🐥상품리스트🐥 //이청원
🐥상품상세페이지🐥 //이청원
🐥장바구니🐥 // 김기영
🐥구매페이지🐥 // 김기영

6.제가 맡은부분과 느낀점 / 기억하고싶은코드

제가 맡은 역할은 상품 리스트 페이지와 상품 상세 페이지 부분을 맡았다. 항상 프로젝트를 진행하면서 컴포넌트의 재사용 재활용의 실패한다는점이다. 컴포넌트로 나누어 파일을 관리하나 재사용이 불가능한? 나만 사용이 가능한 코드로직이 되었고. 고민이 많은 부분이다 재사용과 재활용의 시각을 맞쳐로직을 짜다보면.. 하나의 코드로직의 많은 시간이 소비가 되고 짧은 프로젝트기간 동안 완성도와 컴포넌트 재사용화의 사이에서 항상 고민이 많았던 부분인거같다. 그리고 프로젝트를 진행하면서 기억의 남으면서 나를 가장 힘들게한 코드로직은 상품리스트 페이지를 구현하면서 짠 페이지네이션 로직이었다.

import React, { useEffect, useState } from 'react';
import './Pagination.scss';

const Pagination = (props) => {
  const { pageLimit, currentPage, setCurrentPage, totalPage } = props;

  const [pageArray, setPageArray] = useState([]);

  useEffect(() => {
    const arr = [];
    const startPage = Math.floor((currentPage - 1) / pageLimit) * pageLimit + 1;
    const endPage = Math.min(startPage + pageLimit - 1, totalPage);

    for (let i = startPage; i < endPage + 1; i++) {
      arr.push(i);
    }
    setPageArray(arr);
  }, [totalPage, currentPage, pageLimit]);

  return (
    <div className="pagination">
      <div className="paginationBox">
        {currentPage === 1 ? null : (
          <span
            className="arrow"
            onClick={() => setCurrentPage(currentPage - 1)}
          >
            {'<'}
          </span>
        )}

        {pageArray.map((num) => {
          return (
            <span
              key={num}
              onClick={() => setCurrentPage(num)}
              className={num === currentPage ? 'clicked' : 'notClicked'}
            >
              {num}
            </span>
          );
        })}
        {currentPage === totalPage ? null : (
          <span
            className="arrow"
            onClick={() => setCurrentPage(currentPage + 1)}
          >
            {'>'}
          </span>
        )}
      </div>
    </div>
  );
};

export default Pagination;

페이지네이션 로직 구성이고..! 재사용의 실패한 컴포넌트였다. 같은 팀원까지 사용할수있는 컴포넌트화 고민은 계속되어야할거같다. 그리고 상품페이지에서
상품을 특정 품목하나를 클릭했을때 쿼리스트링 , fetch , uesEffcet , useParams , searchParams Hook을 사용하여 처리하는것이 항상 어렵고 힘들었던거 같다. 가장 중요한 부분은 백엔드와의 데이터요청을 어떻게 요청 처리를 할것인지 고민을 많이 했던거같다.
결과적으로 검색기능구현 특정품목을 눌렀을때 그 품목의 데이터만 요청해 상품상세페이지에서 보여주는부분, 리스트페이지에서 카테고리별조회, 가격순 신상품순 필터기능구현, 상품상세페이지에서 상품의 고유의 id와 수량을 기영님이 맡으신 장바구니페이지로 데이터를 전달해주는것까지 완성 하였고 css hover와 cousur로 사용자가 클릭할수있는 부분과 없는 부분을 구분을 지어주어 마무리 하였다.

7.2차 프로젝트를 마치며....

😍좋았던점😍:1차 프로젝트보다 백엔드와 소통하면서 맞쳐가는부분이 좋았고 팀프로젝트를 진행하면서 팀협업의 중요성을 느낄수있어서 좋았다. 그리고 구현 하고자하는 검색기능, 상품리스트페이지, 상세제품리스트페이지, 필터링기능 , 페이지네이션 , 글로벌Nav바 까지 최종적으로 완성할수있어서 좋았고 무엇보다 백엔드 이준호님과 같이 소통하면서 중간지점을 찾아 양보하며 통신을 맞쳐볼수있어서 좋았다. 그리고 페이지네이션기능 가장 공을 많이 들였고 고민하는 부분이었는데 기능을 완성시킨부분이 가장 기억에 남는 부분인거같다. 그리고 팀대표로 발표도 할수있엇던 경험이 좋았고, 다른사람들에게 우리가 만든 페이지 만든 기능을 설명하고 이해시키는 시간도 좋았다.

😢아쉬웠던점😢:프로젝트는 진행하면서 아쉬웠던점은 팀원들의 시간약속이었다. 그리고 저랑 백엔드 준호님과 제외한 다른팀원들과의 소통 부재... 일단 팀원들의 약속시간을 못지키는 부분이 많이 아쉽웠던거같다. 팀원이 열심히 하지않았다는 뜻은아니지만 팀협업이 중요시되는 일이기때문에 기본적인 약속시간? 서로회의하는 미팅약속시간이 지켜지지않았다는점이다..그리고 플래닝미팅의 중요성을 크게두지않았다는점이 너무 아쉬웠다. (뒤늦게 통신을하는과정에서 쫓기는느낌?) 그리고 컴포넌트화를 실패했다기보단 재사용을 할수없는 컴포넌트 관리가 너무 아쉬웠다. 처음에는 컴포넌트화 재사용율을 높이자는 목표를 가졌지만 각자의 역할 티켓분배를 균등하게 못해서 업무량 초과로 실패하였고.. 개개인이 로직을 구성하고 거기서 각자의 로직에서 컴포넌트로 빼버리는 작업밖에 되지 않은 점이 아쉬웠고 결과적으로 프론트 끼리의 소통부재로 나의 개인적인 목표치는(AGILE) 달성했지만 팀적으로의 페이지는 완성하지못했고 결국 우리의 페이지는 절대 구매를 할수없는 페이지로 완성이 되었다. 각자의 진행상황 공유가 안되었고 공유를하기 위해선 스프린트미팅과 플래닝미팅의 중요성을 인지하지 못한 부분이 너무 아쉬웠던 부분으로 남는거같다. 결과적으로 우리는 AGILE 한 작업이 이루어지지 않았다는 점이다...

마지막으로 우리가 진행한 프로젝트 구현 영상을 마지막으로 2차프로젝트를 마친다.!