JAVA 웹개발 과정 국비 61일차 정리

61일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

1. 게시판 만들기 이어서..

1) static 변수 생성

• getPageNavi메소드 안 recordCountPerPage나 naviCountPerPage는 여러 곳에서 쓰이기 때문에 위치 조정이 필요
• static 패키지를 만들어서 안에 넣어주자.

2) 보안 코드 위치 변경

• 페이징 기능 구현을 위해 임시로 데이터를 대량 생산하는 방법
• for문을 돌려서 DB에 게시글을 많이 저장해준다.
• PreparedStatement로는 for문을 돌리기 까다롭기 때문에 Statement로 실행
• 한번 실행하고 지워주자.

3. 소스 코드

Board

2. AJAX

1) AJAX란?

Asynchronous Javascript And XML
“화면 전환 없는” 요청 및 응답을 처리하는 메소드

AJAX는 request를 보내지만, 화면전환이 일어나지 않는다.
예를 들면, ID 중복확인 기능을 구현할 때, 팝업창을 띄우지 않고 옆에 결과가 나오게 하는 것이라던지 페이스북 등에서 아래로 스크롤을 내리면 피드가 새롭게 추가가 되는 기능 등이 있다.

2) JSON 이란?

JavaScript Object Notation

직역하면 자바스크립트에서 객체를 표기하는 방법이다.
즉 {key:value, key:value}의 형태를 이야기 한다.

3) 사용방법

AJAX는 자바스크립트에서도 사용이 가능하지만, 사용이 불편해 제이쿼리로 보통 사용한다.
ECMA6 이후 버전에 AJAX문법도 제이쿼리 못지않게 편하긴 하지만, 지금은 제이쿼리 라이브러리를 이용하여 AJAX를 사용할 것이다.
꼭! 제이쿼리 CDN을 추가해주자. (slim버전은 AJAX를 지원하지 않으니 주의)

4) 단순 요청

AJAX는 인자로 JSON 타입을 받는다.
AJAX 함수는 자체적으로 request를 만들어내서 서버에게 요청을 한다.
요청을 어디로 보낼 것인지 정해주려면 key값으로 url을, value값으로 주소값을 적는다.

<!-- jsp --->
<button id="ajax01">Simple AJAX</button>
<script>
	$("#ajax01").on("click",function(){
		$.ajax({
			url:"/exam01.ajax"
		});
	})
</script>

// servlet
if(cmd.equals("/exam01.ajax")) {
	System.out.println("exam01 : 비동기 요청 확인")
}

Simple AJAX 버튼을 클릭하면 콘솔에 exam01: 비동기 요청 확인이 출력된다.
sendRedirect와 forward랑은 달리, 페이지가 이동되지 않고도 요청한다.

5) 데이터를 담아서 요청

key에 type을 주면 get 또는 post 방식을 설정할 수 있다.
또한 key에 data를 주고 객체 value를 담아주면, 서버에서는 key값으로 접근하여 값을 받을 수 있다.

<!-- jsp --->
<button id="ajax02">AJAX with data</button>
<script>
	$("#ajax02").on("click",function(){
        $.ajax({
            url:"/exam02.ajax",
            type:"post",
            data:{
                key1:"Apple",
                key2:"Orange"
            }
        });
    });
</script>

// servlet
else if(cmd.equals("/exam02.ajax")) {
    String key1 = request.getParameter("key1");
    String key2 = request.getParameter("key2");

	System.out.println(key1 +":"+ key2);  // Apple:Orange 출력
}	

Simple AJAX 버튼을 클릭하면 콘솔에 exam01: 비동기 요청 확인이 출력된다.
sendRedirect와 forward랑은 달리, 페이지가 이동되지 않고도 요청한다.

6) 비동기 요청에 대한 응답 수신

서버가 보내주는 데이터를 변수 resp에 담는다.
모두 String 값으로 주고받는다.
done 메소드는 인자값으로 콜백함수를 가지는데, 간단히 말하면 응답을 받기 위한 코드이다.

<!-- jsp --->
<button id="ajax03">AJAX with response</button>
<script>
	$("#ajax03").on("click",function(){
		$.ajax({
			url:"/exam03.ajax"
		}).done(function(resp){ 
			console.log(resp);
		}); 
	})
</script>

// servlet
else if(cmd.equals("/exam03.ajax")) {
	System.out.println("exam03 : 비동기 요청 확인");
	response.getWriter().append("Ajax Response!!");
}	

AJAX with response 버튼을 클릭하면 콘솔에는 exam03 : 비동기 요청 확인이 나타나고, 브라우저 콘솔창에는 Ajax Response!!가 출력된다.

7) 비동기 요청에 대한 배열 데이터 응답

서버에서는 대량의 데이터는 자바스크립트가 다루기 쉬운 형태로 데이터를 보내주어야 한다.
그러나 이 작업은 개인이 하기 너무 귀찮고 번거로운 일이기 때문에 라이브러리가 존재한다.
구글에서 만든 GSON 라이브러리이다.

① GSON 라이브러리 가져오기

구글 > maven repository 검색 후 들어가기 > gson 검색 > 클릭 > 버전 선택 > jar 파일 다운로드 > 개인 lib 폴더로 저장 > 프로젝트 lib 폴더에 추가

② toJson 메소드 사용

Gson 객체를 생성한 뒤, toJson 메소드를 사용하면 JSON 형태의 String값을 자동으로 만들어서 리턴한다. 따라서 이 값을 그대로 append해주면 된다.
클라이언트에는 받은 값이 문자열로 된 JSON 값이기 때문에, 변환을 해주는 과정이 필요하다.
변환은 아래 코드에서 볼 수 있듯이 두가지 방법이 있다.
1번 방법의 resp변수와 2번 방법의 result 변수는 동일하다.

<!-- jsp --->
<button id="ajax04">AJAX response with array data</button>
<script>
	$("#ajax04").on("click",function(){
		$.ajax({
			url:"/exam04.ajax"
			// dataType:"json" ----- 1번 방법
		}).done(function(resp){
			// console.log(resp) ----- 1번 방법 
			let result = JSON.parse(resp); // ----- 2번 방법
			console.log(result); // ----- 2번 방법
		});
	})
</script>

// servlet
else if(cmd.equals("/exam04.ajax")) {
	String[] arr = new String[] {"Apple","Orange","Mango"};
	Gson g = new Gson();
	String result = g.toJson(arr);
	response.getWriter().append(result);
}	

AJAX response with array data 버튼을 클릭하면 브라우저 콘솔창에는 (3) ['Apple', 'Orange', 'Mango']가 출력된다.

8) 비동기 요청에 대한 객체 데이터 응답

배열과 마찬가지로 Gson 객체를 생성 후 toJson메소드에 객체를 넣어서 JSON으로 바꿔준 뒤, 클라이언트에 전송해서 parse한다.

<!-- jsp --->
<button id="ajax05">AJAX response with object data</button>
<script>
	$("#ajax05").on("click",function(){
		$.ajax({
			url:"/exam05.ajax"
		}).done(function(resp){
			let result = JSON.parse(resp); 
			console.log(result);
			console.log(result.id);
		})
	})
</script>

// servlet
else if(cmd.equals("/exam05.ajax")) {
	ContactDTO dto = new ContactDTO(1001,"Tom","01012344321");
	Gson g = new Gson();
	String result = g.toJson(dto);
	response.getWriter().append(result);
}	

브라우저의 콘솔창에 result는 {id: 1001, name: 'Tom', contact: '01012344321'}가 출력되며, resuit.id는 1001이 출력된다.

9) 비동기 요청에 대한 객체배열 데이터 응답

객체 배열도 위와 동일한 방법을 가진다.

<!-- jsp --->
<button id="ajax06">AJAX response with object array data</button>
<script>
	$("#ajax06").on("click",function(){
		$.ajax({
			url:"/exam06.ajax"
		}).done(function(resp){
			let result = JSON.parse(resp);
			for(let i=0;i<result.length;i++){
				console.log(result[i].id+":"+result[i].name+":"+result[i].contact);
			}
		})
	})
</script>

// servlet
else if(cmd.equals("/exam06.ajax")) {
	List<ContactDTO> list = new ArrayList<>();
	list.add(new ContactDTO(1001,"Tom","01012344321"));
	list.add(new ContactDTO(1002,"Jane","01024542154"));
	list.add(new ContactDTO(1003,"Mike","01054558999"));
	
	Gson g = new Gson();
	String result = g.toJson(list);
	System.out.println(result);
	response.getWriter().append(result);
}	

콘솔창에는 아래와 같이 출력된다.

1001:Tom:01012344321
1002:Jane:01024542154
1003:Mike:01054558999

3. 파파고 번역기 API 사용

파파고 번역기를 board에 추가하는 실습을 진행했다.
지도 API를 썼을 때와는 다르게 쉬운 느낌이 있어서 따로 정리하지는 않지만,
JSON으로 값들이 리턴되는 것이 신기했다.
그래도 훗날의 내가 찾아볼 수도 있으니 언제 배웠다라는 것은 남겨야 하지않을까.. 해서 적어둔다.