Node.js를 통해서 백엔드 이해하기

Jihu Kim·2023년 11월 5일

node.js

Developer, 이건 알고 가

목록 보기

5/6

Node.js를 통해서 백엔드 이해하기

Node.js란?

Node.js는 JavaScript 런타임 환경으로, 웹 애플리케이션을 개발하기 위해 서버 측에서 JavaScript를 실행할 수 있게 해줍니다. Node.js를 사용하여 백엔드를 개발하면, 웹 애플리케이션의 서버 측 로직을 구현하고 데이터를 처리하는 등의 작업을 수행할 수 있습니다.
백엔드 개발

"백엔드 개발"이란, 서버 측에서 웹 애플리케이션 또는 다른 네트워크 애플리케이션의 로직과 데이터 처리를 담당하는 개발 작업을 의미합니다. 백엔드 개발자는 주로 데이터베이스와의 상호작용, 사용자 인증 및 권한 관리, 비즈니스 로직 구현, API 설계 등을 담당하며, 이를 통해 웹 애플리케이션의 기능을 구현하고 동작시킵니다.
Node.js로 개발하는 백엔드

Node.js는 JavaScript를 사용하여 백엔드 개발을 할 수 있는 환경을 제공해주기 때문에, Node.js를 통해 백엔드 개발을 한다는 것은 JavaScript를 사용하여 서버 측에서 애플리케이션의 로직을 개발하는 것을 의미합니다. Node.js는 비동기식 프로그래밍 모델과 다양한 패키지 및 라이브러리를 제공하여 백엔드 개발을 더욱 효율적이고 간편하게 할 수 있도록 도와줍니다.
Node.js의 비동기식 프로그래밍이란?
- Node.js의 비동기식 프로그래밍(Asynchronous Programming)은 작업을 순차적으로 기다리지 않고 동시에 처리하는 프로그래밍 모델입니다. 이를 통해 I/O 작업 등 시간이 오래 걸리는 작업을 효율적으로 처리할 수 있습니다.
- 비동기식 프로그래밍에서는 작업을 요청한 후 결과를 기다리지 않고 다음 작업을 수행합니다. 작업이 완료되면 콜백 함수를 호출하여 결과를 처리하거나, 프로미스(Promise)나 async/await 구문을 사용하여 비동기 작업의 결과를 처리할 수 있습니다.
Node.js를 통해 백엔드를 이해하기 위한 핵심 개념
- 모듈 시스템: Node.js는 CommonJS 모듈 시스템을 사용하여 코드를 모듈로 구성합니다. 모듈은 독립된 기능을 가진 코드 조각으로, 필요한 모듈을 가져와서 사용할 수 있습니다.
- HTTP 모듈: Node.js는 내장된 HTTP 모듈을 제공하여 웹 서버를 생성하고 요청을 처리할 수 있습니다. HTTP 모듈을 사용하여 웹 애플리케이션의 라우팅, 요청 및 응답 처리 등을 구현할 수 있습니다.
- Express 프레임워크: Express는 Node.js를 위한 간결하고 유연한 웹 애플리케이션 프레임워크입니다. Express를 사용하면 라우팅, 미들웨어, 요청 처리 등을 쉽게 구성할 수 있습니다.
- 데이터베이스 연동: Node.js는 다양한 데이터베이스와의 연동을 지원합니다. 예를 들어 MongoDB와의 연결을 위해 Mongoose를 사용하거나, MySQL과의 연결을 위해 Sequelize를 사용할 수 있습니다.
- 비동기 프로그래밍: Node.js는 비동기 프로그래밍 모델을 기반으로 동작합니다. 이는 I/O 작업을 비차단(non-blocking) 방식으로 처리하여 더 효율적인 처리와 확장성을 제공합니다. 콜백(callback) 함수, 프로미스(Promise), async/await 등을 사용하여 비동기 코드를 다룰 수 있습니다.
- 이외에도 Node.js는 다양한 패키지와 라이브러리를 제공하므로, 웹 개발에 필요한 다양한 기능을 구현할 수 있습니다. Node.js를 통해 백엔드를 구현하는 방법은 프로젝트의 요구사항과 개발자의 선호에 따라 다를 수 있으며, 학습과 경험을 통해 실력을 향상시킬 수 있습니다.

백엔드 학습 계획(feat. Node.js)

현재 프로젝트를 진행하며 React로 프로트엔드를 개발하고 있다. 프로젝트를 진행하며, 백엔드에 대한 이해가 필요하다고 느꼈다. 백엔드에 대한 이해를 하기 위해 Node.js로 구현해보고 이해를 해보고자 한다.

Node.js와 React(프론트엔드 프레임워크)
- React로 프론트엔드를 개발하고 Node.js로 백엔드를 개발하는 것이 가능하다. React는 클라이언트 측에서 사용되는 JavaScript 라이브러리이며, 주로 웹 애플리케이션의 사용자 인터페이스를 구축하는 데에 사용된다. React를 사용하여 동적이고 반응형인 UI를 만들 수 있다.
- 한편, Node.js는 서버 측 JavaScript 런타임 환경으로, 백엔드 개발을 위해 사용된다. Node.js를 사용하면 JavaScript를 이용하여 서버 사이드 로직과 데이터 처리를 구현할 수 있다. Node.js는 비동기식 프로그래밍 모델과 다양한 패키지를 제공하여 백엔드 애플리케이션을 효율적으로 개발할 수 있도록 도와준다.
- 따라서 React로 프론트엔드를 개발하고, Node.js로 백엔드를 개발하여 전체 웹 애플리케이션을 구축하는 것은 일반적인 방법 중 하나이다. React와 Node.js는 독립적으로 사용될 수도 있지만, 함께 사용하여 클라이언트-서버 형태의 웹 애플리케이션을 개발하는 것이 많이 사용되는 방식이다.

1. 개발에 앞서 알고가자(Node.js)

Node js는 JacaScript를 실행하기 위한 서버 사이드 플랫폼이다. Node js는 npm을 통해 수많은 라이브러리와 패키지를 제공한다.

npm이란?
- node package manage
Node js와 Express모듈 설치하기

Express모듈이란?

Node js를 이용해서 웹 프레임워크를 만드는 것(node 모듈이다)

웹 프레임워크란?

프론트엔드에서 백엔드에 요청 백엔드에서 계산하고 처리해서 DB조회하고 응답으로 돌려주는 기능을 하는 것을 웹 프레임워크라 한다.

express모듈 설치하기: npm install express
index.js파일 실행하기: node index.js

npm init: 다운받은 모듈이 package.json에 기록된다.

package-lock.json에는 더 자세하게 기록된다.

node_modules폴더에는 설치한 모듈들이 기록된다.

npm 사이트에서 다양한 module 검색 후 사용가능 (설치 코드와 예제 코드 등 다양한 정보를 얻을 수 있다.)

API란?

Application Programming Interface의 약자, Frontend(화면)과 Backend(데이터처리)와 통신 과정(Frontend에서의 정보요청-Request, Backend에서의 정보처리 결과전달-Response)구조로 통신한다. 이러한 규칙을 API라고 한다.

port

HTTP메소드

요청(Request) 전송방식: Get, Post

Get 주소창에 검색어를 넣어서 보내는 것

Post 주소창이 아니라 안보이는 곳에 넣어서 보내는 것

응답(Response)

자료형식: JSON(JavaScript Object Notation), 키와 값으로 구성되어있다.

listen은 항상 하고있다.

axios는 받아오는 기능을 하는 라이브러리(요청)

CORS : html파일에서 서버로 요청이 올 때 차단이 되는 것을 막는다.
방법: npm install cors를 통해 install

현재까지 진행한 것: Frontend HTML과 Backend API를 만들어서 두개를 연결.
다음에 진행할 것: Deploy(배포)해서 서버에 올린다음에 (Backend 서버에 올리는 과정)

React Deploy(배포)

npm run build 하면 build파일이 생성된다.
생성된 build 파일 내에 생성된 index.html이 배포할 파일

npm install -g serve 컴퓨터 어디에서든 serve라는 명령어를 통해서 웹서버를 설치할 수 있다

npx serve 한번만 실행시키는 웹서버

npx serve -s build build디렉토리를 document root로 하겠다.

2. Node.js로 백엔드 개발

Node.js로 백엔드를 개발해보았다.

다음은 프로젝트에서 사용한 index.js(Node.js)의 코드이다.

const express = require("express");
const app = express();
const port = 3000;

var cors = require("cors");
app.use(cors());

/* get방식 */
app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.get("/user/:id", (req, res) => {
  //id는 변수 앞에 콜론을 붙여서 사용한다.
  const q = req.params;
  console.log(q.id);

  res.send({ userid: q.id });
});

app.get("/user/info/:id", (req, res) => {
  //query를 사용하면 url에 ?를 붙여서 사용한다.
  //ex: http://localhost:3000/user/info/asdf?q=jihu&name=hu&age=20
  //위의 결과로 { q: 'jihu', name: 'hu', age: '20' }가 출력된다.
  const q = req.query;
  console.log(q);

  res.json({ userid: q.name });
});

app.get("/sound/:name", (req, res) => {
  const { name } = req.params;

  if (name == "dog") {
    res.json({ sound: "멍멍" });
  } else if (name == "cat") {
    res.json({ sound: "야옹" });
  } else if (name == "pig") {
    res.json({ sound: "꿀꿀" });
  } else {
    res.json({ sound: "알수없음" });
  }
});

/* post방식 */
app.use(express.json()); //json 형식으로 데이터를 받는다.
app.post("/user/:id", (req, res) => {
  const p = req.params;
  console.log(p);
  const b = req.body;
  console.log(b);

  res.send({ message: "Hello World!" });
});

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

3. html로 간단하게 프론트 구성

먼저 프론트를 간단하게 만들어보았다.

다음은 프로젝트에서 사용한 html이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test입니다.</title>
  </head>
  <body>
    <h1 id="sound"></h1>
    <input id="name" type="text" />
    <button onclick="getSound()">API요청</button>
    <script>
      function getSound() {
        const name = document.getElementById("name").value;
        fetch(`http://localhost:3000/sound/${name}`)
          .then((response) => response.json())
          .then((data) => {
            console.log(data);
            document.getElementById("sound").innerHTML = data.sound;
          });
      }
    </script>
  </body>
</html>