티스토리 뷰

반응형

Express는 node 활용을 도와주는 웹 프레임워크입니다.

Express를 사용하면 쉽게 노드 서버 생성이 가능합니다. 

 

1. node, npm 설치하기.

 

Express 프로젝트를 생성하기 전에 노드를 설치해야 합니다.

노드는 노드 공식 홈페이지에서 설치해도 되지만 저는 nvm을 활용하여 설치하는 것을 권장드립니다.

만약, 노드 서버에서 설치하고 싶다면 아래 노드 공식 홈페이지에서 다운로드 받으세요.

 

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

nvm으로 노드를 설치하는 방법은 아래 포스팅을 확인하여 설치하세요.

https://firework-ham.tistory.com/20

 

[node] nvm 설치하기, node, npm 설치하기.

nvm 활용하여 node, npm 설치하는 방법을 알아 보겠습니다. 1 설치 sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 2 설정 설치 후 nvm 명령어가 실행이 되지 않는..

firework-ham.tistory.com

설치를 완료하셨다면 버전을 확인하여 설치가 되었는지 최종 확인합니다.

node -v 
v12.14.1

npm - v
6.13.4

 

2. Express 프로젝트 생성하기.

프로젝트를 자동 생성하기 위해서 express-generator를 전역으로 설치합니다.

 npm install express-generator -g

프로젝트를 생성하기 위한 폴더로 이동하여 다음 명령어를 실행합니다.

express my-server

my-server와 함께 폴더가 생성됩니다.

express 프로젝트를 생성할 때는 자동으로 jade view engine이 선택됩니다.

만약, 리엑트, 앵귤러 등 프런트 프레임워크를 사용한다면 선택에 신경 쓰지 않아도 됩니다.

 

프로젝트가 생성되었다면 이제 라이브러리들을 설치하기 위해 아래 명령어를 실행합니다.

npm install

라이브러리 설치가 완료되었다면 다음 명령어를 실행하여 서버가 정상적으로 뜨는지 확인합니다.

npm start

포트가 지정되지 않았다면 3000번을 사용합니다.

만약, 수정하고 싶으시다면 bin 폴더에 www파일의 port를 수정합니다.

var port = normalizePort(process.env.PORT || '5000');

정상적으로 서버가 실행되었는지 localhost:5000으로 웹 브라우저에서 접속하여 확인하세요.

Express 첫 화면

Express 글씨가 표시된다면 정상적으로 프로젝트가 생성되었습니다.

이제 폴더 구조를 확인하고 API를 하나 생성해보겠습니다.

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views

app.js는 node 서버에서 엔트리 포인트입니다.

서버의 처음은 app.js에서 시작합니다.

서버의 흐름을 알고 싶다면 app.js에서부터 천천히 따라가면 됩니다.

 

routes 폴더는 라우팅에 따라 마지막 엔드포인트가 되는 파일들을 저장해 놓은 폴더입니다.

라우팅은 애플리케이션의 앤드포인트를 정의 클라이언트 요청에 따라 응답하는 방식을 말합니다.

 

public 폴더는 css, image 파일 등 프런트에서 사용할 리소스들을 저장하는 폴더입니다.

서버만 사용한다면 의미 없는 폴더입니다.

 

3. Get API 만들기.

 

index.js 파일에 새로운 url 앤드포인트를 정의하여 Get API를 만들어 보겠습니다.

아래 코드를 넣어주세요.

router.get('/documents/:id', (req,res) => {
  res.json({id: req.params.id});
});

코드는 documents 엔트리 포인트를 생성하여 id를 param로 받는 get api입니다.

코드를 추가하였다면 재실행해주세요.

npm start

브라우저로 아래 url를 입력하여 데이터가 정상적으로 표시되는지 확인합니다.

http://localhost:5000/documents/879

{"id":"879"}

id가 나오면 정상 동작입니다.

 

4. 마치며

Express를 사용하면 빠르게 서버 구현이 가능합니다.

간단한 API 테스트를 위해 서버가 필요할 때 사용하면 상당히 좋습니다.

서버가 필요할때 Express를 활용해보세요.

반응형
댓글