Logo
# Newsfeed
Image
로그인 | 회원가입
Image
Image

DAY1-3.Javascript ES2015 Module 활용하기

3.Javascript ES2015 Module 활용하기


1)모듈이란

-개발 생산성의 효율성과 편리한 유지보수를 위해 복잡한 코드를 사용 용도, 제공 기능에 단위로 분리 재사용
-모듈 파일을 참조(추가)하여 모듈내 정의된 클래스나 기능을 쉽게 활용가능 
-코드의 재사용성을 극대화 해주는 방식 중 하나


2)ES2015 모듈

-.js 확장자로 자바스크립트 파일로 작성
-자바스크립트 코드를 담고 있는 파일로  import/ export 키워드를 사용한다.
-Node에서는 require 명령어로 모듈 호출
-모듈 관리 전용 키워드 제공 : import, from, export, default 를 사용하기도 함
-모듈 스코프를 통해 모듈 내 정의된 변수는 해당 모듈에서만 기본적으로 사용가능
-모듈 내부의 데이터와 함수를 다른 파일에서 사용하게 하려면 export 를 실시한다.

 


-모듈 생성 및 호출관계 실습 코딩을 진행합니다.
-관련 실습자료 완성본은 제공 구글 드라이브 Node\DAY1폴더에 존재합니다.
-학습자료경로: 구글드라이브\Node\DAY1\index.js, var.js, func.js


- Visual Studio Code를 가동하고 VSCode 탐색기창에서 Node\DAY1폴더를 선택하고 해당 폴더에 index.js, var.js, func.js파일 3개를 생성합니다.

코딩실습 : 하기 코드를 var.js 파일에 코딩하고 저장합니다.

const odd ='홀수입니다.';
const even ='짝수입니다.';

//노드프레임워크의 module 내장객체를 이용해 현재 모듈파일내의
//특정 변수/객체/기능을 노출한다.
module.exports ={
    odd,
    even
};


코딩실습 : 하기 코드를 func.js 파일에 코딩하고 저장합니다.

//var.js 모듈을 참조한다.

//Node 프레임워크에서 외부 모듈을 참조하는 경우는 
//require명령을 통해 참조한다.
//ES2015 표준문법에서는 import라는 명령어를 통해 참조한다.
const {odd,even} = require('./var');

//홀짝수 체크함수
function checkOddorEven(num){
    if(num%2){
        //홀수이면
        return odd;
    }
    return even;
}

//const result = checkOddorEven(10);
//console.log(result);


//해당 모듈의 함수기능을 노출한다.
module.exports = checkOddorEven;



코딩실습 : 하기 코드를 index.js 파일에 코딩하고 저장합니다.

const {odd,even} = require('./var.js');
const checkNumber = require('./func');

//문자열을 매개변수를 전달해서 문자열 길이를 2로 나눠
//홀짝인 경우를 출력한다.
function checkStringOddOrEven(str){
    if(str.length % 2){
        return odd;
    }

    return even;
}

console.log(checkNumber(10));
console.log(checkStringOddOrEven('Hello'));



-Visual Studio Code 상단메뉴>Terminal>New Terminal 메뉴를 클릭합니다.
-하단 터미널 창에서 cd 명령어를 통해 해당 스크립트파일이 존재하는 DAY1폴더로 이동합니다.  cd D:\Eddy\Node\DAY1\
- node index.js 또는 node index 라고 치코 엔터를 칩니다. 
- 터미널 콘솔창에 출력되는 로깅내용을 확인합니다.






Image

댓글목록

Image
This Is rising
Image
21 °C Mostly Cloudy
  • London, UK
  • Image13%
  • Image6.44 MPH
  • Image
    23° Sun, 3 Jan
  • Image
    26° Sun, 3 Jan
Image
Weekly Toplist
Image