인프런 커뮤니티 질문&답변

작성한 질문수

실무 중심! FE 입문자를 위한 React

9-5. 기본 컴포넌트 구현

교육자료 소스 바로 실행시..

작성

안녕하세요

문의드립니다.

일단 제공해 주신 소스를 풀어서

실행을 해 보았습니다.

(당연히 npm i...관련 module 설치 하고요)

터미널: npm run start를 실행하면

위와 같은 화면만 나오네요.

그리고 개발자 도구 내용을 보면

index.tsx ? .. 소스상에 파일이 없는데 궁금합니다.

일단 실행이 해서 개발 완료된 화면을 보고자 합니다.

실행하기 전에 선행 작업있나요?

(각 확장프로그램..등... )

가이드를 봐도 내용이..(제가 못찾은 건지.)

설명 부탁드립니다.

답변 1

안녕하세요, 인프런 AI 인턴입니다.

bluescreen님, 문제를 겪고 계신 것 같아서 도움을 드리겠습니다.

제공받으신 소스를 실행하시다가 경로 매칭 및 비동기 응답 문제로 인해 화면이 표시되지 않는 것 같습니다. 특히, “No routes matched location /” 에러는 라우팅 설정이 올바르게 되어 있지 않아 발생하는 경우가 많습니다.

Routing 설정 확인: App.tsx나 라우트 설정 파일이 있는지 확인하십시오. React Router를 사용 중이라면, 해당 루트(/) 경로가 설정되어 있는지 확인해야 합니다. 라우터 설정이 올바르게 되어 있는지 확인하십시오.
Promise 해결: 비동기 요청과 관련된 오류일 수 있습니다. async와 await가 올바르게 사용되었는지, 필요한 경우 try-catch로 오류를 감싸서 처리되고 있는지 확인하세요.
파일 누락 확인: index.tsx 파일이 없다는 점이 궁금하다고 하셨는데, 일반적으로 이 파일은 React 애플리케이션의 진입점(entry point)입니다. src 디렉토리 안에 index.tsx가 있는지 확인하시고, 없다면 파일 구조가 올바른지 다시 확인해 체계적으로 파일이 구성되었는지 점검하십시오.
선행 작업: npm i를 통해 필요한 모듈을 설치하셨다면, 보통 추가적인 선행 작업(예: Node.js 설치, 필요한 환경 변수 설정 등)이 필요할 수 있습니다. 그러나 일반적으로 인프런 강의에서 제공하는 자료에는 기본적인 설치만으로 실행 가능하도록 되어 있을 것입니다.

확장 프로그램(블라우저 확장 또는 VSCode 플러그인 등) 설치가 꼭 필요한 경우는 드물지만, 개발 환경에 따라서 React Developer Tools 또는 크롬의 개발자 도구를 사용하면 디버깅에 도움이 될 수 있습니다.

혹시 더 도움이 필요하시다면 추가로 세부적인 소스 구조를 공유해주시면 좀 더 구체적으로 드릴 수 있는 조언을 제공하겠습니다. 추가로, React 공식 문서나 해당 과정을 제공한 강사의 가이드를 참고하는 것도 좋은 대처 방법이 될 수 있습니다.

작성한 질문수