해결과제
동적 라우팅을 통해 데이터를 받아와서 화면에 출력하기
해결과정
배포된 서버와 연결을 한 뒤(백엔드 쪽에서 cors 설정을 해둬서 proxy로 우회하지 않아도 됐다) main page의 데이터들을 성공적으로 받아왔다.
여기까지 목데이터와 크게 다르지 않아서 쉬울꺼라 예상했고 자바가 응답을 보낼 떄 data의 객체로 감싸져 오는 것을 usefetech 자체에서 data까지 담아줘서 각 컴포넌트 단위에서는 바로 데이터 내부에 접근 할 수 있게 해뒀다!
프리 프로젝트때 data.data 이런식으로 접근하니깐 구별이 어려웠기 때문에..
메인페이지의 포스터, 아래의 설명을 클릭하면 해당 영화의 detail page로 이동해서 해당 영화의 데이터를 받아볼 수 있다.
하지만 여기서 path 값에 따라서 동적으로 라우팅 하는 것이 좀 어려웠다.
프리 때는 각각의 엔드포인트 안에서 query parameter로 연결이 되어서 다른 방식을 사용했었고, 이번에는 각 엔드포인트들이 path parameter로 되어있어서 useParams를 통해서 값들을 받아오는 걸로 했다.
그렇게 발생한 에러들
params를 보니 {id: undefined} 인 걸 확인해서 app.js를 확인해보니
연결된 path에 목데이터를 통해서 받아오던 라우트가 그대로 존재했다.
확인 후 변경
그럼에도 undefined 가 뜬다..?
나의 실수가 뭔지 또 파악을 해보니 {contentid}로 받아오니 undefined..
main page에서 detail page로 연결되는 부분에서 경로가 맞지 않는 에러가 발생했다.
content-id에 따라 값은 페이지는 제대로 찾아지는데
에러가 발생하고 들어오는 데이터가 없었다.
위의 에러 로그를 보면 object로 전달되기 때문에 접근을 못하는 것!
헷갈리지 않게 params 선언하고 params.contentId로 접근하니 데이터가 불러져왔다!!
이로써 동적 라우팅과 데이터 받아오기 둘 다 해결!!!
해결과정 요약
1.app.js 경로 수정
- path에 맞게 변경 되도록
:붙여주기
<Route path="/contents/:contentId" element={<Detail />}/>2. link to 경로 수정
<Link to={`/contents/${movie.contentId}`}>3. useParams 이용해서 parameter로 데이터 받아오기
-
parmas 자체가 객체이므로 데이터 접근을 잘 할 것!
const params = useParams(); const request = { method: "get", headers: { "Content-Type": "application/json" }, }; const [movies] = useFetch( `http://whatu1.kro.kr:8080/contents/${params.contentId}`, request );
역시 에러를 해결할 때는 콘솔을 이것저것 다 찍어보고 하나씩 순차적으로 해결하면 에러는 결국엔 해결이 된다...ㅎㅎㅎ
살짝 허무한 해결과정..? 이라고 할 순 있지만 useParams를 처음으로 사용해보고 목데이터 연결값이 달라서 그런 것이라.. 배우는 과정이라 생각하면 내 손으로 에러를 해결하는 것 만큼 짜릿한 건 없다!
결국 서버 연결하기 전날에도 걱정이 되긴 했지만
발생하는 에러가 많을수록 머리는 아파도 배우는 것도 많아지고 뿌듯함을 느끼는 순간이 많아져서 내가 개발 공부를 하고 있는 것에 후회는 없다!
근데 이걸 만약에 타입스크립트를 썼다면 발생하지 않을 수 있었을까..?
타입스크립트 공부를 꼭 꾸준히 하겠다고 마음을 먹으며..
아무튼
짜릿해!!!!!!!!!
