[ StudyOlle ] 로그인 전 첫 페이지

 

 

 

 

백기선 강사님의 '스프링과 JPA 기반 웹 애플리케이션 개발' 강의를 수강 후 공부하며 작성한 포스팅입니다.

 

 

 

 

 

😁 목표

이번 포스팅에선 로그인하지 않은 User가 방문했을 때 보이는 첫 화면을 만들어 보려고 한다!

 

로그인 전 첫 페이지에는 회원 가입 버튼과 최근 Study 9개가 보이도록 구현할 예정이다!

( 단, 공개한 Study && 아직 종료하지 않은 Study 만 포함된다 )

 

 

🛸 로그인 전 첫 페이지 Server 구현

1. MainController

✔ account가 null인 경우에는 findFirst9ByPublishedAndClosedOrderByPublishedDateTimeDesc 메소드를 실행시켜 얻은 결과를 model에 담아 view로 보내준다.

-> 최근데 만든 Study 중 공개된 상태(published==true) && 종료되지 않은 상태(closed==false)인 study 9개를 받아오는 과정

 

 

 

 

2. StudyRepository

✔ Spring Data JPA가 findFirst9ByPublishedAndClosedOrderByPublishedDateTimeDesc메서드 이름 그대로 Query를 만들어준다.

✔ n+1 문제를 방지하기 위해서 @EntityGraph을 추가해준다

 

 

 

🛸 로그인 전 첫 페이지 view 구현

1. fragments.html

✔ search.html에서 사용했던 study를 뿌려주는 카드 화면을 그대로 index 화면에서도 사용해줄 것이기 때문에 반복되는 코드는 fragment로 만들어준다!

 

✔ study가 담겨있는 list 이름 부분만 달라지기 때문에 이 부분만 변경 가능하도록 만들어준다.

 

 

 

 

1-1. search.html

✔ 위에서 만든 fragment를 사용해서 view 화면을 간단하게 수정해보자.

* search에서는 studyList가 studyPage.getContent() 임!

 

 

 

2. index.html

✔ 메인 화면에 StudyOlle 소개와 회원 가입 버튼을 넣어준다.

✔ Controller에서 넘겨준 studyList와 fragments study-list로 study를 보여준다!

 

 

 

 

😎 마무리

메인 화면에 회원 가입 버튼과 Study가 잘 출력된다면, 로그인 전 첫 페이지 구현하기 끝!!