[React] Marvel 캐릭터 소개 페이지 만들기

✅프로젝트 개요

이 프로젝트는 노마드코더의 'REACT 10주 챌린지' 첫 번째 과제로 만든 것이다. 
Marvel 캐릭터를 소개하는 간단한 애플리케이션으로 React를 이용해 만들었다.

 

주요기능

• 캐릭터 목록 조회: 메인 페이지에서 Marvel 캐릭터 목록을 확인할 수 있습니다.
• 캐릭터 상세 정보: 특정 캐릭터를 클릭하면 상세 페이지로 이동하여 더 많은 정보를 볼 수 있습니다.
• 로딩 컴포넌트 적용: 데이터 로딩 중에는 로딩 화면이 표시되어 사용자가 흰 화면을 보지 않도록 했습니다.
• 반응형 디자인: 다양한 디바이스에서 원활하게 동작하도록 반응형 CSS를 적용했습니다.

---

✅코드

• [깃허브]
  https://github.com/suyeonMin/Movie-app

GitHub - suyeonMin/Movie-app

• [배포 사이트]
  https://suyeonMin.github.io/Movie-app/

React App

 

---

✅이슈

1. <Switch> 삭제(App.js)

강의에서 사용된 React-router-dom의 Switch는 v6로 넘어오며 삭제되었다. 강의자료에서는 영상에 맞춰 5.3.0 버전을 설치하라고 하였지만, 나는 최신 버전에 맞춰 코드를 수정해보았다.

import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Home from './Router/Home';
import Detail from './Router/Detail';
import style from "./css/style.css";

// movie app
function App() {
  return <Router>
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
    <Routes>
      <Route path="/detail/:id" element={<Detail />} />
    </Routes>
  </Router>
}

export default App;

 

기존 <Switch>가 들어가던 자리에 <Routes>라는 컴포넌트가 들어갔고, <Route></Route> 안에 컴포넌트를 넣던 방식 대신 element 라는 속성을 사용하여 경로에 맞는 페이지(컴포넌트)를 지정해 주었다.

 

2. 썸네일 경로 생성 오류(Detail.js)

나는 API 정보를 info라는 변수에 담아 처리했다. 그런데 썸네일 이미지를 불러오려고 살펴보니 특이하게도 이미지 경로와 확장자를 따로 담고 있더라.

 

그래서 <img src="" />에 넘겨줄 값을 'thumbUrl' 이란 변수에 담았다. jpg 외 다른 확장자가 섞여있을 때를 대비하여 `${character.thumbnail.path}.${character.thumbnail.extension}` 이렇게 코드를 짜 넘겨주었는데 두 세번에 한 번 꼴로 path 값이 없단 오류가 떴다. 당황해서 몇 번이나 콘솔을 살펴봤지만 분명 path와 extension 값 모두 API에 존재하고 있었다.

 

한참을 헤매던 중, 오류가 어쩌다 한 번씩 나타난다는 것에 주목해 '혹시 데이터를 불러오기 전에 path를 인식하려 해서 그런가?' 란 가설을 세웠다. 결론적으로 이 이유가 맞았고, 해결을 위해 다음과 같이 코드를 수정했다.

• 초기 info 값을 null로 설정 (배열 대신 null 사용)
• getChInfo에서 데이터를 가져온 후 thumbnail 값을 설정
• 렌더링할 때 info가 null인지 체크 (info && ...)

위 세 단계를 한번에 한 게 아니라 1번 하고 안되서 2번 추가하고, 2번까지 했는데도 안되서 3번 추가하고... 이런 방식으로 했다. 솔직히 좀 짜증났지만 다 고치고 보니 뿌듯하더라 ㅎㅎ 하나하나 안 되는 부분을 고쳐가며 최종적으로 코드를 완성시키는 느낌이 꽤 짜릿했다.

 

 

3. 로컬서버에서 관리자도구-모바일 확인 시 네트워크 끊어짐 현상

기능 구현을 완료한 뒤, 한껏 들뜬 마음으로 신나게 '이왕 하는거 모바일까지 맞춰야지~' 라며 css를 짰다. 

그리고 제대로 적용됐는지 확인해보려 F12->모바일 화면을 눌렀더니.. 갑자기 네트워크가 끊겼다네?

???????

 

처음엔 일시적인 문제인 줄 알고 개발서버를 다시 부팅했다. 그런데 같은 현상이 한 5번쯤 반복되자 '이건 또 뭐야!!' 라고 나도 모르게 육성 고함을 질렀다 ㅋ큐ㅠㅠ 그치만 다행히도 해결방법은 간단했다.

 

개발자도구 > network 탭 > Disable Cache 옆 드롭박스 확인

 

offline 으로 설정되어 있는것을 no throttling 으로 바꿔주니 해결!

 

---

✅느낀 점

이 간단한 어플을 만드는데에도 별의 별일이 다 생겼는데 이보다 더 큰 규모의 프로젝트에서는 어떤 수라장이 펼쳐질지 상상만으로 머리가 아찔해졌다. 그래도 완성했을때의 쾌감 역시 몇 배는 높을거라 믿고 계속 열심히 공부해야겠다.