6-5

오늘 내가 한 일

• 메모장에 대충 정리만 해두고 개발일지에 올리지 못한 부분 정리하고 한번 더 공부해서 올리기
• 페이지 단위 컴포넌트에서 자식 컴포넌트로 리덕스 데이터 불러온 것 보내주기
• 내가 할 수 있는만큼의 기능에 집중해서 끝내기

Keep

• 기억이 휘발 되지 않도록 그때그때 새롭게 알게된 것들을 메모장에 간단히 정리해두는 것
• 나 혼자서라도 기능을 다 건들여 보겠다는 의지

problem

• 메인페이지에서 특정 도서를 클릭하면 해당 도서의 아이디가 담긴 데이터가 날아와야 하는데 연결이 되지않아 상세페이지에 데이터를 못불러온다.(간단히 match가 안됐다고 보면 된다.)

Try

• match라는 걸 검색해서 어떻게 사용하는건지 알아보고 적용해 보았다.
• 그런데 어떤짓을해도 params가 정의되지 않았다고 해서 뭘까 하다가 혹시 메인에서 넘겨주는 id의값이 다른걸까 생각해서 콘솔에 useEffect를 사용해서 props의 값을 찍어보았고, 그 결과 history안에 id값이 다름을 발견 할 수 있었다.

Try를 통해 배운것

1. props.match.params.받아야하는 값 : 라우터를 이용하여 컴포넌트간의 데이터 넘겨주기
   (내 프로젝트에서는 도서의 id였다.)
   • match를 사용하기 전에 해당 컴포넌트에 들어온 props를 콘솔로 확인해야 한다.

       React.useEffect((params) => {
           console.log(props) },[] );
     //콘솔을 찍어볼때는 항상 useEffect를 사용해서 찍어봐야 한다.

   • 이렇게 찍어본 콘솔에 히스토리를 확인해 내가 받아와야 하는 값이 어떤건지 파악하고 사용해야 한다
     (받아와야 하는 값에 무턱대고 아무거나 넣어두면 안된다는 것이다.)
2. 왜 리덕스에서 .then과 .catch를 사용해야만 할까?
   • then을 사용하지 않으면 오류가 날 확률이 크다.
     만일 시간이 걸리는 일이 아닌데 then을 쓰지 않는다면 값이 undefined라서 오류를 보게된다. 지금까지 안썻는데 오류가 안나는 이유는 데이터를 받아오는데 시간이 걸렸기 때문이다.
     - then과 catch 어떻게 쓰지?

     const  getProductsFB= params => {
    return async function (dispatch, getState, { history }) {
      await getProductApi(params)
      //성공시
      .then((response_고정값)=>{
        console.log(res.data_고정값/product_ 내가 받아와야 할 값)
        //내가 받아와야 할 값이 뭔지 콘솔에 res.data를 찍어보고 필요한것만 추출해서 출력해본다. 만일 잘 들어온다면 바로 디스패치!
        dispatch(getProducts(res.data.product_콘솔에서 확인했던 값))
      })
      //에러발생시
      .catch((err)=>{
          console.log(err.response.data.msg)
        })
      }
  }

• 리덕스에 왜 async를 무조건 사용해야 할까??
  • 백에서 데이터를 받아오는건 무조건 시간이 걸리는 일이기때문에 받아올때까지 기다리라는 의미로 사용한 것 이다.

3. 모든 컴포넌트에서 리덕스를 호출할 필요는 없다.

• 리덕스 호출을 여러번 할수록 api의 호출이 여러번 일어난다. api의 호출은 최소화 할 수록 좋다.
• 부모에서 자식으로 다이렉트 전달이 가능한 상태흐름은 리덕스를 호출하기보다 props를 넘겨주는 방식으로 사용하는게 훨씬 좋다.
  • 페이지 단위의 컴포넌트에서 리덕스를 한번만 호출해 필요한 데이터를 모두 받아와서 자식컴포넌트로 받아온 데이터를 넘겨주면 된다.

4. api쪽에서 쓰는 param은 추가적인 데이터를 받아야 할때 사용한다.


• 예를 들어 detail에서 도서의 특정 ID를 보내줘야 할때 param을 이용해서 보낸다.

function getProductApi(param){
   		 return instance.get(`/novel/${param}`)
		}
	//여기에서 사용된 param이 바로 도서의 id부분이다!

 const Id = props.match.params.id(받아와야 하는 값)
 //부모컴포넌트에 리덕스 호출하기
 const dispatch = useDispatch();
 React.useEffect(() => {
    dispatch(productActions.getProductsFB(Id))
 },[] );
	
 //api에서의 param은 페이지 컴포넌트의 id와 같다고 보면된다.

 // 위의 디스패치 않에 Id라는 특정 param을 넘겼기 때문에 모든 도서의 정보를 불러오는게 아니라 내가 원했던 도서의 정보만 가지고 올 수 있다.

앞으로 해야 할 일

1. 지나간 일에 연연하지 말기
2. 클론코딩 내가 따로 배포해서 나만의 포폴 만들기(개인 깃허브에)
3. 주석을 달면서 조금더 보기 편한 코드로 고치고, 왜이렇게 짯는지 생각하기

오늘 하루를 마치며...

진빠진다. 더이상 엮이고 싶지도 않고, 같이 협업해나가고 싶지 않다.
본인들이 얼마나 잘하는진 모르겠지만, 내 코드를 평가하고 마음대로 자르고 갈아엎을 정도의 실력을 갖췄는지 묻고싶다.
그렇게 좋은 실력을 갖췄다면 왜 내가 해결한 오류들을 본인들은 해결 못했는지, 그것 또한 묻고싶다.
이런일이 반복되다보니 실력이 늘어도 프로젝트에 내 흔적은 남지 않아 더이상 해나갈 마음도 안생기고, 내 잘못인가 싶은 생각도 든다.
그만하고싶다.
하지만 끝까지 가기로 마음먹었기에 더 꼼꼼히 분석하고 공부해야한다.
굳세어라 혜원아. 할 수 있어! 많이 발전했잖아.