Js에서 모듈을 사용하다보니 문득 export와 export default차이가 궁금하기도하고
모듈 오류를 겪어보기도해서 적어 봄.

단순히 저 두개에 대해서만 간단히 다룰테니 자세한 내용이 궁금한 사람은 아래 링크를 참고 바람

• javascript info : 친절하게 한글로 작성된 JS doc이다.

모듈은 크게 2종류로 나뉜다.

1. 복수의 함수가 있는 라이브러리 형태

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye};

2. 개체 하나만 선언되어 있는 모듈

// 📁 user.js
export default class User { // export 옆에 'default'를 추가해보았습니다.
  constructor(name) {
    this.name = name;
  }
}

export default를 사용하면 '해당 모듈엔 개체가 하나만 있다' 라는 사실을 명확히 알려줄 수 있는 이점이 있다.

export default (Default Export)

• 기본적으로 내보내는 값으로, 한 파일당 하나만 존재할 수 있다.
• import할 때 이름을 자유롭게 정할 수 있고, {}없이 가져온다.

// 📁 user.js
const User = 'User';
export default User;

import MyUser from './user.model.js'; // 자유로운 이름 가능

export (Named Export)

• 이름을 지정해서 내보내는 값, 한 파일에서 여러 개의 내보낼 객체가 있을 때 주로 쓰며 import할 때 이름이 정확히 일치해야 한다.
• 가져올 땐 {}를 사용한다.

// 📁 user.js
export const User = 'User';
export const Guest = 'Guest';

import { User, Admin } from './user.model.js'; // 반드시 중괄호 사용, 이름 정확히 일치

클래스나 함수를 내보낼 땐 세미콜론 붙이지 마세요