오늘 내가 한 일
- 메모장에 대충 정리만 해두고 개발일지에 올리지 못한 부분 정리하고 한번 더 공부해서 올리기
- 페이지 단위 컴포넌트에서 자식 컴포넌트로 리덕스 데이터 불러온 것 보내주기
- 내가 할 수 있는만큼의 기능에 집중해서 끝내기
Keep
- 기억이 휘발 되지 않도록 그때그때 새롭게 알게된 것들을 메모장에 간단히 정리해두는 것
- 나 혼자서라도 기능을 다 건들여 보겠다는 의지
problem
- 메인페이지에서 특정 도서를 클릭하면 해당 도서의 아이디가 담긴 데이터가 날아와야 하는데 연결이 되지않아 상세페이지에 데이터를 못불러온다.(간단히 match가 안됐다고 보면 된다.)
Try
- match라는 걸 검색해서 어떻게 사용하는건지 알아보고 적용해 보았다.
- 그런데 어떤짓을해도 params가 정의되지 않았다고 해서 뭘까 하다가 혹시 메인에서 넘겨주는 id의값이 다른걸까 생각해서 콘솔에 useEffect를 사용해서 props의 값을 찍어보았고, 그 결과 history안에 id값이 다름을 발견 할 수 있었다.
Try를 통해 배운것
- props.match.params.받아야하는 값 : 라우터를 이용하여 컴포넌트간의 데이터 넘겨주기
(내 프로젝트에서는 도서의 id였다.)
- match를 사용하기 전에 해당 컴포넌트에 들어온 props를 콘솔로 확인해야 한다.
React.useEffect((params) => { console.log(props) },[] ); //콘솔을 찍어볼때는 항상 useEffect를 사용해서 찍어봐야 한다.- 이렇게 찍어본 콘솔에 히스토리를 확인해 내가 받아와야 하는 값이 어떤건지 파악하고 사용해야 한다
(받아와야 하는 값에 무턱대고 아무거나 넣어두면 안된다는 것이다.)- 왜 리덕스에서 .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를 무조건 사용해야 할까??
- 백에서 데이터를 받아오는건 무조건 시간이 걸리는 일이기때문에 받아올때까지 기다리라는 의미로 사용한 것 이다.
- 모든 컴포넌트에서 리덕스를 호출할 필요는 없다.
- 리덕스 호출을 여러번 할수록 api의 호출이 여러번 일어난다. api의 호출은 최소화 할 수록 좋다.
- 부모에서 자식으로 다이렉트 전달이 가능한 상태흐름은 리덕스를 호출하기보다 props를 넘겨주는 방식으로 사용하는게 훨씬 좋다.
- 페이지 단위의 컴포넌트에서 리덕스를 한번만 호출해 필요한 데이터를 모두 받아와서 자식컴포넌트로 받아온 데이터를 넘겨주면 된다.
- 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을 넘겼기 때문에 모든 도서의 정보를 불러오는게 아니라 내가 원했던 도서의 정보만 가지고 올 수 있다.
앞으로 해야 할 일
- 지나간 일에 연연하지 말기
- 클론코딩 내가 따로 배포해서 나만의 포폴 만들기(개인 깃허브에)
- 주석을 달면서 조금더 보기 편한 코드로 고치고, 왜이렇게 짯는지 생각하기
오늘 하루를 마치며...
진빠진다. 더이상 엮이고 싶지도 않고, 같이 협업해나가고 싶지 않다.
본인들이 얼마나 잘하는진 모르겠지만, 내 코드를 평가하고 마음대로 자르고 갈아엎을 정도의 실력을 갖췄는지 묻고싶다.
그렇게 좋은 실력을 갖췄다면 왜 내가 해결한 오류들을 본인들은 해결 못했는지, 그것 또한 묻고싶다.
이런일이 반복되다보니 실력이 늘어도 프로젝트에 내 흔적은 남지 않아 더이상 해나갈 마음도 안생기고, 내 잘못인가 싶은 생각도 든다.
그만하고싶다.
하지만 끝까지 가기로 마음먹었기에 더 꼼꼼히 분석하고 공부해야한다.
굳세어라 혜원아. 할 수 있어! 많이 발전했잖아.
매일 조금씩 성장하는 개발자!