오늘은 조금 긴 하루였다. 장거리 이동이 있었던 날이라 몸은 천근만근이었고, 집에 돌아오니 허리 통증이 꽤 심했다.
그래도 아이들을 재우고 나니 다시 '개발자 모드'가 발동했다. 피곤함을 뒤로하고 조용히 컴퓨터 앞에 앉았다.
🎬 영화 상세 페이지(Detail)와 useParams의 만남
오늘의 핵심 과제는 영화 목록에서 특정 영화를 클릭했을 때 보여줄 **상세 페이지(Detail Page)**를 만드는 것이었다.
- useParams 활용: 리액트 라우터(React Router)의 useParams를 사용해 URL 파라미터에서 영화의 고유 id를 받아오는 로직을 짰다.
- 동적 데이터 바인딩: 받아온 id를 가지고 해당 영화의 정보를 API에서 다시 호출해 화면에 뿌려주는 과정이 핵심이었다.
🛠️ 디버깅: "왜 안 나오지?"에서 "찾았다!"까지
처음에는 코드를 다 짰는데도 콘솔에 데이터가 찍히지 않아 조금 당황했다.
하지만 배포까지 성공해 본 짬(?)이 어디 가겠는가. 침착하게 API 호출 주소와 전달되는 id 값을 하나씩 대조해 봤다.
결국 주소 설정의 작은 실수를 발견했고, 수정하자마자 상세 화면에 영화 정보가 예쁘게 나타났다.
이렇게 흩어져 있던 데이터들이 하나의 화면으로 연결되는 순간, 코딩의 진짜 재미를 느낀다.
이 맛에 피곤해도 키보드를 두드리는 게 아닐까?
🏁 완강까지 남은 강의는 단 4강!
이제 이 영화 앱 클론코딩 강좌도 딱 4강만 남겨두고 있다. 끝이 보이기 시작하니 아쉬우면서도 설렌다.
오늘 하루는 장거리 이동에 육아, 그리고 공부까지 정말 밀도 있게 보냈다.
몸은 조금 피곤하지만, 욕심내지 않고 딱 목표한 만큼 해낸 나 자신에게 박수를 보내고 싶다.
"조금씩, 하지만 꾸준히."
오늘도 하나를 더 배웠고, 내 손으로 무언가를 하나 더 만들었다. 이 정도면 충분히 값진 하루다.
내일은 남은 4강을 마무리하고 영화 앱을 완주해보려 한다!
#리액트공부 #ReactJS #useParams #API연동 #영화앱만들기 #프론트엔드개발 #개발일기 #꾸준함의힘