Backend/Spring

[Spring] 게시판 내 페이지 이동하기 (링크와 리다이렉트)

희디 2023. 8. 21. 22:23

링크와 리다이렉트

링크(link)

: 미리 정해 놓은 요청을 간편히 전송하는 기능, 보통 페이지 이동을 위해 사용함. 

HTML의 <a> 태그 또는 <form> 태그로 작성.

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

But, 어떤 경우에는 서버에서 재요청하라는 회신을 보내기도 함. 

 

리다이렉트(재요청) 

: 클라이언트가 보낸 요청을 마친 후, 계속해서 처리할 다음 요청 주소를 재지시

           -> 분리된 기능을 하나의 연속적인 흐름으로 연결가능. 

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

책 이미지를 직접 찍어 올림.

 

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

 

목록 페이지에서 새 글 작성하기

목록이 모아져있는 index.mustache에서 새 글을 작성할 수 있게 a 태그를 추가한다.

 

 

입력 페이지에서 목록 페이지로 돌아가는 링크 추가

new.mustache에서 버튼 태그 다음에 a 태그를 추가해준다. 

 

왼쪽에서 Back을 누르면 오른쪽 페이지로 이동하는 Back 링크

 

입력 페이지에서 상세 페이지로 이동하기 

새 글을 작성한 후 Submit 버튼을 누르면 지금까지 계속 에러 페이지가 나왔던 것을 기억할 것이다. 

그래서! submit을 입력하면 내가 쓴 글이 나오게 상세페이지가 뜰 수 있게 만드는 개념이 바로 리다이렉트 개념 

articles/new에서 작성한 내용이 submit을 누르면 @PostMapping으로 인해 /articles/create에서 폼 데이터를 처리를 했다. 그러고나서, 클라이언트의 요청을 받아 새로운 URL 주소로 재요청을 하라고 지시해야 입력한 글을 확인할 수 있다. 

바로 /articles/1처럼 아이디에 맞게 페이지를 재요청하라는 지시이다. 

 

☞ 그러니까 articles/create란 요청을 끝내고 다음 주소인 /articles/id으로 재요청을 하고, 재요청을 받은 클라이언트는 해당 주소로 다시 요청을 내고 서버는 이에 대한 결과를 응답하는 것! 

 

리다이렉트 형식은 다음과 같다. 

return "redirect:URL주소";

해당 아이디를 가진 페이지로 이동하기 위해 article을 saved에 저장을 했고, 이것을 getId()로 값을 가져와 재요청 URL을 완성할 수 있다. 

 

Id를 get하기 위해서 Article 클래스에서 getter를 만들어주는데, Long으로 바꿔줘야한다. 

하지만, getter도 어노테이션이 있다. 바로 @Getter

 

 

상세페이지에서 목록페이지로 돌아가기

 

상세페이지인 articles/show.mustache에 가서 목록이 있는 /articles로 이동하게 a 태그 생성하기.

(/articles/{id}에서 보여지는 것이 뷰 템플릿인 /articles/show인것을 다시 remind) 

/articles에서는 index.mustache를 보여주는 것.

 

목록페이지에서 상세페이지로 이동하기 

 

바로 title에 a 태그를 삽입해서 링크를 걸어주면 된다. 

그래서 제목을 누르면 해당 상세페이지로 이동할 수 있게. 해당 페이지는 show.mustache를 보여준다.

[내용 출처] : https://www.gilbut.co.kr/book/view?bookcode=BN003778&keyword=%EC%8A%A4%ED%94%84%EB%A7%81&collection=GB_BOOK 

 

코딩 자율학습 스프링 부트 3 자바 백엔드 개발 입문

만들면서 배우는 친절한 백엔드 개발 자습서

www.gilbut.co.kr