cityList 개발에서 citylist 가 렌더가안되요

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

CityList 개발

해결된 질문

작성

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!
+ 오류 메세지도 함께 올려주시면 좋아요 🙂

console.log('hello');

https://trip-wiki-api.vercel.app/?start=0

브라우저에서 여기로 들어가도 api 호출값이 안나오고 검은색 창이 떠요

그리고 코드 작성했는데,

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

이런 에러만 console에 찍혀서...

코드 사이트에 있는걸로 복사해서 넣어도 마찬가지네요

server.js는

const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;


app.use(express.static(path.join(__dirname, '..')));

app.get('/*splat', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'index.html'));
});

app.listen(PORT, () => {
    console.log('START SERVER');
});

/*splat은 /*name 해도 결과가 같아요 ㅠ

express는 5.1.0

node는 20 번대 사용중입니다.

⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.
⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.

javascript rest-api spa dom

답변 2

효빈 Hyobin

지식공유자

씨리얼냠냠님, 질문 감사합니다.

API 주소를 눌러도, 호출해봐도 검은 창이 뜨고 결괏값이 나오지 않는 문제는 해당 질문을 참고해보시면 좋을 것 같습니다!
https://inf.run/3wzpT
2번째로 작성주신 해당 오류는 브라우저가 <script type="module" src="...">로 자바스크립트 모듈을 로드하려고 했지만,
실제로 서버가 JS 파일이 아닌 HTML을 응답했을 때 발생하는 에러로, <script></script> 태그에 알맞은 파일 경로를 작성해주었는지 확인해주세요!

그럼에도 계속 문제가 발생하신다면, 다시 한 번 질문 남겨주세요 🙂 감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 씨리얼냠냠님.

해당 에러 메시지인 “Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of ‘text/html’.“는 서버가 JavaScript 파일을 HTML로 응답하고 있어서 발생하는 문제입니다. 이는 보통 잘못된 경로 설정 때문에 JavaScript 파일이 정상적으로 로드되지 않을 때 발생합니다. 아래 해결 방법을 참고해 주세요.

해결 방법:

정적 파일 제공 경로 확인: express.static이 위치한 경로와 서버에서 참조하는 파일 경로가 일치하는지 확인해 보세요. 특히, 파일 경로가 제대로 설정되어 있는지 확인이 필요합니다.
라우터 경로 수정: 모든 경로에 대해 HTML을 반환하는 app.get('*splat', ...) 부분을 확인해 보세요. /*와 같은 와일드카드 라우터는 모든 경로를 index.html로 리디렉션하므로, JavaScript 파일 경로에는 해당하지 않도록 설정해야 합니다. 다음과 같이 정규식을 사용한 라우팅을 검토해보세요:
```
app.get(/.*\.js$/, (req, res) => {
    res.type('text/javascript');
    res.sendFile(path.join(__dirname, '..', req.path));
});
```
MIME 타입 확인: 서버 설정에서 JavaScript 파일에 대해 text/javascript MIME 타입이 설정되어 있는지 확인해 주세요.

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

cityList 개발에서 citylist 가 렌더가안되요

해결 방법:

관련 질문 링크: