Keep 👏

react 와 redux-toolkit , jsonserver를 이용하여 CRUD 및 구현을 하였고 여러가지를 하면서 비동기에 대한 이해도, react state관리에 대한 이해도가 많이 늘었다. 하지만 아직까지 이해 못한 부분도 많고 공부 해야할게 많다.

React
redux-toolkit 라이브러리를 설치해서 상태관리를 하였고 리액트,리덕스 훅들을 사용해서 state들을 받아오거나 보내줬다. 다들 첫 프로젝트라 코드가 복잡하고 지저분 하지만 앞으로 꾸준히 공부해서 가독성 좋은 코드, 보다 효율적인 로직을 짤 것이다.

javascript
이번 프로젝트를 하면서 자바스크립트 문법의 중요성을 다시 한번 깨달았다. js를 공부한 시간은 많지만 더욱 깊게 알아야 할것들이 많다는것을 알게되었다.

코드컨벤션
어느 프로젝트를 하던간에 팀원들 끼리 규칙을 정할것이다.

Problem 🤔 & Try 🏃

• 상품 추천 (참조 타입과 setState) 기존 방식 ➡ 받아온 데이터 랜덤으로 뽑아내는 과정에서 상품의 name, price, image가 빈 배열로 출력되었다.

  // 상품 추천 랜덤 함수
  const Randomkimchi = [];
  
      let allKimchis = data;
      for (let i = 0; i < 4; i++) {
        let randomNum = Math.floor(Math.random() * allKimchis.length);
        Randomkimchi.push(allKimchis[randomNum]);
        allKimchis.splice(randomNum, 1);
      }
     console.log(Randomkimchi)

  문제점 ➡ 리액트는 배열이나 객체 데이터의 변화를 감지하여 정상 작동하도록 한다. push 참조 자료형의 가변 내장 함수를 사용하면 내부의 데이터는 변하더라도 그 주소값은 그대로 이다. 이것은 데이터 무결성 제약 조건 위배 에 해당하여 문제를 발생시킬 여지를 남긴다. 무결성을 유지하려면 기존 데이터를 수정하는 가변 내장 함수(push, unshift, pop, splice)를 사용하면 안된다. 해결 방법 ➡ 새로운 값을 기존 값에 push를 해주고 리액트가 변화를 감지할 수 있도록 새로운 배열을 만들어 state가 변경되었음을 인지하도록 해주었다.

  // 상품 추천 랜덤 함수
      const Randomkimchi = [];
  
      let allKimchis = data;
      for (let i = 0; i < 4; i++) {
        let randomNum = Math.floor(Math.random() * allKimchis.length);
        Randomkimchi.push(allKimchis[randomNum]);
        console.log(Randomkimchi);
        allKimchis.splice(randomNum, 1);
        console.log(allKimchis);
      }
      setRecommendedProduct(Randomkimchi);
    };

• 장바구니 페이지로 이동 시 스크롤 최상단으로 이동할때 기존 방식 ⇒ window.location.reaload()로 인해서 전체 페이지가 새로고침 되면서 재렌더링 됨.

  // components/Kimchi.jsx
  
  <Icon
    onClick={() => {
      navigate('/cart');
      window.location.reload();
    }}
  >

  변경 방식 특정 페이지 component 내부에서 scrollTo 메소드 사용 ⇒ 새로고침을 하지 않고 스크롤을 이동할 수 있음.

  // pages/Cart.jsx
  
  export default function Cart() {
    useEffect(() => {
      // 페이지 이동 시 최상단으로 스크롤
      window.scrollTo(0, 0);
    }, []);
  
    return (...)
  }

• 무한루프 error , state값이 초기화 안되는 버그

  Error 설명

  +, - 버튼 클릭 시 수량에 따라 값은 잘 출력 되지만 다른페이지를 이동 후 또는 밑에 페이지를 클릭 후 다시 해당페이지로 오면 price 값만 초기화 되었고 수량은 값이 그대로 남아있었다. + 무한루프 에러까지 발생....

  스크린샷

  

  시도

  시도1. 결국 많은 시도 끝에 useEffect 부분에 있는 독립성 배열에 들어있는 변수들을 다 지워 보기로 했다.

  useEffect(() => {
      getData();
      console.log(currentPath);
      if (currentPath === `/kimchis/${id}` || currentPath === `/kimchis/${id}/`) {
        navigate(`/kimchis/${id}/description`, { replace: true });
      }
    }, []);     // 원래는 currentPath, navigate,id,getData 이 들어있었음

  밑에 페이지 클릭시 해당 state값이 잘 남아 있다. 일단은 해결 했다.
  getData 때문인지 무한루프가 돌면서 무수한 에러를 뿜어냈었다. 배열을 비워서 한번씩만 랜더링 되게 다시 지정하였다.
  밑에 페이지 클릭시 해당 state값이 잘 남아 있다. 일단은 해결 했다.
  그치만 네브바 이동시 다시 접속하면 수량은 초기화 되지만 값은 그대로 담겨있었다 시도2. 팀원 분중에  네비게이트 훅을 사용 후에 window.location.reload() 를 통해서 페이지 이동시 스크롤 맨위로 이동 되는 로직이 있었다. window.location.reload()
  를 통해서 페이지가 새로고침 되면서 state도 초기화가 되었고 그 덕분에 정상적으로 해결할 수 있었다.

  onClick={() => {
                navigate('/cart');
                window.location.reload();
              }}

느낀점

• 김우상 이번 프로젝트는 꼭 1인분을 하고 싶어서 열심히 했던 것 같습니다 그만큼 뿌듯했고 그만큼 아쉬움이 많았던 프로젝트 였던것 같고, 설계를 잘해야겠다 라는 생각이 많이 든 프로젝트 였던 것 같습니다.
  
• 박진양 이번 프로젝트는 잘하고 싶은 맘이 컸습니다. 잘하고 싶은 마음과 부족한 실력 사이에서 큰 괴리감을 느껴 멘탈이 무너지곤 했습니다. 그럴 때마다 팀원들이나 다른 분들에게 도움을 요청하였고 하나하나 문제를 해결했습니다. 기능 구현하기 전에 어떻게 로직을 짤 것인지에 대해 적어보며 코드를 작성하였고 콘솔 로그에 값이 잘 들어오는 것을 보며 코딩의 재미를 조금씩 알게 되는 프로젝트였던 것 같습니다. 부족한 저에게 응원과 도움을 준 김치 팀원들에게 너무 고맙다는 말을 하고 싶습니다!
  
• 성효진 이번 프로젝트는 에러와의 싸움이었던 것 같습니다. 마음대로 안될 때 답답하기도 했지만, 에러들을 다 해결하고 멋진 프로젝트 결과를 얻어서 뿌듯합니다! 모든 팀원들이 프로젝트에 1인분씩 기여할 수 있어 과정도 즐거웠습니다. 특히 멋진 김치 디자인 만들어주신 팀원분들께 정말정말 감사합니다💗👍
  
• 유승민 드디어 프로젝트가 끝이 났습니다. 자바스크립트 문법도 많이 어려워 했던 저였기에 시작 전부터 제 자신에게 불안함을 많이 느꼈었는데 그래도 프로젝트를 성공적으로 끝마친 것 같아 너무 행복합니다…! 이번 프로젝트가 정말 크게 느껴지는 것은, 많은 분들의 도움을 받긴 하였지만 이렇게 직접 로직을 짜본 것이 처음이었기 때문입니다! 특히 제가 쓴 코드가 작동하는 걸 직접 보았을 때 말로 표현하지 못할 감동을 느꼈던 것 같습니다..! 아직 부족한 부분이 많지만, 프로젝트를 진행하면서 어떤 부분을 어떻게 공부해야 할지 깨달을 수 있어 정말 좋았던 것 같고, 좋은 팀원들을 만나 정말 많이 배우고 갑니다! 감사합니다!:)
  
• 이학경 저번 프로젝트때는 코로나에 걸려서 프로젝트 참여를 거의 못했었는데 그 한을 이번 프로젝트에서 푼것 같습니다. 처음 팀장을 맡아서 팀원 리드하는 법도 어색하고 정신 없었지만 항상 적극적으로 참여하고 따라와준 팀원들 덕분에 성공적으로 프로젝트를 끝낼 수 있었습니다.
  리액트로 처음 해보는 프로젝트라서 로직 하나하나 짜는데 한세월이 걸렸고 수많은 버그와 에러들을 만났습니다. 하지만 팀원들과 힘을 합쳐서 문제 해결을 했을 때 정말 보람찼고 실력도 많이 늘은것 같습니다. 요번 프로젝트기간동안 너무 재밌었습니다 kimchi 팀 forever