REST API 서버 만들기 (2) - Express 설치

<참고>

REST API 서버 제작 수업을 듣고 포스팅을 하는 게시글 입니다.

서버 개발자가 아니고, 노드를 전문적으로 사용하는 개발자가 아니기에 오류가 있을 수 있습니다.

 

윈도우로 진행하시는 분들은 콘솔 명령어 수행 시 GitBash 사용을 권장드립니다.

---

이번 강의에서 작업 할 내용

• Express 프로젝트 생성하기

• Express 세팅하기

---

Express 프로젝트 생성하기

Express를 설치 해주기 위해서 `npm install express-generator -g` 를 입력해주도록 합시다.

[ -g 가 붙으면 해당 프로젝트가 아닌 컴퓨터에 설치가 되는 개념이여서 cli를 주로 -g 하게 설치합니다. ]

설치가 완료되면 아래와 같이 폴더와 데이터 구조가 생기게 됩니다.

앞서 package.json은 프로젝트를 관리하는 파일이며 의존성 관리도 한다고 하였습니다.

보시다시피 dependencies에 총 6개의 모듈이 추가되어 있습니다.

dependencies에 추가를 한다고 해서 바로 적용이 되는 것이 아닌 `npm install`이라는 명령어를 통해

package.json에 적혀 있는 내용을 프로젝트에 적용 시켜 주어야 합니다.

위와 같이 프로젝트를 설치 해주면 프로젝트에 아래와 같은 폴더가 추가되었습니다.

package.json에 명시되어 있던 dependencies의 모듈들이 해당 폴더에 다운로드가 되어 있습니다.

 

그 다음은 express를 실행하여 서버를 켜보도록 하겠습니다. `npm start`

아무런 반응이 없다면 정상입니다. 이제 아래의 주소로 접속하여 정상적으로 접근이 되는지 확인을 해보도록 합시다.

http://localhost:3000

정상적으로 접속이 되고 서버에도 접속자가 GET 메서드를 날려 접근을 하였고 css도 로드를 했다는 것을 알 수 있습니다.

---

Express 세팅하기

위에서 간단하게 Express 프로젝트를 만들고 켜보는 작업을 하였습니다.

여기에 사용하지 않는 파일과 몇가지의 모듈을 더 추가시켜 보도록 하겠습니다.

 

`npm install cors ejs helmet`

설치한 모듈은 다음과 같습니다.

 

cors : Cross-Origin Resource Sharing의 약자로 한 출처에서 실행 중인 웹앱이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 모듈

ejs : Embedded JavaScript의 약자로, Html 태그 안에 자바스크립트를 내장 할 수 있도록 하는 모듈

helmet : Express.js 사용시 Http 헤더 설정을 자동으로 바꾸어주어 취약성으로 부터 보호 할 수 있도록 하는 모듈

 

그 다음은 내부 소스를 수정 해보도록 하겠습니다.

먼저, 사용하지 않는 리소스 폴더와 view 폴더를 모두 삭제해주시고 user.router도 삭제 해주세요.

그 다음 app.js의 var을 const로 모두 치환을 해주시고 view 관련 함수를 다 제거를 해주신 뒤

앞서 설치하였던 cors와 helmet를 등록 해주도록 합시다.

 

express는 미들웨어 웹 프레임워크 use 함수를 통해 입력이 들어오면 타고 들어가야 할 함수들을 등록을 해줍니다.

무엇인가 입력이 들어오면 cors() 를 통해 권한을 부여하고 helmet()으로 취약점을 보완한 뒤, 로그, json, urlencode cookie parse 후 라우트에 접근하게 됩니다.

 

routes/index.js 파일을 위와 같이 수정하고 서버를 다시 키고 확인을 해주도록 합시다.

이제 좀 더 REST API 다운 모습이 갖추어졌습니다.

 

다음 강의에서는 user.route 와 user.controller를 생성해보도록 하겠습니다.