[JavaScript 트러블슈팅]import iconv에 문제가 있을 때(import * as iconv from ‘iconv-lite’)

*이 포스팅은 프로디지털아카데미 신윤수 강사님의 강의를 바탕으로 작성되었습니다.

발행 배경

JS로 크롤링할 때 한글이 깨져서 당황스러울 때가 있다.
이럴 때 자주 등장하는 해결책이 바로 iconv-lite 라이브러리다.

 

<예제>

import iconv from "iconv-lite";

const url = "https://finance.naver.com/item/news_notice.naver?code=005930&page=";
const resp = await fetch(url);
const data = await resp.arrayBuffer();
const result = iconv.decode(new Buffer(data), "euc-kr");

console.log(result);

근데 여기서 import 문법에 따라 코드가 아예 안 돌아갈 수도 있다.

필자는 처음에 

 import * as iconv from 'iconv-lite'

이 형식으로 import모듈을 했는데, 함수가 돌아가지 않아서 당황했다... 

나와 같은 분들을 위해 작성된 글이다. 

 

<결론>

 

해결방법 1.

 import * as iconv from 'iconv-lite'

이렇게 하고 

함수 쓸 때  iconv.default.decode()

이런식으로  default 키워드 추가하기 

 

해결방법 2.

import iconv from 'iconv-lite' 로 쓴다.

 

 

참고) 좀 더 자세하게 이유를 알아보자.

왜냐면 iconv-lite는 CommonJS(CJS) 방식으로 작성된 라이브러리이기 때문이다.

자바스크립트에는 CJS(CommonJS) 방식과 ESM(ES Module) 방식 두 가지가 존재한다.

• iconv-lite는 오래된 라이브러리라서 CJS 방식(module.exports) 으로 작성되어 있다.
• 그런데 import 문법은 원래 ESM 전용이라서
  CJS 모듈을 ESM처럼 import할 때 구조가 어색해지는 것.

이 때 환경에 따라 CJS 전체가 { default: 모듈 전체 } 형태로 들어오게 되면서,
iconv.decode가 아니라 iconv.default.decode처럼 접근해야 하는 상황이 생긴다.

---

import 문법 차이

1) import * as iconv from 'iconv-lite'

• 이건 ESM(ESModule) 방식에서 여러 named export를 한 객체로 묶을 때 사용하는 문법이다.
• 근데 iconv-lite는 default export가 아니라 CJS 전체 export 구조다. (module.exports = iconv)
• 그래서 이걸 ESM 방식으로 불러오면 아래처럼 감싸진다:

iconv = { default: { decode: ..., encode: ... } }

즉, iconv.default.decode()처럼 접근해야 원하는 함수가 나온다.

---

2) import iconv from 'iconv-lite'

• 이건 default export를 불러오는 방식이다.
• TypeScript나 Babel, Node ESM 호환성 레이어에서는
  CJS에서 module.exports로 내보낸 값을 default로 간주해준다.
• 그래서 이 방식으로 쓰면 iconv.decode() 바로 호출 가능해서 깔끔하게 작동한다.

 

참고의 결론 :

iconv-lite는 아직도 CommonJS만 지원한다.
그래서 ESM 방식으로 import하면 default에 감싸지는 현상이 생기는 것.

---