[섹션 22]Quiz 5 axios 질문

Question

안녕하세요. 프론트엔드와 api 를 연동하는 과정에서 axios를 import 하는 방법에 질문 있습니다. menu.js의 getCoffee 함수에서 axios를 이용해 /starbucks api를 호출하려는데, menu.js 파일에서 import axios from 'axios'를 하면 에러가 발생합니다. 반면에 menu/index.html 에서 를 하면 잘 작동합니다. 이렇게 index.html에서 axios를 다운받는게 맞는건가요? 그렇다면, 실제로 axios를 사용하는 코드는 menu.js에 있는데, 왜 index.html에서 가져와야 하는 건가요? 감사합니다.

노원두 · Answer

안녕하세요 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 "> 이라는 키워드로 공부해 보세요^^