백엔드 16일차 - 스프링부트 : Thymeleaf 활용한 검색 기능, session

타임리프 css 활용 - w3schools

타임리프에도 html과 같이 css적용이 가능하다.
css 적용에는 유명 템플릿 사이트인
https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
를 이용하여 적용해보았다.

css 적용 단계

1. 타임리프 맨 상단에 get started 에서 cdn 코드 추가

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2. 원하는 디자인 템플릿을 보며 코드 적용

적용하는 방법은 매우 쉬운데, 내가 원하는 카테고리에 가서 원하는 디자인을 선택한 후, try it 을 선택하면 코드가 나온다.

사진처럼, 나의 코드와 비교하여 추가된 부분을 조금씩 맞춰서 적용하면 된다.

검색 기능 만들기

목표 : 전체적인 틀은 갖춰진 테이블에 검색 기능 추가.

1. 검색 input 추가
2. controller 에서 search 값 넘기기
3. repository에서 search될 쿼리 작성

1.
<div>
  <form action="/holiday_parking">
    <input type="text" name="search" />
    <button type="submit">검색</button>
  </form>
</div>

div와 form으로 감싸고, input에 이름을 search라고 지정.

2.
 @GetMapping("/holiday_parking")
    public String holidayParking(
      @RequestParam(defaultValue = "1") int page,
      @RequestParam(defaultValue = "") String search,
      ..
search 값에 아무것도 안들어오면 오류가 나기 때문에 디폴트 값을 설정.

3. 
목표 : 기관명, 시도, 구에서 검색어가 포함되는 결과를 출력.

List<HolidayParking>findByInstitutionContainingOrSidoContainingOrGuContaining(
String ins, String sido, String gu
);

레포지토리에서 어디를 검색할지 범위를 지정하고, 원하는 속성에서 검색어를 찾을 수 있도록 
find 함수를 쿼리 메소드로 직접 지정하면 된다.
(레포지토리는 db 값을 꺼내오는 역할!)

레파지토리에 작성한 find함수를 컨트롤러에서 쓰려고 하지만, 리턴 타입을 맞춰줘야한다.
List가 아니라 Page로 받기 때문에 이것을 그대로 레파지토리에 적용하면 되고, find 함수 인자에 Pageable pageable를 그대로 추가하면 된다.

  Page<HolidayParking>
  findByInstitutionContainingOrSidoContainingOrGuContaining(
  String ins, String sido, String gu, Pageable pageable);

--controller

Page<HolidayParking> p =
        holidayParkingRepository.findByInstitutionContainingOrSidoContainingOrGuContaining(
          search, search, search, pageable);

이렇게 해주면, 검색한 그대로 테이블에 보여지게 된다!

검색한 결과로 페이지 이동

검색한 결과를 반영하면서 페이지를 이동하려고 할 때는
th:href="@{/holiday_parking(page=${pageNumber},search=${param.search})}"
이렇게, param.search를 넘겨주면 적용 가능하다.

Session

세션 : 서버에 만들어지는 공간으로, 클라이언트에 대한 정보를 저장하는 역할
쿠키 : 클라이언트에서 저장되는 데이터

세션은 일정 시간이 지나면 사라지게 되고, 쿠키는 직접 삭제하거나 만료시까지 존재한다. 세션을 일종의 번호표라고 생각하면 되는데, 사용자가 서버에 접속하면 서버는 번호표를 생성 -> 쿠키에 저장되어 클라이언트 쪽으로 전달한다고 보면 된다. 여기서 번호표(세션)를 잃어버리면 새로운 번호표를 발급해 다시 전달한다.

정리하자면 번호표는 고유한 식별자를 가지고, 이 식별자는 쿠키에 저장되어 세션 유지가 가능하게 되는 것이다.

cf) 세션, 쿠키, 로컬스토리지

세션: 서버가 기억한다.

쿠키: 브라우저가 서버에 매번 보낸다.

로컬스토리지: 브라우저가 혼자 보관한다. 서버는 모른다.

session 예제 코드

코드에 세션을 추가하는 방법은 간단하다.
HttpSession session을 추가하면 세션을 건드리게 된다.

간단하게, fetch를 이용한 로그인을 살펴보려고 한다.

-fetch 로그인 화면
@GetMapping("/fetch/login")
public String fetchLogin() {
    return "/auth/fetch-login";
}

-fetch로 로그인 요청(Post)
@PostMapping("/fetch/login")
@ResponseBody
public String fetchLoginPost(@RequestParam String username, @RequestParam String password) {
    return "success";
}


cors환경에서의 로그인. 다른 포트에서 접속
(Cross-Origin)

-form 전송
@PostMapping("/cors/html/login")
public String corsHtmlLoginPost(@RequestParam String username, @RequestParam String password) {
    return "redirect:/auth/main";
}

-fetch 전송
@CrossOrigin(origins = "http://127.0.0.1:5500", allowCredentials = "true")
@PostMapping("/cors/fetch/login")
@ResponseBody
public String corsFetchLoginPost(@RequestParam String username, @RequestParam String password, HttpSession session) {
    return "success";
}

• Fetch API 통신은 서버가 CORS를 허용해야 요청이 성공한다.

• @CrossOrigin을 통해 다른 도메인/포트로부터의 요청을 허용할 수 있다.