🖥️Frontend/Node

[Node] node.js & express로 간단한 서버 구현

뉴발자 2023. 11. 23.
728x90

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그림 1-1. node.js

 

 

Node.js의 등장

크롬, 익스플로러, 파이어폭스 등의 브라우저들은 자바스크립트를 읽고 해석하는 역할을 한다.

 

자바스크립트 해석을 빠르게 읽고 해석하면 웹 사이트의 렌더링 성능도 빨라지게 되니

 

브라우저 개발자들은 자바스크립트 해석 엔진 개발에 열성이었다.

 

그러던 중 '크롬 브라우저 개발자'들이 혁신을 일으키게 된다.

 

자바스크립트 해석엔진인 V8이라는 프로그램을 개발했는데 성능이 너무 뛰어나서

 

V8 엔진을 분리하여 엔진에 살을 붙여 만든 것이 Node.js이다.

 

 

Node.js란?

위에서도 언급했듯이 V8 엔진으로 빌드된 자바스크립트 런타임이다.

 

런타임은 간단히 설명하면 실행창이다.

 

기존에 브라우저에서 실행하던 자바스크립트를 로컬 PC에서도 실행시킬 수 있는 도구이다.

 

 

Node.js 설치

node.js 사이트에 들어가서 Current 버전이 아닌 LTS 버전을 설치하면 된다.

 

아직 검증되지 않은 최신 버전보다 검증된 LTS 버전을 쓰는게 안전하기 때문이다.

 

https://nodejs.org/en

 

Node.js

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

nodejs.org

 

 

프로젝트 생성

Node.js의 다운로드가 완료되었다면 프로젝트 폴더를 생성해준다.

 

cmd 창을 열어 프로젝트 폴더로 이동한 후 명령어를 사용해서 새로운 프로젝트를 만들어준다.

프로젝트 경로 > npm init

 

여러 항목들이 나오는데 package name과 author를 제외한 항목들은 엔터를 쳐줘서 스킵해도 된다.

그림 1-2. npm init

 

엔터를 치고 프로젝트 루트 폴더로 가면 package.json 파일이 생성되었을 것이다.

// package.json
{
  "name": "node-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "dbshin",
  "license": "ISC",
  "description": ""
}

 

 

express 설치 및 사용

먼저 express 라이브러리를 설치해준다.

npm install express

 

그리고 루트 폴더 안에 index.js 파일을 생성해준다.

 

 

require vs import

express 라이브러리를 사용하는 방법은 2가지 있다.

 

CommonJS 문법으로 라이브러리를 가져오거나 ES6 문법으로 라이브러리를 가져올 수 있다.

 

각 문법으로 express 라이브러리를 가져오는 코드는 아래와 같다.

// index.js
// CommonJS
const express = require("express");
...

// ES6
import express from "express";

 

 

require과 import는 여러 가지 차이점이 있지만 가장 큰 차이점은 다음과 같다.

일반적으로 import()는 사용자가 필요한 모듈 부분만 선택하고 로드할 수 있다.
그래서 대부분의 사용자들이 import() 사용을 선호한다.
또한 require() 보다 성능이 우수하고 메모리 사용을 절약할 수 있다.

 

두 문법의 자세한 비교 내용을 보고싶다면 아래의 블로그를 참고하면 된다.

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-require-%E2%9A%94%EF%B8%8F-import-CommonJs%EC%99%80-ES6-%EC%B0%A8%EC%9D%B4-1

 

📚 require vs import 문법 비교 (CommonJS vs ES6)

require vs import 문법 자바스크립트 개발을 하다보면 모듈을 불러오는 문법 두가지 ( require / exports ) 와 ( import / export ) 키워드를 접하게 되는데, 이 둘은 비슷하면서도 달라 가끔 자바스크립트 개발

inpa.tistory.com

 

 

Node.js 서버 실행

서버를 실행하기 위해 프로젝트 폴더에서 아래의 명령어를 입력한다.

npm run start

 

하지만 나처럼 create-react-app으로 프로젝트를 생성하고 이미 설정된 환경으로 프로젝트를 이용하던 유저라면

 

서버 실행 시 오류가 발생할 수 있다.

그림 2-1. npm run start 오류

 

package.json의 script에서 start 명령어를 찾지 못해서 오류가 발생한다.

 

node index.js 명령어를 입력해서 프로젝트를 실행시켜도 되지만 script에 start 명령어를 등록해서 사용하겠다.

그림 2-2. start 명령어 생성

 

 

 

Node.js에서 import 사용 방법

node.js에서 npm init을 사용한 프로젝트는 기본적으로 CommonJS 문법을 사용하게끔 설정되어있다.

 

그래서 설정없이 ES6(import) 문법을 작성한 후 시작하면 다음과 같은 에러가 발생한다.

그림 3-1. ES6 오류

 

이 오류는 생각보다 간단하게 해결이 가능하다.

 

package.json 파일에서 type을 module로 설정해주면 정상적으로 서버가 시작된다.

그림 3-2. ES6 오류 해결

 

 

express 코드 작성

index.js 파일 안에 아래와 같이 코드를 작성해준다.

// index.js
import express from "express";
const app = express();
const port = 5000;

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

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

 

app.listen()

node.js 서버를 실행시켜주는 함수이다.

 

지정한 포트번호로 실행시킬 수 있고 실행 성공 시 callback 함수를 실행시킨다.

그림 4-1. node.js 서버 실행 성공

 

 

app.get()

서버가 실행중일때 지정한 path로 접속 시 함수를 동작시켜준다.

 

위 코드에서는 "localhost:5000/"로 접속 시 "Hello, World!"란 문구를 사용자에게 보여준다.

 

get방식 외에 post 방식으로도 데이터를 주고 받을 수 있다.

그림 4-2. localhost:5000 접속 시 화면

 

 

이 외에도 미들 웨어 함수를 사용할 수 있는 app.use() 함수와 서버 설정을 위한 app.set() 함수 등 다양한 기능을 지원한다.

 

 

참고 사이트

https://codingapple.com/unit/nodejs-3-what-is-node-js/

 

Node.js의 정체를 알아보자 - 코딩애플 온라인 강좌

태초에 HTML이라는 언어가 있었습니다. HTML은 별거 아니고 그저 웹페이지를 만들 때 사용하는 언어입니다.  안녕하세요 이렇게 생겼고 웹페이지에 글, 그림, 버튼 이런걸 넣을 때 사용합니다. 

codingapple.com

 

https://codingapple.com/unit/nodejs-express-install/

 

Node.js, Express 설치와 셋팅 - 코딩애플 온라인 강좌

0:00 개발환경 셋팅 0:57 프로젝트 하나 생성 5:24 PORT가 뭐냐면  개발환경 셋팅 개발환경 셋팅부터 해보도록 합시다.  요즘은 맥북이나 윈도우나 별 차이없음  1. nodejs 구글에 검색하면 맨처음에

codingapple.com

 

https://www.inflearn.com/course/lecture?courseSlug=%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EB%B3%B8&unitId=37061&tab=curriculum

 

학습 페이지

 

www.inflearn.com

 

 

 

 

 

 

 

 

 

 

 

728x90

댓글