[JavaSpring] Web MVC Devlopment

개인 공부/인프런

[JavaSpring] Web MVC Devlopment

planting grass 2023. 3. 28. 14:04

728x90

해당 글은 김영환 JavaSpring 입문을 요약 정리한 글입니다.

웹 MVC 개발

홈 화면 추가

우선 HomeController를 추가한다.

이후 코드를 아래와 같이 입력한다.

package study.studyspring.controller;

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

@Controller
public class HomeController {

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

GetMapping에 /는 url에서 /를 의미한다.

return이 home이기 때문에 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 hrㅁef="/members">회원 목록</a>
        </p>
    </div>
</div>

</body>
</html>

이후 실행시키면 localhost:8080에 아래 그림과 같이 나올것이다.

회원가입을 누르면 url이 http://localhost:8080/members/new로 들어가고,
회원목록을 누르면 http://localhost:8080/members로 가게 했다.

참고로 여기서 static에 넣어뒀던 index.html은 우선순위에 밀려서 작동이 되지 않는다.

회원 앱 기능 - 등록

MemberController로 들어가서 코드를 아래와 같이 입력해준다.

package study.studyspring.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import study.studyspring.service.MemberService;

@Controller
public class MemberController {

    private final MemberService memberService;

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

    @GetMapping("/members/new")
    public String createForm() {
        return "members/createMemberForm";
    }
}

return에 /members/creatMemberForm가 들어갔기 때문에 templates폴더에 members디렉토리를 추가하고 creatMemberForm이름을 가진 html 파일을 만들어준다.

이후 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 hrㅁef="/members">회원 목록</a>
        </p>
    </div>
</div>

</body>
</html>

이후 재실행하여 회원가입을 클릭하면 아래와 같은 화면이 뜬다.

이후 Controller디렉토리에 MemberForm클래스를 만들고 아래 코드를 입력한다.

package study.studyspring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

그 다음 MemberController에 아래 코드를 입력한다.

package study.studyspring.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PatchMapping;
import org.springframework.web.bind.annotation.PostMapping;
import study.studyspring.domain.Member;
import study.studyspring.service.MemberService;

@Controller
public class MemberController {

    private final MemberService memberService;

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

    @GetMapping("/members/new")
    public String createForm() {
        return "members/createMemberForm";
    }

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

        memberService.join(member);

        return "redirect:/";
    }
}

재실행 한 뒤 회원 가입에 등록을 하면 다시 메인 화면으로 돌아온다는것을 확인 할 수 있다.

구동 원리

우선 회원가입을 누르면 url이 /members/new가 추가되는게 확인이 된다.

이는 Get방식으로 GetMapping을 사용한다.

이후 GetMapping을 통해 createMemberForm.html로 이동한다.

html에서 form은 값을 입력해주고 이를 이용해서 label과 input을 이용해 ui와 값을 입력받는다.

여기서 input에 들어있는값들이 중요한데 type은 text를 넣어 text 박스를 생성해주고, name은 서버에 넘길 변수를 적어준다.

이후 button을 누를 경우 form에 적힌 경로를 타고 post 방식으로 넘어온다.

여기서 MemberController에 PostMapping에서 이 데이터를 받는다.

즉, post는 데이터를 form에 담아서 넘길때 사용하고, Get은 조회할때 주로 사용한다는것을 알 수 있다.

PostMapping을 통해 create되는곳에 MemberForm이 있는데 이는 아까 Controller 디렉토리에 만들어둔 MemberForm과 동일하다.

MemberForm으로 이동해서 private Stiring name;여기서 name에 localhost에서 입력한 값이 들어간다.

회원 웹 기능 - 조회

회원 등록기능을 만들었으니 이제 회원 목록을 누르면 동작하도록 만들어보자

MemberController에 아래 코드를 추가한다.

@GetMapping("/members")
    public String list(Model model) {
        List<Member> members = memberService.findMember();
        model.addAttribute("members", members);
        return "members/memberList";
    }

이후 return에 맞춰서 members 디렉토리에 memberList이름인 html 파일을 만들어준다.

코드는 아래와 같다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
  <div>
    <table>
      <thread>
        <tr>
          <th>#</th>
          <th>이름</th>
        </tr>
      </thread>
      <tbody>
      <tr th:each="member : ${members}">
        <td th:text="${member.id}"></td>
        <td th:text="${member.name}"></td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
</body>

다 만들었으면 재실행을 한 뒤 회원가입을 하고 회원 목록을 누르면 가입된 순서대로 이름이 나온다.

이는 html에서 타임리프가 들어간것인데 <tr th:each="member : ${members}">요 부분이 아래 있는 td 2개를 반복적으로 돌려준다고 보면 된다.

이는 타임리프 문법중 하나라고 한다.

우리가 Controller에서 List로 값을 모아두기 때문에 순서대로 호출이 가능하다.

지금은 우리가 DB를 메모리로 쓰고 있기 때문에 서버를 재실행하면 값이 초기화된다.

728x90