[React] 서버에서 데이터 전송

 

-개요

작년에 만들어두었던 프로젝트에 이용했던 공공 api가 개편이 되면서 전체적인 수정이 필요했다.

(기존가입자도 모두 새로가입해야하는 상황이었고, 발급받은 key값과 가져와서 사용했던 데이터 Key값 모두가 변경되었다. 

-> 처음부터 다시 해야하는 상황)

 

 

- DB (mysql2) 정보 수정

Db관련 데이터를 가져올 때 host명을 'localhost'로 지정해두었었는데, 이 부분도 정확한 아이피값을 지정해줘야해서 바꿔주었다.

기존 host명에 localhost를 기재

 

정확한 아이피 주소를 입력한 Host명

 

 

 

- 서버 수정 (express.js 관련)

1. api 주소 자체가 바뀌었기 때문에, 주소를 변경하고 발급받은 Key를 변경시키면서 서버내 작성해둔 코드에도 변경을 주었다.

- express를 사용하면서 status를 이용하기로 했다. status(400) / status(500) 오류 관련 기록을 해보기로 한다.

 

Express.js란?

express.js는 Node.js를 위한 웹 애플리케이션 프레임워크로, 웹 서버를 쉽게 구축하고 다양한 웹 애플리케이션을 빠르게 개발할 수 있도록 돕는 도구이다. Express는 미들웨어와 라우팅 기능을 제공하며, RESTful API를 쉽게 구축할 수 있도록 지원한다.

간단한게 express 관련 특징 및 예시를 기록해본다. 

 

주요 특징

1. 경량화된 프레임워크
   express는 기본적으로 매우 가벼운 프레임워크이다. 필요한 기능만 추가하여 사용하는 방식이기 때문에 다양한 애플리케이션을 만들 때 유연하게 사용할 수 있다. 
2. 라우팅(Routing)
   라우팅을 통해 클라이언트의 요청에 맞는 응답을 처리할 수 있게 해주며 URL 경로, HTTP 메서드(GET, POST 등)에 따라 서버의 동작을 정의할 수 있다.
3. 미들웨어(Middleware)
   미들웨어는 요청과 응답을 처리하는 함수로 요청이 들어오면 미들웨어가 차례대로 실행되고, 이를 통해 요청을 가공하거나 로그를 찍거나 오류 처리를 할 수 있다.
4. RESTful API 구축 지원
   RESTful API를 쉽게 구현할 수 있는 도구들을 제공하여, 다양한 클라이언트(웹, 모바일 앱 등)와 통신할 수 있는 API 서버를 쉽게 구축할 수 있다.
5. 템플릿 엔진 지원
   서버 측에서 HTML 파일을 동적으로 생성할 수 있는 템플릿 엔진(Jade, EJS, Pug 등)을 지원합니다. 이를 통해 서버에서 데이터를 받아 동적으로 페이지를 렌더링할 수 있다.
6. 다양한 플러그인과 라이브러리
   express는 플러그인과 미들웨어가 풍부해서 다양한 기능을 쉽게 추가할 수 있는데 예를 들어, 사용자 인증을 처리하는 미들웨어, 데이터베이스 연결을 돕는 미들웨어 등이 있다.

 

기능예시

1. 라우팅(Routing): 라우트를 통해 다양한 HTTP 요청(GET, POST 등)을 처리할 수 있다. 예를 들어, 특정 URL 경로에 대한 GET 요청을 처리하거나 POST 요청을 처리할 수 있다.

// GET 요청 처리
app.get('/home', (req, res) => {
  res.send('Welcome to the home page!');
});

// POST 요청 처리
app.post('/submit', (req, res) => {
  res.send('Form submitted!');
});

 

2. 미들웨어(Middleware): 미들웨어는 요청과 응답 사이에 끼어들어 처리를 하는 함수로 요청의 데이터를 검증하거나, 로그를 기록하거나, 오류를 처리하는 기능을 미들웨어로 구현할 수 있다.

 

// 요청을 로그로 출력하는 미들웨어
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next();  // 다음 미들웨어로 넘어감
});

// 요청 처리 예시
app.get('/example', (req, res) => {
  res.send('This is an example!');
});

 

 

3. JSON 응답 처리: JSON 응답을 쉽게 처리할 수 있게 도와준다. 이를 통해 클라이언트와 서버 간에 데이터를 주고받을 때 유용하다.

 

app.get('/data', (req, res) => {
  res.json({ name: 'John', age: 30 });
});

 

 

4. 템플릿 엔진(Templating Engine): HTML을 동적으로 렌더링할 수 있는 템플릿 엔진을 지원한다. 예를 들어 EJS나 Pug 같은 템플릿 엔진을 사용해 서버에서 HTML을 렌더링하여 클라이언트에게 반환할 수 있다.

app.set('view engine', 'ejs');  // 템플릿 엔진 설정

app.get('/user', (req, res) => {
  res.render('user', { name: 'John' });  // 'user.ejs' 파일을 렌더링
});

 

 

 

- 서버쪽 코드를 수정하면서 만졌던 부분은 status처리 부분이었다.

Status()란?

 status()는 Express.js와 같은 서버 프레임워크에서 사용되는 메서드이다. status()는 HTTP 응답 상태 코드를 설정하는 메서드로, 서버에서 클라이언트에게 응답할 때 상태 코드를 설정하는 데 사용된다.

// Express.js 예시
app.get('/', (req, res) => {
  res.status(200).send('OK');
});

 

위의 코드에서 res.status(200)은 HTTP 응답 상태 코드를 200으로 설정하고, 클라이언트에 응답을 보낸다. 이 상태 코드는 정상적인 요청 처리를 의미한다.

 

일단 자바스크립트 기본에서는 status()가 없다.

자바스크립트 자체에는 status() 메서드가 포함되어 있지 않다. 자바스크립트는 기본적으로 클라이언트 사이드에서 웹 페이지와 상호작용하는 데 사용되며, HTTP 응답 상태 코드를 설정하는 기능은 서버에서 필요하기때문이다.

서버 측에서 HTTP 상태 코드를 설정하려면 express.js와 같은 웹 서버 프레임워크를 사용하거나, node.js의 http 모듈을 직접 사용하여 응답을 관리할 수 있다.

 

 

예시: express.js 없이 http 상태 코드 처리 (node.js 기본)

const http = require('http');

http.createServer((req, res) => {
  res.statusCode = 200; // 상태 코드 설정
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, world!');
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

 

이 경우 statusCode는 200으로 설정되어, 클라이언트에게 정상적인 응답이 전달된다.

status() 메서드는 자바스크립트의 기본 요소가 아니라, 주로 express.js와 같은 웹 서버 프레임워크에서 사용되는 기능이다. 서버에서 http 응답을 관리하는 데 사용되며, 클라이언트가 요청한 결과에 맞는 상태 코드를 설정함을 알 수 있다.

 

 

** status(400) 과 status(500)의 차이는 무엇일까?

status(400) : status(400)은 **잘못된 요청(Bad Request)**을 나타내는 HTTP 상태 코드다.

의미:

• 400 Bad Request는 클라이언트가 서버에 보낸 요청이 잘못되었거나 유효하지 않음을 의미한다. 즉, 클라이언트의 요청에 오류가 있어서 서버가 이를 처리할 수 없다는 상태 코드이다.
• 이 오류는 클라이언트 측에서 잘못된 데이터를 보내거나, 필요한 필드를 빠뜨리거나, 형식이 맞지 않는 요청을 보낼 때 주로 발생한다.

사용 예:

• 클라이언트가 필수 데이터를 빠뜨리고 요청을 보냈을 때
• 클라이언트가 요청 본문을 잘못된 형식으로 보냈을 때 (예: JSON 형식이 잘못된 경우)
• 잘못된 URL 또는 파라미터를 보냈을 때
• 인증 정보가 잘못된 경우 (예: 잘못된 토큰이나 비밀번호)

400 상태 코드가 발생하는 경우:

• 필수 파라미터 누락: 클라이언트가 요청을 보낼 때 필요한 파라미터를 빼먹은 경우
• 잘못된 데이터 형식: 예를 들어, 숫자가 와야 하는 곳에 문자열이 들어갔거나, 날짜 형식이 맞지 않는 경우
• 잘못된 요청 본문: JSON이 잘못된 형식으로 전달되었거나, 기대하는 데이터 형식이 아닌 경우

app.post('/some-endpoint', (req, res) => {
    const { name, email } = req.body;

    // name과 email이 없으면 400 오류 반환
    if (!name || !email) {
        return res.status(400).send({ error: 'Name and email are required' });
    }

    // 정상적인 처리
    res.status(200).send({ message: 'Data received successfully' });
});

위 코드에서는 클라이언트가 name과 email을 보내지 않으면 400 Bad Request 상태 코드를 반환하고, 오류 메시지를 클라이언트에게 전송한다.

 

 

 

status(500) : **서버 내부 오류(Internal Server Error)**를 나타내는 HTTP 상태 코드다.

의미:

• 500 Internal Server Error는 서버에서 요청을 처리하는 중 예기치 않은 문제가 발생했음을 의미한다. 즉, 클라이언트의 요청은 올바르게 전달되었지만, 서버에서 문제를 처리하는 과정에서 오류가 발생한 경우에 이 상태 코드가 반환된다.
• 이 오류는 클라이언트의 잘못된 요청이 아니라, 서버 측에서 처리할 수 없는 문제가 발생했을 때 사용된다.

사용 예:

• 데이터베이스 오류
• 서버 설정 오류
• 코드에서 예상치 못한 예외 발생
• 서버의 리소스 부족 문제 등

try {
    // 서버에서 어떤 작업을 시도
    const result = await someServerFunction();
    return res.status(200).send(result);  // 정상적으로 처리된 경우
} catch (error) {
    // 서버 내부에서 오류 발생 시
    console.log('Error:', error);
    return res.status(500).send({ error: 'Internal Server Error' });
}

 

이 코드에서 catch 블록은 예외가 발생했을 때 500 Internal Server Error 상태 코드를 반환한다. 이 상태 코드는 클라이언트에게 서버에서 예기치 않은 오류가 발생했음을 알리며, 클라이언트는 이 오류를 해결할 수 없으므로 서버 관리자나 개발자가 문제를 해결해야한다.

 

 

서버에서 api데이터 값 전송_ status(500)오류예시

 

 

- 기록을 마치며

전체적인 api 수정이 불가피해서 프로젝트 자체를 수정하는데 오래 걸릴 것 같다.(절망편..)

( 공공기관 홈페이지 자체가 개편할줄이야..하..) 사용하고있던 key값들이 모두 변경되었고 기존에 있었던 key값은 찾기 어렵거나 

대체되었다해도 제대로 된 정보가 업로드 되지않아 전면적으로 프로젝트 자체를 개편해야할 듯 싶다. (숙주가 개편되면 이렇게 되는구나ㅠ) 

기존엔 리액트로 만든 프로젝트였는데 이번 기회로 vue프로젝트로 바꿔 진행 해볼까 싶기도 하고 디자인은 이미 다 잡혀있으니

vue로 한 번 만들어보는 것도 나쁘진 않을 듯 싶다. (프로젝트 공부엔 도움이 될 듯하다.)