본문 바로가기

Frontend

Project03: Naver API 응용

 이번 프로젝트의 주제는 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