[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션5 (회원 관리 예제

티스토리 뷰

Spring

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

chaewonni 2023. 12. 24. 01:00

💡회원 웹 기능 - 홈 화면 추가

💻 HomeController

package hello.hellospring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

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

http://localhost:8080/ 을 치고 들어가면 home 메서드를 호출하고,
return "home";을 통해 home.html파일을 불러온다.

💻home.html

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

위와 같은 화면이 뜬다.
회원 가입과 회원 목록 페이지를 누르면, 아직 해당 html파일과 controller가 만들어지지 않았으므로 error page가 뜬다.

💻 컨트롤러 (우선순위)

전에 index.html 이라는 static한 html파일을 만들어주었었고, http://localhost:8080/ 에 들어가면 index.html이 떴지만,

지금은 home.html이 뜬다.
그 이유는

왜냐하면 내장 톰켓 서버에서 해당 페이지에 대한 컨트롤러를 찾고, 만약 그 컨트롤러가 없으면 정적 컨텐츠를 찾게 되기 때문이다. 즉, 컨트롤러가 정적 파일보다 우선순위가 더 높다.
따라서 내장 톰켓 서버는 HomeController를 찾고, 이 컨트롤러에서 return해준 home.html을 화면에 띄운다.

💡회원 웹 기능 - 등록

💻 MemberController

@Controller
public class MemberController { //얘도 spring 컨테이너가 관리를 하게 됨

    //private final MemberService memberService = new MemberService();
    //new 해서 하면 memberCotroller말고 다른 controller들디 memberService가져다 쓸 수 있음
    //여러개의 인스턴스 생성할 필요 없이 하나 생성해놓고 공용으로 쓰면 됨 -> spring 컨테이너에 하나 등록하고 쓰기 (하나만 등록이됨)
    private MemberService memberService;

//    @Autowired //setter injection 방식
//    public void setMemberService(MemberService memberService){
//        this.memberService = memberService;
//    } // 한번 setting하면 바꿀 일 없는데 public으로 설정해야함 최대한 변경 못하도록 해야하는데..


    @Autowired //그런데 생성자에 AutoWired라고 되어 있으면
    // 스프링이 스프링 컨테이너에 있는 멤버 서비스를 가져다가 연결을 딱 시켜줍니다
    // 생성자에서 이렇게 쓰면 멤버 컨트롤러가 생성이 될 때 스프링 빈에 등록되어 있는 멤버 서비스를 객체를 가져다가 넣어줌 = dependency Injection
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @GetMapping("/members/new")
    public String createForm() {
        return "members/createMemberForm";
    } //기본적으로 이런 URL 창에 엔터 딱 치는 것은 그냥 GetMapping

http://localhost:8080/members/new 페이지에 들어가면 createForm 메서드를 호출하게 되고, members/createMemberForm을 return하기 때문에 members 폴더에 createMemberForm.html파일도 만들어준다.

💻 createMemberForm.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> <!-- /container -->
</body>
</html>

http://localhost:8080/members/new 이제 이 링크를 들어가면

위와 같은 화면이 뜬다.

그러나 아직 서버로 전달이 안되기 때문에 이름을 입력하고 등록을 하면 Error Page가 뜬다.
html의 form 태그 안에 method="post" 이렇게 POST 방식으로 입력을 받으면 서버로 전달이 되기 때문에
input으로 입력 받은 내용을 받기 위한 회원 등록 컨트롤러를 만들어야 한다.

💻 MemberForm

package hello.hellospring.controller;

public class MemberForm {
    private String name;
    //html에서 name="name"을 보고 이 name에 넣어줌

    public String getName() {
        return name;
    }

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

회원 등록 화면에서 input을 통해 입력받은 데이터를 전달 받을 폼 객체를 만들어주었다.

💻MemberController

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

        memberService.join(member);

        return "redirect:/"; //회원가입이 끝나고 홈 화면으로 보내버림
    }

입력받은 데이터를 컨트롤러에서 회원을 실제 등록하는 기능을 만들어주었다.

이제 http://localhost:8080/members/new로 들어가 이름을 입력하고 등록 버튼을 누르면 return "redirect:/"; 에 의해 회원가입이 끝나고 홈 화면으로 보내버린다.

💻 회원 등록 컨트롤러 설명!!

우리가 일반적으로 웹 페이지 주소를 입력해 들어가는 방식을 GET 방식이라고 한다.
회원 등록 Form에서 input 속성 중 name은 입력받아서 제출한 값의 key값이 되어, 값을 입력 받고 등록 버튼을 누르면 "/members/new" 로 POST 방식으로 넘어가게 된다.

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

그럼 POST 방식으로 넘거가게 되면 아래 @PostMapping("/members/new") 메서드로 호출이 된다.

@PostMapping("/members/new") // Post 방식으로 localhost::8080/members/new
public String create(MemberForm form) {
	Member member = new Member(); // member 객체 생성
	member.setName(form.getName()); // form에서 입력받은 이름을 member 객체 이름으로 넣음

	memberService.join(member); // member 객체로 join(회원가입)

	return "redirect:/"; // 바로 "localhost::8080/" 화면으로 이동
}

(출처: easy00.log)

💡회원 웹 기능 - 조회

💻 MemberController (회원 조회 화면 추가)

    @GetMapping("/members")
    public String list(Model model) { //Model은 스프링에서 컨트롤러와 뷰 간에 데이터를 주고받기 위한 객체
        List<Member> members = memberService.findMembers();
        model.addAttribute("members",members);
        return "members/memberList";
    }

입력받은 input값을 직접 화면에서 조회해보기 위해 controller를 만들어주었다.

return "members/memberList"; 을 해주었기 때문에 memberList.html도 만들어준다.

💻 memberList.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>
            <tr th:each="member : ${members}"> <!--model안에 있는 값 꺼내는 것, 첫번째 객체를 하나 꺼내서 멤버에 담고, 아이디랑 네임 출력-->
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

<tr th:each="member : ${members}"> <!--model안에 있는 값 꺼내는 것, 첫번째 객체를 하나 꺼내서 멤버에 담고, 아이디랑 네임 출력-->
    <td th:text="${member.id}"></td>
    <td th:text="${member.name}"></td>
</tr>

${members}는 controller에서 넘겨준 모든 member들의 List인 members 라는 model이다.
th:each를 통해 members의 객체 수많큼 loop를 돌고, 첫번째 객체를 하나 꺼내서 멤버에 담고, 아이디랑 네임 출력하는 것을 반복한다.
member의 id와 name이 각각 ${member.id} 와 ${member.name} 에 치환이 된다.

이제 http://localhost:8080/members에 들어가면

위와 같은 화면을 볼 수 있다.

그러나 지금 등록한 정보들은 메모리에 저장되어 있기 때문에 서버를 껐다 키면 초기화가 된다.
따라서 이를 해결하기 위해 DB를 사용한다.

'Spring' 카테고리의 다른 글

[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션7 (AOP) (0)	2024.01.01
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션6 (스프링 DB 접근 기술) (3)	2023.12.29
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션4 (스프링 빈과 의존관계) (0)	2023.11.27
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션3 (회원 관리 예제 - 백엔드 개발) (0)	2023.11.08
[SPRING]스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 섹션 2 (정적컨텐츠, MVC와 템플릿 엔진, API) (1)	2023.11.07

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

글 보관함

자라자

티스토리 뷰