모듈화 방법 자세히 살펴보기

• 기능별로 코드를 구분한 후 독립된 파일로 분리시키는 것이 좋다. (그래야만 한다.)
• 이렇게 별도의 파일로 분리한 것을 모듈이라고 한다.

다양한 방법으로 모듈 만들기

• 가장 기본적인 모듈 사용 방법은 자바스크립트 파일을 새로 만드는 것 이 시작이다.
• 그 후, exports 전역 변수 를 사용한다.
• 예제

exports에 객체 지정하기

• 예제
• 에러가 발생한다.
  • why?)
  • 모듈을 처리할 때 exports를 속성으로 인식한다.
  • 함수나 객체를 속성으로 추가하면 exports로 추가된 속성들을 참조할 수 있다.
  • But, exports에 객체 자체를 할당하면 exports는 모듈 시스템에서 처리할 수 있는 전역변수가 아닌 단순 변수로 인식 된다.

module.exports를 사용해서 객체를 그대로 할당하기

• 예제
• require() 메소드로 불러들이면 객체 그대로를 반환된다.

module.exports에 함수만 할당하기

• 예제

exports와 module.exports를 함께 사용하기

• module.exports가 exports보다 우선적으로 적용된다. (exports 전역 변수는 무시된다.)
• 예제

※ module.exports 사용을 권장한다.

require() 메소드의 동작 방식 이해하기

• require() 메소드는 다른 모듈 파일에서 만든 객체를 참조할 수 있다.
• 가상의 require() 함수를 만들어 보자.( 예제 )

모듈을 분리할 때 사용하는 전형적인 코드 패턴

• 코드 패턴으로 함수 할당, 인스턴스 객체 할당, 프로토타입 객체 할당 등이 있다.

함수로 할당하는 코드 패턴

• 예제

인스턴스 객체를 할당하는 코드 패턴

• 예제

프로토타입 객체를 할당하는 코드 패턴

• 예제

사용자 정보 관련 기능을 모듈화하기

• 라우팅 미들웨어, 데이터베이스 기능을 모듈화 해보자.

스키마 파일을 별도의 모듈 파일로 분리하기

• 07.express_modularization

설정 파일 만들기

• 설정에 필요한 정보(url, 환경 값) 등을 모듈화한다. (property.js)
• 설정 파일에 데이터베이스 스키마 정보를 넣고 동적으로 할당 한다. (database.js))
• 라우터 정보 또한 동적으로 할당 한다. (routeLoader.js))

UI 라이브러리로 웹 문서 예쁘게 꾸미기

• 해당 예제는 (Semantic UI)를 이용한다. 내용은 정적 리소스를 가져오는 부분(static 미들웨어)과 동일하고 html과 css관련 내용을 다루기 때문에 따로 다뤄보진 않겠다.

> npm install semantic-ui --save