회원 웹 기능
홈 화면 추가
static 파일의 index.html에 아무것도 없으면 welcomepage로 가게 함.
이때 우선 순위가 존재하는데,
웹브라우저에 요청이 오면 먼저 스프링 컨테이너 안에 있는 관련 컨트롤러가 있는지 찾고 없으면 static 파일을 찾도록 함.
즉, 요청이 오면 먼저 스프링 컨테이너안에 있는 관련 컨테이너를 찾아보고, HomeController에 매핑된게 있기 때문에 이 컨트롤러가 호출됨. 그리고 전에 만들어둔 static 파일은 무시가 됨.
// 요청이 오면 home.html을 띄워줌
@GetMapping("/")
public String home(){
return "home";
}
home.html에는 회원가입, 회원목록으로 가는 링크가 있음
하지만, 지금은 눌러도 아무런 반응x
등록
회원가입을 누르면 /members/new로 이동되게 하고, 화면에 createMemberForm.html을 띄워줌. 이름만 등록하게끔 되어있음.
이름을 입력하고 등록을 누르면 name이라는 key와 value인 이름이 서버로 넘어가게 됨. 지금은 등록을 눌러도 오류남.
때문에 회원등록을 해줄 Controller를 만들어야 됨 -> MemberForm
이제 MemberForm의 name과 createMemberForm.html의 name이 매칭되면서 name값이 넘어옴.
form.getName()으로 member를 만들어주고 그 뒤 memberService.join(member); 에 member을 넣어서 memberService에 넘겨줌. 여기까지 하면 간단한 회원가입이 끝남.
return으로 "redirect:/"을 해서 home 화면으로 보내줌.
(+)
회원가입을 누르면 "/members/new"로 들어감.
get방식의 mapping을 해주는 것임.
MemberController에서 보면 아무 기능이 없고 "members/createMemberForm"으로 이동함. 그리고 createMemberForm.html이 띄워짐.
이때 <form> 태그는 값을 입력할 수 있게 해주는 태그이고, <form>안을 보면 action="/members/new" method="post"라고 되어있는데 MemberController이 post방식의 mapping으로 넘어온다는 뜻임.
즉, PostMapping은 home 같은데 넣어서 전달할때(데이터 등록) 쓰고,
GetMapping은 조회할때 주로 씀.
위 PostMapping과 GetMapping 코드를 보면 둘 다 "/members/new"로 url은 같지만 get이냐 post냐에 따라서 다르게 매핑됨.
(추가로) <form> 태그 안의 name="name" 은 서버로 넘어갈때의 키이고, placeholder은 아무것도 입력을 하지 않았을때 적히는 것임.
이제 이름을 입력하고 등록을 누르면,
PostMapping이 선택되고 create라는 메세드가 호출되면서 값이 들어오는데 MemberForm에 "지우개"라는 값이 들어옴.
spring이 html의 name을 보고 (MemberForm의 setName을 호출해서) name에 값이 들어오게 됨.
그리고 form.getName() 을 통해 name값을 불러오고 member.setName을 통해 member에 name을 넣어줌.
마지막으로 memberService.join(member)을 통해 가입이 완료됨.
조회
회원 목록
List<Member> members = memberService.findMembers();를 해주면 등록해준 member들을 모두 가지고 옴.
model.addAttribute()에서 members 리스트 자체를 model에 담아서 화면에 넘김.
memberList.html에서 thymeleaf가 본격 적으로 동작함.
이 템플릿 엔진은 ${members} 모델안에 있는 값을 꺼내고, th:each라는 thymeleaf 문법으로 루프를 돌면서
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>위 로직을 실행함.
첫번째 객체(members)를 하나 꺼내서 member에 담고 id와 name을 출력. 이때 member.id라고 되어있지만 .getid()로 접근함.
이 데이터들은 메모리에 있기때문에 서버를 내렸다 다시키면 데이터가 다 지워짐.
때문에 데이터를 파일이나 데이터베이스에 저장해야됨.
