localhost 8080번 포트를 사용하며 해당 페이지로 들어가면 HomeController에 진입한다. "localhost:8080/" 주소를 사용하며 index.html로 연결된다.
index.html에서는 header에 로고 및 상단바, section1에 커피 사진과 block 형태의 회사소개글, section2에 간단한 텍스트를 배치했다.
상단바는 현재 로그인 세션의 유무로 페이지를 구성하는 디자인이 달라지는데, session.loginEmail이 없으면 로그인을 하지 않았으므로 LOGIN/JOIN/MemberList 버튼이 보이고, 세션이 있으면 로그인을 한 상태이므로 loginName님/Logout/MemberList 버튼이 보인다.
JOIN 버튼을 누르면 MemberController의 "/member/save"으로 GET 요청을 보낸다.
MemberController를 살펴보면 Controller와 RequiredArgsConstructor 어노테이션이 붙은 것을 확인할 수 있는데, requiredargsconstructor은 새로운 필드를 생성할 때 자동으로 생성자를 만들어준다. 각종 요청을 수행하기 위해 memberService를 import하여 사용하며, GetMapping/PostMapping을 어노테이션해 해당 주소로 들어온 요청을 처리하는 함수를 구현한다. 해당 함수들은 연결할 html 페이지를 return하는데, 일반 return은 단순히 view를 보여주는 것이고, redirect return은 redirect 주소로 url 요청을 다시 하는 것의 차이이다. 이로 인해 해당 주소에 속하는 컨트롤러 함수가 한번 더 호출된다.
redirect로 데이터를 넘겨줄 수는 없기 때문에 RedirectAttribute를 사용한다. Post 요청으로 update가 들어오면 "redirect:/member/"+memberDTO.getId()"를 return하는데, 이때 함수의 파라미터인 memberDTO는 ModelAttribute를 어노테이션했음을 알 수 있다. modelattribute는 요청 시 전달하는 값을 오브젝트 형태로 매핑해주는 기능을 수행한다. RequestParam과 구별되는 점은 1:1 매핑이 아니라 객체 매핑이라는 점이다. requestparam을 사용하면 일일이 변경해주어야 할 작업을 modelattribute를 통해 객체로 만들면 변경점을 줄일 수 있다. 특히 매개변수가 많은 경우 타입이 같을 때 나열하는 순서가 중요해지기 때문에 객체로 매핑하는 것이 매개변수를 관리하기에 편하다.
update를 수행하는 경우 string 타입의 password와 name을 변경해줄 수 있기 때문에 modelattribute를 사용하고, 이메일 중복 체크를 하는 경우 email만 확인하면 되기 때문에 requestparam을 사용한다.
Join 버튼을 누르면 GET 요청으로 "/member/save" 주소를 매핑하고, save.html 페이지로 반환된다. 해당 페이지에서 email, password, name을 설정하고 submit 버튼을 누르면 form action에 의해 "/member/save" 주소로 POST 요청을 보내며 이 요청이 다시 MemberController로 들어가게 된다.
=> 지금까지의 요청을 정리해보자면 "/" 주소로 들어오면 HomeController행 > index.html 반환 > JOIN 버튼 누르면 MemberController에 GET 요청 > save.html 반환 > submit 버튼 누르면 MemberController에 POST 요청 순으로 이루어진다.
POST 요청으로 "/member/save" 주소를 매핑하면 MemberDTO를 ModelAttribute해서 매개변수로 사용하는 것을 볼 수 있다. 이후 memberService.save(memberDTO)를 통해 memberDTO를 memberService에게 save 함수 요청을 보낸다.
MemberDTO부터 살펴보면, Getter/Setter/NoArgsConstructor/ToString 총 네 개의 어노테이션을 사용하고 있으며, MemberDTO 클래스에 id/memberEmail/memberPassword/memberName/createTime 총 다섯 개의 변수를 담고 있다. save.html에서 input text로 직접 입력해둔 memberEmail/memberPassword/memberName이 해당 변수들에 들어갈 예정이며, id는 자동 증가로 저장되고 createTime은 현재 날짜가 디폴트로 저장된다.
getter와 setter는 private를 관리해주는 함수로, getter는 private를 외부로 꺼내는 용도(리턴만 존재), setter는 private에 값을 넣는 용도(매개변수만 존재)로 사용한다. get+변수명(첫글자 대문자)/set+변수명(첫글자 대문자) 의 형태로 함수를 사용할 수 있다. MemberEntity로 들어온 entity 매개변수를 MemberDTO 형태로 바꿔주기 위한 toMemberDTO 함수 역시 memberdto 클래스에 작성되어 있는데, memberDTO.setId(memberEntity.getId())의 형태로 getter/setter를 사용해 entity to dto 함수를 구현한다.
NoArgsConstructor 어노테이션은 파라미터가 없는 디폴트 생성자를 만들어주는 역할을 맡는다. 이를 통해 명시적으로 선언된 생성자가 없더라도 인스턴스를 생성할 수 있다.
memberDTO에 저장된 내용을 memberService의 save 함수에 매개변수로 넘겨주는데, memberService를 살펴보면 다음과 같다.
MemberService에서는 MemberRepository를 import하여 사용하고, MemberController에서 요청하는 함수대로 save/login/findById/findAll/updateForm/update/deleteById/emailCheck 함수가 작성되어 있다. save 함수를 보면 memberDTO를 매개변수로 받아야 하며, MemberRepository에서는 매개변수를 객체 형태로 받아야 하기 때문에 MemberEntity의 dto to entity 함수를 호출하게 된다.
MemberEntity에서는 Getter/Setter/Table/DynamicInsert 총 네 개의 어노테이션을 사용하고 있으며 테이블 column의 속성을 지정하고 있다. DynamicInsert은 테이블에 데이터를 추가할 때 NULL 필드를 없애고 default 값을 적용시키고자 추가한 어노테이션이었다. dto to entity를 위한 toMemberEntity 함수와 회원 정보 수정 사항을 적용하기 위한 toUpdateMemberEntity 함수를 getter/setter로 구현했다.
memberDTO를 memberEntity로 만들었으면 memberRepository의 save 함수로 객체를 저장한다. memberRepository는 JpaRepository를 상속받아 대부분의 함수를 따로 작성하지 않고도 사용할 수 있다.
service와 repository의 차이로는, service는 DB 접근을 위한 코드를 repository에게 모두 넘기고 controller에서 들어오는 로직을 처리하기 위한 코드만 수행하며, DB 처리에 관한 함수는 repository에서 직접적으로 실행한다는 점에 있다. 로직 오류가 발생하면 service 파일을, DB 접근 오류가 발생하면 repository 파일을 확인하면 되도록 구분해놓은 것이다.
=> POST "/member/save" 요청 > memberService의 save 함수에 memberDTO를 담아서 보내주기 > (memberService에서) memberEntity의 toMemberEntity 함수로 memberDTO 담아서 보내주기 > (memberEntity에서) dto to entity 수행하기 > (memberService에서) memberRepository의 save 함수에 memberEntity 담아서 보내주기 > (memberRepository에서) memberEntity DB에 저장하기 > (memberController로 돌아와서) index.html 페이지로 반환하기
*application.yml
연결될 포트 번호(8080) 설정, datasource로 mysql 연결, mysql 계정 정보 제공, thymeleaf 사용 여부 설정, jpa 설정
*build.gradle
구현에 필요한 의존성 주입 - mysql connector, lombot, spring-boot-starter-thymeleaf 등
