1. 회원가입 구현
1) joinForm.jsp 에서 submit 버튼을 누르면 form태크의 action으로 가입을 하는 방법 (method는 POST 방식으로) >> 이전에는 이렇게 썼지만 JSON으로 가입기능을 구현하는 방식을 사용할 것이다.
2) 자바스크립트와 Json을 이용하는 방법
src/main/resources/static 하위에 js 폴더를 만들고(static은 스프링이 기본적으로 찾는 위치임) 이곳에 정적인 자원인 자바스크립트를 넣을 것이다.
button 태그는 form 태그 밖으로 빼고, type 대신 id를 부여한다. 21줄의 include 태그 전에 참조하는 script 주소를 scr="" 에 적어준다. ( /를 하면 바로 static 폴더를 찾아간다. /blog를 넣어주는 이유: 프로젝트 진입점)
user.js에서는 제이쿼리를 사용
3줄
- id가 btn-save를 찾아서.이벤트(click)를 바인드 한다.(리스너를 만듦)
- $("이벤트 대상인 id").on("이벤트", 무엇을 할 건지)
무엇? >> save기능을 불러온다. - function(){}이 아닌 화살표 함수(()=>)를 쓰는 이유 : this를 바인딩하기 위해서.
.
.
※ 전체적인 프로세스 정리
(1) jsp에서 태그들을 다 읽고,
(2) 마지막의 참조하는 script로 이동
(3) js의 제이쿼리를 위에서부터 다 읽고
(4) index.init 함수를 호출하면 버튼 이벤트를 호출한다. >> 아래의 save 함수 호출 (alert으로 호출되는지 확인)
입력한 각 id값이 들고 있는 값을 변수에 바인딩해서 data 자바스크립트 오브젝트에 넣는다.
console.log(data); 로 값 들고 오는지 확인.
ajax 통신을 이용해서 3개의 데이터를 json으로 변경해 insert를 할 예정.
3) 회원가입 - Ajax 요청
Ajax는 default가 비동기 호출이다.
ajax 안에는 오브젝트, done과 fail에는 function이 들어와야 한다.
'.' 으로 연결 >> ajax의 중괄호 안에서 어떤 일을 수행 시 정상적으로 실행됐을 경우 done의 함수를 실패했을 경우 fail의 함수를 수행한다.
21줄 : 자바스크립트 오브젝트인 data를 JSON 문자열로 만들어서 보낸다. (http Body 데이터)
22줄 : 보낸 Body 데이터가 어떤 타입인지 알려줌(MIME) >> json 데이터이며 charset=utf-8. data와 contentType은 세트!
23줄 : 서버로 요청해서 응답이 왔을 때, 기본적으로 문자열로 온다. 그 문자열의 타입이 json 이라면, 이라고 알려주면 javascript 오브젝트로 변경해준다. (버전이 올라가면서 굳이 적지 않아도 dafault로 변경해줌)
24줄 :응답 결과 >> resp에 javascript 오브젝트로 넣어줌
27줄 : fail 응답 >> error >> json문자열로 만든다.
4) Controller 만들기
Controller 패키지 하위로 api 패키지를 만든다. 그리고 UserApiController를 생성한다. >> 나중에 앱에서도 사용이 가능하다.
공통으로 응답할 ResponseDto를 generic으로 만들고 UserApiController에서 ResposneDto를 받아 리턴하도록 한다.
user.js에서 리턴으로 응답받은 resp를 consol.log로 콘솔에 띄우게 한다.
status 값을 보고 정상인지 구분하면 된다. 200은 http에서 통신을 정상적으로 성공했다는 의미다.
이때, 코드로 200 값을 넣어주는 방법 보다는 HttpStatus.OK로 넣어준다.
Status 타입이 enum이므로 ResponseDto에 HttpStaus status로 해준다.
5) 실제로 DB에 insert 해주고 정상적으로 리턴하기
2. 회원가입 시 Ajax를 사용하는 이유
1) 요청에 대한 응답을 html이 아닌 Data(json)를 받기 위해서.
회원가입을 한다고 했을 때, 클라이언트에서 회원가입 화면을 요청할 경우, 아래에서처럼 서버에서 .html로 화면을 응답해주면 된다.
그런데 회원가입 화면을 요청하는게 아니라 회원가입 기능만 수행하고자 할 경우, 서버에서 회원가입을 수행하고 DB에서 정상적으로 되었다는 데이터를 서버에 준다. 브라우저는 데이터를 받는다.
웹일 때와 앱일 때의 경우를 생각해보면, 웹은 화면을 받을 수 있지만 앱의 경우 화면은 자바코드로 만들어져 내부적으로 이미 픽스된 상태이기 때문에 데이터로만 받아야 한다. 각자의 상황에 맞게 html 화면이나 데이터를 따로 보내줘야 하면 서버가 별도로 각각 2개가 필요하게 된다.
이럴 때는 똑같이 둘 다 data로 응답을 하게 하면 좋다.
ajax를 사용해 회원가입 후, 메인페이지로 돌아온다. >>> 회원가입 기능 수행 후 정상이라는 data를 받은 뒤 브라우저에서 서버로 화면을 리퀘스트를 보내면 서버에서 요청한 화면(메인페이지)을 응답한다.
결론, 응답을 html이 아니라 data로 받을 때 각각 다르게 서버를 2개 쓰지 않기 위해서 ajax를 사용한다. (앱이든 웹이든 서버를 하나만 쓰겠다!)
2) 비동기 통신을 하기 위해서.
프로그램은 일의 순서에 맞게 일을 해야한다.
그러나 절차적인 로직으로 일을 진행하는데,
예를 들어 (1)그림그리기 (2)연산 (3)다운로드 (4)다운로드된 그림그리기 (5)화면에 그림 이런 식으로 프로그래밍의 로직 순서가 된다. 그런데 중간에 다운로드가 10초 걸린다고 치면 이 다운로드 때문에 프로그램이 로직을 진행하지 못하고 대기하는 Panding이 일어난다. >> 사용자에게 좋지 못한 경험을 줌 >> 다시 사용 안함
이때, (3)다운로드를 제외한 나머지는 CPU에서 일어나는 것이고 다운로드는 기억장치(RAM)+저장장치(HDD)에서 일어나므로 다운로드를 비동기처리 할 수 있다.
※ 비동기처리 란? 절차적으로 일을 처리하는데 일의 순서에 맞지 않게(순서에 상관없이) 일을 처리하는 것
- (3)다운로드(I/O) 기억장치와 저장장치한테 알아서 하라고 던져놓는데 이때, (4)는 (3)이 수행된 후에 진행되어야 하는 일이기 때문에 먼저 (5)를 수행한다.
- CPU가 (5)의 수행 도중 (or 다 끝나고 쉬는 중) Panding이 끝나게 되면 하던 일을 멈추고 돌아가 (4)를 수행하게 된다. 이를 Call Back (콜백)이라고 한다.
- (4)를 수행하고 나면 중단되었던 (5)의 나머지를 수행하는데 이를 비동기적 실행이라고 한다.
