Babel, Nodemon, Express 이용한 backend(Node.js 서버) 구축(1)

1. Node.js 설치

https://nodejs.org/ko/#home-downloadhead

Node.js

 

 

1_nodejs_setup : 체크박스 해제하고 설치

 

 

2. PowerShell 설치

https://docs.microsoft.com/ko-kr/powershell/

PowerShell 설명서 - PowerShell

 

3. Visual Studio Code 설치

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

4. npm 설치(cmd에서 npm init -y)

1) 오류: npm WARN config global '--global', '--local' are deprecated. Use '--location=global'

2) 해결방법: 

• PowerShell 관리자 권한으로 실행
• Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force 실행
• npm install --global --production npm-windows-upgrade 실행
• npm-windows-upgrade 실행
• npm -v 실행

 

npm init -y 에러

 

 

 

npm WARN config global 에러 해결

 

 

 

5. 프로젝트 폴더 생성 및 visual studio code 실행

1) cmd 실행

2) 명령어 차례대로 입력 : mkdir zoom > cd zoom > npm init -y > code .

3) Visual Studio Code : [Terminal] 탭 > [New Terminal] 실행

4) 하단에 생긴 터미널에서 powershell로 선택하고 README.md 생성

PS C:\Users\SIU\zoom> ni README.md


    디렉터리: C:\Users\SIU\zoom


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----      2022-06-16   오후 4:05              0 README.md

 

5) README.md 작성

# Noom

this is
Zoom Clone using Nodejs, WebRTC and Websockets.

 

6) package.json 수정

{
  "name": "zoom",
  "version": "1.0.0",
  "description": "Zoom Clone using WebRTC and Websockets, Nodejs",
  "license": "MIT"
}

 

7) nodemon 설치

PS C:\Users\SIU\zoom> npm i nodemon -D

 

8) babel.config.json 파일 생성

9) nodemon.json 파일 생성

10) src/server.js 파일 생성

 

 

6. git 시작 및 babel 설치

1) PS C:\Users\SIU\zoom> git init .

2) PS C:\Users\SIU\zoom> npm i @babel/core @babel/cli @babel/node @babel/preset-env -D

 

 

7. .gitignore 파일 설정

1) PS C:\Users\SIU\zoom> ni .gitignore

2) 내용에 아래와 같이 작성

/node_modules

 

8. nodemon.json 수정

{
	"exec": "babel-node src/server.js"
}

 

9. babel.config.json 수정

{
	"presets": ["@babel/preset-env"]
}

 

10. package.json에 scripts 추가

"scripts":{
    "dev": "nodemon"
  }

 

11. express 설치

PS C:\Users\SIU\zoom> npm i express

 

12. pug 설치

PS C:\Users\SIU\zoom> npm i pug

 

13. server.js 수정

• express : views 설정 및 render
• 나머지 로직은 websocket에서 실시간으로 발생

import express from "express";
const app = express();
console.log("hello world!");
app.listen(3000);

 

14. 실행

PS C:\Users\Nam\zoom> npm run dev