Express.js 엔드포인트 생성 방법과 클라이언트에서 요청 보내기

Express.js는 Node.js를 위한 웹 프레임워크 중 하나입니다. Express.js를 사용하면 간단하고 유연하게 웹 서버를 구축할 수 있습니다.

엔드포인트란?

엔드포인트는 웹 서버가 클라이언트의 요청을 받아서 응답을 주는 지점을 말합니다. 엔드포인트는 보통 URL과 HTTP 메소드로 구성됩니다. 예를 들어, GET /users는 /users라는 URL에 GET 메소드로 요청을 보내는 엔드포인트입니다. 엔드포인트는 클라이언트가 원하는 데이터나 기능을 제공하기 위해 서버에서 정의해야 합니다.

엔드포인트 생성

엔드포인트 생성을 위해서는 Express 객체를 생성해야 합니다. 이 객체는 express() 함수를 호출하여 얻을 수 있습니다. 이 객체는 다양한 메소드를 제공하는데, 그 중에서 app.get(), app.post(), app.put(), app.delete() 등은 각각 GET, POST, PUT, DELETE 메소드에 대응하는 엔드포인트를 정의하는 메소드입니다. 이 메소드들은 첫 번째 인자로 URL 패턴을, 두 번째 인자로 콜백 함수를 받습니다. 콜백 함수는 요청 객체(req)와 응답 객체(res)를 매개변수로 받아서 요청과 응답을 처리할 수 있습니다.

이제 메소드별 예제를 작성해보겠습니다.

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

// GET /hello 엔드포인트 정의
app.get('/hello', (req, res) => {
  // 응답에 Hello, world! 메시지 전송
  res.send('Hello, world!');
});

// POST /login 엔드포인트 정의
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  // 여기에서는 간단히 입력 받은 username과 password를 로깅하고 응답을 보냅니다.
  console.log(`Received username: ${username}, password: ${password}`);
  res.send('Login request received');
});

// GET /users 엔드포인트 정의
app.get('/users', (req, res) => {
  // 예시로 하드코딩된 사용자 데이터를 보냅니다.
  const users = [
    { id: 1, name: '홍길동', age: 30 },
    { id: 2, name: '김철수', age: 35 }
  ];
  res.json(users);
});

// PUT /users/:id 엔드포인트 정의
app.put('/users/:id', (req, res) => {
  const userId = req.params.id;
  const { name, age } = req.body;
  // 예시로 하드코딩된 응답을 보냅니다.
  res.json({ message: 'User updated successfully', user: { id: userId, name, age } });
});

// 3000번 포트에서 서버 실행
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

const express = require('express');

const app = express();

// GET /hello 엔드포인트 정의

app.get('/hello', (req, res) => {

// 응답에 Hello, world! 메시지 전송

res.send('Hello, world!');

});

// POST /login 엔드포인트 정의

app.post('/login', (req, res) => {

const { username, password } = req.body;

// 여기에서는 간단히 입력 받은 username과 password를 로깅하고 응답을 보냅니다.

console.log(`Received username: ${username}, password: ${password}`);

res.send('Login request received');

});

// GET /users 엔드포인트 정의

app.get('/users', (req, res) => {

// 예시로 하드코딩된 사용자 데이터를 보냅니다.

const users = [

{ id: 1, name: '홍길동', age: 30 },

{ id: 2, name: '김철수', age: 35 }

];

res.json(users);

});

// PUT /users/:id 엔드포인트 정의

app.put('/users/:id', (req, res) => {

const userId = req.params.id;

const { name, age } = req.body;

// 예시로 하드코딩된 응답을 보냅니다.

res.json({ message: 'User updated successfully', user: { id: userId, name, age } });

});

// 3000번 포트에서 서버 실행

app.listen(3000, () => {

console.log('Server is running on port 3000');

});

이 코드를 실행하고 브라우저에서 http://localhost:3000/hello로 접속하면, Hello, world!라는 메시지를 볼 수 있습니다. 같은 방식으로 다른 엔드포인트도 정의하고 필요에 따라 콜백 함수에서 요청 및 응답을 처리할 수 있습니다.

클라이언트에서 요청 보내기

클라이언트에서 서버의 엔드포인트에 요청을 보내기 위해서는 여러 가지 방법이 있습니다. 가장 간단한 방법은 브라우저의 주소창에 URL을 입력하고 엔터를 누르는 것입니다. 이 방법은 GET 메소드로 요청을 보내는 경우에만 사용할 수 있습니다. 다른 메소드인 POST, PUT, DELETE로 요청을 보내려면 HTML 폼, AJAX, 터미널 등을 사용해야 합니다.

HTML 폼

HTML 폼은 웹 페이지에서 사용자의 입력을 받아서 서버에 전송하는 방법입니다. HTML 폼은

form태그로 작성하며 input , textarea 등의 태그로 입력 필드를 만들 수 있습니다. 폼에서는 action 속성으로 요청을 보낼 URL을, method 속성에 요청 메소드를 지정한 후 button 태그나 submit 태그로 제출 버튼을 만들 수 있습니다. 제출 버튼을 클릭하면 폼의 입력 데이터가 서버로 전송됩니다.

다음은 POST /login 엔드포인트에 요청을 보내는 HTML 폼입니다.

<form action="/login" method="POST">
  <label for="username">이름:</label>
  <input type="text" id="username" name="username" required=""></input>
  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password" required=""></input>
  <button type="submit">로그인</button>
</form>

</form>

이 폼을 제출하면, username과 password라는 이름의 입력 데이터가 POST /login 엔드포인트로 전송됩니다.

AJAX

AJAX는 Asynchronous JavaScript And XML의 약자로, 웹 페이지에서 비동기적으로 서버와 통신하는 방법입니다. AJAX를 사용하면 웹 페이지를 새로고침하지 않고 실시간으로 서버의 데이터를 가져오거나 전송할 수 있습니다. AJAX는 보통 JavaScript의 XMLHttpRequest 객체나 fetch API를 사용하여 구현합니다.

다음은 fetch API를 사용하여 GET /users 엔드포인트에 요청을 보내고, 응답을 JSON 형식으로 파싱하는 코드입니다.

// GET /users 엔드포인트 요청
fetch('/users')
  .then((res) => {
    // 응답을 JSON 형식으로 파싱
    return res.json();
  })
  .then((data) => {
    // 파싱된 데이터 출력
    console.log(data);
  })
  .catch((err) => {
    // 에러 처리
    console.error(err);
  });

// GET /users 엔드포인트 요청

fetch('/users')

.then((res) => {

// 응답을 JSON 형식으로 파싱

return res.json();

})

.then((data) => {

// 파싱된 데이터 출력

console.log(data);

})

.catch((err) => {

// 에러 처리

console.error(err);

});

이 코드는 웹 페이지의 script 태그 안에 작성하거나 외부 JavaScript 파일로 불러올 수 있습니다.

터미널

터미널은 컴퓨터의 명령줄 인터페이스로, 키보드로 명령을 입력하고 결과를 출력하는 방법입니다. 터미널에서 서버의 엔드포인트에 요청을 보내기 위해서는, curl이나 httpie 등의 명령줄 도구를 사용할 수 있습니다.

다음은 curl을 사용하여 PUT /users/1 엔드포인트에 요청을 보내고, 응답을 출력하는 명령입니다.

# PUT /users/1 엔드포인트에 요청 보내기
# -X 메소드 지정
# -H 헤더 지정
# -d 데이터 지정
curl -X PUT -H "Content-Type: application/json" -d '{"name": "홍길동", "age": 25}' http://localhost:3000/users/1

# 응답 출력
{"message": "User updated successfully", "user": {"id": 1, "name": "홍길동", "age": 25}}

# PUT /users/1 엔드포인트에 요청 보내기

# -X 메소드 지정

# -H 헤더 지정

# -d 데이터 지정

curl -X PUT -H "Content-Type: application/json" -d '{"name": "홍길동", "age": 25}' http://localhost:3000/users/1

# 응답 출력

{"message": "User updated successfully", "user": {"id": 1, "name": "홍길동", "age": 25}}

이 명령은 터미널에서 실행할 수 있습니다.

마무리

Express.js는 웹 서버 개발에 필요한 기본적인 기능을 제공하면서 다양한 미들웨어와 템플릿 엔진을 통해 확장성과 유연성을 갖춘 웹 프레임워크입니다. Express.js에서 엔드포인트를 어떻게 만들고, 클라이언트에서 어떻게 요청을 보내는지 알아보았는데, 이 글이 도움이 되셨다면 다른 글도 한번씩 방문해주세요. 감사합니다.

잡다구리 지식창고