JavaScript 또는 TypeScript에서 Object.keys()를 사용하여 모듈에서 가져온 객체의 키를 배열로 변환하면, 때때로 예상치 못한 'default' 키를 보게 된다. 이것은 ES6 모듈 시스템과 관련이 있다.

ES6 모듈에서 export default 구문을 사용하면, 기본적으로 모듈은 'default'라는 이름의 키로 해당 값을 내보낸다. import 구문을 사용하여 이 모듈을 가져올 때, 내보낸 'default' 값에 직접 접근할 수가 있다.

아래와 같은 json 파일이 있다고 가정해보자

./info.json

{
    "history": {
        "names": [
          "alice",
          "bob",
          "charlie",
          "david",
        ],
        "scores": ["a", "b", "b", "c", "c"]
    },
    "math": {
        "names": [
          "alice",
          "bob",
          "charlie",
          "david",
        ],
        "scores": ["a", "a", "b", "c", "a"]
    },
    "english": {
        "names": [
          "alice",
          "bob",
          "charlie",
          "david",
        ],
        "scores": ["f", "b", "a", "a", "c"]
    },
}

1. 기본 Import 하기

기본 import 구문을 사용하여 import할 수도 있다.

import info from './info.json';

function main () {
    const subjects = Object.keys(info);
    console.log(subjects) // ['history', 'math', 'english']
}

이 import 스타일을 사용하면, info.json에서 기본 export를 명확히 import하므로 subjects를 로그로 출력할 때 'default' 키가 나타나지 않는다.

2. 모듈 전체 Import하기

그러나 * as 구문을 사용하여 모듈 전체를 import하기로 결정하면 상황이 달라집니다.

import * as info from './info.json';

function main () {
    const subjects = Object.keys(info);
    console.log(subjects) // ❗️ ['history', 'math', 'english', 'default'] 
}

위와 같은 코드로 info라는 객체를 가져와 쓰게되면, info 객체는 기본 export를 포함하여 모듈의 모든 export를 포함하는 객체가 된다. 이로 인해 'default' 키가 나타날 수 있습니다.

3. 'default' 키 필터링하기

출력 결과에서 'default' 키를 제외하고 싶다면, Array.prototype.filter 메서드를 사용하여 필터링할 수 있습니다.

const subjects = Object.keys(info).filter(key => key !== 'default');
console.log(subject); // ['history', 'math', 'english']

이 필터를 사용하면, subjects는 'default'라는 이름을 가진 키를 제외한 키들만 포함하게 된다.

결론

키 배열에 나타나는 'default' 키는 ES6 모듈이 기본 export를 정의하고 import하는 방식의 결과이다. JS/TS 프로젝트에서 import를 올바르게 관리하고 조작하기 위해서는 이러한 동작을 이해하는 것이 중요하다!

기본 export만 필요하다면 기본 import 구문을 사용하도록 한다.

전체 모듈을 import하는 경우 'default'가 키 중 하나로 나타날 것임을 알고 있어야 하며 필요한 경우 이를 필터링하는 것을 고려해야 한다.