[Node.js React 기초강의] 02_Node.js 및 Express.js 설치하기

---

해당 포스팅은 John Ahn님의 [따라하며 배우는 노드, 리액트 시리즈 - 기본 강의]를 공부하며 작성한 포스팅입니다.

※ 출처 : 2강 - https://youtu.be/7sHWMkFOR7c?si=VRADXIc8q5aB17a0

---

1. 윈도우(window)에서 터미널(terminal)을 여는 방법

[Win + R] 버튼 누른 후 [CMD] 입력후 [확인]

 

2. node.js 설치방법

 

https://nodejs.org/en

▲ 사이트에 접속하여 설치

(필자의 경우 LTS 버전 설치 ※ LTS(Long Term Support)는 장기간에 걸쳐 지원하도록 만든 버전)

 

 

3. 터미널에서 node.js 설치여부 및 버전 확인방법

 

#1. node -v : node.js의 버전 v20.11.0 확인

 

4. 터미널에서 디렉토리(폴더) 생성 방법

 

 

#1. cd Documents : Documents 폴더로 이동

#2. mkdir boiler-plate : boiler-plate 라는 이름의 폴더 생성

#3. cd boiler-plate : boiler-plate 폴더로 이동

 

5. 패키지 설치

#1. npm init  : 패치키 초기화(생성) 명령어

 

이후 Author(원작자 이름)을 제외한 나머지는 기본값(엔터키)으로 넘어간다.

 

package name : 패키지 명

version : 패키지 버전

description는 패키지 설명 

entry point는 시작 파일 명 (기본값 : index.js)

test command는 npm test 호출시 실행되는 명령

git repository 패키지가 저장된 Git의 URL

keywords는 패키지 키워드

license는 패키지 라이선스 (기본값 : ISC)

 

 

6. Express.js의 예제를 실행해본다.

아래 사이트에서 예제문서를 가져올 수 있다.

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

Express "Hello World" 예제

6.1 localhost에 Hello world를 띄우는 코드

index.js 파일에 예제 코드를 복사해서 붙여넣기한다.

필자는 Hello world를 블로그명인 수퍼루비의 어제보다 빛나는 오늘으로 수정했다.

 

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

app.get('/', (req, res) => { res.send('수퍼루비의 어제보다 빛나는 오늘')})
app.listen(port, () => {console.log(`Example app listening on port ${port}`)})

🤖6.1 Chat GPT 해설

이 코드는 Express를 사용하여 간단한 웹 서버를 만드는 것입니다. 코드의 각 부분을 설명해보겠습니다:

1. 첫 번째 줄에서는 Express 모듈을 가져오고 있습니다. 이 모듈을 사용하여 웹 서버를 만들고 라우팅을 설정할 수 있습니다.
2. 두 번째 줄에서는 Express 애플리케이션을 생성합니다.
3. 세 번째 줄에서는 서버가 사용할 포트 번호를 설정합니다. 이 예제에서는 5000번 포트를 사용하고 있습니다.
4. 네 번째 줄은 루트 경로('/')로 들어오는 GET 요청을 처리하는 핸들러를 등록합니다. 요청이 들어오면 "수퍼루비의 어제보다 빛나는 오늘"이라는 문자열을 응답으로 보냅니다.
5. 다섯 번째 줄은 Express 애플리케이션을 설정된 포트로 바인딩합니다. 서버가 시작되면 콘솔에 "Example app listening on port 5000"이라는 메시지가 출력됩니다.

이 코드를 실행하면 Express 서버가 시작되고, 브라우저나 HTTP 클라이언트가 'http://localhost:5000/'로 접속하면 "수퍼루비의 어제보다 빛나는 오늘"이 표시됩니다.

 

 

6.2 packag.json 파일 수정

🤖6.2 Chat GPT 해설_1

이 JSON 형식의 파일은 Node.js 프로젝트를 위한 package.json 파일입니다. 각 속성에 대한 설명은 다음과 같습니다:

• "name": 프로젝트의 이름을 지정합니다. 이 예제에서는 "boiler-plate"입니다.
• "version": 프로젝트의 버전을 지정합니다. 여기서는 "1.0.0"입니다.
• "description": 프로젝트에 대한 설명을 제공합니다. 여기서는 비어 있습니다.
• "main": 프로젝트의 진입점을 지정합니다. 이 예제에서는 "index.js"입니다.
• "scripts": 프로젝트에서 사용할 수 있는 npm 스크립트를 정의합니다. 여기서는 "start"와 "test" 스크립트가 정의되어 있습니다. "start" 스크립트는 "node index.js" 명령을 실행하여 애플리케이션을 시작하고, "test" 스크립트는 간단한 에러 메시지를 출력합니다.
• "author": 프로젝트의 저자를 지정합니다. 이 예제에서는 "★ ★ ★ "입니다.
• "license": 프로젝트의 라이선스를 지정합니다. 이 예제에서는 ISC(ISC License)입니다.
• "dependencies": 프로젝트가 의존하는 외부 라이브러리를 지정합니다. 여기서는 Express 버전 "^4.18.2"를 의존성으로 가지고 있습니다.

이 파일은 프로젝트의 메타데이터와 의존성을 정의하여 npm을 통해 프로젝트를 관리하는 데 사용됩니다.

🤖6.2 Chat GPT 해설_2

아래 구문을 추가하여 시작지점을 변경해준다.

    "start" : "node index.js",

 

 

이 부분은 package.json 파일 내의 "scripts" 객체에서 "start" 스크립트를 정의하는 부분입니다.

 

여기서 "start" 스크립트는 "node index.js" 명령어를 실행합니다. 이는 프로젝트를 시작할 때 사용되는 명령입니다. 보통은 프로젝트의 진입점인 index.js 파일을 실행하는 명령을 여기에 넣습니다. 따라서 이 스크립트는 'npm start' 명령어를 사용하여 애플리케이션을 시작할 때 실행됩니다.

 

 

7. 터미널에서 실행한다.

#1. npm run start

"start" 스크립트를 실행한다.

 

🤖7. Chat GPT 해설

'npm run start' 명령어는 package.json 파일에서 정의된 "start" 스크립트를 실행합니다.

jsonCopy code

"scripts": { "start" : "node index.js", "test": "echo \"Error: no test specified\" && exit 1" }

위의 설정에서 "start" 스크립트는 'node index.js'를 실행하도록 되어 있으므로, 'npm run start'를 실행하면 Node.js 애플리케이션을 시작합니다. 이는 Express 애플리케이션을 실행하는데 사용되며, 이 경우 'index.js' 파일이 프로젝트의 진입점일 것으로 예상됩니다.

8. http://localhost:5000/ 접속 결과