JS airbnb-style에서 확장자 관련 질문
안녕하세요, nodejs 환경에서 vanila javascript로 개발을 진행하고 있습니다. 컨벤션을 적용하고 싶어 airbnb-style을 적용했습니다. 문제는 아래와 같이 컨벤션에서 js 확장자를 허용하고 있지 않습니다.
그래서 airbnb-style을 적용하고 import에서 확장자를 붙이면
이와 같이 빨간줄이 뜨며 에러가 발생합니다. 그렇다고 확장자를 붙이지 않으면 파일을 찾을 수 없다고 나옵니다. 제가 알기로는 import 시에 확장자를 붙이는 것이 디폴트인것으로 아는데 이를 어떻게 해결할지 알 수 있을까요?
답변 1
1
안녕하세요 김우성 님, 인프런 AI 인턴이에요.
airbnb-style은 일반적으로 JS 확장자를 권장하지 않는 스타일 가이드입니다. 이는 ECMA Script Modules(ESM)에서 확장자를 생략하는 것이 기본적으로 허용되기 때문입니다.
그러나, Node.js 환경에서는 기본적으로 CommonJS 모듈 시스템을 사용하므로 확장자를 포함해야 합니다. 이를 해결하기 위해 package.json 파일에 “type” 속성을 추가하여 ESM을 명시하고, 모듈 로더를 esm으로 설정하는 방법이 있습니다.
- package.json 파일에 “type” 속성 추가:
{
"type": "module",
...
}
- esm 모듈 로더 설치:
npm install esm --save-dev
- Node.js 실행 시 esm 모듈 로더 적용:
node -r esm app.js
위와 같이 설정하면 Node.js에서도 JS 확장자를 생략하여 모듈을 import 할 수 있습니다. 이를 통해 airbnb-style을 적용한 프로젝트에서도 정상적으로 모듈을 불러올 수 있을 것입니다. 참고로, 위의 방법은 Node.js 환경에서 ESM을 사용하는 일반적인 방법 중 하나이며, 다른 방법도 있을 수 있습니다.
추가적으로, package.json의 “type” 속성을 “module” 으로 설정하면 CommonJS 형식의 모듈도 ESM 형식으로 사용할 수 있습니다. 이를 참고하여 프로젝트에 맞는 설정을 진행해보시기 바랍니다. 감사합니다!
material theme와 icon은 vira theme라는 이름으로 통합되어 유료로 바뀌었네요 ㅠ
0
322
2
1-I 1620 맞왜틀입니다
0
214
1
백준 1816 Javascript
1
478
2
섹션1 : 시작은 프리캠프 final 과제 타이머 부분 JS 문의
0
464
1
faker 패키지 취약성 이슈
1
488
1
node.js vscode 콘솔출력
0
2353
2
윈도우 사용자는 setting을 어디서 찾아야하나요?
1
267
1
info.plist 파일을 열었을 때 경로메세지?가 뜨는데 무시해도 되는걸까요?
0
348
1
2일차 강의중 에러 문의 QueryClient
0
517
1
자바스크립트 모듈의 js파일을 import하여 그안의 함수(메소드)를 .vue에서 쓰는 방법
1
4387
1
강의순서가 바뀐 것 같아요!
0
288
1
new 생성자
0
262
0
gradle 설정관련 질문입니다.
1
851
4
magicgrid.js 오류인거 같은데 아무리봐도 모르겠습니다,,
0
341
1
enable annotation processor에 체크가 안 되어있는데 롬복이 멀쩡히 잘 적용돼요
2
2128
1
질문
3
314
1
firebase list err 해결
2
354
1
문자열(String)도 배열의 한 종류인가요??
1
559
1
break와 continue를 사용하는 이유가 궁금합니다.
0
586
1
4장 함수부분 질문입니다.
0
235
1
가상환경 만들고 코드 실행 후 아웃풋 출력이 안되고 로딩만 계속 됩니다.
0
394
2
선색님 혹시 id는 body말고 container에 줘도 괜찮을까요?
0
270
1
web.js 텍스트 한글이 깨져서나옵니다.
1
189
1
완성파일부탁드립니다.
0
275
1





