스프링을 입문해볼까요?(2)

spring

안녕하세요. shcDE입니다. 오랜만에 다시 공부 기록 포스팅으로 돌아왔습니다. 이번 포스팅은 저번 공부 기록에 이어 스프링 입문 단계 강의에서 배운 내용을 기록하고자 합니다. 사실 해당 강의를 오늘 완강을 하였으나, DB나 AOP는 현재 실무에서 다루지 않는 기술이 많이 섞여 있어 웹 MVC 개발에 대한 내용만 이번 포스팅에서 다루겠습니다.

시작 전에, 해당 포스팅은 김영한님의 ‘스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술’ 섹션 5를 공부하여 정리한 내용임을 밝히며, 직접 해당 강의를 구매하여 게시물을 작성함을 알립니다.

우선 강의에서 다룬 ‘회원 관리 예제 - 웹 MVC 개발’ 파트는 다음과 같은 항목으로 구성되어 있습니다.

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

우선 ‘회원 웹 기능 - 홈 화면 추가’ 파트와 관련된 코드를 확인해보겠습니다.

홈 컨트롤러 추가와 관련된 코드는 다음과 같습니다.

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";
      }
}

회원 관리용 홈과 관련된 코드는 다음과 같습니다.

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

이제 ‘회원 웹 기능 - 등록’과 관련된 코드를 살펴보겠습니다.

회원 등록 폼 개발과 관련된 두개의 코드는 다음과 같습니다.

회원 등록 폼 컨트롤러

@Controller
    public class MemberController {
        private final MemberService memberService;
        @Autowired
        public MemberController(MemberService memberService) {
            this.memberService = memberService;
        }
        @GetMapping(value = "/members/new")
        public String createForm() {
            return "members/createMemberForm";
        }
}

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

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

회원 등록 컨트롤러와 관련된 두개의 코드는 다음과 같습니다.

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

package hello.hellospring.controller;

public class MemberForm {
    private String name;
    
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    } 
}

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

@PostMapping(value = "/members/new")
public String create(MemberForm form) {
      Member member = new Member();
      member.setName(form.getName());
      
      memberService.join(member);
      
      return "redirect:/";
}

‘회원 웹 기능 - 조회’ 파트와 관련된 두개의 코드는 다음과 같습니다.

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

@GetMapping(value = "/members")
public String list(Model model) {
      List<Member> members = memberService.findMembers();
      model.addAttribute("members", members);
      return "members/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}">
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->

</body>
</html>

사실 하나의 파트만 이번 포스팅에서 다루어서 다룬 내용이 많지는 않습니다. 하지만 강의를 완강을 하면서 느낀 점은 공부해야 할 범위가 많은 스프링 프레임워크에서 핵심적인 내용을 파악할 수 있었다는 점이 있습니다. 다음 포스팅부터는 본격적인 스프링의 기본 기능에 대해 파악해보고자 합니다. 사실 아직 개발 관련 포스팅이 많이 익숙하지는 않습니다. 하지만 꾸준히 제 글을 읽어주시는 모든 분들께 항상 감사드리고, 추후에 오류 사항이 발견될 경우, 수시로 수정을 진행하겠습니다. 스프링에 대한 첫 공부 기록 시리즈를 마무리하면서, 자바와는 공부량에서 차원이 다르다는 점을 느꼈습니다. 확실히 제가 공부하는 강의의 경우, 몇 년 동안 현업에서 종사하신 분들도 들으시는 강의인 만큼, 그런 느낌을 많이 받았습니다. 하지만, 한 번 로드맵 완강을 결심한 만큼, 끝까지 최선을 다하여 학습하겠습니다. 그럼 모두 오늘도 긴 글 읽어주시느라 고생하셨고, 내일부터 알찬 한 주 보내시길 바랍니다.

감사합니다.

[레퍼런스]

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 : 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/dashboard