자바지기님 강의 보고 미션 구현해보기
회원가입 기능 구현
브라우저에서 입력한 데이터 서버로 전달
- 사용자가 회원가입 정보를 입력하고 회원가입 버튼을 누르면 입력한 값들을 브라우저가 읽어서 서버에게 넘겨준다.
- 서버에 데이터를 전달할때 form 태그를 쓴다.
- form 태그
- action = "url주소"를 적어주면 회원가입 버튼을 누르면 해당 url 주소로 이동한다.
- method = "post" → method 속성에 post로 지정
- 디폴트는 get방식
- input 태그에서 name이라는 속성을 지정해줘야지만 브라우저에서 입력한 내용이 서버로 전달된다. name = "userId"
Controller
- 서버측에서 Controller가 클라이언트의 요청을 최초로 받아준다. url이 추가되면 그에 상응하는 Controller가 있어야한다.
- 클래스에 Controller 어노테이션을 달아서 컨트롤러를 추가한다.
- 컨트롤러 메소드에 브라우저 url 매핑해준다 → @GetMapping("url") 어노테이션 추가
- 여기서 메소드의 return되는 String 파일은 templates 디렉토리에 있는 파일이 호출된다.
Get방식과 Post방식
- post방식으로 해서 브라우저에서 회원가입을 하면 url에 서버에 전달되는 값이 안뜬다.
- get 방식 : 데이터를 가져올때 사용하는 방식
- post 방식 : 서버에 데이터를 전송하고 새로운 데이터를 추가하거나 수정하는 변경사항이 생기는경우 사용
- get방식과 post방식 자세히 학습
@GetMapping, @PostMapping
User 클래스 추가
- User클래스를 추가해서 컨트롤러의 메소드의 매개변수를 User타입으로 지정해주면 사용자가 입력하는 많은 데이터를 더 효율적으로 다룰수 있다. (클래스에 setter, getter 메소드 필요)
- form태그의 name속성에 지정된 값들과 매개변수로 받은 타입 클래스의 setter 메소드의 이름이 같으면 데이터가 자동으로 전달된다. 자동으로 user에 값을 지정해준다. 스프링이 이 역할을 해주는 것
회원 목록 기능 구현
- 회원가입한 사용자 목록을 저장하는 List 생성
- Controller로 지정한 클래스 안에 여러개의 메소드를 구현해서 기능을 구현할 수 있다.
문제점1
브라우저에서 /user/list 로 접속했는데 회원가입때 입력한 데이터는 서버에 잘 저장이 되었는데 웹브라우저에 안뜬다.
→ 혹시나 하고 User클래스에 getter메소드를 추가해주니깐 브라우저에 잘 뜬다.
반환값 redirect:url로 지정
- 반환값으로 /users url로 지정 → "redirect:/users"
- 회원가입 버튼을 누르면 /users url로 이동하는것
- return "list"를 하면 그냥 templates의 list파일을 화면에 띄우는것이다. url을 지정해주는것과 다름
서버를 재시작하면 여태 회원가입한 사용자의 정보가 다 날라간다?
- 데이터를 생성하고 파일로 저장하면 데이터들이 유지된다.
- 그냥 arrayList에만 담으면 ram에만 올라간다.
- 파일로 저장해서 하드디스크에 저장하고 불러오는 과정보다 더 편하게 데이터를 다룰수 있는 데이터베이스를 이용할수 있다.
회원 프로필 정보보기
자바지기님 영상엔 없는거 같아서 루카스보고 혼자 해봄
- 회원 목록 페이지(list.html)에서 사용자 아이디 클릭하면 profile.html로 이동하기
list.html 에서 {{userId}} 앞에 < a href="/users/{{userId}}"/> 추가해주고 Controller 클래스에서
@GetMapping("/users/{userId}")
public String profile(Model model){
return "user/profile";
}이 메소드 추가해주니 잘 된다.
- @PathVariable 애노테이션으로 데이터를 전달받고 리스트에 저장된 아이디와 일치하는 User 데이터를 Model에 저장, 이 정보를 user/profile.html에서 출력하도록 하기
@GetMapping("/users/{userId}")
public String profile(@PathVariable String userId, Model model) {
User selectedUser = null;
for (User user : users) {
if (user.getUserId().equals(userId)) {
selectedUser = user;
}
}
model.addAttribute("user", selectedUser);
return "user/profile";
}-
이렇게 url을 통해 userId를 전달받고 PathVariable 애노테이션으로 전달받은 userId에 해당하는 유저를 selectedUser에 담아서 model로 추가해준건데.. 맞겠지..?
-
profile.html에 {{name}} {{email}} 해주는게 브라우저에 안나온다.
→ {{#user}}, {{/user}} 로 감싸주니 된다, 근데 이건 for문 기능을 하는거 아닌가, 뭔가 다른 방법이 있을거같다
{{#user}} <tr> <th>{{userId}}</th> <th>{{name}}</th> <th>{{email}}</th> </tr> {{/user}}-
템플릿 엔진 문법 학습
조원들 코드리뷰한거 보니깐 user.userId 이런식으로 한거같던데 한번 변경해봐야겠다.
-
오늘 한일
- 미션 1을 구현중, 자바지기님 영상보고 얼추 따라하고 있다. HTML중복제거 루카스 내용만 보고 무슨소린지 몰랐는데 오늘 조원들 코드리뷰한거 봤으니 내일 해봐야겠다.
- 질문 목록부분 구현하고 있는데 힌트가 무슨소린지 잘 모르겠다. 근데 모든것을 자바지기님 영상보고 따라하기보다는 혼자 해보고 싶으니 내일 다시 도전!
- 구현하면서 적은 내용들을 정리해보았는데 스프링이 아직 생소해서 내가 이해한대로 정리해보았다. 나중에 보고 틀린부분은 수정해야겠다.
- 들었던 김영한님 강의가 유료강의인줄 알았는데 내가 여태 무료강의를 들었다는걸 이제 알았다. 어쩐지 어려웠다. 유료강의는 유료강의대로 듣고, 미션은 미션대로 구현해봐야겠다.
Todo
(내일)
- 미션1 끝낼수 있을까
- 미션 먼저 하고, 야자시간에 인프런 강의 듣자.
