개발하는 자몽

스프링 부트 공부 (8), 회원관리 예제 - 웹 MVC 개발 본문

Java & Kotlin/Spring

스프링 부트 공부 (8), 회원관리 예제 - 웹 MVC 개발

jaamong 2022. 3. 6. 14:47

이 글은 아래 강의를 기반으로 작성됩니다.

 

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런...

www.inflearn.com

 

다음 순서대로 진행한다.

  • 회원 웹 기능 - 홈 화면 추가
  • 회원 웹 기능 - 등록
  • 회원 웹 기능 - 조회

 

홈 화면 추가

1. 홈 컨트롤러 추가

controller 패키지에 HomeController를 추가한다. 

@Controller
public class HomeController {

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

 

@GetMapping("/")은 localhost:8080의 첫 화면을 의미한다. 스프링의 @Controller에서 반환 타입이 String인 경우 Spring + View template을 사용하는 것이다. 따라서 home 메서드의 return "home"은 home.html을 의미한다. 

 

2. 회원 관리용 홈

resources 폴더의 templates 패키지에 home.html을 추가한다. 해당 html은 동적 페이지이다. 

<!DOCTYPE html>
<html xmlns:th="http://www.thymelaef.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>
</body>
</html>

 

H2 데이터베이스를 구동시키고 서버를 동작시킨다. 검색창에 localhost:8080을 입력하면 아래와 같은 화면을 볼 수 있다.

(h2 데이터베이스를 연결하는 건 다음 포스팅) 아직 이 시리즈에서 DB를 연결하는 걸 작성한 적이 없는데 일단 연결했다는 가정하에 진행한다. (DB 연결 전에는 memoryRepository를 사용한다.)

home.html

 

등록

1. 회원 등록 폼 개발

controller 패키지에 MemberController를 추가한다. MemberController는 회원 등록 폼 컨트롤러다.

@Controller //스프링 컨테이너가 관리
public class MemberController {

    	private final MemberService memberService;// = new MemberService();

    	//Controller랑 Service랑 연결 : 생성자에 @Autowired
    	@Autowired // -> MemberController가 생성될 때 스프링 빈(Bean)에 등록되어 있는 MemberService 객체(@Service)를 가져다가 넣어줌(DI : Dependency Injection)
    	public MemberController(MemberService memberService){
        	this.memberService = memberService;	
    	}

    	@GetMapping("/members/new")
    	public String createForm() {
        	return "members/createMemberForm";
    	}
    }

스프링 빈 등록과 의존관계는 이전 포스트에서 알 수 있다.

 

스프링 부트 공부 (6), 스프링 빈과 의존관계 - 1

이 시리즈는 오랜만에 작성한다. ㅎ.. 정신차리고 다시 해야지. 이 글은 아래 강의를 바탕으로 작성됩니다. 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 학습 페이지

backend-jaamong.tistory.com

 

 

2. 회원 등록 폼 HTML

HTML 위치는 resources/templates/members. 해당 HTML의 이름은 createMemberForm이다.home.html과 마찬가지로 동적 페이지이다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<div class="container">

    <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>

</body>
</html>

위 MemberController의 createForm 메서드에서 createMemberForm.html을 반환한다. (viewTemplate을 반환하기 위해서 반환 타입이 String으로 되어있는 것을 또 확인할 수 있다.)

 

3. 회원 등록 컨트롤러

웹 등록 화면에서 데이터를 전달 받을 폼 객체를 만들자. 똑같이 controller 패키지에 생성한다.

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

 

 

회원 컨트롤러에서 회원을 실제 등록하는 기능을 만들자. MemberController에 코드를 작성하면 된다.

	@PostMapping("/members/new")
    	public String create(MemberForm form){
        	Member member = new Member();
        	member.setName(form.getName());

        	memberService.join(member);

        	return "redirect:/"; //회원가입 후 home화면으로 리다이렉트
    }

createForm.html의 <form actoin="members/new" method="post> 부분의 action의 url을 보면 위 create의 url과 일치한다. 또한 method도 post로 create가 매핑한 HTTP Method와도 일치한다. createMemberForm.html은 form(입력)을 create에 전달한다.

create의 파라미터인 MemberForm 클래스는 객체 name을 가지고 있다. name은 createMemberForm.html의 입력(input 태그)으로 들어오는 회원의 이름을 담는다. 즉 create가 파라미터로 받는 form에는 회원의 이름이 담겨있고 이를 getName으로 반환받아서 회원 객체에 세팅한다( member.setName(form.getName()) ). 

회원 가입 후 home 화면으로 리다이렉트하기 위해 "redirect:/"을 반환한다.

 

아까 위에 홈 화면에서 회원 가입을 클릭하면 "localhost:8080/members/new"로 이동하고 아래와 같은 화면이 나타난다. 

이름 상자에 이름을 입력하고 등록 버튼을 클릭하면 데이터베이스에 저장된다.

 

조회

MemberController에 조회 기능을 수행하는 코드를 작성하자.

	@GetMapping("/members")
    	public String list(Model model){
        	List<Member> members = memberService.findMembers();
        	model.addAttribute("members", members);
        	return "members/memberList";
    	}

 

회원 리스트를 보여주기 위한 HTML을 작성하자. 위치는 resources/templates/members이고 파일 이름은 memberList이다.

<!DOCTYPE html>
<html xmlns:th="http:www.thymeleaf.org">
<body>

<div class="container">
    <div>
        <table>
            <thead>
            <tr>
                <th>#</th>
                <th>이름</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="member : ${members}">
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
</html>

 

이제 회원 가입 후 홈 화면에서 회원 목록 버튼을 클릭하면 다음 화면을 볼 수 있다.

 

Note : 컨트롤러가 정적 파일보다 우선순위가 높다.

요청(request)이 오면 처음에 스프링 컨테이너에서 관련 controller를 찾고 없으면 static 파일을 찾는다. 

 

localhost:8080 요청이 오면 먼저 HomeController에서 Mapping 된 게 있는지 확인하고 있으면 Mapping 된 메서드를 수행한다. 

위처럼 Mapping된게 있으면 static 파일인 index.html을 반환하지 않고 home 화면에 위 메서드의 return 값을 반환한다.

'Java & Kotlin > Spring' 카테고리의 다른 글

스프링 부트 공부 (10), AOP  (0) 2022.03.20
스프링 부트 공부 (9), 스프링 DB 접근 기술  (0) 2022.03.12
스프링 부트 공부 (7), 스프링 빈과 의존관계 - 2  (0) 2022.02.23
스프링 부트 공부 (6), 스프링 빈과 의존관계 - 1  (0) 2022.02.22
[Spring] MVC와 ORM  (0) 2022.02.11
'Java & Kotlin/Spring' Related Articles more
Comments