2022 Java Spring Cafe

2022년도 마스터즈 멤버스 백엔드 스프링 카페 프로젝트

heroku 배포 링크 : https://java-spring-cafe.herokuapp.com

aws ec2 배포 링크 : http://ec2-3-38-116-172.ap-northeast-2.compute.amazonaws.com:8080/

배포 방법

heroku

local 프로필 및 schema-h2.sql 사용 (Embedded 타입 H2 연결)

git checkout main
git rebase <branch_name>
git push heroku main

AWS EC2

prod 프로필 및 schema-mysql.sql 사용 (EC2 인스턴스 내 mysql-server 연결)

nohup java -Dspring.profiles.active=prod -jar cafe-0.0.1-SNAPSHOT.jar

API 명세

User

user	URL	Method	URL Params	Data Params	Success Response	Error Response
listUsers	/users	GET			code: 200, view: user/list
showUser	/users/:userId	GET	userId: string		code: 200, view: user/profile	code: 404
formCreateUser	/users/form	GET			code: 200, view: user/form
createUser	/users	POST		userId: string, password: string, name: string, email: string	code: 200, redirect: /users	code: 409 code: 500
formUpdateUser	/users/:userId/form	GET	userId: string		code: 200, view: user/update_form	code: 404
updateUser	/users/:userId	PUT	userId: string	password: string, name: string, email: string	code: 200, redirect: /users	code: 404

Article

article	URL	Method	URL Params	Data Params	Success Response	Error Response
formCreateArticle	/articles/form	GET			code: 200 view: qna/form
createArticle	/articles	POST		writer: string, title: string, contents: string	code: 200 redirect: /	code: 404 code: 500
listArticles	/	GET			code: 200 view: qna/list
showArticle	/articles/:id	GET	id: int		code: 200 view: qna/show	code: 404

Auth

auth	URL	Method	URL Params	Data Params	Success Response	Error Response
formLogin	/login/form	GET			code: 200 view: form/login
login	/login	POST		userId: string, password: string	code: 200 redirect: /users	code: 404 code: 409
logout	/logout	GET			code: 200 redirect: /users

jacoco 리포트

Bundle

Controller

Service

Repository

☝ 1단계 요구사항

스프링 카페 1단계 - 회원 가입 및 목록 기능

회원가입 기능 구현

• 가입하기 페이지는 static/user/form.html을 사용한다.
• static에 있는 html을 templates로 이동한다.
• 사용자 관리 기능 구현을 담당할 UserController를 추가하고 애노테이션 매핑한다.
  • @Controller 애노테이션 추가
• 회원가입하기 요청(POST 요청)을 처리할 메소드를 추가하고 매핑한다.
  • @PostMapping 추가하고 URL 매핑한다.
• 사용자가 전달한 값을 User 클래스를 생성해 저장한다.
  • 회원가입할 때 전달한 값을 저장할 수 있는 필드를 생성한 후 setter와 getter 메소드를 생성한다.
• 사용자 목록을 관리하는 ArrayList를 생성한 후 앞에서 생성한 User 인스턴스를 ArrayList에 저장한다.
• 사용자 추가를 완료한 후 사용자 목록 페이지("redirect:/users")로 이동한다.

회원목록 기능 구현

• 회원목록 페이지는 static/user/list.html을 사용한다.
• static에 있는 html을 templates로 이동한다.
• Controller 클래스는 회원가입하기 과정에서 추가한 UserController를 그대로 사용한다.
• 회원목록 요청(GET 요청)을 처리할 메소드를 추가하고 매핑한다.
  • @GetMapping을 추가하고 URL 매핑한다.
• Model을 메소드의 인자로 받은 후 Model에 사용자 목록을 users라는 이름으로 전달한다.
• 사용자 목록을 user/list.html로 전달하기 위해 메소드 반환 값을 "user/list"로 한다.
• user/list.html 에서 사용자 목록을 출력한다.

회원 프로필 정보보기

• 회원 프로필 보기 페이지는 static/user/profile.html을 사용한다.
• static에 있는 html을 templates로 이동한다.
• 앞 단계의 사용자 목록 html인 user/list.html 파일에 닉네임을 클릭하면 프로필 페이지로 이동하도록 한다.
  • html에서 페이지 이동은 태그를 이용해 가능하다.
  • "<a href="/users/{{userId}} />" 와 같이 구현한다.
• Controller 클래스는 앞 단계에서 사용한 UserController를 그대로 사용한다.
• 회원프로필 요청(GET 요청)을 처리할 메소드를 추가하고 매핑한다.
  • @GetMapping을 추가하고 URL 매핑한다.
  • URL은 "/users/{userId}"와 같이 매핑한다.
• URL을 통해 전달한 사용자 아이디 값은 @PathVariable 애노테이션을 활용해 전달 받을 수 있다.
• ArrayList에 저장되어 있는 사용자 중 사용자 아이디와 일치하는 User 데이터를 Model에 저장한다.
• user/profile.html 에서는 Controller에서 전달한 User 데이터를 활용해 사용자 정보를 출력한다.

✌ 2단계 요구사항

스프링 카페 2단계 - 글 쓰기 기능 구현

글쓰기

• 게시글 페이지는 static/qna/form.html을 수정해서 사용한다.
• static에 있는 html을 templates로 이동한다.
• 게시글 기능 구현을 담당할 ArticleController를 추가하고 애노테이션 매핑한다.
• 게시글 작성 요청(POST 요청)을 처리할 메소드를 추가하고 매핑한다.
• 사용자가 전달한 값을 Article 클래스를 생성해 저장한다.
• 게시글 목록을 관리하는 ArrayList를 생성한 후 앞에서 생성한 Article 인스턴스를 ArrayList에 저장한다.
• 게시글 추가를 완료한 후 메인 페이지(“redirect:/”)로 이동한다.

글 목록 조회하기

• 메인 페이지(요청 URL이 “/”)를 담당하는 Controller의 method에서 게시글 목록을 조회한다.
• 조회한 게시글 목록을 Model에 저장한 후 View에 전달한다. 게시글 목록은 앞의 게시글 작성 단계에서 생성한 ArrayList를 그대로 전달한다.
• View에서 Model을 통해 전달한 게시글 목록을 출력한다.

게시글 상세보기

• 게시글 목록(qna/list.html)의 제목을 클릭했을 때 게시글 상세 페이지에 접속할 수 있도록 한다.
• 게시글 상세 페이지 접근 URL은 "/articles/{index}"(예를 들어 첫번째 글은 /articles/1)와 같이 구현한다.
• 게시글 객체에 id 인스턴스 변수를 추가하고 ArrayList에 게시글 객체를 추가할 때 ArrayList.size() + 1을 게시글 객체의 id로 사용한다.
• Controller에 상세 페이지 접근 method를 추가하고 URL은 /articles/{index}로 매핑한다.
• ArrayList에서 index - 1 해당하는 데이터를 조회한 후 Model에 저장해 /qna/show.html에 전달한다.
• /qna/show.html에서는 Controller에서 전달한 데이터를 활용해 html을 생성한다.

회원정보 수정 화면

• /user/form.html 파일을 /user/updateForm.html로 복사한 후 수정화면을 생성한다.
• URL 매핑을 할 때 "/users/{id}/form"와 같이 URL을 통해 인자를 전달하는 경우 @PathVariable 애노테이션을 활용해 인자 값을 얻을 수 있다.
• public String updateForm(@PathVariable String id)와 같이 구현 가능하다.
• Controller에서 전달한 값을 입력 폼에서 출력하려면 value를 사용하면 된다.

회원정보 수정

• URL 매핑을 할 때 "/users/{id}"와 같이 URL을 통해 인자를 전달하는 경우 @PathVariable 애노테이션을 활용해 인자 값을 얻을 수 있다.
• UserController의 사용자가 수정한 정보를 User 클래스에 저장한다.
• {id}에 해당하는 User를 DB에서 조회한다(UserRepository의 findOne()).
• DB에서 조회한 User 데이터를 새로 입력받은 데이터로 업데이트한다.
• UserRepository의 save() 메소드를 사용해 업데이트한다.

🤘 3단계 요구사항

스프링 카페 3단계 - DB에 저장하기

• H2 데이터베이스 의존성을 추가하고 연동한다.
  • ORM은 사용하지 않는다.
  • Spring JDBC를 사용한다.
  • DB 저장 및 조회에 필요한 SQL은 직접 작성한다.
• 게시글 데이터 저장하기
  • Article 클래스를 DB 테이블에 저장할 수 있게 구현한다.
  • Article 테이블이 적절한 PK를 가지도록 구현한다.
• 게시글 목록 구현하기
  • 전체 게시글 목록 데이터를 DB에서 조회하도록 구현한다.
• 게시글 상세보기 구현하기
  • 게시글의 세부 내용을 DB에서 가져오도록 구현한다.
• 사용자 정보 DB에 저장
  • 회원가입을 통해 등록한 사용자 정보를 DB에 저장한다.
• 배포하기
  • heroku를 사용해서 배포를 진행한다.

🖖 4단계 요구사항

스프링 카페 4단계 - DB에 저장하기

• 로그인과 로그아웃이 기능이 정상적으로 동작한다.
  • 현재 상태가 로그인 상태이면 상단 메뉴에서 “로그아웃”, “개인정보수정”이 표시되어야 한다.
  • 현재 상테가 로그인 상태가 아니라면 상단 메뉴에서 “로그인”, “회원가입”이 표시되어야 한다.
• Spring MVC에서 메소드의 인자로 HttpSession을 이용해서 로그인을 구현한다.
  • Spring Security와 같은 별도 라이브러리 등은 사용하지 않는다.
  • API가 아닌 템플릿 기반으로 구현한다.
• 로그인한 사용자는 자신의 정보를 수정할 수 있어야 한다.
  • 이름, 이메일만 수정할 수 있으며, 사용자 아이디는 수정할 수 없다.
  • 비밀번호가 일치하는 경우에만 수정 가능하다.
  • 로그인한 사용자와 수정하는 계정의 id가 같은 경우만 수정하도록 한다.
  • 다른 사용자의 정보를 수정하려는 경우 에러 페이지를 만든 후 에러 메시지를 출력한다.
• 권한 체크에 대한 테스트를 위해 2명 이상의 테스트 데이터를 추가한다.

✋ 5단계 요구사항

스프링 카페 5단계 - 게시글 권한 부여

기능 요구 사항

• 로그인하지 않은 사용자는 게시글의 목록만 볼 수 있다.
• 로그인한 사용자만 게시글의 세부내용을 볼 수 있다.
• 로그인한 사용자만 게시글을 작성할 수 있다.
• 로그인한 사용자는 자신의 글을 수정 및 삭제할 수 있다.

게시글 작성하기

• 글작성 화면에서 글쓴이 입력 필드를 삭제한다.
• 로그인하지 않은 사용자가 글쓰기 페이지에 접근할 경우 로그인 페이지로 이동한다.

게시글 수정하기

• 수정하기 폼 과 수정하기 기능은 로그인 사용자와 글쓴이의 사용자 아이디가 같은 경우에만 가능하다.
• 상황에 따라 "다른 사람의 글을 수정할 수 없다."와 같은 에러 메시지를 출력하는 페이지로 이동하도록 구현한다.

게시글 삭제하기

• 삭제하기는 로그인 사용자와 글쓴이의 사용자 아이디가 같은 경우에만 가능하다.
• 상황에 따라 "다른 사람의 글을 삭제할 수 없다."와 같은 에러 메시지를 출력하는 페이지로 이동하도록 구현한다.

🚴‍♂️ 6단계 요구사항

스프링 카페 6단계 - 게시글 권한 부여

기능 요구 사항

• 로그인한 사용자는 게시글 상세보기 화면에서 댓글들을 볼 수 있다.
• 로그인한 사용자는 댓글을 추가할 수 있다.
• 자신이 쓴 댓글에 한해 댓글을 삭제할 수 있다.

프로그래밍 요구사항

• Reply 클래스를 추가하고 DB에 저장한다.
• Heroku로 배포를 진행하고 README에 배포 URL을 기술한다.

추가 요구 사항

• 게시글 데이터를 완전히 삭제하는 것이 아니라 데이터의 상태를 삭제 상태(deleted - boolean type)로 변경한다.
• 로그인 사용자와 게시글 작성자가 같은 경우 삭제 가능하다.
• 댓글이 없는 경우 삭제가 가능하다.
• 게시글 작성자와 댓글 작성자가 다를 경우 삭제는 불가능하다.
• (선택) 게시글 작성자와 댓글 작성자가 모두 같은 경우 삭제가 가능하다.
• (선택) 게시글을 삭제할 때 댓글 또한 삭제해야 하며, 댓글의 삭제 또한 삭제 상태(deleted)를 변경한다.

🏄‍♂️ 7단계 요구사항

스프링 카페 7단계 - 게시글 권한 부여

구현 요구사항

• RestController 와 AJAX로 구현한다.
• 데이터베이스는 MySQL 8.0을 이용한다.

배포 요구사항

• AWS EC2로 배포한다.
• 배포 IP를 README에 기술한다.
• 데이터베이스와 같은 인스턴스를 사용한다.

추가 요구 사항

• 새로운 답변을 추가하는 기능을 AJAX로 구현한다.
• 답변 삭제하는 기능을 AJAX로 구현한다.