Frontend/react

Node JS / Express JS 설치

dddzr 2022. 6. 16. 22:33

개념

Node.js

Node.js가 없을 때 JavaScript를 브라우져에서만 사용 -> 서버사이드에서 JavaScript를 쓸 수 있는 언어

Express.js

Node.js를 쉽게 사용할 수 있게 해주는 프레임워크

 

설치

1. 설치 확인

cmd창에서 node -v 입력, 버전이 나오면 설치되어 있는 것

2. 다운로드

아래 사이트에서 LTS버전으로 다운로드 클릭

다운로드 후에  node -v 쳐서  잘 설치되었는지 확인

 

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

환경설정

1. 디렉토리 생성 및 npm패키지 설치

cmd에서 npm init

D:\>mkdir reactProject
D:\>cd reactProject
D:\reactProject>mkdir boiler-plate
D:\reactProject>cd boiler-plate

D:\reactProject\boiler-plate>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (boiler-plate)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: dzzz
license: (ISC)
About to write to D:\reactProject\boiler-plate\package.json:
//여기부터 엔터치면 기본값 자동으로 입력
{
  "name": "boiler-plate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "dzzz", //이름만 직접입력함
  "license": "ISC"
}


Is this OK? (yes)

D:\reactProject\boiler-plate>

 

2. npm설치 확인

코드에디터에서 디렉토리 오픈

npm init으로 package.json이 자동생성됨.

 

3. index.js 생성

backend 서버 시작하면 index.js에서 시작! 시작점이 되는 파일 new파일로 생성(내용 없는상태)

 

4. express.js 다운

cmd나 Visual Studio Code 내부의 터미널 아무거나 이용해도됨.

npm install express --save

 

node_modules 폴더가 생성됨

다운받은 dependencies들은 이 폴더안에서 관리됨. (사용자가 수정할 일 거의 x)

--save 옵션은 아래 package.json에 express버전을 표시하는 것

 

5. index.js에서 expreess.js 앱생성

documentation에서 기본 코드 복사

https://expressjs.com/en/starter/hello-world.html

 

Express "Hello World" example

Hello world example Embedded below is essentially the simplest Express app you can create. It is a single file app — not what you’d get if you use the Express generator, which creates the scaffolding for a full app with numerous JavaScript files, Jade

expressjs.com

 

 

6. 실행

start 스크립트 지정

서버 run!

start로 지정한 스크립트 (index.js)가 실행됨.

index.js에서 console.log (app이 port에 listen했는지 확인)

브라우저에서 주소로 접속

 

Ctrl+C 로 서버 끌 수 있음

'Frontend > react' 카테고리의 다른 글

비밀 정보 보호 (DB 계정 정보 보호)  (0) 2022.06.23
NODE MON  (0) 2022.06.23
POST method route 생성(body-parser, postman)  (0) 2022.06.22
Schema / Model  (0) 2022.06.20
몽고DB 연결  (0) 2022.06.20