인프런 커뮤니티 질문&답변
작성한 질문수
getInitialHTML을 꼭 빌드된 dist 디렉토리 내 파일에서 import하는 이유가 있나요??
작성
·
52
·
수정됨
1
routes.js에서 export된 getInitialHTML을 server.js에서 import 해오면 될 것같은데, dist에서 import해 오시는 이유가 궁금합니다.
빌드 이후 운영시점에는 server.js에서 개발디렉토리인 src가 아닌 dist를 참조하게 하려는 이유같은데 그것이 맞을까요?
답변 2
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 된 버전이 필요합니다)
일단 당장 생각나는 건 이 정도네요. 또 궁금한 게 있으시면 알려주세요!