[Node.js] HTTP요청 ① GET

잡담

이번에 학원에서 프런트앤드 공부로 백앤드에서 많이 사용하는 Node.js를 시작했습니다.  서버 측에서 애플리케이션 개발할 때 많이 사용하는 거 같더라고요 Express라는 프레임워크로 좀 간단하게 코딩이 가능합니다. Node.js 백앤드 + react 프런트앤드 이런 느낌으로 많이 사용하는 거 같습니다. Node.js 기본적으로 배우고 react로 넘어갈 거 같습니다. 

---

 

1. GET 방식

Node.js에서 GET 방식으로 요청을 처리하는 방법은 다양합니다. 일반적으로 Express.js와 함께 사용되는 것이 흔합니다. app.get은 Express 애플리케이션에서 HTTP GET 요청을 처리하기 위한 메서드입니다. 다음은 app.get 메서드의 구조입니다:

app.get(path, callback)

• path: 클라이언트가 요청하는 URL 경로를 나타냅니다. 이것은 요청이 일치해야 하는 경로를 정의합니다.
• callback: 요청을 처리하고 응답을 반환하는 콜백 함수입니다. 이 콜백 함수는 두 개의 매개변수 req (요청 객체)와 res (응답 객체)를 받습니다. req 객체는 클라이언트로부터 받은 요청에 관련된 정보를 포함하고, res 객체는 클라이언트로 응답을 보낼 수 있는 메서드와 속성을 포함합니다.

 

따라서 주어진 코드에서 app.get의 구조는 다음과 같습니다:

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

app.get('/', (req, res) => {
        res.send('Hello World!')
})

• path: '/'로 지정되어 있으므로, 루트 경로로 들어오는 GET 요청을 처리합니다.
• callback: 화살표 함수로 정의되어 있으며, 요청을 처리하고 응답을 보내는 역할을 합니다. 이 콜백 함수는 req와 res 매개변수를 받습니다. 이 경우에는 단순히 'Hello World!' 문자열을 응답으로 보내고 있습니다.

출력값

 

---

Path 변경

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

app.get('/bye', (req, res) => {
        res.send('Bye World!')
})

앞서 만든 코드에서 Path 즉 '/' 부분을 다른 루트경로( 예제에선 /bye) 로 수정하여 사용하면 URL을 입력할 때 수정한 값을 입력해 주면 전달한 'Bye World!' 값을 출력받습니다.

Path 수정 출력값

 

 

---

특정 URL 경로

위 코드는 Express.js를 사용하여 GET 요청을 처리하는 예시입니다. 여기서 app.get() 메서드를 사용하여 특정 URL 경로(/test/:num)에 대한 GET 요청을 처리합니다.

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

app.get('/test/:num', (req, res) => {
        console.log(req.params.num)
        res.send('Test World!:' + req.params.num)
})

• '/test/:num' : URL 경로를 나타냅니다. :로 시작하는 부분은 동적 라우팅 매개변수를 나타냅니다. 이 경우에는 :num이라는 동적 매개변수를 가지고 있습니다. 클라이언트가 요청하는 URL 경로에서 :num 자리에 입력한 값은 req.params.num으로 접근할 수 있습니다.

• req.params.num : 이 부분은 라우팅 핸들러에서 동적으로 전달된 매개변수를 가져오는 부분입니다. URL 경로에서 :num 자리에 들어간 값이 여기에 할당됩니다. 이 값을 통해 클라이언트가 전달한 값을 가져와서 사용할 수 있습니다.

http://localhost:3000/test/10와 같은 방식으로 URL을 GET요청하면 아래와 같은 출력값이 나오게 됩니다.

특정 URL 경로 출력값

---

query String '&' / '?'

&는 URL에서 쿼리 문자열(query string)의 각 키-값 쌍을 구분하는 역할을 합니다. 쿼리 문자열은 URL의 끝에?로 시작하며, 여러 개의 키-값 쌍이 있을 경우 &로 구분됩니다.

http://example.com/search?q=keyword&page=1

여기서:

• ? 이후의 부분은 쿼리 문자열이며, q=keyword&page=1이라는 두 개의 키-값 쌍으로 이루어져 있습니다.
• &는 두 개의 키-값 쌍을 구분하는 역할을 합니다.
• q=keyword: 첫 번째 쿼리 파라미터로, 키는 q이고 값은 keyword입니다.
• page=1: 두 번째 쿼리 파라미터로, 키는 page이고 값은 1입니다.

따라서 위의 URL은 q에 해당하는 검색어가 "keyword"이고, page에 해당하는 페이지 번호가 1 임을 나타냅니다.

 

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

app.get('/add/:num1&:num2', (req, res) => {
        let { num1, num2 } = req.params
        console.log(num1)
        console.log(num2)
        let result = parseInt(num1) + parseInt(num2)
        res.send('add: ' + result)
})

앞서서 배운 '&' 를 이용해서 GET방식을 통해 변수 2개를 URL경로에 저장하여 보낼 수 있습니다. URL은 String type이기 때문에 let { num1, num2 } = req.params로 변수 지정을 해주고 나서 ParseInt()를 통해서 형변환을 해주어야 더하기가 됩니다. 그렇지 않으면 String + String 타입으로 102가 출력될 것입니다.

num1 = 10 & num2 = 2 의 출력값

 

---

URL query String 값 가져오기

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

//http://localhost:3000/search?word=hello&page=1
app.get('/search', (req, res) => {
        console.log(req.query) // { word: 'hello', page: '1' }
        console.log(req.query.word) // hello
        console.log(req.query.page) // 1
        res.send(req.query)
})

• console.log(req.query): 이 부분은 요청의 쿼리 문자열에 포함된 모든 키-값 쌍을 콘솔에 출력합니다. 여기서 req.query는 요청 객체의 쿼리 속성으로, 쿼리 문자열에 포함된 키-값 쌍을 담고 있는 객체입니다. 예시에서는 { word: 'hello', page: '1' }이 출력됩니다.

• console.log(req.query.word): 이 부분은 요청의 쿼리 문자열에서 word라는 키에 해당하는 값을 콘솔에 출력합니다. req.query.word는 쿼리 문자열에서 word에 해당하는 값인 'hello'를 가져옵니다.

이 처럼 request에 담긴 query.키값 을 입력할 경우 GET호출로 키값에 대한 Value값을 변수에 담을 수도 출력할 수도 있다.

req.query 활용 출력값

Express.js에서 req.query는 내장된 속성(attribute)이며, 요청 객체(request object)의 일부분입니다. 이 속성을 사용하면 URL의 쿼리 문자열(query string)에 포함된 모든 키-값 쌍을 가져올 수 있습니다.

물론 Express.js를 사용하지 않고 순수 javaScript를 이용해서도 키-값 쌍으로 받아올 수 있습니다. 하지만 코드를 간결하게 만들기 위해 굳이 사용하지 않습니다. 아래의 내용이 javaScript를 이용해서 파싱 한 코드입니다.

function getQueryParameterValue(name, url) {
    if (!url) url = window.location.href; // 기본값으로 현재 URL을 사용

    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
    var results = regex.exec(url);

    if (!results) return null;
    if (!results[2]) return ''; // 값이 없는 경우 빈 문자열 반환

    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// 사용 예시
var word = getQueryParameterValue('word', 'http://localhost:3000/search?word=hello&page=1');
var page = getQueryParameterValue('page', 'http://localhost:3000/search?word=hello&page=1');

console.log(word); // 'hello'
console.log(page); // '1'

 

---

 

글을 마치며

오늘은 Node.js에 GET방식의 호출에 대해서 공부해 보았습니다. 앞서서 Springboot에서도 사용했고, Servlet에서도 사용했으며, Python에서 FastApi를 배우면서도 사용했던 GET방식 POST방식을 이제는 Node.js에서도 만납니다. 다양한 언어를 공부하면서 비슷한 점도 많고 다른 점도 많습니다. 코드만 조금씩 다르고 방식은 비슷하기 때문에 하나를 잘 공부해 놓으면 나머지도 따라올 거 같네요. 다음에는 POST, PUT, DELETE방식에 대해서 공부해 보겠습니다. 감사합니다.