import 경로 설정에 대해 궁금합니다.
768
작성한 질문수 1
안녕하세요. 강의 잘 듣고 있습니다.
궁금한 것이 하나 있어서요.
React 예제에서는 main.js에서 store 객체를 사용하기 위해서 상단에 아래와 같이 Store.js 를 import 하였습니다.
그런데 Vanilla 예제에서는 main.js 에서 아래와 같이 바로 현재 경로에서 import 합니다.
두 예제(1-vanilla, 2-react) 전부 main.js 파일과 store.js 파일이 같은 경로(/js/)에 있는데요.
왜 react는 절대경로 형태로 루트부터 ./js/store.js 에서 불러오고, vanilla에서는 상대경로 형태로 불러와야 되는지 궁금합니다.
혹시나해서 react 예제에서 상대 경로로 store.js 파일을 불러왔더니, 오류도 발생하지 않는데, 화면에는 제대로 표시가 되지 않더군요. 예제 소스 대로 ./js/Store.js 하는 경우에만 제대로 동작하였습니다.
조언 부탁드릴께요. 감사합니다.
답변 1
4
예리하게 보셨네요. 바벨 스탠드얼론을 사용하면서 여러번 시행착오를 한 결과인데요. 각 폴더의 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할 때 상대 주소를 사용하면 모듈을 못찾는 현상이 생기더라고요. 그래서 절대 주소로 표기한 것입니다.
리액트 1,2부 이후 후속 강의나 준비 중인 다른 강의가 있으신가요?
1
112
2
super.show() 호출하는 이유가 궁금합니다.
1
101
2
class와 constructor를 이용한 객체 지향 프로그래밍
0
240
2
mvc 패턴 질문
0
209
2
Cannot read properties of undefined (reading 'props')
0
290
2
delegate, emit 필요한 이유
0
206
2
어떤거를 먼저 들어야 하는지 도와주세요
1
275
1
localhost:8080 접속 불가
1
296
1
최근검색어 3 풀이에서
1
195
1
import 문제
1
246
1
자동변환 관련
1
213
1
sort() 질문 드립니다.
1
312
2
reset 시점에 searchResult 빈 배열로 update
2
320
2
Button에 Onclick사용
1
260
1
npx lite-server error 확인 요청드립니다.
1
482
2
node 20이상 쓸때 꿀팁
4
777
3
디버깅 관련질문이 있습니다.
1
306
1
[순수JS2]탭 3(풀이) 질문있습니다.
1
232
1
추상화를 어떻게 받아들이면 될까요??
1
446
1
on 메서드 eventName 문의
1
268
1
import에 관해서 질문드립니다
1
262
1
view.js의 on 메소드에 대해 질문드립니다
1
263
1
componentDidMount에서 getKeywordList()를 하는 이유
1
248
1
[순수JS1]검색폼2_git branch 이동관련
1
283
1