6일차

~6.2 링크와 리다이렉트를 이용해 페이지 연결하기(종이책 p.183~196)

6장 게시판 내 페이지 이동하기

6.1 링크와 리다이렉트란

이 장에서는 게시판 내 페이지 이동을 구현해본다.

앞에서 만든 /articles, 즉 목록 페이지에 링크와 리다이렉트 기능을 이용해 구현한다.

링크(link)란 미리 정해 놓은 요청을 간편히 전송하는 기능으로, 보통 페이지 이동을 위해 사용한다. HTML의 <a> 태그 혹은 <form> 태그로 작성하며, 클라이언트가 링크를 통해 어느 페이지로 이동하겠다고 요청하면 서버는 결과 페이지를 응답한다.

리다이렉트(redirect)란 클라이언트가 보낸 요청을 마친 후 계속해서 처리할 다음 요청 주소를 재지시하는 것. 이를 통해 분리된 기능을 하나의 연속적인 흐름으로 연결할 수 있다.

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

기존에 만든 서비스에서는 localhost:8080/articles의 게시판에 새 글을 작성하기 위한 링크가 존재하지 않아 직접 localhost:8080/articles/new 페이지에 접속해야만 새 글을 작성할 수 있다는 문제점이 있었다.

전반적으로 게시판을 구성하는 페이지 간 연결 고리가 없었던 것이다.

새 글 작성 링크 만들기

localhost:8080/articles 페이지에 새 글을 작성할 수 있는 링크를 추가한다.

목록 페이지의 뷰 파일인 src/main/resources/templates/articles/index.mustache 파일을 열고 </table> 아래에 다음과 같은 코드를 추가한다.

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

• <a> 태그의 href 속성값으로 요청을 보낼 링크 주소인 “/articles/new”를 작성하고 링크를 걸 텍스트에는 “New Article” 이라고 작성한다.

이제 localhost:8080/articles 페이지에서 New Article이라는 링크를 클릭하면 새 글을 작성할 수 있는 페이지로 넘어간다.

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

입력 페이지의 뷰 파일인 new.mustache 파일의 Submit 버튼 코드 아래에 다음과 같은 코드를 추가한다.

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

• <a> 태그의 href 속성 값으로 “/articles”를 넣어 목록 페이지로 갈 수 있도록 하고 링크를 걸 텍스트는 Back으로 작성한다.

이제 localhost:8080/articles/new 페이지에서 Back 이라는 링크를 클릭하면 목록 페이지로 돌아간다.

<입력 페이지> → <상세 페이지> 이동하기

localhost:8080/articles/new 페이지에서 내용을 입력하고 Submit 버튼을 클릭하면 에러 페이지가 뜬다. DB에는 내용이 저장되지만 바로 확인할 수 있는 방법이 없다.

이때 사용하는 개념이 리다이렉트이다.

ArticleController의 createArticle() 메서드에서 폼 데이터를 받는데 createArticle() 메서드는 포스트 방식으로 “/articles/create”라는 URL 요청을 받아 폼 데이터를 처리한다. 리다이렉트는 코드의 마지막줄인 return 값에 정의한다.

리다이렉트는 클라이언트의 요청을 받아 새로운 URL 주소로 재요청하라고 지시하는 것으로 형식은 다음과 같다.

return “redirect:URL_주소”;

1. 등록한 글의 id에 따라서 URL 주소가 달라지므로 +연산자를 활용한다.

2. article을 saved 객체에 저장했으므로 saved.getId()를 호출하면 saved 객체의 id값을 가져올 수 있다.

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

3. getId() 메서드가 아직 정의되지 않았으므로 정의해준다.

   • getId()에 마우스를 올리면 나오는 메뉴에서 Create method ‘getId’ in ‘Article’을 클릭하여 Article.java 파일을 연다.
   • 직접 게터 메서드를 만들거나

   public Long getId() { // 주의, 데이터 타입을 String → Long으로 변경해주어야 함
   
   	return id;
   
   }
   

   • 롬복을 사용하면 된다.

   @Getter
   

이제 localhost:8080/articles/new에 접속하여 내용을 입력하고 Submit 버튼을 누르면 해당하는 id의 글의 상세 페이지가 나온다

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

상세 페이지의 URL인 articles/{id}를 받는 show()메서드의 return 문에서 show.mustache 파일을 반환하므로 show.mustache 파일에 코드를 추가한다.

</table> 아래에 <a> 태그를 추가하고 href 속성 값으로 목록 페이지의 URL인 “/articles”를, 링크 텍스트로 Go to Article List를 작성한다.

<a href=”/articles”>Go to Article List</a>

이제 localhost:8080/articles/{id} 페이지에서 Go to Article List 링크를 클릭하면 목록 페이지로 돌아간다.

<목록 페이지> → <상세 페이지> 이동하기

목록 페이지에서 제목을 클릭하면 해당 글의 상세 페이지로 이동하도록 만든다.

1. 목록 페이지의 뷰 파일인 index.mustache 파일을 연다.
2. 게시글의 제목은 <td>{{title}}</td> 부분이므로 여기에 링크를 걸어줘야한다.
3. 다음과 같이 <a> 태그로 감싸주면 된다.

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

이제 목록 페이지에서 제목을 클릭하면 상세 페이지로 이동한다.