import 경로 설정에 대해 궁금합니다.

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

[검색결과] 리스트와 키

작성

681

안녕하세요. 강의 잘 듣고 있습니다.

궁금한 것이 하나 있어서요.

React 예제에서는 main.js에서 store 객체를 사용하기 위해서 상단에 아래와 같이 Store.js 를 import 하였습니다.

import store from "./js/Store.js";

그런데 Vanilla 예제에서는 main.js 에서 아래와 같이 바로 현재 경로에서 import 합니다.

import Store from "./store.js";

두 예제(1-vanilla, 2-react) 전부 main.js 파일과 store.js 파일이 같은 경로(/js/)에 있는데요.

왜 react는 절대경로 형태로 루트부터 ./js/store.js 에서 불러오고, vanilla에서는 상대경로 형태로 불러와야 되는지 궁금합니다.

혹시나해서 react 예제에서 상대 경로로 store.js 파일을 불러왔더니, 오류도 발생하지 않는데, 화면에는 제대로 표시가 되지 않더군요. 예제 소스 대로 ./js/Store.js 하는 경우에만 제대로 동작하였습니다.

조언 부탁드릴께요. 감사합니다.

react MVC

답변 1

김정환

지식공유자

예리하게 보셨네요. 바벨 스탠드얼론을 사용하면서 여러번 시행착오를 한 결과인데요. 각 폴더의 index.html 파일을 보실까요?

바닐라 예제:

<script type="module" src="./js/main.js"></script>

type="module"로 스크립트를 로딩하면 main.js가 import 구문을 사용한다고 생각하고 모듈을 가져옵니다. 브라우져는 main.js에서 상대 주소로 import 한 모듈을 찾아 다운로드하고요.

리액트 예제(바벨 스탠드얼론):

<script
      type="text/babel"
      data-presets="react"
      data-type="module"
      src="js/main.js"
    ></script>

jsx 문법을 사용하면서 바벨 라이브러를 사용했는데요. 바벨 스탠드얼론 버전을 사용할때는 type="text/babel"로 바꿔 주어야합니다. 그리고 data-presets과 data-type 속성을 사용해서 리액트이고 모듈을 사용하는 코드라는것을 명시해 주는데요. 이렇게 하면 main.js에서 import할 때 상대 주소를 사용하면 모듈을 못찾는 현상이 생기더라고요. 그래서 절대 주소로 표기한 것입니다.

arcturus

질문자

그런 이유가 있었군요. 경험으로 쌓으신 지식 공유해 주셔서 감사드립니다.

김정환

지식공유자

ㅎㅎㅎ 고맙습니다.

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

import 경로 설정에 대해 궁금합니다.