[개발지식] ES6 문법 - require/import(모듈, 파일 불러오기)

Hyo Kyun Lee·2021년 9월 3일
0

개발지식

목록 보기
4/69

1. module exports - require

기존 javascript 문법에서의 파일 불러오기 방식

한 파일 내에서 함수, 클래스, 변수 등을 다른 파일에서 사용할 수 있도록 한다.

const tables = db.define('hyokyun_1', {
    title: {
        type: Sequelize.STRING
    },
    technologies: {
        type: Sequelize.STRING
    },
    description: {
        type: Sequelize.STRING
    },
    budget: {
        type: Sequelize.STRING
    },
    contact_email: {
        type: Sequelize.STRING
    }
})

module.exports = tables
const Model = require('../models/Model')

module.exports를 통해 다른 파일에서 사용할 항목을 작성해주는 것이 중요하다.

기존 javascript에서 사용하는 문법이며, package.json에 별도 기재되어있지 않을 경우 위 방식으로 한 파일에서 하나의 항목만 export할 수 있다.

프로젝트를 생성하면서 npm을 통해 설치하는 패키지들도 이러한 방식으로 사용한다.

2. export - import

최근 ES6 문법에서 활용하는 불러오기 방식

package.json에 "type": "module"을 추가하여 기존 module 기재를 별도로 할 필요없이, 바로 파일을 export/import 할 수 있다.

프로젝트에서 활용할 수 있는 방식은 크게 두가지가 있다.

  • 파일 내 하나의 함수, component 등 전체를 export하는 방식
export default Home

위 export 방식처럼 하나의 파일 내에서 하나의 함수 전체를 export 할 수 있다.

import Home from './Home'

import를 통해 그대로 불러와 사용할 수 있다.

  • 비구조화 방식
export const {
    addFunc,
    deleteFunc
} = makeLists.actions

한 파일 내에서 여러 함수나 Component 등을 export할 경우, 위와 같이 객체화하여 전달할 수 있다.

import {addFunc, deleteFunc} from '../store'

import할 때 비구조화 방식을 통해 함수를 받아와 사용할 수 있다.

3. babel-node (dev.dependencies)

require / import 방식의 불러오기 방식을 혼용할 수 있는 기능을 제공하는 도구

babel-node를 사용하면 require 방식과 import 방식을 모두 활용 가능하지만, 이번 프로젝트의 경우 작동하지 않았다.

require 방식은 작동하였으나, import 방식은 작동하지 않아 postgreSQL database와 table 정보를 불러오는데 많은 시간이 소요되었다.

아직 정확한 이유는 더 살펴봐야 알겠지만, 예상으로는 알고있는 것과 달리 두가지 방식을 혼용하면서까지 사용이 불가능한 것 같아 보였다.

프로젝트를 더 진행해보면서 ES6문법을 더 학습하고, 관련 원인도 알아보는 것이 필요하다.

4. 참조링크

ES6문법 활용을 위한 package.json
https://takeknowledge.netlify.app/bugfix/cannot-use-import-statement-outside-a-module/

ES6 - export 관련 공식문서
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export default 관련 문법
https://medium.com/@_diana_lee/default-export%EC%99%80-named-export-%EC%B0%A8%EC%9D%B4%EC%A0%90-38fa5d7f57d4

0개의 댓글