인프런 커뮤니티 질문&답변
작성한 질문수
[섹션 22]Quiz 5 axios 질문
해결된 질문
작성
·
227
0
안녕하세요.
프론트엔드와 api 를 연동하는 과정에서 axios를 import 하는 방법에 질문 있습니다.
menu.js의 getCoffee 함수에서 axios를 이용해 /starbucks api를 호출하려는데,
menu.js 파일에서 import axios from 'axios'를 하면 에러가 발생합니다.
반면에 menu/index.html 에서 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>를 하면 잘 작동합니다.
이렇게 index.html에서 axios를 다운받는게 맞는건가요?
그렇다면, 실제로 axios를 사용하는 코드는 menu.js에 있는데, 왜 index.html에서 가져와야 하는 건가요?
감사합니다.
답변 1
0
안녕하세요 wldnjs님!
우리가 어떤 프로그램으로 js를 실행할 것인가에 따라 사용법이 달라집니다!
js를 실행시키는 프로그램은 크게 2개가 있습니다!
1. 브라우저
2. node
먼저, 브라우저에서는 js를 직접 실행시키는 것이 아니며, html을 실행시킬시 해당 html에서 js, css를 불러와 하나로 합쳐서 실행이 되는 구조랍니다!
따라서, 정상 작동 됐던 이유는 js, css 파일이 하나로 합쳐진 html이 실행되었기 때문이겠죠?!
다음으로, node에서는 js를 직접 실행시킵니다.(html, css는 필요 없겠죠?!)
이 때는, package.json 이라는 설정 파일을 통해서 실행하게 돼요!
이 node라는 프로그램으로 js를 실행시키면, package.json 이라는 설정 파일을 참고하여 js를 실행하게 되며, 기존에 다운로드 받은 axios는 node_modules 라는 폴더에서 찾아서 실행한답니다!
결론적으로, js 실행프로그램의 차이라고 볼 수 있겠어요!
브라우저가 js를 실행하는 방식과 node가 js를 실행하는 방식이 다르네요!
물론 기술이 발전함에 따라, 현재는 브라우저에서도 해당 모듈을 사용할 수 있지만 추가적인 공부가 필요합니다!
<script type="module"> 이라는 키워드로 공부해 보세요^^