1 asked

0

아하 그런 이유가 있었군요. 설명감사합니다.

0

안녕하세요. 좋은 질문 감사합니다!

일단 이 코드를

import { getInitialHTML } from './dist/index.js';

이렇게 바꾸고 실행해보시면

import { getInitialHTML } from './main.js';

이런 에러를 만나실 거에요.

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/eunjae/workspace/sinabro-js/ep07/src/router' imported from /Users/eunjae/workspace/sinabro-js/ep07/main.js
Did you mean to import ../src/router.js?

저게 왜 그러냐면, main.js 에

import { start } from './src/router';

이런 코드가 있는데, router.js 대신 그냥 router 라고만 썼더니, node.js 가 router 라는 걸 못 찾겠는데? 하면서 에러를 내는 거에요. 사실 원래는 확장자까지 정확히 써주는 게 ESM 스펙 상 맞아요. 그런데 우리는 그간 저렇게 잘 써왔잖아요? 이건 우리가 vite 이라는 번들러를 사용했더니 번들러가 처리를 해줬던 일 중 하나에요.

번들러가 편하고 좋긴 하지만, 원래 어디까지가 기본 표준이고, 어디부터가 번들러가 제공해주는 건지.. 경계를 명확히 이해하고 쓰기가 쉽지 않아서 이런 혼란도 겪게 되죠. 아무튼 저런 이슈가 있는데, 사실 이 예제 같은 경우에는 import 구문에 .js 를 다 붙여주기만 하면 잘 작동해요. 별 문제는 없습니다.

... 하지만, 확실히 번들러가 좋기는 좋은 게, 저렇게 빌드한 걸 import 하는 방식을 취하게 된다면 다음과 같은 이점은 있어요.

• 서버에서 사용하려는 node.js 버전이 낮은 경우, 그에 맞게 transpile 된 코드를 사용할 수 있게 됩니다 (너무 최신 문법 대신 하위 호환 되는 버전으로 빌드 된다던지)

• 프론트엔드 코드를 타입스크립트로 작성했다던가 하면 node.js 에서 직접적으로 import 를 할 수 없겠죠. (그래서 역시 js 로 transpile 된 버전이 필요합니다)

일단 당장 생각나는 건 이 정도네요. 또 궁금한 게 있으시면 알려주세요!