zoom 클론코딩 _2. 서버작업

1. nodemon 설치하기

 

nodemon은 우리가 소스코드를 수정할 때마다 코드의 변화를 감지하여 자동으로 서버 프로그램을 재시작해 주는 도구이다. Node.js기반으로 실행해 주는 것은 물론이고 모니터링 까지 해주므로 꼭 사용하자!

 

터미널에 'npm i nodemon -D'를 실행해주자 

 

why? ) 패키지를 설치할 때, -D옵션을 추가한 것은 개발 및 테스트를 위해 설치하는 패키지 라는 뜻.

• 설치를 마치고 나면 자동으로 package.json에 devDependencies라는 항목이 추가됨
• 설치된 패키지가 자동으로 표시된다.

설치가 잘 된 모습

devDependencies항목이 추가됨.

---

2. babel 관련 패키지 설치하기

세련된 자바스크립트 코드 작성을 위해 babel 관련 패키지를 설치할 예정이다.

 

Why?)

babel은 작성 완료된 자바스크립트 코드를 다른 버전의 자바스크립트 코드로 번역할 수 있는 자바스크립트 컴파일러이다.

자바스크립트는 때때로 새로운 문법이 추가되기도 하는데, 이런 새로운 자바스크립트 문법에 모든 브라우저가 일일이 대응할 수 없다. 이를 예방하여 작성된 코드 이전의 문법으로 자동변환 해주는 babel 자바스크립트 컴파일러를 사용한다.

 

총 4가지의 babel관련 패키지를 설치한다.

→ 'npm i @babel/core @babel/cli @babel/node @babel/preset-env -D' 명령어 실행하기

잘 설치되었다.

---

3. 서버파일 및 설정파일 생성하기

 

3-1) 루트 디렉토리에 src폴더를 만들고 server.js라는 파일 생성하기

server.js에 다음과 같은 코드 작성

후에 테스트 코드로 이용될 것임.

 

 

3-2) 루트 디렉토리에 nodemon.json과 babel.config.json파일을 각각 새로 만들자.

이 파일들을 루트 디렉토리에 위치시키고 설정 사항을 작성해 두면 프로젝트에 반영될 것.

---

4. 설정 파일 수정하기

 

4-1) nodemon.js 수정

nodemon은 코드를 실행해주는 런타임이다.

 

컴파일은 코드의 실행보다 먼저 처리되어야 하므로

nodemon.json은 babel컴파일러를 통해 컴파일을 한 다음에 코드를 실행할 것을 이해해야 한다.

따라서 이런 구조를 적용해주는 '설정'을 추가해 줘야 한다.

 

※ 단 우리의 서버 프로그램은 src폴더의 server.js니까 파일명도 잊지말고 써줘야함

서버명도 잘 적었다.

4-2) babel.config.json 파일 설정

다음과 같이 설정 코드 작성

여기서 preset은 babel에 대한 사전 설정을 의미하며,

@babel/preset-env는 ES6 이후 자바스크립트의 모든 기능을 컴파일 할 수 있는 옵션을 의미함.

---

5. 스크립트 추가 및 테스트하기

 

5-1) package.json을 열고 명령어를 추가할 수 있도록 scripts키를 추가해보자.

그리고 명령어를 다음과 같이 하나 추가하자.

5-2) 터미널을 열고 서버 프로그램 실행

명령어 "npm run dev" 실행

hello 태스트 코드가 잘 출력된다.

---

6. express 설치하기

6-1) express는 Node.js환경에서 API서버를 개발할 때 사용할 수 있는 웹 프레임워크이다.

※ 우리는 서버 프로그램의 기능도 express를 사용해서 만들 예정.

 

→ 터미널에 "npm i express" 실행

※ express는 개발 단계뿐만 아니라 실제 서비스에서도 사용할 패키지 이므로 -D 옵션을 사용하지 않음.

 

6-2) 설치 후 server.js를 수정해야한다.

//console.log("hello");
import express from 'express';

const app = express();

const handleListen = () => console.log("Listening on http://localhost:3000");
app.listen(3000, handleListen);

설명 : 우리는  import express from 'express'; 를 통해 express를 우리 서버에 가져왔다.

그걸 토대로 서비스를 생성하고 localhost 의 3000번 포트에서 서버가 열리도록 코드를 작성한 것임.

 

npm num dev로 실행하면 

잘 실행된다.

실제로 localhost:3000에 접속하면

다음과 같이 서버가 열림을 확인할 수 있다.