이번 프로젝트의 주제는 naver의 open api를 이용한 싱글페이지 웹 애플리케이션을 만드는 것이였다. 이때까지 작성했던 단순 html css js로는 해당 작업을 수행할 수 없었고 네이버에서 발급해준 코드를 담은 요청을 하여야만 응답을 받을 수 있었다. 네이버 Open API에 대한 사용은 다음 링크에서 더 자세히 적어놨다. seyoung8239.tistory.com/28
오랜만에 node.js의 express을 사용해보았다. 코딩에 앞서 Udemy 강의의 Section 24 ~ 27에 해당하는 강의를 부분적으로 들으며 짧게 복습했으며, Section 27에서 작성한 코드와 네이버 Open API에서 제공한 레퍼런스와 구현예제 코드를 참고했다.
developers.naver.com/docs/papago/papago-nmt-example-code.md
https://developers.naver.com/docs/papago/papago-nmt-example-code.md
developers.naver.com

1~4: require구문을 통해 express, request package를 사용한다고 명시.
6~7: 네이버에서 부여받은 코드를 변수에 지정. (다음부터 상수로 지정하는게 나을 것 같음)
12: / route에 대한 ejs파일 랜더링을 해준다. 해당 ejs파일 안에 form테그를 이용하여 번역할 텍스트를 /result route에 보냈다.
<form action="/result" method="GET">
<input type="text" placeholder="한국어로!" name="search">
<input type="submit">
</form>
16: req.query.nameName을 통해 전달한 값을 받았고 서버에 보낼 정보를 담고 request.post()메서드를 통해 서버에 요청을 보냈다. JSON객체를 반환받기 때문에 파싱하여 data에 저장한다. 받은 값을들 확인하기 위에 콘솔에 띄워주고다시 /result 라우트에 객체를 전달한다.
'Frontend' 카테고리의 다른 글
Naver API 사용하기 (0) | 2020.09.08 |
---|