함수를 사용하는 이유가
재활용성과 편리함 때문 이었다.
모듈도 마찬가지이며 조금 더 큰 개념이라 할 수도 있는데,
코드를 기능에 따라 여러개의 파일로 나누는 것이다.
이를 통해 아래와 같은 효과를 얻을 수 있다.
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다
재활용할 수 있다. - 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
- 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
- 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다.
1. Node.js 에서의 모듈
: 모듈을 로드하는 방법은 호스트 환경에 따라서 달라진다. Node.js에서는 아래와 같은 방법으로 모듈을 로드한다.
1) 모듈화
: 객체를 만들어 모듈로 내보낼 수 있다.
let Menu = {};
Menu.specialty = "Roasted Beet Burger with Mint Sauce"; // Menu의 프로퍼티
module.exports = Menu; // Menu 객체를 모듈로 내보낸다.- module.exports =
내보내고자 하는 객체명
: 모듈화 된 객체를 다른 파일에서 가져올 수 있다.
const Menu = require('./menu.js'); // Menu 객체를 가져올 수 있다.
function placeOrder() {
console.log('My order is: ' + Menu.specialty);
}
placeOrder();const새로운 파일에서 사용할 객체명=require('가져올 객체의 주소 및 파일명')- 연결된 부모 모듈의 프로퍼티도 함께 사용할 수 있다.
2) ES6 모듈화
: 내보내기는 아래와 같이 정의할 수 있다.
let 객체명 = {};
export default 객체명;: 가져오기는 아래와 같이 정의할 수 있다.
import 객체명 from './주소'2. Web Browser 에서의 모듈
: 자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법에 대해서 알아보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function welcome(){
return 'Hello world'
}
alert(welcome());
</script>
</body>
</html>- 위 예시는 웹브라우저의 html이다. html과 자바스크립트는 엄연히 다른 언어이다.
이 두 언어가 공존하기 위해서<sctipt> </sctipt>사이에 자바스크립트 코드를 넣어 분리시킨다. - 그러나 굳이 같은 파일에 모두 적을 필요 없이 분리시키면 된다.
function welcome(){
return 'Hello world';
}- 자바스크립트 코드는 분리해서 새로운 파일로 만든다.
- 파일 이름은
greeting.js만들었다. 자바스크립트 파일은 확장자로 js를 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>- 이후 html에서는
<script src="greeting.js"></script>로 js를 불러오기만 하면 된다. - 스크립트 src는
<head></head>사이에 넣도록 한다.
.jpg)
"꾸준한 삽질과 우연한 성공"