1. 게시판 구현
1. 회원 기능 구현
1. 요청 별 method 타입
get 요청으로 가는 경우
- 브라우저 주소창에 주소를 입력할 때
- a태그 클릭해서 링크로 이동할 때
- form의 method 속성이 get으로 설정되어 있을 때
- redirect로 다른 요청 url을 호출할 때
- ajax의 type이 get으로 설정되어 있을 때
post 요청으로 가는 경우
- form의 method 속성이 post로 설정되어 있을 때
- ajax의 type이 post로 설정되어 있을 때
2. get과 post 사용
get 요청은 데이터의 목록을 조회하거나 화면으로 이동할 때 주로 사용
post 요청은 데이터의 입력, 수정, 삭제, 특정 데이터 조회 등에서 주로 사용
3. Ajax(Asynchronous Javascript And Xml)
Ajax란
- Javascript에서 지원하는 비동기 통신 모듈
- 비동기 통신은 화면전체를 변경하는 것이 아니고 화면에서 원하는 일부분만 변경할 수 있다.
- form을 서브밋하면 페이지 전체를 새로고침하는 효과가 있지만 ajax를 이용하면 원하는 부분의 데이터만 변경할 수 있다.
Ajax의 두 가지 방식
순수 JavaScript로 사용하는 방식
- XmlHttpRequest라는 객체를 사용하여 직접 구현
- 이 방식은 구현방식과 사용방식이 복잡하여 잘 사용되지 않음.
Jqeury에서 제공하는 ajax 메소드를 사용하는 방식
Jqeury에서 XmlHttpRequest 객체를 가지고 Ajax 기능을 구현해놓은 메소드를 제공하기 때문에 이 메소드를 사용하면 편리하게 Ajax 기능을 사용할 수 있다.
//ajax 메소드 호출 //javascript 객체를 매개변수로 전달. $.ajax({ 속성값들, 콜백함수 }); //get방식의 ajax 메소드 호출 $.get({ 속성값들, 콜백함수 }); //post방식의 ajax 메소드 호출 $.post({ 속성값들, 콜백함수 });
ajax 지정가능한 속성
url: 요청주소를 지정.
type: method 타입 지정(get, post, put, delete ...)
async: 비동기 여부(true: 비동기, false: 동기)
contentType: 요청 url로 전송할 데이터의 타입을 지정. 기본 값은 application/x-www-form-urlencoded(데이터들을 유니코드로 인코딩한 폼 데이터 형식 => 키와 밸류로 이뤄지는 데 밸류값이 유니코드로 인코딩된 형태 => keyword 값이 홍길동 => keyword=%EC%989%43), application/json, text/html, ... 등과 같은 다양한 데이터 타입 지정 가능
data: 요청 url로 전송할 데이터를 지정.
문자열, 배열, 객체형태의 데이터 지정가능.
문자열일 경우 직접 url 인코딩을 해서 유니코드로 변환후에 전송해야 한다.
객체 같은 경우는 속성의 키와 밸류만 잘 매핑해서 보내주면 된다.
$.ajax({ .... data: { 키1: 밸류1, 키2: 밸류2, ... 키n: 밸류n }, .... });배열 같은 경우는 자바에서 받아줄 방법이 없기 때문에 json형태로 만들어서 string으로 변환하여 jsonString 형태로 전송.
const arr = [{ 키1: 밸류1, 키2: 밸류2, ... 키n: 밸류n }, { 키1: 밸류1, 키2: 밸류2, ... 키n: 밸류n }, ... ]; $.ajax({ .... data: JSON.stringify(arr); //Json 데이터를 string으로 변환 .... });
dataType: 요청 url로부터 리턴받을 데이터 타입 지정. 기본 값은 자동으로 추정. xml, json, html, script ... 등을 지정할 수 있다. json타입을 가장 많이 사용한다.
statusCode: 서버로부터 전달받은 응답코드 값에 대한 콜백함수 지정
timeout: 요청 제한시간 지정. 지정한 시간내에 요청 url로부터 응답이 오지않으면 요청을 중단하고 timeout 에러 표출.(ms단위로 지정)
headers: 요청 url로 요청 보낼 때 헤더에 포함될 내용을 지정. 헤더에 지정가능한 값들에는 요청url, 메소드 타입, 브라우저 정보, 요청권한 등 다양한 정보를 지정할 수 있다. 리액트에서 jwt 토큰을 전송할 때 많이 사용한다.
ajax에서 지정가능한 콜백함수
- beforeSend: 요청 url로 요청을 보내기 전에 실행될 내용 정의
- success: 요청 url로부터 정상적으로 응답을 받았을 때 실행될 내용 정의
- error: 요청이 실패했을 때 실행할 내용 정의.
- complete: 요청이 실패하던지 성공하던지 상관없이 요청이 완료됐을 때 실행될 내용 정의.
완성된 ajax의 형태
$.ajax({ url: '/user/join.do', type: 'post', contentType: 'application/x-www-form-urlencoded', data: { key1: value1, key2: value2 }, dataType: json, statusCode: { 404: () => { alert("페이지를 찾을 수 없습니다."); }, 200: () => { alert("정상 처리되었습니다."); } }, timeout: 10000, headers: {Authorization: "토큰 값", Accept: "applcation/json"}, /*콜백함수 영역*/ beforeSend: (xhr, settings) => { //xhr: XmlHttpRequest 객체 //settings: ajax 속성 값들 alert("ajax 실행 전 동작"); }, success: (obj, status, xhr) => { //obj: 요청 url로부터 리턴받은 데이터 //status: 전송 상태값. alert("요청 성공"); console.log(obj); }, error: (xhr, status, error) => { //error: 에러 메시지 console.log(error); }, complete: (xhr, staus) => { alert("요청 완료"); } });ajax의 헬퍼 함수
ajax의 기본 contentType은 x-www-form-urlencoded 형식
한글이나 특수문자를 전송할 때는 유니코드로 변경을 해줘야 한다.
헬퍼 함수를 사용하면 유니코드로의 변환을 편하고 쉽게 할 수 있다.
헬퍼 함수를 사용하려면 태그에 name 속성을 무조건 지정해줘야 한다. name 속성이 키로 잡히기 때문이다.
헬퍼 함수의 종류
- serialize(): 선택된 폼 태그의 input들의 name속성을 키로 입력된 값들을 밸류로 가져오면서 유니코드로 변환한 데이터 형태로 만들어준다.
- serializeArray(): 선택도니 폼 태그의 input들의 name속성을 키로 키로 입력된 값들을 밸류로 가져와서 input의 개수만큼 객체로 만들고 배열로 묶어준다.
- $.param(): 객체 배열이나 객체를 인코딩된 폼 데이터로 변환
<form id="form"> <input name="name" value="홍길동"> <input name="gender" value="M"> <input name="age" value="20"> </form>
//serialize()
//x-www-form-urlencoded 형태
//결과: name=%ED%99%8D.....99&gender=M&age=20
$("#form").serialize();//serializeArray()
//결과: [
{name: "name", value: "홍길동"},
{name: "gender", value: "M"},
{name: "age", value: 20}
//]
$("#form").serializeArray();//$.param()
const param1 = $("#form").serializeArray();
const param2 = {
name: "홍길동",
gender: "M",
age: 20
};
//결과: name=%ED%99%8D.....99&gender=M&age=20
$.param(param1);
$.param(param2);
```4. url 뒤에 파라미터를 붙이는 방법
쿼리스트링(querystring)
- url 주소 뒤에 ?key1=value1&key2=value2&....&keyn=valuen 형식으로 여러개의 파라미터를 붙여서 보낼 수 있는 방식
- 백엔드에서는 @RequestParam("key")을 이용하여 하나 씩 변수와 매핑해주거나 Map을 이용하여 한 번에 받아서 사용할 수 있다. 키값과 일치하는 변수를 갖는 커맨드 객체로도 받아서 사용할 수 있다.
url 파라미터
- url 주소 뒤에 /value1/value2/.../valuen 형식으로 파리미터를 붙여서 보내는 방식
- 백엔드에서는 url매핑 주소에 /{변수명1}/{변수명2}/.../{변수명n}으로 매핑하여 사용한다.
5. MyBatis의 동적쿼리(dynamic query)
조건에 따라서 실행되는 쿼리를 선택해서 실행시킬 수 있다.
<if> </if> <foreach> </foreach> <choose> <when> </when> <otherwise> </otherwise> </choose>
'네이버클라우드 캠프 5기 > 학습내용 정리' 카테고리의 다른 글
| 55. SpringBoot - SpringBoot란? (0) | 2023.06.21 |
|---|---|
| 54. SpringFramework - 게시판 구현 (0) | 2023.06.21 |
| 52. SpringFramework - 2 (0) | 2023.06.15 |
| 51. SpringFramework - 1 (0) | 2023.06.15 |
| 50. Jquery - Event (0) | 2023.05.26 |