회원 웹 기능 - 홈 화면 추가

이전까지 만들었던 백엔드 개발을 바탕으로 웹 mvc를 개발해보자.

우선 controller피키지 안에 HomeController 클래스를 만들고 어노테이션을 사용해 컨트롤러 임을 선언하고 getmapping으로 "home"을 리턴하는 메서드를 생성한다.

그 다음 리턴된 "home" 값에 따라 웹 페이지를 구성하기 위해서, resources 패키지 안의 templates 패키지안에 home.html 파일을 만든다.
Hello Spring 이라는 문구를 메인 제목으로 하고, 회원가입과 회원목록 페이지에 들어갈 수 있도록 구성해 준다.

참고로, html 파일의 형식과 문법은 프론트 분야이므로 기본적인 기능만 이해하고 넘어가도록 하자.

이렇게 작업한 후 실행을 시킨 후, 로컬 호스트에 접속해 보면 아래 그림과 같이 웹 페이지가 나타나는 것을 확인할 수 있다.

이렇게 하면 간단한 홈 화면 추가가 완료된 것이다.

회원 웹기능 - 등록

그럼 멤버를 등록하는 웹 기능을 추가해 보자

이번에도 마찬가지로 templete 페키지로 넘어가서 html로 간단히 웹페이지를 직접 구성해준다.

여기까지 작업을 하고 로컬에 접속해서 회원가입을 클릭해서 페이지를 들어가 보면,

아래 그림과 같이 회원 이름을 입력해서 회원가입을 할 수 있게된다.

여기서 등록 버튼을 누르게 되면 오류페이지가 나타나는 것을 알 수가 있는데 이것은 회원가입을 시켜주는 컨트롤러가 없어서 그런 것이다.
따라서 controller패키지에 입력된 이름을 받을 수 있도록 memberform이라는 컨트롤러를 만들어준다.
그리고 멤버 컨트롤러에 들어가 만들어진 멤버폼을 이용해서 멤버를 받아서 회원 서비스에 넘겨주고 홈 화면을 반환해 주는 매서드를 생성해준다.

이렇게 작업을 완료하고 다시 실행후 이름을 입력하고 등록 버튼을 누르면 멤버가 등록이 되면서 자동으로 홈 화면으로 돌아오게 되는것을 확인할 수 있다.

회원 웹 기능 - 조회

마지막으로 이름을 이용해서 등록을 완료 했다면, 등록된 회원을 조회할 수 있는 기능을 구현해 보자.

이번에도 @GetMapping을 이용해서 회원 목록 페이지를 구현한다.
멤버서비스에서 멤버를 조회하여서 리스트로 만들어 객체를 생성해주고 메이지를 반환하는 매서드를 만들어 준다.

그리고서 templete에 가서 웹페이지를 구성해준다.

그리고서 에플리케이션을 실행시켜주고 회원목록을 들어가보면 아래 그림과 같이 나온다.

이러면 잘 실행이 된다고 볼 수 있다. 아직 등록한 회원이 없으니 아무 이름도 안뜨는 것이 정상이다.

그럼 돌아가서 회원등록을 Spring1, Spring2 로 두번 해주고 다시 회원 목록을 들어가 보면,

다음과 같이 잘 조회가 되는 것을 볼 수가 있다.

여기까지 웹 MVC 개발을 간단히 알아 보았다.

여기서 우리는 실행을 멈추고 다시 실행시키면 모든 데이터가 사라지게 된다. 실무에서는 당연히 이렇게 되면 안되기 때문에 데이터 베이스를 활용해서 데이터들을 저장하고 관리하게 되는데, 다음 시간에 더 알아보자.