코딩자율학습단 스프링부트_6장

링크와 리다이렉트란

보통 웹 페이지를 보면 처음에 목록 페이지가 뜨고,

제목을 클릭하면 상세 페이지로 입력하고 글쓰기 버튼을 클릭하면 입력 페이지로 이동한다.

상세 페이지에서 목록 버튼을 클릭해 목록 페이지로도 돌아갈 수 있다.

이번 장에서는 이런 게시판 내 페이지 이동을 링크와 리다이렉트로 구현해 볼 것이다.

링크란 미리 정해 놓은 요청을 간편히 전송하는 기능으로 페이지 이동을 위해 사용한다.

어떤 경우 서버에서 결과 페이지를 응답하지 않고 재요청하라는 회신을 보내기도 하는데 이것이 리다이렉트이다.

리다이렉트를 지시받은 클라이언트는 해당 주소로 다시 요청을 보내고 서버는 이에 대한 결과를 응답한다.

---

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

기존에 만든 서비스의 문제점을 분석해 보자면 첫 번째는 목록 페이지에 새 글 작성 링크가 없다는 것이다.

직접 'localhost:8080/articles/new'로 접속해야만 새 글을 작성할 수 있다.

또한 입력 페이지에도 문제가 있는데 새 글 작성 후 다시 목록으로 돌아가는 버튼이 존재하지 않는다는 문제점도 있다.

먼저 'localhost:8080/articles'로 접속했을 때 새 글을 작성할 수 있는 링크를 추가해 보도록 할 것이다.

index.mustache에 아래 코드를 추가해서 링크 이동을 시켜준다.

<a class="btn btn-dark m-2" href="/articles/new">New Article</a>

 

다음은 입력 페이지에도 다시 목록으로 돌아가는 링크를 추가해준다.

<a class="btn btn-dark m-2" href="/articles">Back</a>

세 번째는 입력 페이지에서 상세 페이지로 이동하기이다.

이 때 사용하는 개념이 리다이렉트인데 입력 페이지에서 데이터를 전송하면 createArticle() 메서드에서 폼 데이터를 받았다.

createArticle() 메서드의 return문에다가 리다이렉트를 아래와 같이 작성해주면 된다.

return "redirect:/articles/" + saved.getId();

그러면 getId() 메서드가 빨간색으로 표시될 텐데 해당 메서드가 정의되지 않았다는 뜻이므로 메서드를 만들어주면 된다.

Article 파일로 가서 롬복을 추가했으니 @Getter 어노테이션으로 추가해주면 된다.

네 번째는 상세 페이지에서 목록 페이지로 돌아가기이다.

show.mustache파일에 아래 코드로 링크를 추가해 주면 된다.

<a class="btn btn-dark m-2" href="/articles">Go to Article List</a>

마지막은 목록에서 상세페이지로 이동하기이다.

게시글의 제목에다가 링크를 걸어주어 제목을 클릭 시 상세페이지로 이동하도록 수정해주면 된다.

<td><a href="/articles/{{id}}" class="btn-outline-light">{{title}}</a></td>

6장 까지의 index 뷰 화면은 아래와 같다.