1. nodemon 설치하기
nodemon은 우리가 소스코드를 수정할 때마다 코드의 변화를 감지하여 자동으로 서버 프로그램을 재시작해 주는 도구이다. Node.js기반으로 실행해 주는 것은 물론이고 모니터링 까지 해주므로 꼭 사용하자!
터미널에 'npm i nodemon -D'를 실행해주자
why? ) 패키지를 설치할 때, -D옵션을 추가한 것은 개발 및 테스트를 위해 설치하는 패키지 라는 뜻.
- 설치를 마치고 나면 자동으로 package.json에 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" 실행
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에 접속하면
다음과 같이 서버가 열림을 확인할 수 있다.
'Develop > Zoom만들기' 카테고리의 다른 글
Zoom만들기_ 6. 실시간 채팅 구현 (0) | 2023.08.30 |
---|---|
Zoom 만들기 _ 5. 메시지 주고받기 (0) | 2023.08.30 |
ZOOM 만들기_ 4. 웹소켓 적용 (0) | 2023.08.30 |
ZOOM 클론코딩 _ 3.프론트엔드 작업 (0) | 2023.08.29 |
ZOOM 클론코딩 _ 1. 프로젝트 생성 & 세팅 (0) | 2023.08.29 |