[스프링 입문] 화면 만들기

시작에 앞서 이 글은 인프런 김영한 님의 강의를 정리하며 쓴 글입니다.

웹 백엔드를 공부하시는 분이라면 꼭 김영한님의 강의를 들어보시길 추천합니다.

 

 

 

1. 홈 화면 추가

먼저, 홈 화면을 만들어봅시다. HomeController 클래스를 만들고 @GetMapping("/") 어노테이션을 통해 "/" 경로에 접근 시 "home" 템플릿으로 이동하도록 설정합니다.

 

@Controller
public class HomeController {

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

 

 

 

 

2. 회원 등록 화면 만들기

회원 등록을 위한 화면을 만들어봅시다. 클라이언트가 회원 가입 버튼을 눌렀을 때, 입력 폼이 있는 HTML 페이지를 반환하도록 설정합니다. 이 때, <form> 태그의 action 속성과 method 속성을 지정하여 데이터 전송 방식을 정의합니다.

 

<!-- register-form.html -->
<form action="/member/new" method="post">
    <!-- 입력 폼과 관련된 내용들 -->
    <button type="submit">회원 가입</button>
</form>

 

 

이렇게 작성한 HTML 폼에서 회원 정보가 입력되면, "/member/new" 경로로 POST 요청이 가게 됩니다.

 

 

 

3. 회원 등록 처리

컨트롤러에서 "/member/new" 경로에 대한 @PostMapping 어노테이션을 사용하여 회원 등록을 처리하는 메서드를 만듭니다. 넘어온 회원 정보를 이용해 서비스에서 회원 가입 로직을 수행하고, 결과를 반환합니다.

 

@Controller
@RequestMapping("/member")
public class MemberController {

    private final MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

    @PostMapping("/new")
    public String createMember(@RequestParam String username, Model model) {
        // 넘어온 데이터를 이용한 회원 가입 로직
        memberService.join(new Member(username));

        // 결과를 모델에 추가하여 HTML로 전달
        model.addAttribute("message", "회원 가입이 완료되었습니다.");

        return "result"; // 결과를 보여줄 HTML 페이지
    }
}

 

 

 

 

4. 회원 조회 화면 만들기

회원 조회를 위한 화면을 만들어봅시다. 클라이언트가 조회 버튼을 눌렀을 때, 회원 목록을 보여주는 HTML 페이지로 이동하도록 설정합니다.

 

 

 

 

5. 회원 조회 처리

컨트롤러에서 "/member/list" 경로에 대한 @GetMapping 어노테이션을 사용하여 회원 조회를 처리하는 메서드를 만듭니다. 서비스에서 회원 목록을 가져와 모델에 추가하고, HTML 페이지로 반환합니다.

@Controller
@RequestMapping("/member")
public class MemberController {

    // ... 이전 코드 ...

    @GetMapping("/list")
    public String listMembers(Model model) {
        List<Member> members = memberService.findAll();

        // 회원 목록을 모델에 추가하여 HTML로 전달
        model.addAttribute("members", members);

        return "member-list"; // 회원 목록을 보여줄 HTML 페이지
    }
}

 

기억해야 할 함수는 addattribute(html에 어느 객체로 넘겨줄 건지, 넘겨줄 데이터)

return html 하면 해당 페이지로 데이터가 넘어간다.