[6일차] 6장 : 게시판 내 페이지 이동하기

길벗 IT도서에서 주관하는 코딩 자율학습단 8기 : Spring Boot 파트에 참여한 기록입니다 [ 목록 ]

 

6.1 링크와 리다이렉트란

목록 페이지(/articles)에 링크와 리다이렉트 기능을 이용해 페이지 이동 구현하기

• 링크(link)란 정해 놓은 요청을 간편히 전송하는 기능으로 보통 페이지 이동에 사용
  • HTML의 <a>, <form> 태그로 작성
• 리다이렉트(redirect)란 현재 요청을 마치고 계속 처리할 다음 요청 주소를 재지시 하는 것
  • 분리된 기능을 연속적인 흐름으로 연결 가능

6.2 링크와 리다이렉트를 이용해 페이지 연결하기

6.2.1 새 글 작성 링크 만들기

<a href="/articles/new">New Article</a>

6.2.2 <입력 페이지> → <목록 페이지> 돌아가기

<a href="/articles">Back</a>

6.2.3 <입력 페이지> → <상세 페이지> 돌아가기

    @PostMapping("/articles/create")
    public String createArticle(ArticleForm form) {
        // 생략
        return "redirect:/articles/" + saved.getId();
    }

• 새 글을 작성하고 상세 보기 페이지로 넘어갈 수 있도록 컨트롤에서 리다이렉트
• getId() : Article 엔티티 클래스에 @Getter 애노테이션 추가

6.2.4 <상세 페이지> → <목록 페이지> 돌아가기

<a href="/articles">Go to Articles List</a>

6.2.5 <목록 페이지> → <상세 페이지> 돌아가기

<td><a href="/articles/{{id}}">{{title}}</a></td>

 

 

 

🚀 1분 퀴즈

빈칸에 들어갈 용어를 쓰세요

• ( <a> )(이)란 특정 페이지로 이동하는 HTML 태그로, 클릭 시 href 속성에 적힌 URL 주소로 요청을 보냅니다.
• ( 리다이렉트 )(이)란 컨트롤러의 특정 메서드 수행을 종료한 후 계속해서 처리할 다음 요청 주소를 지시하는 것입니다. 이를 통해 분리된 기능을 연속적인 하나의 흐름으로 연결할 수 있습니다.

 

✅ 셀프 체크

• 회원가입, 멤버목록, 상세보기 페이지 이동 구현

 

🏓 더 알아 볼 내용

1. @Getter

• @Getter는 롬복을 이용해 Getter를 자동으로 생성해 주는 애노테이션
• 자바에서 전통적으로 사용해온 메서드로, 외부에서 해당 클래스의 필드 값을 읽어올 때 사용

2. HTTP Redirect

• 페이지 리다이렉트는 비일비재 하게 발생함
• 페이지 리다이렉트와 관련 된 HTTP 상태 코드는 300번 대에 존재
• 가장 많이 사용되는 302번 상태 코드에 대해 알아보자
  • 302번 상태 코드는 클라이언트가 요청한 리소스에 대한 응답으로 서버가 설정한 임의로 URL 로 리다이렉트 됐음을 나타내는 상태 코드
  • A 페이지에서 B 페이지로 가는 C 링크 클릭
    1. C 링크를 클릭하는 순간 브라우저는 서버에 GET 요청
    2. 서버는 해당 요청을 처리한 후 응답으로 HTTP 메시지 헤더에 새 URL을 담아 보내면서 302번 상태 코드를 응답
    3. 이는 헤더에 지정된 URL로 임시로 이동 됐음을 의미합니다. 실제로 브라우저는 헤더에 있는 URL로 리다이렉트
  • 302번 상태 코드는 검색 엔진에서 새로 리다이렉트 된 URL을 업데이트를 하지 않는다는 특징
  • 검색 엔진은 원래 클라이언트가 요구했던 B 페이지 정보를 그대로 가지고 있음
    • 302번 상태 코드에 대한 자세한 내용은 다음 링크를 참고
    • https://developer.mozilla.org/ko/docs/Web/HTTP/Status/302

🥕멘토 TIP

• HTTP 응답 번호에 대해 자세히 알고 싶다면 아래 링크에서 확인해 보세요.
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

⇒ 100번 대 : 정보 응답 / 200번 대 : 성공 응답 / 300번 대 : 리다이렉트 메세지 / 400번 대 : 클라이언트 에러 응답 / 500번 대 : 서버 에러 응답