Node.js | Express Web 어플리케이션 자동 생성 | Express 명령으로 Web 어플리케이션 생성

Tags:

그럼 Web 응용 프로그램을 만들 수 본다. 아래 순서대로 작업한다.

  1. 설치 폴더 만든다.
    먼저 Web 응용 프로그램 폴더를 어딘가에서 준비한다. 여기에서는 적당한 곳에 “exapp"라는 폴더를 만들어 둔다. 이 안에 Express의 Web 응용 프로그램을 작성해 나갈 것이다.

  2. 명령 프롬프트으로 작업 폴더로 이동한다.
    명령 프롬프트(Mac OS X의 터미널)을 시작하고 만든 작업 폴더(여기에서는 “exapp"폴더)가 있는 곳으로 cd 명령 사용하여 이동한다. 예를 들어, 특정 폴더에 “exapp"폴더가 있다면,

$ cd [특정 폴더]

이렇게 하면 된다. 주의할 점은 “exapp 폴더 안으로 이동하면 안된다"는 점이다. 즉, “cd [해당 폴더]\exapp"이렇게 하면 된다. exapp이 있는 상위 폴더로 이동한다.

  1. Express 명령을 실행한다.
    그럼 Express 명령으로 Web 애플리케이션을 생성한다. 이는 “express 폴더명과 같은 실행한다. 단, 이렇게 하면 템플릿 엔진에 “jade"라는 것이 설정된다. 아무튼, 이대로 라도 괜찮지만(또한, jade는 템플릿 엔진을 기억하면 된다), 아무래 이미 사용 경험이 있는 EJS을 사용하여 만드는 것이 편할 것이다.

EJS을 템플릿 엔진으로 설정하는 경우에는 “-e"옵션을 지정하고, “express -e 폴더명"과 같이 실행한다. 여기에서 예를 들면, “exapp"폴더에 파일을 생성할 것이기에,

$ express -e exapp

이와 같이 실행한다. 이것으로 필요한 파일들이 “exapp"폴더에 만들어 졌다. “-e"를 붙이지 않으면 생성되는 템플릿 파일 등이 달라지므로 주의해야 한다.

  1. npm install을 실행한다.
    이것으로 끝이 아니다. 이어서 cd 폴더명 && npm install명령을 실행한다. 여기에서 예를 들자면, 다음과 같이 실행한다.
cd exapp && npm install

디렉토리 이동하는 명령인 cd로 “exapp 폴더로 이동하고, npm install을 실행하는 작업을 하고 있다. 그렇지 않으면, 필요한 파일들이 모이지 않기 때문에, 배포 시에 응용 프로그램이 잘 동작하지 않는다.

이것으로 Web 응용 프로그램은 완성되었다!

Web 어플리케이션 구성

그럼 만든 Web 응용 프로그램의 구성을 살펴보자. 설치한 폴더(여기서는 “exapp"폴더) 안에는 다음과 같은 파일과 폴더가 만들어지고 있다.

bin 폴더

실행하는 프로그램이 저장되어 있는 곳이다. 이 폴더에는 ‘www’라는 파일이 하나 있다. 이 응용 프로그램의 실행 스크립트 파일이다.

node_modules 폴더

Node.js에서 사용하는 모듈(Express 등 각종 프로그램과 거기에 필요한 파일)들이 모두 여기에 정리되어 있다. 사용자가 이 안에 있는 파일을 조작할 은은 거의 없다.

public 폴더

이 폴더은 공개 파일을 설치하는 곳이다. 예를 들어, 이미지 파일 및 JavaScript 라이브러리, 스타일시트 파일 등을 여기에 정리한다. 여기에 배치하면 Express에서 사용할 수 있다.

routes 폴더

여기에 있는 파일들은 각각의 Web 페이지에서 처리할 스크립트 파일들이다. Express가 생성한 Web 어플리케이션에서는 스크립트 관련의 주요 처리 부분과 개별 페이지의 처리가 별도의 폴더로 나누어져 있다. 여기에는 각각의 페이지 처리가 보관되어 있다.

views 폴더

여기는 앞전에 설명했듯이, 페이지 템플릿 파일들을 정리된다. 화면 표시를 위한 필요한 파일들이 모두 이 안에 준비된다.

app.js 파일

이 파일은 메인 프로그램이 되는 스크립트 파일이다. Node.js으로 프로그램을 실행할 때에 이 파일은 지정하지 않는다. 앞전에 bin 폴더에 있는 www에서 app.js를 호출 실행한다.

package.json 파일

이 파일도 앞전에 설명했다. Web 어플리케이션의 패키지 정보를 기술한 파일이다.

 

대략 전체의 구성을 정리되었다. 이를 바탕으로 Web 어플리케이션을 작성하는 경우에는 “app.js에서 메인 프로그램 수정”, “routes에 만드는 페이지의 스크립트 파일을 준비”, “views에 표시용 템플릿 파일을 준비"와 같은 흐름으로 만들어 가면 된다.

조금 이해하기 어려운 것은 bin 폴더에 있는 www와 app.js의 차이이다. Express Application Generator로 생성되는 프로그램은, 어플리케이션의 기동 스크립트 및 메인 스크립트가 나뉘고 있다. www는 프로그램을 시작하기 위한 스크립트이고, app.js이 응용 프로그램의 메인 프로그램이다.

흐름을 알게 되면, 명령 프롬프트에서 “exapp"폴더로 이동하여 다음과 같이 실행한다.

$ node .\bin\www

이걸로 서버 프로그램이 실행된다. 브라우저에서 http://localhost:3000 에 액세스하면 간단한 페이지가 표시된다. Express으로 자동 생성한 Web 어플리케이션은 디폴트로 포트 번호 3000이 지정되기 때문에 주의하도록 한다.




최종 수정 : 2018-07-16