게시판 내 페이지 이동

[wongakim-99]

웹 페이지 간에 자연스러운 이동을 위해 링크와 리다이렉트를 어떻게 적용하는지 확인

[wongakim-99]

링크와 리다이렉트

▲게시판 내 페이지 이동

이번 이슈에서는 이러한 게시판 내 페이지 이동을 구현해 볼려고 한다. 앞에서 만든 /articles, 즉 목록 페이지에 링크와 리다이렉트라는 기능을 이용할려고 한다.

링크(link)란 미리 정해 놓은 요청을 간편히 전송하는 기능으로, 보통 페이지 이동을 위해 사용한다. HTML의 태그 혹은

태그로 작성하며, 클라이언트가 링크를 통해 어느 페이지로 이동하겠다고 요청하면 서버는 결과 페이지를 응답한다.

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

예를들어 공무원 민원 전화를 생각해보자. 어떤 민원을 처리하기 위해 병무청에 전화했다고 가정하자. 병무청은 일의 일부만 처리하고 "아 이거는 우리부서 담당 아니에요~b부서에 문의해보세요~" 라고 말하며 전화 돌리기를 할 것이다. 그 다음 다른 부서로 전화하면 "이것도 우리업무 아니에요~c부서로 문의해보세요~" 라고 할 것이다.

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

▲리다이렉트의 개념

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

현재 문제점

1. 새 글을 작성하기 위한 링크가 존재 X
2. localhost:8080/articles/new 페이지에 접속해야만 새 글 작성 가능

[wongakim-99]

새 글 작성 링크 만들기

template>articles>index.mustache 파일에 New Article 추가

[wongakim-99]

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

template>articles>new.mustache 파일에서 submit 버튼 밑에

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

[wongakim-99]

<입력 페이지> ---> <상세 페이지> 이동

여기서 사용하는 개념이 리다이렉트.

입력 페이지에서 데이터를 전송하면 어디로 갔는지 기억하는가? ArticleController의 createArticle() 메서드에서 폼 데이터를 받았다. createArticle() 메서든 포스트(post) 방식으로 "/articles/create" 라는 URL 요청을 받아 폼 데이터를 처리한다. 코드의 마지막 줄을 보면 return 값이 공백 문자열 "" 이다. -> 리다이렉트는 여기에 정의

형식

return "redirect:URL_주소";

예를들어 return "redirect:/articles"; 라고 하면 목록 페이지로 재요청하라는 지시임.

그런데 등록한 새 글의 id가 1번이면 articles/1 페이지를, 2번이면 articles/2 페이지를, 3번이면 articles/3 페이지를 재요청하라고 지시하고 싶다면 어케 해야 할까? -----> + 연산자를 사용해 id에 따라 URL 주소가 달라지게 하면 됨.

이를 위해 saved 객체를 이용. return 문 위의 코드를 보면 article을 saved 객체에 저장. 따라서 saved.getId() 를 호출하면 saved 객체의 id 값을 가져올 수 있다.

이렇게 가져온 id값이 1이면 articles/1 이 되고, 2면 articles/2, 3이면 articles/3 이 되어 id에 따른 재요청 URL을 완성할 수 있음.

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

getId() 빨간줄 해결 ---> Entity 패키지에 Article 클래스로 가서 직점 롬복 추가(getter 메서드를 만들어도 됨.)

[wongakim-99]

<상세 페이지> ---> <목록 페이지>

상세 페이지 -> 목록 페이지로 돌아갈 수 있게 링크 추가

상세 페이지의 URL인 articles/{id}를 받는 컨트롤러의 메서드. ArticleController에 가면 show() 라는 메서드. 이 메서드의 return 문을 보면 show라는 머스테치 파일, 즉 뷰 파일을 반환. 따라서 show.mustache 파일에 링크 추가

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

[wongakim-99]

<목록 페이지> ---> <상세 페이지>

목록 페이지의 뷰 파일인 index.mustache를 열면, 게시글의 제목은 {{title}}이므로 여기다가 링크를 걸면 됨. {{title}}을 태그로 감싸고 href 속성 값으로 "/articles/{{id}}"를 입력한다.

이렇게 하면 id가 1번인 게시글의 제목을 클릭하면 /articles/1 페이지로, 2번인 제목을 클릭하면 /articles/2 페이지로 이동

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

확인 췍

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

마무리

1. 링크

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

2. 리다이렉트

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

3. 뷰 파일에 링크 걸기

   • 태그를 이용해 다음과 같은 형식으로 작성

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

4. 리다이렉트 정의

   • return 문을 사용해 다음과 같은 형식으로 작성

     return "redirect:URL_주소";