module.exports JS

2020. 8. 27. 11:49·JavaScript/VanillaJS

프로그램을 짜다보면 하나의 파일에 코드를 다 쓰는게 아니라 기능별로 구분을 하게되는경우가 필요해집니다.

몇천줄이 넘는 코드를 한 파일에 다 써버리면 생산성이 떨어지는건 당연한거겠죠?

이럴때 module.exports라는 문법을 사용해서 여러 파일(모듈)들을 만들고 최종적으로는 한 파일에서 모든 모듈을 불러와 실행하게됩니다.

npm에 설치한 모듈들의 코드들또한 module.exports를 사용하는모습을 볼수있습니다.

모듈화하면 코드의 중복또한 줄일수있다

또 module.exports에는 숫자,문자열,객체,배열,함수등등 사실상 변수에 들어가는거라면 뭐든지 넣어서 다른코드에서 쓸수가 있는데 예시를 보여드릴게요

// a.js
const data = "Hello World";
module.exports = data;
// b.js
const receive = require("./a");
console.log(receive); // Hello World

이렇게 a.js 파일에서 module.exports로 넣은 값을 b.js에서는 require를 통해서 받아오게됩니다.

module.exports와 require함수의 반환값은 완전히 동일하다고 생각하면 쉬워요

 

물론 이렇게 단일 값만 보내는것보단 아까 말한거같이 객체를 통해서 여러 값들을 넘기는경우가 많아요

// person.js
module.exports = {name:'kim',age:10,man:true};
// b.js
const receive = require("./person");
console.log(receive); // { name: 'kim', age: 10, man: true }
console.log(receive.name, receive.age, receive.man); // kim 10 true

 

사실 이정도만 알아도 충분하지만 제가 헷갈렸던걸 보여드릴게요

// a.js
module.exports = function () {
  return "module.exports";
};
module.exports.a = "module.exports.a";
// b.js
const receive = require("./a");
console.log(receive); // [Function] { a: 'module.exports.a' }
console.log(receive()); // module.exports
console.log(receive.a); // module.exports.a

이렇게 module.exports에 바로 함수를 넣어두고 module.exports.a 이런식으로 값을 넘길수도 있단걸 알아두셨으면 좋겠습니다

이게 다른 npm모듈들도 거의 안쓰는 방법이던데  express모듈은 이런식으로 만들어져있어서 헷갈렸던기억이 있어요

수고하셨습니다!

'JavaScript > VanillaJS' 카테고리의 다른 글

ES6 화살표함수  (0) 2020.08.09
ES6 const,let 비구조화할당 템플릿문자열  (0) 2020.08.08
자바스크립트 Closure 클로저란  (0) 2020.04.04
'JavaScript/VanillaJS' 카테고리의 다른 글
  • ES6 화살표함수
  • ES6 const,let 비구조화할당 템플릿문자열
  • 자바스크립트 Closure 클로저란
​​​​
​​​​
  • ​​​​
    개발 블로그
    ​​​​
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 오늘 배운것들
      • 프로젝트
        • NodeJs-유튜브 음질 뷰어
        • 직접 설계해본 ERD
        • URL 단축&방문수 분석 사이트
        • GPT로 영어 공부하기
      • 알고리즘
        • 백준
        • CodeSignal
        • 프로그래머스
      • JavaScript
        • Npm Modules
        • VanillaJS
        • NodeJS
      • CI&CD
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
​​​​
module.exports JS
상단으로

티스토리툴바