https://jinbroing.tistory.com/87
[목표]
- express를 사용하여 nodejs 공식홈페이지에 나와있는 예제코드보다 더 쉽게 웹서버 구축해보자
- express를 사용하여 웹서버 내부 설계, 제작을 해보자
[express란]
- 웹서버를 쉽게 구축할 수 있게하는 프레임워크
- 프레임워크란
(1) 어플리케이션을 구현할 때 어플리케이션 구현에 꼭 필요한 부분, 구조를 미리 구현해둔 구조체
(2) 루비에는 레일즈(그래서 ruby on rails), php는 라라벨, java는 spring, nodejs는 express를 주로 사용함
(3) 공식홈페이지 : http://expressjs.com/ko/
[express 설치]
(1) mkdir 디렉토리명 : 프로젝트 디렉토리 만들기
(2) npm init : 프로젝트 관리를 보다 쉽게 하기위해 npm 초기 관리를 선언함
- npm은 모듈을 설치하기도 하지만 여러 모듈이 설치된 프로젝트의 의존성, 버젼, 적용 관리해줌
- 다양한 입력 문항이 나오는데 프로젝트에 대한 설명을 직접 기입하는 문항들임, 테스트라 막 입력했음...
- 문항 입력 후 마지막 enter 키를 입력하면 package.json 파일이 생성됨(ls 로 현재 디렉토리 파일 목록 확인해보기)
- package.json : npm의 역할(앱에 적용된 모듈에 대한 관리를 위한 파일), 확장자가 json == 자바스크립트 객체형식( { .... } ) 자료 표현
- json은 새로운 언어가 아닌, 자바스크립트 객체 형태로 표현된 데이터 포멧임, 가볍다는 장점
- 앞으로 json 데이터 포멧을 기반한 통신을 다룰 예정
(3) npm install express --save
- npm을 통해 express 모듈(웹프레임워크)을 설치함
- --save 의미 : npm install 명령어의 옵션, 설치되는 모듈은 npm init으로 생성된 json 파일 내 dependencies 목록에 자동추가 됨
(4) install이 완료된 후 package.json 파일을 켜보면(vi) dependencies 목록에 express가 추가된 것을 확인할 수 있음
(5) 설치완료 : express 웹프레임워크를 사용할 수 있다는 것
[express로 웹어플리케이션 만들어보기]
(1) express를 설치한 디렉토리 내 app.js 파일을 만듬
=> 파일명은 app.js로 고정(express에서 권장하는 명칭)
=> nodejs로 구축하는 웹어플리케이션 서버 내부 설계도가 app.js 파일
=> 즉 app.js 파일에 nodejs로 만든 서버 내부 설계 내용이 들어감
=> 뒤부터 어떤 설계 내용이 들어가는지 파헤쳐봄
=> app.js를 메인파일, 메인 어플리케이션, 엔트리 어플리케이션이라 함
=> 프로젝트(웹어플리케이션) 구동 시 가장 최초로 실행되는 파일
(2) express로 웹서버 만들기 코드 작성(vi를 이용하여)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* (2-1) */ var express = require('express') // var app = express() /* (2-2) */ app.get('/', function(req, res){ res.send('Hello World') }) app.login('/login', function(req, res){ res.send('<h1>please login</h1>') }) /* (2-3) */ app.listen(3000, function(){ console.log("Connected 3000 port!") }) | cs |
- 위의 코드는 임의로 코드 작성한 것이 아니라 express 만든이가 제시하는 express 사용방법(따라야함)
- 얻을 수 있는 것 (위 코드에 지정된 번호 참고)
(2-1) 모듈 import
- express 프레임워크를 파일에 include함, 그와동시에 require함수의 리턴값을 받음
(2-2) 라우트 지정
- url을 구성하는 것을 라우트 지정이라 함
- 쉽게말하면 서비스 사용자가 어떤 메뉴를 클릭했을 때 메뉴에 해당하는 화면을 브라우저에 출력시키기위해서는
- 서버에 요청을 해야하는데, 요청할 때 주소가 날아감.
- 어떤 주소가 요청되어져왔을 때 어떤 html 문서 파일을 응답(브라우저로 전송)해주겠다는 것을 연결시키는 작업
- 이를 라우팅 한다라고 함
- 서버로 요청할 때 주소값이 드러나냐 나지않느냐의 차이로 app. 다음에 올 메소드명이 달라짐
- 주소값이 주소창에 드러나도 상관없을 때에는 get을 쓰고 드러나지 말아야할 때에는 post를 사용함
- 위의 주소 ( ' / ' ) 는 홈 디렉토리 : 웹사이트의 첫번째 페이지
- 위의 라우트 지정 메소드에 따라 홈 디렉토리에 접근했을 때(요청) 응답으로 "Hello World" 메세지를 보냄(콜백함수)
- res는 response의 약자로 객체이며, send는 res 객체의 메소드로 사용자 요청에 대한 응답을 보내는 메소드임
- 요약하자면 사용자가 " http://서버ip:포트번호/ " 로 요청을 하면 콜백함수에 의해 "Hello World" 메세지를 전송(응답)해줌
(2-3) 서버 응답 준비
- 서버가 클라이언트로부터의 요청을 받을 준비가 완료되었을 때 콜백함수가 동작함
- 3000번 포트를 열어놓음(클라이언트는 서버로 요청할 때 서버 ip(퍼블릭) + 포트로 요청 주소를 구성해야함
[참고자료]
(1) 생활코딩 서버사이드 자바스크립트 : https://opentutorials.org/course/2136/11886
(2) express 웹프레임워크 공식홈페이지 : http://expressjs.com/ko/starter/hello-world.html