Spring Boot/Spring Boot 입문 강의 정리(김영한)

[SpringBoot-스프링 입문] 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술: 5. 회원 관리 예제-웹 MVC 개발

조찬국 2024. 2. 21. 21:27
728x90

강의 출처:https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8

해당 강의는 Inflearn에 등록된 김영한님의 Springboot 강의입니다.

홈 화면

이번 장에는 홈 화면을 구성하고, 회원을 메모리에 등록, 조회를 MVC 방식으로 개발하겠다.
우리가 만들어 놓은 서비스,리포지토리를 이용하여 MemberController에서 작동하는 방식으로 개발을 한다.

1. 회원 웹 기능 - 홈 화면 추가

홈 컨트롤러 추가

@Controller
public class HomeController {
    @GetMapping("/")
    public String home () {
        return "home";
    }
}

코드 설명

  1. home: HTTP GET 요청이 "/" 경로로 들어왔을 때 실행되는 메서드
  2. ★사용자는 "http://localhost:8080/" 으로 입력하므로 바로 이 콘트롤러의 메소드가 실행.
  3. ★★이 메서드는 뷰이름인 home을 return하고,view resolver가 "home.html"이라는 view template을 찾는다.
  4. ★★★★이때 템플릿엔진이 view template을 웹브라우저에 띄운다.
  5. 컨트롤러가 정적 파일(static)보다 우선순위가 높으므로 콘틀로러가 먼저 실행된다.

회원 관리용 홈 추가 resources/templates/에 추가

<!--회원 관리용 홈-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <h1>Hello Spring</h1>
        <p>회원 기능</p>
        <p>
            <a href="/members/new">회원 가입</a>
            <a href="/members">회원 목록</a>
        </p>
    </div>
</div> <!-- /container -->
</body>
</html>

2. 회원 웹 기능 - 등록

회원 등록 폼 생성 메서드를 MemberController 에 추가

@Controller
public class MemberController {
    private final MemberService memberService;

    @Autowired
    public MemberController (MemberService memberService )
    {
        this.memberService=memberService;
    }
    //Form 생성
    @GetMapping("/members/new")
    public String createForm() {
        return "members/createMemberForm";
    }
}

코드 설명

  1. home.html을 보면 회원가입을 클릭하면 a 태그를 통해 /members/new 로 이동하게 되어 있다.
  2. 위의 경로로 오면 createForm 메서드가 실행되고 바로 /members/createMemberForm로 이동한다.

회원 등록 폼 HTML ( resources/templates/members/createMemberForm )

<!--회원 등록 폼-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
  <!--action url로,post method방식을 통해 입력값이 넘어간다.(콘트롤러의 @postMapping에서 받음) -->
  <form action="/members/new" method="post">
    <div class="form-group">
      <label for="name">이름</label>
      <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
    </div>
    <button type="submit">등록</button>
  </form>
</div> <!-- /container -->
</body>
</html>

코드 설명

위의 form 태그에서 action url로 post method방식을 통해 입력값이 넘어간다.

(콘트롤러의 @postMapping에서 받음)

웹 등록 화면에서 데이터를 전달 받을 폼 객체

//웹 등록 화면에서 데이터를 전달 받을 폼 객체
public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

이는 웹 등록 화면 에서 데이터를 전달 받을 객체이므로 getter와 setter를 설정했다.

 

회원 컨트롤러에서 회원을 실제 등록하는 기능

  //회원 컨트롤러에서 회원을 실제 등록하는 기능
    @PostMapping("/members/new") //post는 받을때, get은 조회할때 자주 쓴다.
    public String create(MemberForm form) { //html form에서 값 받을 객체 선언.
        Member member = new Member();
        member.setName(form.getName()); //"name"이란 키값을 name이라 선언하면 스프링이 넣어준다.
        System.out.println("member= " + member.getName()); //member= 입력값 출력
        memberService.join(member); //join을 통해 repo에 member객체를 save를 한다.
        return "redirect:/";
    }

코드 설명

  1. 멤버 객체의 값을 세팅하는데, 사용자의 입력값(form.getName())으로 setting한다.
  2. 해당 멤버 객체를 서비스에 만들어 놓은 join함수를 통해 리포지토리로 값이 넘어가고 리포지토리에서 저장한다.
  3. 저장이 끝나면 "/"로 다시 화면이 넘어간다. 즉 등록 버튼을 클릭하면 submit되면서 웹 페이지는 새로고침하며 초기 "/" 경로 (홈 화면)로 redirect한다.

등록 결과

3. 회원 웹 기능 - 조회

회원 컨트롤러에서 조회 기능

    //회원 컨트롤러에서 조회 기능
    @GetMapping("/members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers(); //멤버의 객체에서 모든 멤버를 찾음
        model.addAttribute("members", members);
        return "members/memberList";
    }

코드설명

  1. 홈화면에서 조회 버튼을 클릭하면 "/members" 경로로 넘어가고, list 메서드 실행.
  2. 저장한 객체들을 List로 받아서 모델에 추가
  3. "memberList.html"이란 view로 이동

회원 리스트 HTML

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
  <div>
    <table>
      <thead>
      <tr>
        <th>#</th>
        <th>이름</th>
      </tr>
      </thead>
      <tbody>
<!--    th: for(member in members)를 통해 각 멤버를 찾느다.-->
      <tr th:each="member : ${members}">
        <td th:text="${member.id}"></td>
        <td th:text="${member.name}"></td>
      </tr>
      </tbody>
    </table>
  </div>
</div> <!-- /container -->
</body>
</html>

조회 결과

728x90