클론코딩 영화 평점 웹 서비스를 보며 따라하는 중이다.

오늘이 마지막 작업이라 생각하고 완성 뒤 수차례 반복할 예정이었는데,

오류가 계속 났다.

이건 어제 블로그에 올린 글 중 캡쳐..- -

과거의 나 손들어...

흐린눈 할 게 아니었다.

버전은 늘 새로운 버전이 좋은 것만은 아니기도 하고, 

새 버전을 쓰고 싶으면 프로젝트별로 버전을 다르게 쓰면 될 일이었다.

버전이 다르면 기능도 많이 달라지기 때문에

무언가를 따라할 땐 버전을 맞춰줘야 하는데..

과거의 내가 이 앞 다른 강의 따라할 때

그 버전 그대로 설치했나 했더니 

그 버전은 17버전. 나는 18버전. 책은 16버전.....

범인 찾았다.

테스트로  npx create-react-app 플젝명을 통해 리액트를 설치해보니

위와 같이 18버전이 설치된다...

버전 확인은 npm create-react-app --version을 통해 할 수 있다.

만약, 재설치를 했는데, 원하는 버전이 없으면 다운그레이드를 하거나

원하는 버전 재설치가 필요해보이는데, 

(지금은 시간이 없으니..) 이건 다음에 알아보자..ㅋ

아무튼 프로젝트 생성 시 버전 꼭꼭 확인하자..!

예제 프로젝트 막바지가 될 수록 에러는 잦아졌다.

전일에도 에러처리로 반 이상을 소비했던거 같다.

서론이 길어졌는데, 아무튼..

오류가 발생되어서 불현듯..

버전을 바꾸면 해결될 일 아닌가?

라는 생각이들었다.

전날 블로그에 남긴 글..

이전 버전 설치 과정이 뭔가 복잡하지 않을까

두려움과 동시에 귀찮음이 지배했다.

그런 반면 오늘은 프로젝트에 버전 설치는 비교적 쉬웠던거 같은데?

라는 생각이 들었다.

같은 생각이 오늘 내일 하루차이로도 달라지다니..

버전 다운그레이드 방법

npm install --save react@^16.12.0 react-dom@16.12.0

주의 할 점은 재설치 시 react-router-dom 등도 재설치를 해줘야 한다.

18버전에서 16버전으로 다운그레이드완료.

🌼공부시간🌼

2022년 4월 5일 월요일 새벽공부

5시 14분부터  2시간 20분

🌼공부일기🌼

오늘도 React

좋은 꿈을 꿔서 늦잠을 잤다.☺

이전에 다니던 (개발관련X) 회사에 

개발자로 입사를 하게 되었다. 

1개월 후 연봉 10%상승, 

3개월, 6개월, 1년 계속 상승해준다는 조건이었는데,

퍼센트가 기억이 안나지만..

결론적으로는 1년 뒤

2억이상 연봉이 된다는 계산이 나왔다. 

기분좋게 어이없어서

그럼 지금연봉에서 그렇게 상승하면

연봉 2억 넘을텐데 회사에서 감당될까

혼잣말하니 주변에서 웅성웅성ㅋㅋㅋ

허무맹랑한 꿈이지만, 

대단한 개발자가 되어서 금의환향한 꿈이라니

상당히 기분이 좋았다. 

계속 정진하면 언젠가 꿈에 닿을 날이 오지 않을까?

오늘 끝내려던 건 리액트 버전 문제로 인해 헤매다가

얼마 못하고 끝났고, 몸은 피곤한데 기분은 좋다.

수지가 부른 Dream이라는 노래가 맴돈다.

좋아하는 노랜데, 오랜만에 들어봐야지 ㅎ_ ㅎ

🌼 해결하는 흐름대로 작성한거라 해결 완료방법은 가장 아래에 :) 

💎오류 발생 상황 

<Route>안에 html 태그를 넣어서 해당 경로로 호출 시 뜨는 것을 보려 했다.

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/home">
          <h1>Home</h1>
        </Route>
        <Route path="/home/introduction">
          <h1>Introduction</h1>
        </Route>
        <Route path="/about">
          <h1>About</h1>
        </Route>
      </Routes>
    </HashRouter>
    );
  }

각각 경로에 따라 <h1>태그가 보여지는 것이 목적이었다.

💎오류코드

 [h1] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> at invariant

[h1]은 <Route>컴포넌트가 아닙니다. <Routes>의 모든 컴포넌트 자식은 <Route> 또는 <React>여야 합니다.

뭐..?그럼 h1은 어떻게 써..?기존엔 어떻게 쓴건데..?!

이 글 바로 전글의 연장선인데..

글들을 찾아보면 21년 11월경 React-router-dom이 v6.0.2로 업데이트되면서

동일현상은 아니어도 비슷한 현상이 많이 발생되고 있는 것 같다.

하위 호환은 안해주는건가요..?ㅠㅠ

💎오류 해결 해보기(해결 전)

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route

난 위 문서에서 답을 찾을 수 있었다. 

나의 바로 이전 글 (작성 한시간도 안됐는데 또 오류라니..)

https://rosedaily101.tistory.com/48 

처럼 <Route> 엘리먼트 관련인것 같다.

💎해결 완료 방법

리액트 입문자라 이전은 모르겠지만,

이제 더이상 <Route>안에서 <h1>태그는 사용이 안되는 것 같다.

대신 element 안에서 컴포넌트 호출이 가능하듯,

html코드도 이쪽에 사용하는 건 가능하다.

동작된다.

리액트 버전땜에 뜨는 저 에러는 계속 떠서 귀찮은데

흐린눈 하고 버티는 중..ㅋㅋ

책엔 localhost:3002/ 만 해도 뒤에 #이 붙는다던데..이것도 다르고

뭔가 버전업이 좀 된거 같다.

이럼 기존 책 어떻게 보나 ㅠㅠ

오류 해결하고 포스팅하느라 시간 다 까먹긴 했지만, 

그래도 해결해서 후련하다! 

혹시 강의 따라하는 거면, 버전 맞추고 진행하자..

(다음 글에 버전 관련 글 있으니 참고..)

🌼 해결하는 흐름대로 작성한거라 해결 완료방법은 가장 아래에 :) 

💎오류 발생 상황 

react-router-dom을 사용해서 라우터를 만들어서

컴포넌트를 불러오려고 했다.

/* 오류 발생 코드 */
import { HashRouter, Route } from 'react-router-dom';
import About from './routes/About';

function App() {
  return (
    <HashRouter>
        <Route path="/about" component={About} />
    </HashRouter>
  );
}

about안에 문구가 들어있고, 

해당 페이지를 불러오려고 했다.

그,런,데..

오류가 발생되었다.

💎오류코드

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>

💎오류 해결 해보기(해결 전)

<Route>를 <Routes> 안에 넣으라고 해서 넣어봤다.

<Route>를 <Routes>안에 넣어주고, 

Routes도 같이 import 해줘야 한다.

응. 그래도 오류.

"/"경로에 요소가 없어서 빈페이지래..

검색을 시작했다.

https://developer-ping9.tistory.com/214

이분의 블로그에서 힌트를 얻을 수 있었는데, 

'react-router-dom'업데이트로 인해 <Route>의 매개 변수가 변경되었다고..!!

그래서 기존버전으로 새로 설치하거나, 

아니면 새로운 방법으로 진행해야 한다.

💎해결 완료 방법

1. import 할 때, Routes도 불러온다.
2. <Route>를 <Routes>로 감싼다.
3. <Route>의 component={About} 형태에서 element={<About/>} 으로 변경한다.

난 이전버전을 설치하기보다 이 방식을 쓰기로 했다.

고작 하루만에 문제가 발생되어 다운그레이드를 했다.

https://rosedaily101.tistory.com/51?category=960490 

되도록 강의 따라하는 거면, 버전 맞추고 진행하자..

기존 강의나 책들도 다 이렇게 되어있을텐데..

깃헙에서 그대로 소스 받아도 오류나서 한참 해맸다 ㅠㅠ

정리도 시간이 제법 걸리지만, 

이렇게 정리해야 시간 절감이 되겠지 :)