Node.js Express - 경로(라우팅 메소드) 설계하기(Path, Query String 사용)

반응형

 

Node.js의 기본적인 개념 및 Express가 설치되어있다는 전제하에 포스팅 내용이 전개됩니다.

환경이 구성되어있지 않으면 아래의 포스팅을 확인해주세요.

2023.04.11 - [Web Programming/Node.js] - Node.js - 개념, 설치, 간단 사용 예시, npm 설치 및 활용(express, 웹 API 서버 구축)


라우팅 메소드 구문(Route methods syntax)

기본 구조

  • 라우팅 메소드 : HTTP method 중 하나(GET, PUT, POST, DELTE)에서 파생되어 인스턴스에 부여하는 것

<라우팅 메소드 기본 구조, 출처 expressjs.com>


라우팅 메소드 구문

// GET method route
app.get('경로', function (요청, 응답) {
  응답.send('GET request to the homepage')
})

// POST method route
app.post('경로', function (요청, 응답) {
  응답.send('POST request to the homepage')
})
  • 경로 : 요청에 대한 응답을 지정한 경로에서 수행
  • 요청, 응답 : 요청이 이루어질 경우, 요청된 값과 응답된 값을 저장하는 변수
  • 응답.send(내용) : 요청의 응답된 내용을 정의하여 사용자에게 보여주는 함수
  • 포스팅에서는 GET 방식을 다루고 있지만, POST도 같은 방식으로 사용 가능함

요청.params

app.get('경로/:파라미터', function (요청, 응답) {
  const 변수 = 요청.params
  응답.send(변수)
})
  • 요청시 경로 뒤에 정의한 파라미터의 값을 저장하는 개체
    • 요청시 경로 뒤에 '/값' 의 형식을 통해 파라미터의 값을 전달
  • 경로 설정시 정의한 경로 뒤에 '/:파라미터' 정의
  • .params 개체를 활용하여 다양한 값을 통해 동적으로 구성할 수 있음

요청.query

app.get('경로', function (요청, 응답) {
  const 변수 = 요청.query
  응답.send(변수)
})
  • 요청시 경로 뒤에 정의한 키값 형태의 파라미터의 값을 저장하는 개체
  • 요청시 경로 뒤에 '?키1=값1&키2=값2' 의 형식을 통해 쿼리 문자열의 값을 전달
  • .query 개체를 활용하여 다양한 값을 통해 동적으로 구성할 수 있음

Response methods (응답 방식)

  • 응답 객체의 메서드(res로 정의, 위의 코드에서는 '응답'로 정의함)
  • 클라이언트에 응답을 전송하여 요청과 응답 사이클 종료
  • 메서드가 호출되지 않으면 클라이언트 요청은 정지된 상태로 유지
res.filength() 파일을 다운로드하도록 지시합니다.
res.end() 응답 프로세스를 종료합니다.
res.json() JSON 응답을 보냅니다.
res.jsonp() JSONP 지원을 포함한 JSON 응답을 보냅니다.
res.filength() 요청을 리다이렉트합니다.
res.filength() 뷰 템플릿을 렌더링합니다.
res.send() 다양한 유형의 응답을 보냅니다.
res.send File() 파일을 옥텟 스트림으로 전송합니다.
res.sendStatus() 응답 상태 코드를 설정하고 해당 문자열 표현을 응답 본문으로 전송합니다.

경로 설계

특정 경로로 이동하기

// 해당 경로(/greeting)에 대한 GET 요청 경로 정의
app.get('/greeting', function (req, res) {
    res.send('Hello Express!')
  })
  • 기본경로/greeting 경로를 접속하면 'Hello Express' 라는 문구 출력


특정 경로에 HTML 태그 포함하기

// 해당 경로(/tag)에 대한 GET 요청 경로 정의
// HTML 파일이나 태그 사용 가능
app.get('/tag', function (req, res) {
    res.send('<h1>Hello Express!</h1>')
  })


특정 경로에 Path 사용하기 (파라미터 값 전달)

// 해당 경로(/userPath)에 대한 GET 요청 경로 정의
// path 사용, 파라미터 값 이용
app.get('/userPath/:name', function (req, res) {
    const userName = req.params
    res.send(userName)
  })

 

  • Path 사용 : 경로 뒤에 '/값' 입력
  • .params : 명명된 경로 매개 변수(파라미터)에 매핑된 속성을 포함하는 개체
  • .params 예시를 통해 절차 이해하기
    1. /userPath 경로에  /name:과 같은 경로 정의
    2. 클라이언트가 /userPath/name 요청
    3. .params는 'name' 속성으로 설정된 객체 생성
    4. /userPath 경로에서 명명된 매개 변수 사용 가능


특정 경로에 Query String 사용하기 (파라미터 값 전달)

// 해당 경로(/userQuery)에 대한 GET 요청 경로 정의
// query string 사용
app.get('/userQuery', function (req, res) {
    const userName = req.query
    res.send("userAge : " + userName.age +  "<br>userBirthday : " + userName.birthday)
  })

 

  • 쿼리 스트링 (Query String) 사용 : 경로 뒤에 '?매개변수=값' 입력
  • .query : 요청한 URL의 쿼리 문자열 매개 변수(파라미터)에 대한 속성이 있는 개체가 포함된 개체
  • .query 예시를 통해 절차 이해하기
    1. /userQuery 경로에  물음표(?) 입력 후 전달할 키와 값(age=34) 정의
      • 전달할 키값이 여러개일 경우 '&'를 사용하여 구분
      • 예시) /userQuery?age=34&name=eunbyeol
    2. 클라이언트가 /userPath 경로에 요청
    3. .query는 물음표 뒤에 정의한 키값을 속성으로 설정된 객체 생성
    4. /userQuery 경로에서 명명된 쿼리 스트링 매개 변수 사용 가능


파라미터를 이용하여 상황에 따른 결과 반환하기

  • 패스(Path) 혹은 쿼리 스트링(Query String)을 이용하여 전달받은 파라미터의 값으로 상황에 따른 결과를 반환해보기
  • 해당 포스팅에서는 패스 이용
  • 소스 코드는 자바스크립트 기반이기 때문에 자바스크립트를 사용하여 작성할 수 있음
// 해당 경로(/path)에 대한 GET 요청 경로 정의
// path 사용, 파라미터 값을 이용하여 상황에 따른 결과 반환
app.get('/path/:user', function (req, res) {
    const { user } = req.params
    if (user == "eunbyeol") { res.send("은별님 환영합니다.") }
    else { res.send("승인되지 않은 사용자입니다.") }
  })

 

  • 경로에 "eunbyeol"을 입력하였을 경우

 

  • 경로에 "admin"을 입력하였을 경우


전체 소스 코드

// express 프레임워크 객체 생성
const express = require('express')
// express의 새 인스턴스 할당
const app = express()

// 루트 경로에 대한 GET 요청 경로 정의
app.get('/', function (req, res) {
  res.send('Hello World')
})

// 해당 경로(/greeting)에 대한 GET 요청 경로 정의
app.get('/greeting', function (req, res) {
    res.send('Hello Express!')
  })

// 해당 경로(/tag)에 대한 GET 요청 경로 정의
// HTML 파일이나 태그 사용 가능
app.get('/tag', function (req, res) {
    res.send('<h1>Hello Express!</h1>')
  })

// 해당 경로(/userPath)에 대한 GET 요청 경로 정의
// path 사용, 파라미터 값 이용
app.get('/userPath/:name', function (req, res) {
    const userName = req.params
    res.send(userName)
  })

// 해당 경로(/userQuery)에 대한 GET 요청 경로 정의
// query string 사용
app.get('/userQuery', function (req, res) {
    const userName = req.query
    res.send("userAge : " + userName.age +  "<br>userBirthday : " + userName.birthday)
  })

// 해당 경로(/path)에 대한 GET 요청 경로 정의
// path 사용, 파라미터 값을 이용하여 상황에 따른 결과 반환
app.get('/path/:user', function (req, res) {
    const { user } = req.params
    if (user == "eunbyeol") { res.send("은별님 환영합니다.") }
    else { res.send("승인되지 않은 사용자입니다.") }
  })

// 해당 포트로 서버를 시작하고 들어오는 요청 수신
app.listen(3000, () => {
    console.log('Server listening on port 3000');
  });

참고

반응형