Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[Spring] 인프런 스프링 입문(김영한 님) - 웹 MVC 개발(회원관리 예제) : 회원 등록 및 조회 본문

🖥 BE 백엔드/Spring 스프링

[Spring] 인프런 스프링 입문(김영한 님) - 웹 MVC 개발(회원관리 예제) : 회원 등록 및 조회

비비 bibi 2021. 3. 5. 00:01

이 글은 인프런 김영한 님의 스프링 입문 강의 를 듣고 정리한 글입니다.

회원 관리 예제 - 웹 MVC 개발

회원 웹 기능 - 홈 화면 추가

아주 단순한 1.회원 등록 및 2.회원 조회 기능을 하는 화면을 만들어 본다.

@GetMapping("/") : URL에서 /는 도메인으로 처음 들어왔을 때의 페이지를 말함. (홈 페이지)
- index.html과의 차이는?? (src/main/java/resources/static/index.html)
  
  (복습) 웹 브라우저에서 요청이 들어오면, 톰캣 서버는 스프링 컨테이너에서 관련 컨트롤러를 먼저 찾고, 관련 컨트롤러가 없으면 그 때 static폴더를 찾는다. 그래서 static에 있는 index.html보다 @GetMapping("/")이 먼저 찾아진다.
@GetMapping() 메소드의 리턴값은 src/main/java/resources/templates에서 찾는다.

src/main/java/프로젝트명/controller/HomeController.java

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

src/main/java/resource/templates/home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div>
        <h1>Hello Spring</h1>
        <p>회원 기능</p>
        <p>
            <a href="/members/new">회원 가입</a>
            <a href="/members">회원 목록</a>
        </p>
    </div>
</div>
</body>
</html>

회원 웹 기능 - 등록

이전에 만들어 둔 MemberController를 활용해 만든다.

home.html에 연결해 둔 회원가입 url인 /members/new 화면을 만들고 동작하게 한다.

MemberController.java

아래 메서드를 추가한다.

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

members/createMemberForm이런 url은 src/main/java/resources/templates에서부터의 경로로 생각하면 된다.
- 즉 templates디렉토리에 members라는 하위 디렉토리를 만들고, 그 하위 디렉토리 안에 createMemberForm.html을 만들면 리턴시 해당 html파일로 연결된다.

createMemberForm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
</body>
</html>

<form action="/members/new" method="post">
- <form>은 값을 입력할 수 있는 html태그
- action="/members/new" method="post"
- <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
  
  여기에서 name="name"이 서버에 넘어올 때의 키key가 된다.
등록 버튼을 누르면 action="/members/new" method="post"에 따라,
- /members/new URL로 POST방식으로 데이터가 넘어간다.
- 데이터는 @PostMapping("/members/new")로 넘어간다. (아래 참고)

회원을 등록하는 컨트롤러 MemberForm.java를 src/main/java/프로젝트명/controller에 만든다

MemberForm.java

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

MemberController.java

아래 메서드를 추가한다

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

    memberService.join(member);

    return "redirect:/";
}

return "redirect:/"; : 해당 메서드가 끝나면 redirect:이하로 연결해 줌. 여기서는 /이므로 홈 화면으로 돌아감.
@PostMapping() (POST방식) : 데이터를 전달(등록)할 때 사용함.
@GetMapping() (GET 방식) : 데이터를 조회할 때 사용함. URL에 직접 입력을 통해 동작.

즉 URL은 같지만 GET / POST 에 따라 다르게 맵핑할 수 있다.
- ViewResolver(뷰 리졸버)가 리턴 값을 templates에서 찾아 해당 html파일을 선택하고, Thymeleaf 템플릿엔진이 파일을 렌더링한다. 즉 화면에 html이 뿌려진다.
action="/members/new" method="post"에 따라 넘어온 데이터 name="name" 은 ,

create(MemberForm form)에서 MemberForm객체가 생성될 때의 인스턴스변수 private String name;으로 지정된다 (스프링이 setName(String name)을 통해 name="name"을 맵핑해준다)

HTML GET / POST 방식 및 <form>태그에 대해 더 검색 및 공부해보면 이해가 될 것이다.

회원 웹 기능 - 조회

이제 회원 목록을 조회하는 기능만 구현하면 된다.

MemberController.java

아래 메서드를 추가한다.

@GetMapping("/members")
public String list(Model model) {
    List<Member> members = memberService.findMembers();
    model.addAttribute("members", members); // 키 "members", 값 members로 Model에 저장
    return "members/memberList";
}

memberList.html (src/main/java/resources/templates에 생성)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
</body>
</html>

th : thymeleaf 템플릿엔진을 사용하는 부분.

템플릿엔진의 역할은 렌더링이다.

<tr th:each="member : ${members}">
    <td th:text="${member.id}"></td>
    <td th:text="${member.name}"></td>
</tr>

th:each="member : ${members}"에서..
- th:each는 Thymeleaf의 반복문 문법이다. 루프를 돌며 해당 태그 내의 태그들을 실행한다.
- member는 반복되는 객체 하나에 대한 임시변수명이다.
- ${members}는 Model에서 members라는 키를 가지는 값을 찾아 가지고 온다.
  
  MemberController.java에서 model.addAttribute("members", members);로 members(List)를 저장해 놓았기 때문에 불러올 수 있는 것.
th:text="${member.id}", th:text="${member.name}"
- th:each의 임시변수 member의 id와 name을 각각 불러온다.
- id와 name은 private인데 어떻게 가져왔는가?
  
  : Member클래스에 정의된 getter, setter에 접근해 값을 가져온 것이다. (이를 '프로퍼티방식의 접근'이라고 한다)

여기까지 잘 되었지만, 현재 데이터들은 메모리에 저장되어 있기 때문에 스프링 서버를 끄면 회원 데이터가 다 사라진다.

이제 파일이나 DB에 데이터를 저장해야 한다.

다음 시간에 스프링 데이터 엑세스 (데이터베이스 사용)에 대해 배워 볼 것이다.

저작자표시 비영리 변경금지

'🖥 BE 백엔드 > Spring 스프링' 카테고리의 다른 글

[Spring] 인프런 스프링 입문(김영한 님) - 순수JDBC, 통합테스트, 스프링JdbcTemplate, JPA, 스프링 데이터 JPA (0)	2021.03.06
[Spring] 인프런 스프링 입문(김영한 님) - 스프링 DB 접근기술 : H2 데이터베이스 설치 (0)	2021.03.05
[Spring] 인프런 스프링 입문(김영한 님) - 스프링 빈과 의존관계 : 컴포넌트 스캔, 의존관계, DI, 스프링 빈 직접 등록하기 (0)	2021.03.04
[Spring] 인프런 스프링 입문(김영한 님) - 회원 관리 예제:비즈니스 요구사항, 회원 도메인/리포지토리/서비스 개발, 테스트케이스 작성 (0)	2021.03.04
[Spring] 인프런 스프링 입문(김영한 님) - 빌드 및 실행, 정적 컨텐츠/MVC와 템플릿엔진/API (0)	2021.03.04

'🖥 BE 백엔드/Spring 스프링' Related Articles

Bibi's DevLog 🤓🍎

[Spring] 인프런 스프링 입문(김영한 님) - 웹 MVC 개발(회원관리 예제) : 회원 등록 및 조회 본문

[Spring] 인프런 스프링 입문(김영한 님) - 웹 MVC 개발(회원관리 예제) : 회원 등록 및 조회

회원 관리 예제 - 웹 MVC 개발

회원 웹 기능 - 홈 화면 추가

회원 웹 기능 - 등록

회원 웹 기능 - 조회

'🖥 BE 백엔드 > Spring 스프링' 카테고리의 다른 글

티스토리툴바