Group Study (2020-2021)/Spring Boot

[Spring Boot] 3주차 스터디 - 스프링빈, 웹MVC개발

minhhh 2020. 11. 3. 23:55

섹션 4. 스프링 빈과 의존관계

  • 컴포넌트 스캔과 자동 의존관계 설정
  • 자바 코드로 직접 스프링 빈 등록하기

섹션 5. 회원 관리 예제 - 백엔드 개발

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

 


 

섹션 4. 스프링 빈과 의존관계

 < 스프링 빈을 등록하는 2가지 방법 >

 ① 컴포넌트 스캔과 자동 의존관계 설정하기

 ② 자바코드로 직접 스프링 빈 등록하기

 

1. 컴포넌트 스캔

  • @Component 애노테이션이 있으면 스프링 빈으로 자동 등록

  • @Controller 컨트롤러가 스프링 빈으로 자동 등록된 이유도 컴포넌트 스캔 때문

  • @Component 를 포함하는 다음 애노테이션도 스프링 빈으로 자동 등록

    @Controller

    @Service

    @Repository

* 회원 서비스 스프링 빈 등록

@Service
public class MemberService {
	private final MemberRepository memberRepository;
	@Autowired
	public MemberService(MemberRepository memberRepository) {
		this.memberRepository = memberRepository;
	}
}

 

* 회원리포지토리 스프링 빈 등록

@Repository
public class MemoryMemberRepository implements MemberRepository {}

 

* 스프링 빈 등록 이미지

 

2. 자바 코드로 직접 스프링 빈 등록하기

package hello.hellospring;
import hello.hellospring.repository.MemberRepository;
import hello.hellospring.repository.MemoryMemberRepository;
import hello.hellospring.service.MemberService;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class SpringConfig {
    @Bean
    public MemberService memberService() {
    	return new MemberService(memberRepository());
    }
    @Bean
    public MemberRepository memberRepository() {
   		return new MemoryMemberRepository();
    }
}

 

* 참고사항

> DI에는 필드,주입 setter 주입, 생성자 주입 이렇게 3가지 방법이 있다. 의존관계가 실행중에 동적으로 변하는 경우는 거의 없으므로 생성자 주입을 권장한다.
> 실무에서는 주로 정형화된 컨트롤러, 서비스, 리포지토리 같은 코드는 컴포넌트 스캔을 사용한다. 그리고 정형화 되지 않거나, 상황에 따라 구현 클래스를 변경해야 하면 설정을 통해 스프링 빈으로 등록한다.
> 주의: @Autowired 를 통한 DI는 helloConroller , memberService 등과 같이 스프링이 관리하는 객체에서만 동작한다. 스프링 빈으로 등록하지 않고 내가 직접 생성한 객체에서는 동작하지 않는다.

 

 

 

 

섹션 5. 회원 관리 예제 - 웹 MVC 개발

 

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

 

* 홈 컨트롤러 추가

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

* 회원 관리용 홈 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>

* 참고사항

 - 우선순위: 컨트롤러 > 정적파일

 

2. 회원 웹 기능 - 등록

 

* 회원 등록 폼 컨트롤러

@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

<!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:/";
}

 

3. 회원 웹 기능 - 조회

 

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

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