1. 페이지 이동.

• 링크(Link)

  • 미리 정해 놓은 요청을 간단히 전송하는 기능.
  • 페이지 이동을 위해서 사용됨.
  • HTML의 <a> 태그 or <form> 태그로 작성.
  • 클라이언트가 링크를 통해 페이지를 요청하면 서버는 결과 페이지는 응답 함.

• 리다이렉트(Redirect)

  • 클라이언트가 보낸 요청을 마친 후 계속해서 처리할 다음 요청 주소를 재지시하는 것.
    • 서버에서 결과 페이지를 응답하지 않고 재요청하라는 회신을 보내는 것.
    • 분리된 기능을 하나의 연속적인 흐름으로 연결할 수 있음.
  • 리다이렉트(재요청)를 지시 받은 클라이언트는 해당 주소로 다시 요청을 보내고 서버는 이에 대한 결과를 응답함.

---

2. 페이지 연결.

• 링크, 리다이렉트를 이용함.

• 뷰 파일에 링크 거는 형식.

<a href="URL 주소">링크를 걸 대상</a>

• 리다이렉트 형식.

return "redirect:URL_주소";

---

2-1. 목록 페이지 -> 글 작성 페이지.

• 글 목록 페이지 파일에 <a> 태그의 href 속성 값으로 요청을 보낼 링크 주소 + 텍스트작성.

<!-- 생략 -->
</table>

<a href="/articles/new" class="btn btn-primary">글 쓰기</a>

{{>layouts/footer}}

웹 페이지에서 잘 구현된 모습.

---

2-2. 글 작성 페이지 -> 목록 페이지.

• 글 작성 페이지 파일에서도 마찬가지로 <a> 태그의 href속성 값으로 요청을 보낼 링크 주소 + 텍스트작성.

<!-- 생략 -->
	<button type="submit" class="btn btn-primary">등록</button>

    <a href="/articles" class="btn btn-warning">뒤로가기</a>
</form>
<!-- 생략 -->

웹 페이지에서 잘 구현된 모습.

---

2-3. 글 작성 페이지 -> 글 상세 페이지.

• 게시판에 글을 쓰고 나면 DB에 저장 되겠지만 글이 제대로 잘 등록됐는 지 확인하고 싶음.
  • 즉, 글을 작성하고 나면 해당 글의 상세 페이지로 이동.
  • 이때 사용하는 개념이 바로 리다이렉트임.
    • 리다이렉트는 클라이언트의 요청을 받아서 새로운 URL 주소로 재요청하라고 지시하는 것.

• 여기서 한 가지 생각해봐야 될 점이 있음.
  • 글을 작성하게 되면 매번 URL이 바뀜.
  • Ex 1번 글은 /1, 2번 글은 /2, 100번째 글은 /100식으로 됨.
    • 이를 해결하기 위해서는 + 연산자를 이용해서 id에 따라 URL주소가 바뀌게 해주면 됨.

@PostMapping("/articles/create")
    public String createArticle(ArticleForm form) {
        // 코드 생략.
        Article saved = articleRepository.save(article);
        return "redirect:/articles/" + saved.getId();
    }

• repository의 save메서드의 반환값을 저장한 변수로 부터 getId()를 통해 id값만 추출함.
  • 반환 타입의 클래스(Article)에 getter 메서드가 있거나 @Getter 어노테이션이 있어야됨.
    • Getter : 외부에서 객체의 데이터를 읽을 때 사용하는 메서드.

---

2-4. 글 상세 페이지 -> 글 목록 페이지.

• 글 상세 페이지 파일에서 <a> 태그의 href속성 값으로 요청을 보낼 링크 주소 + 텍스트작성.

<!-- 코드 생략 -->
</table>

<a href="/articles" class="btn btn-primary">목록</a>

{{>layouts/footer}}

---

2-5. 글 목록 페이지 -> 글 상세 페이지.

• 글의 제목을 클릭하면 글 상세 페이지로 이동하도록.
  • 기존에 있던 게시글의 제목인 {{title}}을 <a> 태그로 감싸고 href 속성 값으로 주소를 입력해주면 됨.

    {{#articleList}}
    <tr>
        <th>{{id}}</th>
        <td><a href="/articles/{{id}}">{{title}}</a></td>
        <td>{{content}}</td>
    </tr>
    {{/articleList}}

3. 참고

토스 : 리다이렉트