Image
Image

DAY2-2.Node Express기반 웹 프로젝트 구성하기

1)Node Express.js?
-Node기반의 오픈소스 웹서버 프레임워크 라이브러리 
-웹 및 모바일 애플리케이션 개발 및 서비스를 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 개발 프레임워크
-
노드 기반 웹서버의 생성 및 관련  웹서버 고급기능등을 기본제공함
-자유롭게 활용할 수 있는 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API를 작성

-웹서버 기반 MVP UI 설계패턴을 쉽게 구현할수 있는 프로젝트 구조 제공


2) Node Express.js 프로젝트 만들기
가)express-generator 팩키지 전역으로 설치하기
- express-generator 팩키지는 Node Express 기반으로 노드 개발 프로젝트 소스 구조를 빠르게 자동으로 구성해주는 프로젝트 템플릿 생성기능을 제공하는 노드 팩키지 입니다.
- express-generator는 일반적으로 개발 또는 서버 컴퓨터내에서 전역적으로 사용되는 팩키지 이기 때문에 설치시 전역 팩키지로 설치합니다. 
-터미널 창에서 아래 명령어를 입력하고 실행합니다.

npm i --g express-generator

-전역으로 설치한 팩키지들은 최초 한번 설치한 후에는 다시 설치할 필요는 없습니다.
-물론 프로젝트 생성시 마다 다시 설치해도 문제는 없습니다만 이는 불필요한 과정입니다.


나) Node Express.js 기반 프로젝트 만들기
- express-generator 팩키지 설치가 완료되면 아래 express명령어를 통해 서버 기반에서 MVC 개발 패턴 기반의 Node Express.js 개발 프로젝트 구조를 손 쉽게 자동으로 생성할수 있습니다.
-터미널에서 cd.. 명령어로 상위 폴더인 DAY2폴더 위치로 이동한다.
-cd..
- 터미널 창에서 express명령어를 이용해 Express 기반 노드 프로젝트를 생성합니다.

express sample-project1 --view=pug
or
express sample-project1 --view=ejs

express 프로젝트명 --view=뷰엔진이름

-express 명령어 다음에는 여러분의 프로젝트명을 입력하고 다음으로 –view의 값으로 Express.js기반에서사용할수 있는 뷰엔진 기술을 기제합니다. 

뷰엔진이란 웹서버상에서 화면(뷰=View)를 담당하는 HTML 페이지를 제어,조작할수 있는 기술을 말하며 Express.js기반에서 주로 사용되는 뷰 엔진으로는  pug 와 ejs 가 존재하며 이번 실습에서만 pug뷰엔진을 간단히 경험해 볼것이고 전체 강의에서는 ejs 뷰엔진을 사용합니다.  
- express sample-project1 --view=pug 명령어를 말로 풀어보면 express-generator 를 이용해 sample-project1 프로젝트를 만들고 HTML 페이지 뷰를 조작할 뷰엔진 기술로 pug를 사용하겠다는 의미입니다.



다) express 프로젝트 참조 노드팩키지 설치 및 실행하기

-탐색기 영역에 생성된 sample-project1 폴더 내용을 확인합니다.
- sample-project1\package.json파일을 오픈하고 scripts 속성과 dependencies 속성 내용을 확인합니다.
-sample-project1 폴더내에 node_modules 폴더가 없음을 확인합니다.
-터미널창에서 cd 명령을 통해 새로 생성된 해당 프로젝트 폴더로 이동합니다. 
-
cd sample-project1
-sample-project1\package.json 파일의 dependencies속성내 노드 팩키지 명세기반 npm i 명령어를 통해 현재 프로젝트에 관련 된 노드팩키지를 모두 다운로드 설치합니다.
- npm i
-프로젝트에서 사용하는 모든 노드팩키지 설치가 완료되었으면 npm start명령어를 통해 노드 어플리케이션을 실합니다.
-
npm start
-정상적으로 실행되었으면 웹브라우저를 오픈하고 http://localhost:3000 으로 접속해보세요.
-아래와 같은 웹페이지가 오픈되었으면 정상적으로 프로젝트가 실행되어 웹서버에 의해서 서비스 된것입니다.
-실행된 노드 어플리케이션을 종료하려면 Control 키 + C 키를 누르시면 실행중인 어플케이션이 종료되면서 다시 소스를 편집할수 있는 모드로 전환됩니다.

-npm start해서 실행중인 어플리케이션 실행 모드에서의 소스변경 저장은 가능하나 변경내용 적용확인은 바로 불가합니다. 나중에 nodemon이란 팩키지를 추가 설치하시면 변경과 함께 바로 적용된 내용을 확인할수도 있습니다. 


라)express 프로젝트 실행과정 이해하기

-sample-project1\package.json 파일내 scripts 영역을 확인해보면 start란 개발자 정의 명령어가 정의되어 있고 실행 내용은 node 명령어를 통해 bin폴더내 www파일(www.js)을 실행하게 됨을 확인합니다.
-www파일을 열어보면 express 웹서버를 생성하고 3000번 port  설정 내용이 있는데요. 
-해당 노드 프로젝트는 실행되면 bin\www파일이 실행되면서 www파일에서 node express 웹서버를 만들고 해당 웹서버는 3000번 포트를 통해 서비스되게 코딩되어 있습니다.
-포트를 변경하고 하면 www 파일내 3000을 다른 포트로 변경 저장하시면 됩니다.


3)express 프로젝트 구조 확인하기

express 명령어에 의해  만들어진 Node Express 프로젝트의 구조와 구성요소들의 역할에 대해 좀더 자세히 알아보도록 하겠습니다.


bin : www.js 노드 프로젝트 시작 스크립트로 Express 기반 웹서버 생성 및 기초 서비스 환경 설정 제공
node_modules : 프로젝트에서 사용하는 npm 설치 팩키지 모듈 저장 공간
public : 정적 웹 공용 리소스 파일 저장 공간(정적HTML,이미지,CSS,Javascripts,Plugins) 
routes :각종 라우팅 파일(MVC패턴에서의 Controller역할) 저장공간 -사용자 요청 응답제어,DB호출,각종 비즈로직 처리
views : 뷰 화면(HTML)을 담당하는 각종 뷰 파일(.pug or .ejs 파일) 제공
app.js : Node Express 웹 어플리케이션 환경 구성 및 설정 파일
package-lock.json: NPM 팩키지간 종속성 정보 제공 파일
package.json: NPM 팩키지 설정 파일


4)Node Express 프로젝트 생성 복습하기 
-지금까지 진행한 < Node Express기반 웹 프로젝트 구성하기> 내용을 참고하여 DAY2폴더내에 sample-project2, sample-project3를 만들어보고 실행해보세요.
-몬 가 잘못 만들어 졌다고 생각되면 과감하게 Visual Studio Code 또는 윈도우 탐색기에서 해당 프로젝트 폴더를 삭제하고 다시 진행해보세요. 
-복습 과정을 통해 Node Express 프로젝트를 만들고 실행하고 중지하면서 개발소스와 서비스되는 프로세스와 관련 명령어가 익혀지도록 합니다.


%주의사항%

- express-generator 팩키지는 전역으로 설치되었으니 재설치 하지 않아도 됩니다.
- 서비스 포트를 바꿔가며  프로젝트를 실행해보세요.
- 실행중인 프로젝트를 반드시 터미널에서 Control 키 + C 입력하여 종료 후 다른 프로젝트를 실행하세요.
- 동일한 포트가 이미 실행중이면 npm start시  포트가 충돌하여 해당 프로젝트가 실행되지 않습니다.
- express sample-project1 --view=ejs 명령어로 뷰엔진을 ejs로 바꿔서도 프로젝트를 만들어보세요.


Image

댓글목록

Image