개발자 쿠키

node.js 프로젝트 생성 및 설정, 핸들러 3개 구현 및 연결 본문

javascript

node.js 프로젝트 생성 및 설정, 핸들러 3개 구현 및 연결

개발자 쿠키 2024. 7. 16. 19:52

요구사항

Node.js 서버 작성(server.js)- 핸들러 3개 구현
1. 메인 페이지 요청 - lh:3-/ -> index.html 페이지 응답
2. 언어 감지 요청 API - lh:3-/detect 요청 시 언어 감지 결과 응답
3. 번역 요청 API - lh:3-/translate 요청 시 번역 결과 응답
-> 2, 3번은 Thunder Client 툴로 테스트# app.js와 server.js 연결

 

프로젝트 초기화 및 의존성 설치

프로젝트 생성 및 초기화

npm init - y

의존성 설치

npm install superagent express

TailwindCSS 설정

TailwindCSS CDN 추가

public/index.html 파일의 <head> 태그 내에 TailwindCSS CDN을 추가합니다.

TailwindCSS 설정 파일 추가

프로젝트 루트에 tailwind.config.js 파일을 추가하고, 기존 프로젝트에서 가져온 설정 내용을 입력합니다.

 

파파고 메인 페이지 준비

1. public 폴더 생성 및 파일 준비

public 폴더 내에 index.html, toggle.css, 그리고 필요한 다른 파일들을 넣어둡니다.

app.js 작성

1. app.js 파일 생성 및 작성

프로젝트 루트에 app.js 파일을 생성합니다.

/**
 * source ~ : 번역할 텍스트, 번역할 언어의 타입(ko, ja..)
 * target ~ : 번역 결과 텍스트, 번역될 언어의 타입(ko, ja..)
 */
const [sourceSelect, targetSelect] = document.getElementsByTagName('select');
const [sourceTextArea, targetTextArea] = document.getElementsByTagName('textarea');

// 번역될 언어의 타입 변경 이벤트
// English면 en, 한국어면 ko
let targetLanguage = 'en'; // 번역하고 싶은 언어의 타입, 초기값은 en(English)
targetSelect.addEventListener('change', (event) => targetLanguage = event.target.value);

// 번역할 텍스트 입력 이벤트

let timer;
sourceTextArea.addEventListener('input', (event) => {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
        const text = event.target.value;
        
        // detect에게 요청 후 응답 결과 받아서
        // { langCode: 'ko' }
        // ko 값을 활용하여 셀렉트 박스를 '한국어'로 변경
        // XMLHttpRuquestAPI 활용

        const xhr = new XMLHttpRequest(); // XMLHttpRequest API 불러오기
        
        // Node.js 서버로부터 응답이 완료되었을 때 동작시킬 이벤트
        xhr.onload = () => {
            if (xhr.readyState === xhr.DONE && xhr.status === 200) {

                // 결과 데이터 받음
                const responseData = xhr.responseText;

                // 결과 데이터를 JS 객체로 파싱
                const parsedData = JSON.parse(responseData);

                // 화면에 출력하는 처리 로직
                const detectedLang = parsedData.langCode // ko
                sourceSelect.value = detectedLang;

                // 언어 번역 요청 코드 작성
                // -> 비동기 요청(언어 감지)에 대한 처리 결과값인 detectedLang을 가져다가, 언어 번역 요청에 활용해야함
                const xhr2 = new XMLHttpRequest();

                const url = '/translate';

                const data = JSON.stringify({
                    source: detectedLang,
                    target: targetLanguage,
                    text, // text: text와 같다.
                });

                xhr2.open('POST', url);
                xhr2.onload = () => {
                    if (xhr2.readyState === xhr2.DONE && xhr2.status === 200) {
                        const responseData = JSON.parse(xhr2.response); // {translatedText: 'hello', srcLanguage:'ko', tarLanguage: 'en'}
                        console.log(responseData);

                        sourceLanguage = responseData.message.result.srcLangType;
                        targetTextArea.value = responseData.message.result.translatedText;
                        
                        // 번역된 텍스트 결과값을 가지고, 다른 요청을 처리해야 한다면?
                        
                    }
                }

                xhr2.setRequestHeader('Content-Type', 'application/json');
                xhr2.send(data);
            }
        }
        const url = '/detect'; // Node.js의 언어 감지 API URL
        // 언어감지 API에 보낼 데이터 준비
        /*
            {
                "query": "안녕"
            }
        */
        const data = {
            query: text
        };

        // 문자열 포맷으로 직렬화된 데이터
        const strigifiedData = JSON.stringify(data);

        xhr.open('POST', url);        
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(strigifiedData);

    }, 1500);
    
});

Node.js 서버 작성 (server.js)

1. server.js 파일 생성 및 작성

프로젝트 루트에 server.js 파일을 생성합니다.

import express, { json } from 'express';
import HTTP from 'superagent';

const app = express();

app.use(express.static('public')) 
app.use(json())

app.get('/', (_, response) => {
    response.sendFile('index.html');
});

app.post('/detect', (request, response) => {

    const clientId = 'edwgz9by0h';
    const clientSecret = 'iFetxOwqbqP0xVjwxvNQiRlxa1n4vB1XywWJBqou';

    const url = '<https://naveropenapi.apigw.ntruss.com/langs/v1/dect>';

    HTTP.post(url)
        .send(request.body)
        .set('Content-Type', 'application/json')
        .set('X-NCP-APIGW-API-KEY-ID', clientId)
        .set('X-NCP-APIGW-API-KEY', clientSecret)
        .end((error, result) => {
            if (result.statusCode === 200) {
                response.send(result.body);
            } else {
                console.error(error);
            }
        });
});

app.post('/translate', (request, response) => {
    const clientId = 'edwgz9by0h';
    const clientSecret = 'iFetxOwqbqP0xVjwxvNQiRlxa1n4vB1XywWJBqou';

    const url = '<https://naveropenapi.apigw.ntruss.com/nmt/v1/translation>';

    HTTP.post(url)
        .send(request.body)
        .set('Content-Type', 'application/json')
        .set('X-NCP-APIGW-API-KEY-ID', clientId)
        .set('X-NCP-APIGW-API-KEY', clientSecret)
        .end((error, result) => {
            if (result.statusCode === 200) {
                response.send(result.body);
            } else {
                console.error(error);
            }
        });
});

const port = 3000;
app.listen(port,
    () => console.log(`http://127.0.0.1:${port}/ 서버 프로세스가 3000번 포트에서 실행 중입니다.`)
);

hunder Client 툴로 API 테스트

Thunder Client 툴을 사용하여 /detect 및 /translate API를 테스트합니다.

  1. /detect API 테스트:
  2. /translate API 테스트:

app.js와 server.js 연결

이제 app.js의 비동기 요청 코드를 통해 server.js의 API 핸들러와 연결되어 응답받은 결과를 화면에 표시할 수 있습니다. 프로젝트가 완성되었습니다.

'javascript' 카테고리의 다른 글

javascript | api, app, server 관계  (0) 2022.10.27
'javascript' Related Articles more