인프런 커뮤니티 질문&답변
작성한 질문수
getInitialHTML을 꼭 빌드된 dist 디렉토리 내 파일에서 import하는 이유가 있나요??
해결된 질문
작성
·
144
·
수정됨
1
routes.js에서 export된 getInitialHTML을 server.js에서 import 해오면 될 것같은데, dist에서 import해 오시는 이유가 궁금합니다.
빌드 이후 운영시점에는 server.js에서 개발디렉토리인 src가 아닌 dist를 참조하게 하려는 이유같은데 그것이 맞을까요?
퀴즈
전통적인 서버 라우팅과 클라이언트 라우팅(CSR)의 주요 차이점은 무엇일까요?
서버 라우팅은 자바스크립트를 사용하고, 클라이언트 라우팅은 사용하지 않는다.
서버 라우팅은 페이지 전체를 새로고침하고, 클라이언트 라우팅은 페이지 새로고침 없이 URL을 변경한다.
서버 라우팅은 URL을 변경하지 않고, 클라이언트 라우팅은 URL을 변경한다.
서버 라우팅은 브라우저 히스토리를 사용하고, 클라이언트 라우팅은 사용하지 않는다.
답변 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 된 버전이 필요합니다)
일단 당장 생각나는 건 이 정도네요. 또 궁금한 게 있으시면 알려주세요!