Node.js에서 Express를 사용하여 데이터를 서버로 데이터 전송하는 방법

서버를 구현하다보면 데이터를 서버로 전송해야하는 순간이 생긴다.

 

특히 수정, 삭제 기능을 넣을 때 이에 해당된다.

 

방법에는 총 네 가지가 있다. 

 

1. Request Body: 요청의 본문에 데이터를 포함시킨다. 주로 JSON 형식을 사용한다.
2. HTTP Headers: 요청의 메타데이터로 데이터를 전송한다. 인증 정보나 콘텐츠 유형 같은 추가 정보를 전달한다.
3. Query String: URL의 끝에 ?로 시작하여 데이터를 전달한다.
4. URL Parameter: URL의 특정 부분에 데이터를 포함시킨다.

그럼 하나하나 코드 예시를 들어가며 살펴보자.

 

참고로 이 글에서 말하는

 

클라이언트 측은 아래와 같이 우리가 코드를 짤 때, js template인 detail.ejs, edit.ejs  등의 파일을 말하고

 

서버 측은 메인서버 실행파일인 app.js 파일을 말한다.

 

1. Request Body 

 

=> Request Body는 주로 POST, PUT, DELETE 요청에서 사용되며, 클라이언트가 서버로 전송하는 데이터의 본문에 포함된다. 일반적으로 JSON 형식을 사용한다.

 

★ 사용상황 

 

• 서버에 데이터를 생성하거나 업데이트할 때
• 대량의 데이터를 보낼 때

 

 

<클라이언트 측>

fetch('http://localhost:3000/lsiron', {
  method: 'POST',       // 새로고침 없이 method 방법 사용가능
  headers: {			// POST 요청을 할 때, 유저가 입력한 데이터 전송방법
    'Content-Type': 'application/json'	// 기본 설정 추가
  },
  body: JSON.stringify({ 이름: 'Lsiron', 나이: 28 })  // 데이터 기입, 이 데이터가 POST 요청과 함께 날라감 , 지금 쓴 것은 object나 array 보내는 방법, 문자열은 그냥 '' 안에 입력하면 됨
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

 

<서버 측>

app.post('/lsiron', async (req, res) => {
  const lsiron = req.body;
  res.json({ 이름: lsiron.이름, 나이: lsiron.나이 });
});

 

=> fetch를 쓰면 서버로 get 요청을 날린다.

 

fetch는 내부적으로 ajax라는 기술을 써 주기 때문에 이를 쓰면 새로고침 없이 get요청을 날린다. 즉, 데이터를 날릴 때마다 매번 새로고침 되는 기능이 싫을 때 쓴다.

 

여기서 말하는 새로고침이란? 원래 HTML의 form 태그를 사용하여, 데이터를 보내는 방법을 사용하는데 이 방법은 form 태그의 성질때문에 매번 새로고침이 된다. 아래는 form 태그로 글 작성 기능을 구현한 경우이다.

 

<클라이언트 측>

    <form action="/lsiron" method="POST"> 
        <h1>Lsiron</h1>
        <input name="이름">
        <input name="나이">
        <button type="submit">전송</button>
    </form>

 

=> form 태그를 쓰면 POST 요청이 가능하다. action URL로 POST 메서드를 통해 전송한다.

 

주의할 점은 name 속성을 꼭 집어넣어야 한다. 그래야 서버로 데이터 전송 가능하다.

 

<서버 측>

app.post('/lsiron', async (req, res) => {     // 클라이언트 측 form 태그의 action URL과 메서드 사용
    let lsiron = req.body      // req.body로 넣으면 유저가 클라이언트 측 form태그의 input 안에 작성한 내용(제목, 내용)이 담겨있음                     
    await db.collection('post').insertOne({ 이름 : lsiron.이름 , 나이 : lsiron.나이 }) 
    res.redirect('/list')  
})

 

 

★ 활용예시 ★

 

회원 가입 폼 제출: 사용자가 입력한 이름, 이메일, 비밀번호 등의 정보를 서버에 전송하여 새로운 계정을 생성한다.

 

// 클라이언트 측
fetch('http://localhost:3000/register', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ 이름: '홍길동', 이메일: 'hong@example.com', 비밀번호: 'password123' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 서버 측
app.post('/register', (req, res) => {
  const { 이름, 이메일, 비밀번호 } = req.body;
  // 사용자 등록 로직
  res.json({ message: '회원 가입 성공', user: { 이름, 이메일 } });
});

 

2. HTTP Headers 

=> HTTP Headers는 요청의 메타데이터로 데이터를 전송하는 방법이다. 인증 정보나 콘텐츠 유형 같은 추가 정보를 전달할 때 주로 사용된다.

 

★ 사용상황 

• 인증 정보 전송 (예: 토큰)
• 콘텐츠 유형 명시
• 사용자 에이전트나 언어 설정 등의 정보 전달

 

<클라이언트 측>

fetch('http://localhost:3000/lsiron', {
  method: 'GET',
  headers: {
    '이름': 'lsiron'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

 

<서버 측>

app.get('/lsiron', (req, res) => {
  const lsiron = req.headers;
  res.json({ 이름 : lsiron.이름 });
});

 

 

★ 활용예시 ★

 

API 호출 시 인증 토큰 전송: 보호된 리소스에 접근하기 위해 인증 토큰을 헤더에 포함시켜 요청을 보낸다.

// 클라이언트 측
fetch('http://localhost:3000/protected-resource', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your_token_here'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 서버 측
app.get('/protected-resource', (req, res) => {
  const token = req.headers['authorization'];
  // 토큰 검증 로직
  res.json({ message: '보호된 리소스 접근 성공' });
});

 

3. Query String 

=> Query String은 URL의 끝에 ?로 시작하는 문자열로 데이터를 전달하는 방법이다. 보통 GET 요청에서 사용된다.

 

★ 사용상황 

• 검색어, 필터링 조건 등 소량의 데이터를 전송할 때
• 북마크 가능한 URL을 생성할 때

 

 

<클라이언트 측>

fetch(`http://localhost:3000/lsiron?이름=lsiron`)

 

<서버 측>

app.get('/lsiron', async (req, res) => {
  const lsiron = req.query;
  res.json('lsiron.이름');
});

 

 

★ 활용예시 ★

 

검색 기능 : 사용자가 입력한 검색어를 서버에 전송하여 검색 결과를 가져온다.

// 클라이언트 측
fetch('http://localhost:3000/search?query=apple')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 서버 측
app.get('/search', (req, res) => {
  const { query } = req.query;
  // 검색 로직
  res.json({ results: [`${query} 관련 결과 1`, `${query} 관련 결과 2`] });
});

 

4. URL Parameter 

=>  URL Parameter는 URL의 특정 부분에 데이터를 포함시키는 방법이다. 보통 RESTful API에서 리소스를 식별할 때 사용된다.

 

★ 사용상황 

• 특정 리소스나 엔티티를 식별할 때
• RESTful API 경로 설계 시

 

<클라이언트 측>

  fetch('http://localhost:3000/lsiron/이름')

 

<서버 측>

app.get('/lsiron/:이름', async (req, res) => {
  const lsiron = req.params; // req.params 로 넣으면, 유저가 URL 파라미터 자리에 입력한 글자가 담겨있음
  res.json({ 이름 : lsiron.이름 });  
});

 

 

★ 활용예시 ★

 

사용자 정보 조회: 특정 사용자의 ID를 포함한 URL로 해당 사용자의 정보를 조회한다.

// 클라이언트 측
fetch('http://localhost:3000/users/12345')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 서버 측
app.get('/users/:id', (req, res) => {
  const { id } = req.params;
  // 사용자 정보 조회 로직
  res.json({ userId: id, 이름: '홍길동', 이메일: 'hong@example.com' });
});