Node.js - 1 [설치 (express)]

Node js

- 기존의 javaScript는 웹 브라우저에서만 사용했다면 node.js가 나옴으로서

JAVA, python등과 같이 서버사이드에서도 사용가능하게 되었다.

 

Express JS

- node js를 이용해서 더 쉽게 무언가를 만들어내는 framework이다.

 

node js는 React 설치 부분에 설치 과정이 나와있기 때문에 생략하겠습니다.

 

node js 설치

자신이 만들고 싶은 부분에 package를 만들기 위해서 폴더를 만들고 npm init으로 package를 만들겠습니다.

 

 

폴더를 만들고 npm init을 하면 version이 깜빡이는데 엔터를 쳐주면서 기본값을 넣다가

author부분에 자신의 이름을 넣어주고 모조리 yes를 눌러주며 기본 package를 생성합니다.

 

이제 자신이 원하는 텍스트 에디터로 해당 패키지를 켜보면 (저는 vscode로 열었습니다)

기본적인 내용이 담긴 패키지가 생성되었습니다.

 

index.js 생성

- index.js 라는 파일은 react js 에서도 가장 먼저 실행되는 파일이다. 백엔드에서도 마찬가지로서 서버를 실행하면 가장먼저

실행되는 파일이다. 해서 해당이름을 가진 파일을 생성하면 된다.

Express js 설치

- 해당 패키지가 있는 폴더에 터미널을 키거나 vscode를 이용하는 사람들은 아래와 같은 명령어로 express를 자신의 패키지에 설치하자

(먼저 yarn을 설치해주고 패키지 매니저인 yarn으로 express 설치를 진행하겠습니다)

npm install yarn

yarn add express

해당 라이브러리들이 생성된것을 확인하면서

node_modules 라는 폴더가 생성된것을 볼수 있습니다.

- 해당 폴더는 설치한 라이브러리들의 정보가 담겨 있습니다. 우리가 수정할일은 거의 없습니다.

 

Express Hello world

expressjs.com/ko/starter/hello-world.html

Express "Hello World" 예제

위 사이트는 express documentation으로 평소에 새로운 기술을 습득할 때 꼭 documentation을 참고하는 습관을

들이도록 합시다.

 

해당 페이지에서 기초 작성 코드를 복사해서 index.js 코드에 넣어봅시다.

저는 localhost:4000 포트를 사용하겠습니다.

 

const express = require('express') 

: 가져왔던 express 라이브러리에서 express라는 기능을 가져옵니다.

 

const app = express()

: express()라는 프레임워크를 시작합니다.

: express의 루트가 됩니다.

 

app.get('/', (req, res) => {
	res.send("Hello World");
}

: app이라는 express 프레임 워크에 get 요청을 / 라는 url로 보내서 req: 요청, res: 반응 변수를 보내어

res.send("hello World"); res요청이 hello World를 출력하도록 하였습니다.

 

app.listen(port, ()=>{
	console.log(`Example app listening at http://localhost:${port}`);
}

: app에 port(4000)을 입력해서 해당포트에 접속이되면 console에 해당 내용을 출력하게 하였습니다.

 

start

- start라는 스크립트를 추가해서 node를 실행시켜서 index.js 파일을 실행하게 합니다. 즉, start라는 명령어가 등록 된 것입니다.

이제 실행시봅시다.

터미널에 npm run start 혹은 yarn start를 하면 포트에 express가 실행이 됩니다.

현재 4000번 포트에 실행이 되고 있습니다.

 

웹브라우저에 가서 확인을 해봅시다.

이렇게 출력이 확인 되었습니다.