public 폴더 안 axios import 에러

Vanilla js로 SPA를 만들면서 정말 많은 에러들을 겪고 있다. 그래도 점점 직접 부딪혀보는 실력이 늘고 있다.

 

구현 후에 에러가 뜨면 해결하는 재미가 쏠쏠하다.

 

그런데 이번엔 조금 찝찝하게 마무리하게 되었다.

 

서버쪽에서 잘 사용하던 axios가 왜 클라이언트에선 불러오지 못하는 것일까?

 

일단 중요한 부분만 표현한 프로젝트의 폴더 구조는 다음과 같다.

node_modules
public
    |-- main.js // 여기서 axios를 import 해와서 쓰고 싶다
    |-- index.html
    |-- style.css
src
    |--api
package-lock.json
package.json
server.js // axios 사용

main.js에서 import axios from 'axios';를 하면 다음과 같은 에러가 뜬다.

에러 문구

리액트에선 잘만 사용했는데..

 

아마 리액트는 프로젝트를 CRA로 하고 웹팩이 기본적으로 깔려있어서 알아서 번들링을 해줘서 그런 것이 아닐까 생각된다.

 

리액트는 많은 것들이 추상화 되어있고 내가 편하게 개발을 하고 있었구나 새삼 느끼게 되었다.

 

그런데 node_modules에 직접 파일 경로를 설정해도 다른 에러가 뜰 뿐이었다. 결국 웹팩을 배워서 빠르게 문제를 해결 하기엔 시간이 부족했고, 좀 더 중요한 것들을 하기위해 뒤로 미루게 되었다.

<script src="https://unpkg.com/axios/dist/axios.min.js" defer></script>

그렇다..그냥 index.html에 cdn으로 넣어주었다.(눈물)

const httpClient = axios.create({
  baseURL: 'http://localhost:3000/api',
});

그래도 시간을 더 쓰지 않고 해결을 하긴 했으니 나쁘진 않다..!

 

타입스크립트도 공부하고 싶고 웹팩도 궁금하고..😅

---

아래와 같은 경로로 axios를 import 해서 사용할 수 있긴하다.

import axios from './node_modules/axios/dist/esm/axios.min.js';

하지만 이렇게 직접 모듈 경로를 지정하기보다는 번들러를 통해 편리하게 import 해서 개발한 후 번들링을 하는 것이 훨씬 좋은 방법이라고 볼 수 있다.

 

그리고 CDN의 경우, 간단한 토이 프로젝트나 빠른 프로토타이핑을 원한다면 적합한 선택일 수 있다. 프로젝트의 크기, 목적, 개발 환경 및 요구 사항에 따라 다운로드 방식을 선택하면 된다. 자세한 내용은 [JavaScript] Axios 사용하기(feat.CDN, Webpack) 글에서 다루었다.