강의

멘토링

로드맵

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

piaojongwien님의 프로필 이미지
piaojongwien

작성한 질문수

엔트리 하드웨어 개발중인데 npm run serve를 하게되면

작성

·

104

0

화면 캡처 2024-07-29 100147.png안녕하세요 엔트리 하드웨어 기초 개발을 하고있는중인데,

위의 사진과 같이 npm run serve를 하게되면 실행은 되지만

실행시킨 화면 http://127.0.0.1:8080 로 접속 후

 

asfd.png해당 하얀화면이 뜨고, 엔트리에서 알려준 하드웨어 블록코딩이 전혀 뜨지가 않습니다 ㅠ

 

asghaseardf.png해당 화면이 떠야하는데 .. 왜 하얀화면만 뜨는지 모르겠어서. 자문좀 구하고싶습니다 ㅠㅠ

 

답변 1

0

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

사용자님이 겪고 계신 문제는 Webpack이나 npm 프로젝트 설정 관련 문제로 보입니다. npm run serve 명령을 실행했을 때 부드럽게 실행되나 실제 보여야 할 페이지가 보이지 않는 경우, 다음과 같은 몇 가지를 확인해볼 수 있습니다:

  1. 라우트 설정 확인하기: 사용하고 있는 웹 서버나 프레임워크에 따라 라우트 설정이 제대로 되어 있는지 점검해보세요. 로컬 서버에서 특정 경로로 접근할 때 해당 경로에 맞는 컨텐츠를 제공하도록 설정되어 있는지 확인이 필요합니다.

  2. 웹팩(Webpack) 설정 검토하기: 웹팩의 webpack.config.js 파일에서 output 설정이 올바르게 되어 있는지 확인하세요. 빌드된 파일들이 제대로된 경로로 출력되고 있는지, publicPath 설정이 현재 서버 환경과 일치하는지 점검해야 합니다.

  3. 정적 파일 경로 확인하기: 프로젝트에서 사용하는 정적 파일(CSS, JavaScript, 이미지 등)이 올바른 경로에서 제공되고 있는지 확인하세요. 경로 설정 실수로 인해 파일들이 제대로 참조되지 않을 수 있습니다.

  4. 콘솔 오류 메시지 확인하기: 브라우저의 개발자 도구(보통 F12키 또는 Ctrl+Shift+I로 열립니다)의 콘솔 탭에서 오류 메시지를 확인하세요. 자바스크립트 오류나 네트워크 요청 실패 등이 페이지 로딩에 영향을 줄 수 있습니다.

  5. CORS 이슈 검토하기: 로컬 개발 환경에서는 종종 Cross-Origin Resource Sharing(CORS) 정책으로 인해 리소스를 제대로 불러오지 못하는 경우가 있습니다. 개발 서버 설정에서 CORS를 허용해주는 설정을 추가해 볼 수 있습니다.

이러한 점검 사항에 이상이 없음에도 문제가 해결되지 않는다면, 문제의 구체적인 원인을 찾기 위해 프로젝트의 구성 및 사용한 라이브러리의 문서를 다시 한번 꼼꼼히 확인해보시는 것을 추천드립니다.

piaojongwien님의 프로필 이미지
piaojongwien

작성한 질문수

질문하기