[Node.js/React] Node, Express 개발환경 세팅

이미 nodejs와 vscode는 설치되어있기 때문에, vscode에서 새 프로젝트를 생성하고 거기서 세팅하는 것에 대해 작성해보았다.

✏️npm 패키지 생성

> npm init

터미널에 npm init를 입력하면 아래와 같이 터미널에 뜨게 된다. 하나씩 package name부터 license까지 확인하고 enter를 누르면 되는데, 이때 package name, version, entry point, license는 자동으로 나타나고 author같은 경우는 직접 입력해주었다.

모든 사항을 확인하고 Y를 입력하면 package.json이 생성된다. 생성된 파일에서는 방금 입력된 값들을 토대로 구성되고, 이때 name이나 main등 입력된 구성요소의 값을 자유롭게 변경할 수 있다.

💡다른 설정들을 추가하기 전에, 확인하고 변경할 사항이 있다면 변경하고 저장하도록 하자.

---

✏️express 설치

index.js 파일을 생성해주고, express를 설치한다.

> npm install express --save

터미널에 입력하면 node_modules 폴더가 생성될것이다.
(.gitignore은 내가 만든 파일이므로 무시해도 된다.)

---

✏️index.js에서 기본적인 express.js 앱 만들기

port번호는 자유롭게 원하는것으로 하여도 무관하다.

index.js

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

package.json

{
  "name": "node-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",  //추가한 부분
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ming",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

package.json를 이렇게 수정해주면, 터미널에 아래와 같이 입력하여 서버를 킬 수 있다.

npm run start

또는

node index.js

를 입력하여 서버를 킬 수 있다. 서버를 키면, 본인이 입력한 포트 번호로 접속했을 때, Hello World!를 볼 수 있을것이다.
나는 포트번호가 3000이였기 때문에, localhost:3000를 입력하여 접속하였다.

이렇게 해서 아주 기본적인 세팅은 끝이났다 !

---

👩‍💻 깃허브 주소

node-react