백엔드 기초: Express 기본

/date 24.08.30.

 /* 공부하며 정리한 내용이니 정확하지 않을 수 있습니다. 잘못된 내용은 댓글로 알려주세요!*/

 

 

Express

express는 사실 http와 많이 다르지 않습니다. express 안에 http가 포함되어 있기도 하구요. 외부 모듈이기 때문에 figlet처럼 npm을 통해서 다운로드 가능합니다.

 

터미널을 열고 npm i express 명령어를 입력해 줍니다.

 

 

성공적으로 설치가 완료되었습니다. 그럼 express를 구동해 보도록 하겠습니다.

 

const express = require('express')
const app = express()
//왜 const? http는 let이던데...
//let은 변수, const는 상수
//createServer가 없고 express를 app에 담아 호출

app.get('/', function (req, res) { //콜백함수
    //get이 문자열로 일을 한 다음 function을 호출
  res.send('Hello romiwaves')
})
//상당히 간단해짐

app.listen(3000)
//포트넘버 3000

 

이렇게 코드를 작성해주고, http://localhost.3000으로 접속해 주었더니 화면에 Hello romiwaves라고 잘 뜹니다.

 

다만 여기서 포트 충돌 에러가 나는 경우가 있습니다. 말 그대로 포트 넘버를 중복으로 사용하고 있어서 발생하는 에러입니다. 포트 번호(port number)는 클라이언트와 서버가 서로 대화를 위해 맞추는 주파수라고 생각하시면 됩니다. 코드에서 지정한 3000번을 다른 프로그램이 사용하고 있기 때문에 발생하는 에러이니 app.listen()에 다른 포트 번호를 넣으면 해결됩니다. 실제 프로젝트를 진행할 때는 의미 있는 숫자로 지정하는 것이 좋습니다. 실제로 업무를 진행할 때에는 운영하는 서비스에 따라 지정된 번호가 있는 경우가 많습니다.

 

express를 이용한 REST API 실습을 진행해 보았습니다.

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

//API) method는 GET, url은 "/"
app.get('/', function (req, res) { //콜백함수
    //get이 문자열로 일을 한 다음 function을 호출
  res.send('Hello romiwaves')
})
//상당히 간단해짐

//API TEST
//method GET + "http://localhost:3000/test"
//data: "TEST SUCCESS"
app.get('/test', function(req, res) {
    res.send('TEST SUCCESS')
})

//API TEST
//method GET + "http://localhost:3000/test/1"
//data: "ONE!!"
app.get('/test/1', function(req, res) {
    res.send('ONE!!')
})

app.listen(3000)

 

http에 비해 REST API를 적용하는 것이 상당히 간단해졌습니다. 마음에 드네요. 그럼 쇼핑몰 페이지를 제작한다고 가정해 봅시다. /products/1 페이지에서 책의 제목, 가격, 책에 대한 간단한 설명을 보고 싶습니다. 그럼 해당하는 텍스트 여러 줄을 res.send()를 통해 보내면 되지 않을까요?

 

안타깝게도 그렇게 입력하면 첫 줄만 화면에 보내줍니다. 으잉? 이게 어떻게 된 일일까요? 계속해서 한 줄의 텍스트만을 화면에 보낼 순 없는데 어떻게 해결해야 할까요? 이를 해결하기 위해 객체에 대해 살펴보겠습니다.

 

 

객체

앞서 말했던 책에 대한 정보를 이렇게 적어봅시다.

상품명: node.js를 공부해보자
상품 가격: 20000
상품 소개: 이 책 좋음. 왜? 로미가 지었음.

 

이 정보 세트는 결국 책 한 권에 대한 정보입니다. "node.js를 공부해보자"라는 책이라는 객체가 되는 것입니다. 그리고 그 안의 정보는 객체가 갖고 있는 데이터 덩어리가 되는 것이죠.

 

프론트엔드와의 협력을 위해선 자바스크립트를 객체로 보내는 과정이 필요합니다. 프론트엔드는 어떤 라이브러리, 프레임워크를 쓰더라도 자바스크립트로 표현되기 때문입니다. 여기서 json이 등장합니다.

 

json이란, javascript object notation의 약자로 자바스크립트 객체가 어떻게 생겼나, 어떤 형태인가를 보여줍니다.

 

간단히 객체를 만들어 보겠습니다.

let person = {
	name : "romi",
	age : 109
}
//node.js 책 객체 만들어보기
let book = {
	title: "Node.js를 공부해보자.",
	price: 20000,
	description: "이 책 좋음. 왜? 로미가 지음."
}

 

그리고 자바스크립트를 객체로 날리는 간단한 코드를 작성해 보았습니다.

app.get('/', function (req, res) {
  res.json({
    say : 'hi there romiwaves!',
  })

 

URL에 접속하여서 화면을 확인하면

 

이렇게 보인답니다!

 

사실 send는 통칭입니다. 네 맘대로 보내고 싶은 대로 다 받아줄게~하는 것이고, 그럼 당연히 json은 json 보낼 때 사용하면 되는 거겠죠? 드디어 우리는 여러 가지 데이터를 한 번에 보낼 수 있게 되었습니다. 아래와 같이 코드를 작성하면 확인해 볼 수 있습니다.

 

app.get('/products/1', function(req, res) {
    res.json({
        title: 'Node.js를 배워보자',
        price: 20000,
        description: "이 책 좋음. 왜? romi가 지음"
      //드디어 여러 가지 데이터를 한 번에 보낼 수 있게 됨!
    })
})

 

야호! 한 페이지에서 여러 줄의 데이터를 볼 수 있습니다. 그럼 과연 자바스크립트 객체도 잘 날아갈까요? oO(당연하죠!)

 

let nodejsbook = {
	title: "Node.js를 공부해보자.",
	price: 20000,
	description: "이 책 좋음. 왜? 로미가 지음."
}

app.get('/products/1', function(req, res) {
    res.json(nodejsbook)
})

 

이렇게 코드를 작성하고 url에 접속해 보면 데이터가 제대로 화면에 출력되는 것을 볼 수 있습니다.

 

우리는 여기서 멈추길 원하지 않습니다. URL에 따라 객체를 다르게 받아야 쇼핑몰 페이지를 완성할 수 있습니다.

 

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

app.get('/products/:n', function(req, res) {
    //-> products/__ 빈칸에 오는 값을 n이라는 변수에 담아줘!
    res.json({
        num : req.params.n
    })
})

app.listen(3000)

 

:n이라는 표현은, / 다음에 오는 값을 n이라는 변수에 담아달라는 말입니다. 그렇게 해서 받은 n을 화면에 출력하기 위해 req.params.n라고 코드를 작성해 주었습니다. request 받을 때 parameter 값을 받았지? 그중에서 n이라는 값을 출력해 줘~라는 뜻입니다. 실행해 보겠습니다.

 

의도대로 작동하는군요. 성공입니다. 야호!

 

 

+ 추가) node.js 기본 생태계

 

Node.js

• JavaScript 런타임 환경으로, 서버 측에서 JavaScript를 실행할 수 있도록 함.
• 싱글 스레드, 이벤트 기반, 논블로킹 I/O

패키지 매니저

• NPM (Node Package Manager):
  • Node.js의 기본 패키지 매니저: 모듈을 쉽게 설치, 업데이트, 관리할 수 있도록 함
  • 오픈소스 라이브러리와 패키지를 다운로드하고 프로젝트에 사용
  • ex) npm install express -> Express 설치 가능

모듈

• 특정 기능을 가진 코드의 집합으로, 다른 파일에서 require 또는 import를 통해 사용

 

 

 

/*사족입니다*/

• REST API 실습할 때는 오! 재밌는데! 싶었고 json부터선 좀 아득해졌다. 아무래도 추가 학습이 필요할 듯... 그래도 express라는 외부 모듈과는 조금은 친해진 기분. http가 있는데 굳이 이걸 사용해야 하는 이유가 있나? 하는 이유 모를 반감이 (어제까지) 있었는데 아무래도 더 편하자고 만든 것이겠죠? 왕인정합니다.