MINI Mamago

🌈 Mamago

github 링크

🍊 목적

미니 서버 구축을 과제로 최종 제출하고, 간단한 클라이언트와 서버를 만들고 싶다는 생각이 들어 바로 실행에 옮겼다.
Mamago는 Naver의 Papago API를 호출하여 동작하는 한영 번역기이다.
클라이언트의 요청과 서버의 응답 방법을 처음부터 끝까지 구현해 봄으로써 react와 express를 활용하는 기회가 되었다.

🍊 기능

1. 번역하고자 하는 언어 선택
2. 번역받고자 하는 언어 선택
3. 번역하고자 하는 텍스트 작성
4. trans 클릭 시 GET 요청
5. Naver Papago API 호출을 통해 응답 회신

🍊 React

Fetch API를 통해 "localhost:5000"에 GET 요청을 하였다.
여기서 문제는 GET 요청은 body를 보낼 수 없다는 것이다. 그렇다면 어떻게 기능 1,2,3의 데이터를 담아보낼 수 있을까?

1. GET요청 전에 POST 요청을 보낸다.

처음 생각해낸 방법은 get 요청 전에 post 요청을 보내는 것이다.
post 요청은 body를 보낼 수 있고, body 안에 원하는 데이터를 담아 보내면 될 것이라고 생각한 것이다.

client

fetch('http://localhost:5000/translate', {
      method: 'POST',
      body: JSON.stringify({
        text: text,
        source: lang.source,
        target: lang.target,
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then(() =>
      fetch('http://localhost:5000/translate')
        .then((res) => res.json())
        .then((data) => console.log(data))
    );

server

let body = {};

app.post('/translate', (req, res) => {
  body = {
    ...body,
    source: req.body.source,
    target: req.body.target,
    text: req.body.text,
  };
  res.sendStatus(200);
});

기능은 제대로 실행되지만, 불필요한 통신이 발생하는 것이기 때문에, 별로 만족스럽지 않은 방법이었다.

그래서 찾은 방법은 다음과 같다.

2. query string을 이용한다.

해답은 papago에서 찾았다.

papago에서 번역기능을 실행하니, url이 다음과 같이 나타났다
https://papago.naver.com/?sk=ko&tk=ja&hn=0&st=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94
위와 같이 쿼리스트링으로 소스 언어, 타겟 언어, 타겟 텍스트를 쿼리스트링에 담겨있는 것을 발견했다.

이를 확인하고 query string을 사용하면 되겠다는 아이디어를 얻었고, ?source=language와 같이 query string을 통해 Express에서 req.query로 요청 값들에 접근할 수 있도록 하였다.

---

🍊 NodeJS

Naver Papago 개발 가이드

지금까지 클라이언트에서 fetch를 통해 api를 요청했지만, Naver Papago API를 사용하기 위해서는 서버에서 api를 요청해야 했다.

node.js에서 api를 요청하기 위해서는 request 모듈이 필요한데, request은 url에 요청을 보내고 response를 받는 모듈이다.

설치는 npm을 통해 가능했다.

npm i request

아래는 Papago API 구현 예제이다.

var express = require('express');
var app = express();
var client_id = 'YOUR_CLIENT_ID';
var client_secret = 'YOUR_CLIENT_SECRET';
var query = "번역할 문장을 입력하세요.";
app.get('/translate', function (req, res) {
   var api_url = 'https://openapi.naver.com/v1/papago/n2mt';
   var request = require('request');
   var options = {
       url: api_url,
       form: {'source':'ko', 'target':'en', 'text':query},
       headers: {'X-Naver-Client-Id':client_id, 'X-Naver-Client-Secret': client_secret}
    };
   request.post(options, function (error, response, body) {
     if (!error && response.statusCode == 200) {
       res.writeHead(200, {'Content-Type': 'text/json;charset=utf-8'});
       res.end(body);
     } else {
       res.status(response.statusCode).end();
       console.log('error = ' + response.statusCode);
     }
   });
 });
 app.listen(3000, function () {
   console.log('http://127.0.0.1:3000/translate app listening on port 3000!');
 });

위의 코드에서 상황에 맞게 추가하고 그대로 붙여넣기만 하면된다.

나의 mamago 같은 경우 cross origin이기 때문에, CORS처리를 해주었다.

app.get()의 options는 위에서 query string에 담아 보내주었기 때문에 req.queyr로 접근하여 아래와 같이 작성하였다.

 form: {
      source: req.query.source,
      target: req.query.target,
      text: req.query.text,
    },

요청과 응답이 잘 동작하는 것을 볼 수 있다.

---

🍊 최종 결과 gif

---

🍊 느낀점

정말 간단한 번역기를 생성하였지만 뿌듯한 시간이었다. 드디어 작지만 직접 무언가를 만들어낼 수 있게 되었다. 다양한 API를 활용하면 간단하면서도 유용한 웹 어플리케이션을 만들 수 있다는 것을 직접 느낄 수 있었다.

많은 학습을 하는 것도 중요하지만, 배운 것들을 총집합하여 써먹는 것도 중요한 것 같다. 지금까지 많은 것들을 보고 학습하였지만, 모든 것을 종합적으로 활용하는 것은 어렵다는 것 또한 느꼈다. 많은 input을 했다면 작은 output이라도 내놓는 것이 필요한 것 같다.

다음 미니미 프로젝트는 리덕스를 배우고 할 것 같은데...? 그때는 좀 더 이쁘게 꾸며봐야겠다.