JS에서 cdn 방식으로 라이브러리 불러올 때 에러나는 이유

에러의 발생 과정

구름 딥 다이브 백엔드 3회차에 참여하며 javascript를 배우는 중이었다. React, Redux 라이브러리를 cdn 방식으로 불러와서 여러가지 기능을 익히는 중이었는데, 강사님이랑 아무리 똑같은 코드를 작성해도 나는 에러가 뜨는 것이었다....!

위 사진을 보면 react-dom 관련되어서 뭔가 오류가 엄청 뜨고, 아래와 같은 문장이 출력된 것을 알 수 있다.

에러 발생: 컴포넌트의 타입이 올바르지 않습니다.  
기본 HTML 태그라면 문자열이어야 하고, React 컴포넌트라면 클래스나 함수여야 하는데, 현재는 'undefined'가 전달되었습니다.  
이 오류는 보통 해당 컴포넌트를 정의한 파일에서 제대로 export하지 않았거나, default export와 named export를 혼동했을 때 발생합니다.

근데! 나는! export 하나 없는 그냥 통짜 html 파일 하나만 작성 중이었다! html 태그 빼먹은것도 없고! 그래서 이유를 찾아보고 결국 원인을 알아낼 수 있었다.

---

에러의 원인

에러의 원인은 바로 라이브러리들을 cdn 방식으로 불러올 때, 순서가 잘못 되어서 그랬던 것이다.

위 사진에서 네모박스 친 곳을 보면 cdn으로 불러온 라이브러리들의 순서가 이렇게 된 것을 확인할 수 있다.

redux -> react-redux -> react -> react-dom -> babel

하지만 java script에서 cdn 방식으로 라이브러리를 불러올 때 주의할 점이 있었으니, 그건 바로 라이브러리를 사용할 때는 반드시 그 라이브러리가 의존하는 것들을 먼저 불러와야 한다는 것이다.

• react-redux는 내부적으로 react와 react-dom을 의존한다
• 따라서 react보다 먼저 로드되면 undefined를 참조해서 에러가 발생한다.

---

에러의 해결책

• cdn으로 라이브러리를 불러올 때, 다른 라이브러리의 의존을 받는 상위 라이브러리를 보다 위에 배치하는 것!

따라서 cdn을 아래와 같은 순서로 배치하면 에러가 사라지는 것이다.

react -> react-dom -> redux -> redux-react

여기서 babel은 의존하는 다른 라이브러리가 없으므로 단순히 아래 코드 상위에만 배치해두면 된다. 그렇다 하더라도 나중에 관리하기 쉽게 다른 cdn들과 모아두자!

<script type = "text/babel">

---

결론

• java script에서 cdn 방식으로 라이브러리를 불러올 땐 순서가 중요하다!
• java script에서 ES6 모듈로 라이브러리를 불러올 때는 순서를 생각 안 해도 된다!

import React from 'react';
import { useState } from 'react';

• spring boot 등 build.gradle로 의존성 관리를 하는 곳에서도 gradle이 알아서 필요한 순서로 classpath를 구성해서 실행해주므로 순서를 신경쓸 필요 없다!