[DevCamp] Node.js 기본 생태계와 JSON

동건·2025년 2월 12일
0

DevCamp

목록 보기
11/85

Node.js 기본 생태계와 JSON


오늘은 기존 html 모듈을 대신해 express 모듈로 실습을 진행해보았다.
이 과정 중에 Node.js의 기본 생태계와
html & express 모듈 간의 차이점,
JSON 기초에 대해 학습하고 느낀 내용을 정리해보겠다.


Node.js의 기본 생태계

1. Node.js의 기본 생태계란?

Node.js 는 단순한 서버 실행 환경이 아니다.
다양한 도구와 패키지 관리 시스템을 포함한 생태계 를 가지고 있다.
이 덕분에 우리는 보다 쉽게 어플리케이션을 만들고 관리할 수 있는 것이다.

2. 패키지 매니저 (Package Manager)

패키지 매니저는

코드를 효율적으로 관리하고, 라이브러리를 쉽게
설치 할 수 있도록 도와주는 도구 이다.

Node.js 에는 대표적으로 두 가지 패키지 매니저 가 있다.

  1. npm (Node Package Manager)
  2. Yarn

하나씩 간략하게 알아보면,

📌 NPM (Node Package Manager)

  • Node.js 를 설치하면 기본적으로 포함되어 있다.
  • 전 세계 개발자들이 공유하는 오픈소스 패키지 저장소 역할을 한다.
  • package.json 을 이용해 프로젝트의 의존성을 관리한다.

📌 Yarn

  • 페이스북에서 만든 대체 패키지 매니저로
  • NPM 보다 속도가 빠르고, 캐싱 기능 이 뛰어나다.
  • 병렬적으로 패키지를 설치해서 속도 최적화가 가능하다.

필자는 실습하면서 NPM 으로 실습을 진행하였다.


NPM으로 패키지 불러오기

기본적으로 제공되는 패키지들도 있지만
설계에 맞는 개발을 하다보면 외부 패키지가 필요할 때가 있다.

이때는 직접 외부 패키지를 설치해 사용해야한다.

NPM 공식홈페이지

실습 때는 express 를 사용하기 때문에
위 링크를 통해 express 로 검색을 하면

무려 1.5억 회 다운로드된 패키지가 있다.

정말 친절하게 설치 방법, 사용 방법 등 다 작성되어 있다.

html 과 express 의 차이

let http = require('http');

function onRequest(request, response){
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Hello Node.js');
    response.end();
}

http.createServer(onRequest).listen(8888);

이건 저번 실습 때 사용했던 html 모듈이다.

express 모듈과 차이점을 살펴보면

html 은 웹 페이지의 기본적인 뼈대만 잡는 반면,
express 는 HTML을 포함한 다양한 웹 서비스를 효율적으로 처리하는 도구다.

개발 초보자의 관점으로 보면 간단하게 보이는 것도 express이며
사용하기 편해 보이는 것도 express 이다.


express로 라우팅 관리해보기

그러면 html 에서 했던 것처럼 express 로도
주소에 따른 페이지 이동을 한번 해보면

const express = require('express');
const app = express();

app.get('/', function (req, res) {
  res.send('Hello World');
});

app.get('/products/1', function(req, res){
    res.send('First');
});

app.listen(3000)

위 코드처럼 링크를 다르게 하면서 페이지 이동을 할 수 있다.

하지만 위 코드의 단점(?) 이 있다면
페이지가 수백 수천개가 된다면 코드가 터무니없이 길어진다.

그래서 이 전에 알아야할 개념이 json이다.


JSON

JSON (JavaScript Object Notaion) 은 데이터를
저장하고 교환하는데 사용하는 경량 데이터 포맷 이다.
쉽게 말해서,

자바스크립트 객체가 어떻게 생겼나 = 어떤 형태인가

JSON 기본 구조

JSON키-값(Key-Value) 쌍 으로 데이터를 표현한다.

JSON 객체 예시

{
	title : "Node.js를 공부해보자",
    price : 20000,
    description : "이 책 좋다."
}

이렇게 JSON 의 기초의 기초를 알았으니
주소창의 값을 받아 화면에 불러오는 것도
충분히 할 수 있다.

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

app.listen(3000)

app.get('/products/:n', function(req, res){
    res.json({
        num : req.params.n
    })
})

코드 형태는 앞선 코드와 비슷하지만
주소를 받는 것과, json을 넘기는 것 정도가 달라진다.

링크부터 확인을 해보자
/products/:n

낯선 :n 이 보인다.
이건 이 곳에 오는 값을

n 이라는 변수에 저장한다는 뜻이다.

그러면 product의 번호가 100이든 10000이든 n에 저장이 되는 것이다!

이 다음에 response를 json 형태로 받고

request의 params의 n 값을 num 키에 저장하는 것이다.

이게 글로 작성해서 어려워보이는거고
막상 직접 코드로 작성해보니 단번에 이해가 가긴 했다.


이렇게 URL에 따른 json 으로 값이 달라지는 페이지를 완성(?) 했다.


📑 TIL

사실 오늘 실습을 하면서 몰랐던 개념, json 의 사용 등
몰랐던 부분을 많이 알았다.
그래도 대학 생활에서 쌓아두었던 개발 경험들이
많이 도움이 되고 학습을 하면서 뒤쳐지지 않게끔 도와주는 것 같다.

json 을 더 많이 실습을 해두어야 할 것 같고 손에 익혀야겠다.

profile
배고픈 개발자

0개의 댓글