[Node.js] 서버 설치

nodemon 설치에 앞서서, vsCode 터미널에서 리눅스 명령어를 썼더니 아래와 같은 문구가 나타났다.

D:\Node.js\zoom>clear
'clear'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

 

* 해결 방법

1. clear 명령어는 리눅스 및 macOS에서 터미널의 화면을 지우는 명령어입니다. 하지만 Windows의 기본 명령 프롬프트(또는 PowerShell)에서는 clear 명령어를 지원하지 않습니다. 대신, Windows에서는 cls라는 명령어를 사용하여 터미널 화면을 지울 수 있습니다.

2. Windows에 WSL(Windows Subsystem for Linux) 설치하기
WSL을 설치하면 Windows에서 리눅스 환경을 사용할 수 있게 되어 clear 명령어도 사용할 수 있습니다. WSL을 설치하면 Linux 명령어들을 그대로 사용할 수 있습니다.
WSL 설치 방법:
PowerShell을 관리자 권한으로 실행하고, 다음 명령어를 입력하여 WSL을 설치합니다.

bash
wsl --install

설치가 완료되면, Windows에서 Ubuntu 또는 다른 Linux 배포판을 사용할 수 있습니다.
그런 후 VSCode에서 WSL 터미널을 사용할 수 있게 되면 clear 명령어를 사용할 수 있습니다.

3. VSCode에서 다른 터미널 사용하기
VSCode에서는 기본적으로 Windows 명령 프롬프트나 PowerShell을 사용합니다. 하지만 다른 터미널(예: Git Bash, WSL 등)을 사용할 수 있습니다. 이렇게 하면 clear 명령어를 사용할 수 있습니다.
터미널 변경 방법:
VSCode에서 Ctrl + Shift + P를 눌러 "Command Palette"를 엽니다.
"Terminal: Select Default Profile"을 검색합니다.
원하는 터미널(예: Git Bash 또는 WSL)을 선택합니다.

 

 

01. nodemon?

node main.js

Node.js로 main.js 파일을 실행하는 명령어이다. Java나 C처럼 여러 옵션을 넣어 컴파일한 뒤 실행하는 번거로운 과정은 없지만, 코드가 변경될 때마다 재실행 해야 한다는 단점이 있다. 

 

nodemon을 사용하면 코드에 변경 사항이 생길 때마다 자동으로 이를 감지하여 코드를 재실행 해준다.

 

02. nodemon 설치

npm i nodemon -D

 

위와 같이 파일과 폴더를 생성했다.

npm i @babel/core @babel/cli @babel/node @babel/preset-env -D

-D 옵션을 주면 package.json의 dependencieis가 아닌, devDependencies에 모듈이 추가된다.
말 그대로 개발용 모듈만 모아 놓은 것으로, 개발이 완료되면 코드를 실시간으로 변경하고 재실행 할 필요가 없기 때문에 그 때는 제거될 것이라는 의미다.

---

zoom 클론 프로젝트는 수행 중 .gitignore파일에 아래와 같이 기재하였는데. node_modules 폴더는 GitHub에 업로드 하지 않기 때문이다.

/node_modules

---

 

03. nodemon.json파일에 해당 키를 적용하면 

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

 

src/server.js에 대해 babel-node 명령문을 실행시키는 것이다.

 

04. babel.config.json파일에 presets를 설정해준다.

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

 

babel?

바벨은 ES5+ 코드를 자바스크립의 하위 호환 버전으로 변환하여 오래된 브라우저에서 실행하도록 변환하는 컴파일러다.

모든 브라우저가 최신 문법과 기술(ES6)를 지원하지 않기 때문에 구 기능으로 변환하는 작업이 필요하다.

 

05. package.json에 script 추가. nodemon이 호출되면 nodemon.json을 살펴보고 거기에 있는 코드를 수행

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

 

06. express와 pug 설치

npm i express

npm i pug

 

express?

node의 프레임워크

 

07. server.js에서 import하기

import express from "express";

const app = express();

console.log('hello');

app.listen(3000);

 

08.dev 수행. 아래 명령어 터미널에서 수행.

npm run dev

localhost:port에 아래와 같이 나타나면 서버 설치 완료