[Spring] 김영한 스프링 MVC_ 섹션4. 서블릿, JSP, MCV패턴(1)

 

<출처 인프런>

 

 

 

섹션 4는 아주 간단한 회원관리 웹을 만들었다. 처음에는 서블릿으로 해보고 JSP, SpringMVC를 차례로 살펴봤다. 서블릿과 JSP로 만든 코드에는 어떤 불편한 점이 있는지, SpringMVC는 어떻게 동작하는지 살펴보며 서블릿과 JSP의 문제점을 어떻게 보완했는지 살펴봤다.

 

 

☘️ 

잘못된 정보가 있을 수 있습니다 

---

 

✔️  회원 관리 웹 애플리케이션 요구사항

• 회원 관리 웹 애플리케이션을 만들기 위해서 username과 age를 정보로 가진다.
• 회원 저장과 회원 목록을 조회할 수 있는 클래스를 만든다.

 

►  Memeber.class

@Getter @Setter
public class Member {

    private Long id;
    private String username;
    private int age;
    
    public Member() {
    }
    
    public Member(String username, int age) {
        this.username = username;
        this.age = age;
    }
}

Member 클래스에서 getter, setter를 통해 들어온 데이터를 넣고 뺄 수 있다. 생성자 Member에는 username과 age를 담는다. id는 식별자로 리포지토리에 저장할 때 발급된다. 

 

 

Q. 기본 생성자를 만든 이유가 무엇일까?

A. 파라미터를 갖는 생성자 외에 기본 생성자를 만든 이유는 JSON 변환이나 스프링에서 객체를 자동 생성할 때 꼭 필요하기 때문이다. 자바는 생성자를 하나도 안만들면 알아서 기본 생성자를 만들어준다. 근데 위의 코드처럼 생성자가 만들어진 경우 자바는 기본 생성자를 만들지 않기 때문에, 내부에서 기본 생성자가 필요한 경우 오류가 발생할 수 있다. 그러니 파라미터가 있는 생성자를 만들때 항상 기본 생성자도 같이 만드는 습관을 두면 좋을 듯 하다.

 

 

 

►  MemeberRepository.class

private static Map<Long, Member> store = new HashMap<>();

id가 키가 되고 Member(데이터, 객체)가 값이 된다. 들어온 여러 객체를 빠르게 저장하고 구분하여 관리하기 위해 HashMap을 사용한다. HashMap이 키-값으로 데이터를 저장하는 자료구조이다. 

private static long sequence = 0L;

public Member save(Member member) {
        member.setId(++sequence);
        store.put(member.getId(), member);
        return member;
    }

Member 클래스에서 생성자 Member는 username과 age를 가지도록 정의했다. 사용자가 uesername과 age를 입력하면 그 정보가 Member 타입으로 포장된다. Member 타입으로 포장된 걸 save에서 저장한다. save가 작동하면 member.setId(++sequence)으로 인해 0L이 증가하여 id에 증가한 값이 새로 세팅된다. 그 후 저장소인 store에 증가한 id 값을 꺼내서 key 값으로 주고, member(이름과 나이 데이터)를 value로 넣는다.

 

 

- return 정리

2. return

 

public Member findById(Long id) {
        return store.get(id);
    }

public List<Member> findAll() {
        return new ArrayList<>(store.values());
    }

public void clearStore() {
        store.clear();
    }

findById 메서드는 id를 주고 id에 맞는 데이터를 반환한다. findAll 메서드는 store에 있는 values의 값을 ArrayList 형태로 반환한다. 목록의 형태로 보여주기 위해 ArrayList를 사용했다. clearStore 메서드는 store를 지워주는 것이다. 테스트를 하기 위해 임시로 저장한 데이터들을 테스트가 끝나면 데이터를 지우는 용도로 사용한다.

 

 

 

►  MemeberRepositoryTest.class

 

@afterEach

: 테스트 실행 후 무조건 실행된다.

@AfterEach
    void afterEach() {
        memberRepository.clearStore();
    }

테스트 실행이 끝나면 저장했던 데이터를 삭제한다.

 

 

 

asserThat( ).contains( )

: 중복과 순서에 상관없이 값들이 있으면 된다.

assertThat(result).contains(member1, member2);

member1과 member2가 result에 있으면 테스트가 성공한다.

 

 

 

 

---

 

 

 

 

✔️  서블릿으로 회원 관리 웹 애플리케이션 만들기

• 서블릿으로 회원 등록 HTML 폼을 만들자.

 

►  MemeberSaveServlet.class

• 한 명의 회원만 보인다.

String username = request.getParameter("username");
int age = Integer.parseInt(request.getParameter("age"));

Member member = new Member(username, age);
System.out.println("member = " + member);
memberRepository.save(member);

request를 통해 username과 age의 정보를 가져온다. 그런데 getParameter는 문자열로 받아오기 때문에 정수형인 age는 Integer.parseInt로 문자열로 받아온 값을 정수형으로 바꿔 age에 넣는다. 그렇게 받아온 데이터를 member에 넣은 후 save 메서드로 store에 저장한다.

 

"<ul>\n" +
"    <li>id="+member.getId()+"</li>\n" +
"    <li>username="+member.getUsername()+"</li>\n" +
" <li>age="+member.getAge()+"</li>\n" +
"</ul>\n" +

코드로 동적 화면을 간단하게 만들었다. get을 통해 저장됐을 데이터의 id, username, age를 화면에 보이도록 한다.

 

 

 

►  MemeberListServlet.class

• 모든 리스트를 가져온다.

List<Member> members = memberRepository.findAll();

findAll 메서드를 통해 저장된 모든 회원을 꺼낼 수 있도록 한다. 배열 형태로 모든 목록을 꺼내며 크기는 동적으로 조절되도록 하기위해 List로 설정한다.

for (Member member : members) {
            w.write("    <tr>");
            w.write("        <td>" + member.getId() + "</td>");
            w.write("        <td>" + member.getUsername() + "</td>");
            w.write("        <td>" + member.getAge() + "</td>");
            w.write("    </tr>");
        }

for문을 통해 List로 가져온 members를 member에 넣어 출력시킨다. 이렇게 서블릿과 자바 코드만으로 HTML을 만들었더니 코드가 복잡하고 비효율적이다. 템플릿 엔진을 사용하여 HTML 문서에서 필요한 곳만 코드를 적용하여 동적으로 변경해보자.

 

 

 

 

---

 

 

 

 

✔️  JSP로 회원 관리 웹 애플리케이션 만들기

• JSP로 회원 등록 HTML 폼을 만들자.

 

►  new-form.jsp

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>

JSP 문서라는 뜻을 첫 줄에 적어줘야한다.

<form action="/jsp/members/save.jsp" method="post">
    username: <input type="text" name="username" />
    age: <input type="text" name="age" />
<button type="submit">전송</button>

 

타임리프를 사용해본적 있다면 매우 유사하여 쉽게 이해할 수 있을 것이다. action에 경로를 적어주고 method에 데이터 전송 방식을 적어준다. 앞 시간에 배웠듯이 GET 방식과 POST 방식, API JSON 방식이 있는데 여기서는 body에 데이터를 적어보내는 post 방식을 사용했다. 

 

 

 

►  save.jsp

 <%
      MemberRepository memberRepository = MemberRepository.getInstance();

      System.out.println("MemberSaveServlet.service");
      String username = request.getParameter("username");
      int age = Integer.parseInt(request.getParameter("age"));

      Member member = new Member(username, age);
      System.out.println("member = " + member);
      memberRepository.save(member);
 %>

<% %> 는 JSP 태그로 이 안에 자바 코드를 입력할 수 있다. 현재 코드에 request와 response가 없는데, service는 jsp 내에서 사용 가능하여 코드에 명시하지 않아도 알아서 service 로직을 호출하여 서블릿으로 변환한다.

<li>id=<%=member.getId()%></li>
<li>username=<%=member.getUsername()%></li>
<li>age=<%=member.getAge()%></li>

<%=%>는 결과값을 호출(출력)하는 JSP 태그이다.  여전히 자바 코드와 분리되지 않아 작업이 복잡하게 보인다. 당연하게 복잡한 코드는 유지보수도 어렵다.