inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

처음 만난 리액트(React)

미니블로그 프로젝트 빌드시 오류

567

코딩하는곰돌이

작성한 질문수 3

0

안녕하세요 마지막 프로젝트 진행시 오류때문에 질문남겨드립니다.

 

스크린샷 2023-12-08 오전 10.46.46.png

이러한 오류가 생기는데 해결방법을 잘 모르겟습니다 ㅠㅠ

HTML/CSS javascript react

답변 1

0

Inje Lee (소플)

안녕하세요, 소플입니다.

혹시 react-router-dom은 정상적으로 설치하셨나요?

아래 명령어를 다시 한 번 실행한 이후에 실행해보시기 바랍니다.

npm install react-router-dom

 

그래도 해결되지 않는다면 전체 소스 코드를 봐야 제대로 원인을 파악할 수 있을 것 같네요.

GitHub에 소스 코드를 올리고 저에게 링크를 공유해주시면 도움을 드릴 수 있을 것 같습니다.

 

감사합니다.

0

코딩하는곰돌이

네 라우터문제인거같아서 재설정을 해줫는데도 계속 오류가 나네요 ㅠㅠ

https://github.com/Gomdollee/React_mini_blog
깃허브 주소입니다!

1

Inje Lee (소플)

아무래도 패키지 설치과정에서 뭔가 꼬인 것 같네요~

node_modules 디렉터리와 package-lock.json 파일을 모두 삭제한 이후에,

아래 명령어로 강제로 패키지 설치를 진행한 이후에 다시 실행해보시기 바랍니다.

npm install --force

 

그리고 현재 코드 기준으로 PostViewPage에서 에러가 발생하는데,

원인은 매칭되는 post를 찾을 수 없기 때문입니다.

아래 find() 함수의 조건문에서 ===를 사용할 경우에는,

타입까지 동일해야 true로 판정이 되는데 item.id는 number 타입이고 postId는 string 타입입니다.

const post = data.find((item) => {
    return item.id === postId;
});

 

그래서 아래와 같이 postId를 number 타입으로 변환해서 비교하거나,

=== 대신 ==를 사용하여 값만 비교하는 형태 중에서 선택해서 사용하시면 됩니다.

// 타입을 변환하는 형태
const post = data.find((item) => {
    return item.id === Number(postId);
});

// 값만 비교하는 형태
const post = data.find((item) => {
    return item.id == postId;
});

 

시도해보시고 계속해서 문제가 발생하면 말씀해주시기 바랍니다.

감사합니다.

1

코딩하는곰돌이

해결됐습니다 감사합니다 강사님!

 

강의가 삭제되었다고 합니다

0

109

1

이거 왜 존재하지 않는다고 뜨는건가요

0

136

1

존재하지 않는 수업이라고 떠요

0

184

1

안드로이드 에뮬레이터 오류

0

100

1

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

0

128

1

prevIsConfiromed 질문

1

142

2

chapter14 잘이해가 되지않습니다..

1

136

2

2025년 3월 리액트버전

1

204

2

npm 설치 오류

1

178

1

chapter_07 콘솔로그 질문드려요~!

1

128

2

안녕하세요 미니블로그 실습 질문드립니다.

1

179

3

에러가 떠요

1

219

3

Chapter6 질문 드립니다

1

210

2

실습 코드 있을까요?

1

208

2

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

1

233

2

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

0

308

3

이름과 코멘트 줄바꿈이 안 됩니다.

0

142

1

버튼이 안 뜹니다

0

305

2

npx create-react-app my-app

1

471

2

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

1

377

3

Chapter_05 터미널, 리액트 에러

0

194

2

npx create-react-app my-app 명령어 반응없음

1

433

3

import 코드 에러

1

215

1

백틱

1

122

1