[Spring] Spring Boot, JPA로 Q&A 게시판 구현하기 - 반복주기 2

Let's TECH🧐·2021년 1월 2일
JPASpring bootweb
0

Spring Boot, JPA로 Q&A 게시판 구현하기

목록 보기
2/3
post-thumbnail

자바지기 박재성 강사님의 유튜브 강좌 'Spring Boot, JPA로 Q&A 게시판 구현하기'를 공부하며, 각 반복주기마다 추가 학습한 내용을 포스팅으로 남기고 있다.
첫번째 반복주기에 이어 두번째 반복주기에서는 회원가입 기능과 사용자 목록 기능을 구현하였다. 이 과정을 통해 MVC 패턴에 대한 기본적인 이해와 mustache를 활용하여 동적인 HTML을 생성하는 방법에 대해 배워보았다.

1. Controller

Controller란?

스프링 MVC 패턴 중 C(Controller)에 해당

스프링 MVC 패턴
1. Model: 애플리케이션의 정보, 데이터를 나타냄
2. View: 사용자 인터페이스 요소를 나타냄
3. Controller: 데이터와 사용자 인터페이스 요소를 잇는 다리 역할, 사용자의 요청을 처리한 후 지정된 뷰에 모델 객체를 넘겨주는 역할

Controller 관련 대표적인 Annotation

  1. @Controller
    • 특정 클래스를 Controller로 사용하겠다고 Spring Framework에 알림
  2. @GetMapping
    • GET: 서버로부터 정보를 조회하기 위해 설계된 메소드
    • @GetMapping은 @RequestMapping(value="", method=RequestMethod.GET)을 대신하는 코드
    • Get 요청에 대해 어떤 Controller, 어떤 메소드가 처리할지 매핑하기 위한 어노테이션
  3. @PostMapping
    • POST: 리소스를 생성/변경하기 위해 설계된 메소드
    • @PostMapping은 @RequestMapping(value="", method=RequestMethod.Post)을 대신하는 코드
    • Post 요청에 대해 어떤 Controller, 어떤 메소드가 처리할지 매핑하기 위한 어노테이션

2. 회원가입 기능 구현

form 태그의 여러 속성들

1) action

<form action="URL">
  • 정의
    form 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시한다.

2) name

<form name="텍스트">
  • 정의
    form 태그의 name 속성은 해당 폼의 이름을 명시한다. 서버로 제출된 폼 데이터를 참조하기 위해 사용된다.

3) method

<form method="get|post">
  • 정의
    form 태그의 method 속성은 폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시한다.

private 접근 제어자

private는 자기 자신만 사용할 수 있는 접근 제어자이다.
아래 예시를 통해 더 자세히 살펴보자. 

public class Information {
	public String id;
    private String password;
}

위 코드에서 public으로 선언된 id 변수는 다른 클래스에서도 사용할 수 있지만, private로 선언된 password 변수는 information이라는 클래스 내에서만 사용할 수 있다.

하지만, 이런 private로 선언된 변수를 사용하기 위해 get, set 메소드를 사용한다.

get과 set 메소드

객체 지향 프로그래밍에서는 객체 외부에서 직접적으로 객체에 접근하는 것을 막는다. 그 이유는 객체의 데이터를 외부에서 마음대로 접근하게 되는 경우 무결성이 깨질 수 있기 때문이다.

따라서 객체 외부에서 직접적으로 데이터에 접근하는 것이 아닌, 메소드를 공개해서 이 메소드를 통해 데이터에 접근하게 한다.

이러한 역할을 담당하는 메소드가 바로 get과 set 메소드이다.(getter, setter라고도 한다) get은 가져오는 것, set은 지정하는 것으로 이해하면 된다.

아래 예시를 통해 조금 더 자세히 살펴보자.

public class Information {
    public String id;
    private String password;
    
    // 1번
    public void setPassword(String password1) {
    	password = password1;
    }
    
    // 2번
    public String getPassword() {
    	return password;
    }
}

1번 코드를 보면 set 메소드(setPassword)를 통해 데이터를 입력하는 것을 알 수 있다.
2번 코드를 보면 get 메소드(getPassword)를 통해 password 변수를 가져온다는 것을 알 수 있다.

1번과 2번 코드 모두 public으로 선언을 해주었으니, 다른 클래스에서도 get과 set 메소드를 통해 password 변수에 접근할 수 있다.

toString

toString 메소드는 객체가 가지고 있는 정보나 값들을 문자열로 만들어 리턴하는 메소드이다.

3. 사용자 목록 기능 구현

데이터를 저장하기 위한 List 컬렉션 생성

회원가입한 사용자를 저장하고 있어야 사용자 목록을 통해 해당 사용자를 보여줄 수 있다. 따라서, 회원가입을 했을 때 회원가입한 사용자를 저장할 수 있는 List 컬렉션에 대해 알아보자.

List 컬렉션이란?

배열은 크기가 정해져 있다. 하지만, 프로그래밍을 할 때 배열의 명확한 크기를 알 수 없는 경우가 많다. 이처럼 동적으로 자료형의 개수가 변하는 상황이라면 List를 사용하는 것이 유리하다.

대표적인 List 컬렉션 클래스(ArrayList, LinkedList, Vector, Stack) 중 오늘은 ArrayList에 대해 더 자세히 살펴보자.

ArrayList 클래스

  • 정의
    ArrayList는 List 컬렉션 인터페이스를 구현한 클래스이다.
    일반 배열과 ArrayList는 인덱스로 객체를 관리한다는 점에서는 동일하지만, ArrayList는 크기를 동적으로 늘릴 수 있다는 점에서 차이가 있다.

  • 예제

// User 객체를 관리하는 ArrayList 생성
List<User> users = new ArrayList<User>();

// add() 메소드를 이용해 요소 저장
users.add(user);

mustache를 이용해 동적인 HTML 생성

1) Controller 생성

@Controller   
public class WelcomeController {
    @GetMapping("/helloworld")
    public String welcome(String name, int age, Model model) {
        System.out.println("name: " + name + " age: " + age);
        model.addAttribute("name", name);
        model.addAttribute("age", age);
        return "welcome";
    } 
}
  • Model model: 브라우저에 객체를 전달하기 위해 model이라는 객체 사용

2) HTML 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>welcome</title>
</head>
<body>
	Hello I'm {{name}} :)<br/>
	I'm {{age}} years old!
</body>
</html>
  • model 객체를 전달받은 html에 mustache({{name}}, {{age}})를 사용하여 name과 age의 값을 브라우저 화면에 출력한다.

3) url을 통해 요청

http://localhost:8080/helloworld?name=Minju&age=25
해당 url을 통해 서버에 요청하면 아래와 같은 화면이 출력되는 것을 확인할 수 있다.

(사진 추가)

redirect

redirect란 다시(re) 지시한다(direct)는 뜻이다.
예를 들어 브라우저가 "http://localhost:8080/create" URL을 웹 서버에 요청했다고 가정해보자. 이 때 서버는 HTTP 응답 메시지를 통해 "http://localhost:8080/list" 로 다시 요청하라고 브라우저에게 다른 URL을 지시할 수 있다.
👉 본 강의에서는 다음 코드를 통해 redirect 기능을 사용하였다.

@PostMapping("/create")
public String create(User user) {
	users.add(user);
    return "redirect:/list"; // 이 코드를 통해 /create가 아닌 /list url이 재요쳥된다.
}

4. 이전 상태로 복원시키기

로컬에서 이전 작업으로 되돌리기

1) git log를 통해 진행된 작업 상태 확인

git log 를 통해 현재까지 진행된 작업 상태를 확인한다.

2) git reset [옵션][돌아갈 commitID]

  • 옵션
    - --hard: 돌아가려는 이력 이후의 내용을 모두 삭제
    - --soft: 돌아가려는 이력 이후 내용 모두 유지(바로 다시 커밋할 수 있는 상태로 남아있음)
    - --mixed: 돌아가려는 이력 이후 내용 모두 유지, 그러나 인덱스는 초기화됨(커밋하려면 변경 내용 다시 추가해야 함)

    위 사진을 보면 회원가입, 사용자 목록 기능 구현 커밋 메시지가 없어지고, Initial commit만 남은 것을 확인할 수 있다.

로컬, 원격 모두 이전 작업으로 되돌리기

git push --force 명령어를 통해 강제로 이전 작업으로 되돌린다.


느낀 점

두번째 반복주기를 공부하면서 맛보기이긴 했지만 Spring MVC 패턴에 대해서 알 수 있었고, mustache를 활용해 동적인 HTML을 생성하는 방법도 알아볼 수 있었다.
Spring은 처음 공부해보는 거라 하나의 반복주기를 공부하는 데 시간이 많이 걸려서 빨리빨리 진행하고 싶은 마음이 굴뚝 같다. 하지만, 공부한 내용을 블로그에 기록하면서 강의를 들을 때 놓쳤던 부분을 좀 더 꼼꼼하게 짚고 넘어갈 수 있어서 좋다!

세번째 반복주기도 무사히 잘 넘어갈 수 있기를🙏

참고 사이트

SpringMVC(1) Controller 생성하기
SpringMVC - 핸들러 메소드 - 1(Mapping 어노테이션, 확장자, 요청 헤더
코딩의 시작, TCP School
자바 get, set 메소드
JAVA에서 set이랑 get의 쓰임과 class의 의미
Java 리스트(List) 컬렉션 종류 ArrayList, Vector, LinkedList
자바 List 컬렉션 클래스 (ArrayList)
2-1. mustache 활용한 동적인HTML과 MVC 설명
[HTTP] 리다이렉트(REDIRECT)란?
Git - 복원(undo), 복구(reset, revert) 사용 방법 및 상세 설명

profile
Let's TECH🧐
Minju's Tech Blog
이전 포스트

[Spring] Spring Boot, JPA로 Q&A 게시판 구현하기 - 반복주기 1

다음 포스트

[Spring] Spring Boot, JPA로 Q&A 게시판 구현하기 - 반복주기 3

0개의 댓글