[Spring-Boot]네이버 REST API 사용법 - 4 마지막 (파파고번역)

https://changeminor.tistory.com/4

[Spring-Boot]네이버 REST API 사용법 - 3(파파고번역)

위 단계까지 완벽하게 진행 하셨다면 이제 본격적으로 dto를 만들고 네이버에서 개발자 apikey 받아 오면서 시작 하면 됨

원래는 카카오api를 메모 하고자 했는데 원리는 동일하고 뭔가 눈에 딱 보이는게 좋은거 같아서 

네이버 파파고 번역으로 가보겠음

ㅋㅋㅋㅋㅋ

https://developers.naver.com/main/

NAVER Developers

여기 링크 타고 가서 애플리케이션 등록 하고 apikey 받아오면 됨

 

받았다고 가정하고 시작

아래링크 따라가서 lombok.jar 파일 다운 받고

https://projectlombok.org/download

cmd 창 키시고 

경로확인하여 해당 경로에 저장을 권장함

혹시 보고도 잘 모르시는분을 위해 

한번더 설명 위에 사진 보시면 됨

그리고 cmd창에서 java -jar lombok.jar 입력하고 enter

위사진처럼 고추가 나올꺼임

ㅋㅋㅋㅋㅋ

c드라이브에 이클립스 또는 sts4 실행파일을 저장하면 자동으로 저렇게 불러오는데 

d나 e에 저장 되어있을경우는 직접찾으면 되요 

그리고 Install/Update 해주면 끝 

그러면 다시 cmd에서 lombok.jar 실행하면 저사진처럼 고추 모양이 뒤에 딱!

 

그러면 성공 

위작업은 왜 하냐 이제 아래보면 기존 spring 프레임워크로 작업 하는 사람은 깜놀 할 만한 일이 발생할 예정

클릭해서 패키지 생성 

com.dnk.demo.dto

위의 이름으로 패키지 생성 

해당 패키지에 class 하나 가볍게 생성 해 주고 

해당 class에 @Data 넣어 줍니다.

import 확인 하세요

그리고 private String korean; 코딩 해주시면

보이시나요 우측에 자동으로 Getter/Setter 생성 되는거 심지어 toString까지 딱!

정말 간편하다 못해 이건 혁신임

기존 spring프레임워크에선 Shift + Alt + s 그리고 r 눌러서 일일이 Getter/Setter 불러와야 하는데 

이거 한방이면 끝

ㅋㅋㅋㅋㅋ

데이터 삽입시 오류문제 등을 고려해서 위와 같이 

@AllArgsConstructor
@NoArgsConstructor

더 추가 해주면 끝 이유는 묻지 마세요 

저도 배운지 얼마 안되서 하여간 저거 넣으면 좋대요 슨생님이 ㅋㅋㅋ 나중에 원리는 차차 공부 하겠음 

그럼 이제 본격적으로 번역 api 활용해서 번역을 해볼까요?

 

 

index.jsp 파일로 와서 

가벼운 코딩을 하겠음

위와같이 form 태그에 액션은 /test3로 주고 table 하나 생성 그리고 submit 버튼 하나 생성 

중국어와 영어로 테스트 하겠음

index.jsp 수정하고 

localhost:8080/test 해주면 

위와같이 나오면 아주 잘 따라 왔어요

이제 얼마 안 남았음

홧팅!!!!

 

	@RequestMapping("/test3")
	public String test3(@RequestParam(value = "korean", defaultValue = "-")String korean,
						Model model) {		
		DemoDto dd = new DemoDto();
		dd.setKorean(korean);
		String china = demoService.getChinese(dd);
		String english = demoService.getEnglish(dd); // 서비스에서 일을 진행 할 예정
		model.addAttribute("china", china);
		model.addAttribute("english", english);
		
		return "test/index";
	}

DemoController로 돌아와서 

위 코드를 추가 해 주면 input name= requestparam value, String (name)

일치하면 값을 받아 오게 되지요 

아주 신기하죠 ㅋㅋ 

그리고 우리가 만든 dto 하나를 생성 해주고 

dto에 받아온 값을 담아서 이도 하겠음

그럼 이제 서비스로 가볼까요

서비스엔 가볍게 get chinese 와 get english 해주고 

impl로 고고

	@Override
	public String getChinese(DemoDto dd) {
		String korean = dd.getKorean();
		String apiURL = "https://openapi.naver.com/v1/papago/n2mt";
		String text;
		String result = "";
		String line = "";
		try {
			text = URLEncoder.encode(korean, "UTF-8");
			String param = "source=ko&target=zh-CN&text=" + text;
			URL url = new URL(apiURL);
			HttpsURLConnection con = (HttpsURLConnection) url.openConnection();
			con.setRequestProperty("X-Naver-Client-Id", clientId);
			con.setRequestProperty("X-Naver-Client-Secret", clientSecret);
			con.setRequestMethod("POST");
			con.setRequestProperty("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
			con.setDoInput(true);
			con.setDoOutput(true);
			con.setUseCaches(false);
			con.setDefaultUseCaches(false);

			OutputStreamWriter osw = new OutputStreamWriter(con.getOutputStream());
			osw.write(param);
			osw.flush();

			int responseCode = con.getResponseCode();
			result += "responseCode  : " + responseCode;
			result += "\n";
            // 200코드가 아니면 오류인데 무엇이 오류 인지 디버깅 
			if (responseCode != 200) {
				Map<String, List<String>> map = con.getRequestProperties();
				result += "Printing Response Header...\n";
				for (Map.Entry<String, List<String>> entry : map.entrySet()) {
					if (entry.getKey().equals("apikey")) {
						result += "";
					} else {
						result += "Key : " + entry.getKey() + " ,Value : " + entry.getValue();
					}
				}
			}

			BufferedReader br = new BufferedReader(new InputStreamReader(con.getInputStream()));
            // 여긴 출력 
			while ((line = br.readLine()) != null) {
				result += line + "\n";
			}
			br.close();

		} catch (UnsupportedEncodingException e) {
			throw new RuntimeException("인코딩 실패", e);
		} catch (IOException e) {
			result = e.getMessage();
		}

		return result;
	}

(clientId 하고 clientSecret 이를 그대로 코딩 하는 사람이 없겠지요? 저만의 아이디 비번이라 위에 private String clientId = "xxxxxxx"; private String clientSecret="xxxxxxxx"; 선언했어요 각자 아이디 비번 naver에서 받아서 하시길 바랍니다. )

위는 get chinese 입니다.

getenglish는 각자 만들어 보세요 ㅋㅋ 

연습하셔야 실력이 늘지요 그리고 이해가 되지요 

여기 까지 하고 

실행하면 

클릭!

요렇게 나오지요 ㅋㅋ 성공!!!!

이제 코드 수정을 해 보겠음 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	$(function() {
		$("#chinese").click(function(){
			var ko = $("#korean").val();
			$.ajax({
				url:"/chinese",
				type:"GET",
				dataType:"json",
				data:{korean:ko},
				success:function(v){
					console.log(v);
				},error:function(e){
					console.log(e);
				}
			});
		});
		$("#english").click(function(){
			var ko = $("#korean").val();
			$.ajax({
				url:"/english",
				type:"GET",
				dataType:"json",
				data:{korean:ko},
				success:function(v){
					console.log(v);
				},error:function(e){
					console.log(e);
				}
			});
		})
	});
</script>
<title>항상테스트부터</title>
</head>
<body>
	<h1>성공이다!!!!</h1>
		<table border="1">
			<thead>
				<tr>
					<th>한국어</th>
					<th>중국어</th>
					<th>영어</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" id="korean" name="korean"></td>
					<td width="200" height="30" id="china"></td>
					<td width="200" height="30" id="english"></td>
				</tr>
			</tbody>
		</table>
		<input type="button" id="chinese" value="중국어">
		<input type="button" id="english" value="영어">
</body>
</html>

우선 index.jsp를 위와 같이 수정 

여기서 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

이코드는 jquery 사용하기 위해 넣어야 하며

ajax 기능을 사용해 페이지 전화 없이 

번역을 하는 것을 구현 해 보겠음

중국어 부분만 설명하고 영어부분은 직접 시도 해 보길 권장 함 

index.jsp 코드 수정하고 빛의 속도로 DemoController로 와서 

@RequestMapping("/chinese")
	@ResponseBody
	public String Chinese(@RequestParam(value = "korean", defaultValue = "-")String korean,
									Model model) throws Exception{		
		DemoDto dd = new DemoDto();
		dd.setKorean(korean);		
		System.out.println(korean);
		String china = demoService.getChinese(dd);
		return china;
	}

이부분을 추가 해 주면 끝 

ajax로 구현 하기 때문에 @ResponseBoby도 넣어 주어야 다시 해당 jsp 파일로 이쁘게 돌아가니 참조 하길

빼먹으면 에러와 소개팅을 .... 

사진도 함께 첨부 하였으니 코드 잘 확인 하길 바라며 

기존에 /test3는 그냥 지워 주길 바랍니다. 

이제 

localhost:8080/test 브라우저에 입력 해보러 갑시다 

사진에서처럼 오른쪽에 console.log(블라블라)내용을 확인하고자 한다면 f12 눌러주자

개발자는 f12 그냥 누르고 살아야 하는 운명 친해 지길 바라며 

저는 아직도 좀 적응이 안됨 ..... F12누르지 않는게 ..... 그만큼 f12는 그냥 누르고 산다는얘기 ㅋㅋㅋㅋㅋㅋ 참된 개발자 니깐

오케이 파파고 번역기 가동하여 값을 가져 오는것을 확인!!!!! (번역이 완전히 틀렷음..... 세상에 파파고도 실수를 하네요 ... 틀렸는지 맞는지 어떻게 아냐규요? 저 신HSK 6급 입니다! ㅋㅋ 깨알 자랑을....)

 

이제 확인 햇으니 해당 값을 테이블에 올려야겠죠?

ajax로 와서 코드 수정 

v.message.result.translatedText가 바로 중국어 (json은 {"key":"value"} <- 이값이 라고 가정하면 fuction(v) v여도 좋고 data 여도 좋고 개성있게 괄호 안에 적으시고 v.key 하면 value 값을 표현 함) <- 이 문장이 이해가 되면 다시 위의 사진을 순서대로 보면 아~~~ 하실꺼에요 

그리고 <td id="china">에 값을 넣어야 하니 jquery에서 $("#id값") 하면 해당 id를 불러 옴

$("#china").text(값) 값을 해당 td에 넣는거니 값대신  v.message.result.translatedText를 넣어줘야 함

var chinese = v.message.result.translatedText;

javascript에서 var 하고 변수 선언 할수가 있다는거 자세하게 적는 이유는 혹시나 잘 모르는 사람 또는

알지만 활용을 못하는 사람을 위해 활용법을 알려 드림 ㅋㅋㅋ 

오케이 위까지 코드 입력 햇으면 이제 테스트 

깜끔하게 성공 !! 

이렇게 rest api (naver papago)편을 마치 겠음 !! 

카카오 구글ads 도 알고 싶으면 댓글 달아 주세요!! 

물론 댓글 없어도 업데이트 할 예정이긴 합니다만..... ㅋㅋ 그럼 다음편에서 계속 .....

 

모든 소스는 git에 올렷으니 

공부하시면서 잘 안되시면 소스 가져 가세요 

github.com/Byube/NaverRestApi.git