홈페이지 만들기

기본 코드는 bootStrap을 참고 하였다.

깃허브 : https://github.com/HoJin-jjimgo/Project-blog

템플릿을 footer와 header로 따로 구성을 하여 만들엇다.
처음보는 코드만 따로 설명을 적어보았다.

• <%@ include file="../layout/header.jsp"%>

현재 열고있는 파일을 기준으로 다른 파일을 탐색할떄 사용한다.
저 코드를 통해서 footer, header의 jsp를 가져 올수가 있다.

../ 의 의미는 해당 위치에서 이전 폴더의 위치를 의미한다.

• header의 기준으로 위쪽 폴더는 views이기 떄문에
  저 코드의 의미는 views폴더안에 layout폴더 안에 header.jsp를 가져오라는 의미가 된다.

회원가입 하기

이렇게 코드를 짜놓은뒤 ajax를 이용하여 값을 가져오는 과정을 가져야 한다.

JoinForm.jsp

아래 부분에 button의 id값을 주어서 js로 활용하고자 한다.
이후 js코드를 이융하기 위해 script를 사용하여 js 파일을 참고하게 만들었다.

user.js

주석으로도 설명이 나와있지만 한번더 적어보도록 하겠다.

일단 index라는 object를 만든뒤에 함수를 만들어 준다.
js의 기존의 함수와 같은 형태로 만들어 주면 된다.

하지만 index는 object이기 떄문에 JoinForm에서 이 object를 불러올떄 함수를 호출해 주어야 한다

• 그러기 떄문에 init()을 따로 호출을 하는것이다.

init이 호출이 되게 된다면 JoinForm에서 id가 btn-save인것을 찾아서 클릭이 되었을떄 save메서드가 호출이 되게 만들어 주었다.

그후 save메서드가 호출이 된다면 회원가입페이지에 있는 파라메터들의 값을 data라는 변수에 담게 된다.

• $.ajax().done().fail() : ajax를 이용하여 data를 json형태로 변경한뒤 insert한다
  이 내용은 후에 추가적으로 설명을 하겠다.

ajax를 사용하는 이유

1. 요청에 대한 응답이 html이 아닌 Data를 받기 위해서

• 요청을 하는 대상인 클라이언트가 브라우저라면 상관은없지만 android라면 자바코드를 사용하게 된다.
• 이런 경우라면 html로 값을 받을수 없기 떄문에 ajax를 사용 해야 한다.

2. 비동기 통신을 하기 위해서

• 병렬 작업을 수행하기 위함이다.

이제 실제로 값을 받아보는 코드이다.
주석을 통해 설명이 적혀있기떄문에 부가적인 설명은 하지 않겠다.

• location.href : 해당 url로 이동한다.

그러면 url에 지정해둔 경로를 통해서 post요청을 해주어서 값을 받아줘야 한다.

POST API

• 이 POST구문은 어려운점이 없기 떄문에 자세한 설명은 하지 않겠다.

하지만 User의 username=아이디 값을 유니크한 값으로 지정을 하였기 떄문에 만약 이미 있는 아이디라면 값이
저장이 되지 않고 Exception으로 처리가 된다.

Exception handler

테스트 용이기 떄문에 모든 에러를 한곳으로 받고있다.

Dto

• 보통은 lombok을 사용했지만 이해를 쉽게 하기 위해서 해제 하였다.

이처럼 예외가 발생하면 handler을 통해서 처리가 되며 handler에서는 ResponseDto에 오류 메시지의 값을 넣어서 처리를 하게 된다.

서비스가 필요한 이유

1. 트랜잭션을 관리하기 위해서

2. 서비스의 의미

• Service를 통해서 각각의 트랜젝션을 하나의 트랜잭션으로 묶어서 서비스화 할수가 있다.