[코딩 자율학습 스프링 부트 3 자바 백엔드 개발 입문] 6장. 게시판 내 페이지 이동하기

Posted May 30, 2026 Updated Jun 3, 2026

By Shin-SuBin

views 19 min read

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

6.1 링크와 리다이렉트란

일반적인 웹 게시판은 목록 페이지(index), 상세 페이지(show), 입력 페이지(new) 간의 전환을 통해 기능이 수행된다. 본 장에서는 링크와 리다이렉트 메커니즘을 적용하여 이들 페이지 간의 유기적인 이동 흐름을 구현한다.

링크(Link): 클라이언트가 서버로 미리 정의된 URL 요청을 간편하게 전송할 수 있도록 뷰 레이어에 매핑하는 기능이다. HTML의 <a> 태그나 <form> 태그를 사용하여 구현하며, 클라이언트가 링크를 통해 요청을 전송하면 서버는 이에 상응하는 결과 뷰 페이지를 응답한다.
리다이렉트(Redirect): 서버가 클라이언트로부터 수신한 특정 요청 작업을 완료한 후, 브라우저가 연속해서 수행해야 할 다음 타겟 요청 주소(URL)를 재지시하는 기능이다. 리다이렉트 명령을 전달받은 클라이언트 브라우저는 해당 주소로 서버에 다시 요청을 보내고, 서버는 최종 결과 페이지를 응답하게 된다. 이를 활용하면 독립적으로 분리된 비즈니스 로직들을 하나의 연속적인 사용자 흐름으로 연결할 수 있다.

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

기존에 구현된 상태는 게시판을 구성하는 각 페이지 간의 연결 구조가 설정되어 있지 않아 사용성이 낮다. 목록 페이지 내에 입력 페이지로 전환할 수 있는 연결 고리가 없어 브라우저 주소창에 /articles/new 경로를 수동으로 입력해야 이동이 가능하며 , 입력 페이지 내부에도 작업을 중단하고 이전 목록으로 돌아가는 기능이 누락되어 있다. 링크와 리다이렉트 구성을 통해 이러한 구조적 문제를 해결한다.

6.2.1 새 글 작성 링크 만들기

목록 페이지 화면에서 신규 글 작성 페이지로 진입할 수 있는 하이퍼링크를 추가한다.

목록 페이지의 뷰 파일인 src > main > resources > templates > articles > index.mustache 파일을 연다 . 소스 코드의 </table> 태그 바로 하단 영역에 가변 입력 페이지 주소인 "/articles/new"를 목적지로 정의하는 <a> 태그 코드를 작성한다.

2화면 동작 확인: 통합개발환경의 빌드(망치 모양 아이콘) 프로세스를 클릭하여 소스를 갱신한 후, 브라우저를 통해 localhost:8080/articles/new 경로 화면을 새로고침한다. 기존 버튼 우측 옆에 Back이라는 하이퍼링크 문구가 새로 나타난 것을 확인하고, 이를 클릭하여 메인 목록 화면으로 안정적으로 복귀하는지 테스트한다.

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

새 게시글의 작성을 전면 취소하고 원래 가동 중이던 게시판의 메인 전체 목록 화면으로 유연하게 복귀할 수 있는 경로 통로를 추가한다.

입력 뷰 파일 수정: 입력 폼 양식을 구성하는 new.mustache 템플릿 파일을 화면에 연다. 기존에 구현되어 있는 [Submit] 제출 버튼의 아래쪽 위치에 전체 목록 조회 경로인 /articles를 가리키도록 설정하고 노출될 텍스트 인자를 Back으로 명시한 <a> 태그 코드를 추가로 배치한다.

  
<button type="submit" class="btn btn-primary">Submit</button>
<a href="/articles">Back</a>
</form>

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

현재 구현 상태에서는 localhost:8080/articles/new 화면으로 진입하여 테스트용 제목과 내용을 입력하고 [Submit] 버튼을 클릭해 전송 처리를 완료하면, 백엔드 데이터베이스 시스템에는 정상적으로 레코드가 적재되지만 화면상에는 최종 처리 에러 페이지(Whitelabel Error Page)가 강제 표출되는 결함이 있다. 사용자가 새 데이터를 등록하는 행위를 정상 종료한 직후, 시스템이 방금 생성한 구체적인 게시글 정보를 지체 없이 조회할 수 있도록 리다이렉트 아키텍처를 결합해 주어야 한다.

컨트롤러 처리 로직 반환형 수정: 클라이언트가 전송한 폼 데이터를 최초로 전송받아 가공하는 컨트롤러 영역은 ArticleController 클래스 내에 정의된 createArticle() 메서드다. 해당 메서드는 HTTP POST 프로토콜 방식으로 전송되는 /articles/create 가변 URL 경로 요청을 매핑하여 처리 연산을 담당하는데, 소스 코드의 마지막 반환 구문이 공백 문자열("") 상태로 고정되어 있어 후속 처리를 진행하지 못하고 시스템 에러 화면을 발생시킨다.
스프링 웹 애플리케이션 프레임워크 상에서 특정 처리를 종결한 직후 브라우저에게 새로운 대상 주소로 재요청할 것을 명령하기 위해서는 명세 구조상 return "redirect:재요청_할_URL_주소"; 형식을 반환해야 한다. 본 기능에서는 새롭게 데이터베이스 영속성 레이어에 성공적으로 세이브되어 영구 할당된 레코드 객체(saved)의 실제 고유 식별자 고유 코드 값에 정밀하게 대응되도록 구현해야 하므로, 자바의 문자열 연결 연산자(+)를 적용하여 saved.getId() 공통 메서드가 반환하는 정수 키 값을 결합한 동적 리다이렉트 문자열 구문을 구성한다.

  
@PostMapping("/articles/create")
public String createArticle(ArticleForm form) {
    // ... (중략: 데이터 폼 수신 및 엔티티 변환 작업 수행) ...

    // 리파지터리 레이어를 통해 데이터베이스에 엔티티 객체 최종 영속화
    Article saved = articleRepository.save(article);

    // 저장된 데이터의 ID 값을 동적으로 결합하여 상세조회 URL로 리다이렉트 지시
    return "redirect:/articles/" + saved.getId();
}

엔티티 데이터 게터(Getter) 구성: 위의 리다이렉트 구문을 컨트롤러에 추가하면 소스 내 getId() 메서드 호출 부분에 붉은색 밑줄과 함께 컴파일 차단 에러 표시가 발생한다. 해당 현상은 외부 클래스 레이어에서 Article 객체 내부에 감추어진 캡슐화 필드 데이터에 직접 접근하여 값을 읽어낼 수 있는 정보 접근용 게터(Getter) 메서드가 도메인 엔티티 클래스 내에 정의되어 있지 않아 발생한다.
Article.java 엔티티 소스 코드 내부에 수동으로 접근 메서드를 하나씩 코딩할 수도 있으나, 프로젝트 구조를 깨끗하게 유지하기 위해 자바 소스를 간소화해 주는 롬복 라이브러리의 @Getter 어노테이션을 클래스 선언부 위에 부여하는 자동화 방식을 적용한다 . 해당 패키지 데코레이터 설정이 완료되면 참조 관계가 성립되어 컨트롤러에 표출되던 컴파일 에러 라인이 정상 삭제된다.
1차 흐름 검증 실행: 서버 인스턴스 프로세스를 재가동한 뒤, 웹 브라우저 창에서 새 글 생성 화면 경로인 localhost:8080/articles/new로 재접속한다. 제목 열에 임의의 텍스트(예: 가가가가)를 채우고 내용에 테스트 값(예: 1111)을 기입한 뒤 [Submit] 버튼을 누른다. 이제 시스템 가동 실패 화면이 나타나지 않으며, 브라우저 상단 주소창의 URL 경로가 실시간으로 articles/1 주소 체계로 강제 리다이렉트 전환되면서 첫 번째 데이터 행의 완벽한 상세조회 화면이 노출되는 것을 볼 수 있다.
2차 연속성 검증 실행: 사용 중이던 웹 브라우저 제어 도구창의 뒤로 가기 화살표 버튼을 클릭하여 직전 입력 폼 화면으로 돌아간 뒤, 다시 한번 차순위 가상의 데이터인 ‘나나나나’ 및 ‘2222’ 문자열을 입력 상자에 대입하고 전송 명령을 내린다. 데이터 처리 흐름이 순차적으로 작동하면서 데이터베이스 할당 일련번호 연산에 맞추어 articles/2 URL 경로의 화면으로 막힘없이 연결되는 것을 최종 확인한다.

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

단일 게시글 데이터의 상세 내역을 나타내는 독자적인 상세 보기 화면 레이아웃 구조에서, 전체 글의 목록들이 나열된 메인 대시보드로 안전하게 복귀할 수 있는 이정표 링크 시스템을 설계합니다.

제어 컨트롤러 메서드 및 대상 뷰 파일 식별: URL 공통 식별 경로 체계인 articles/{id} 요청 패턴을 수신하여 전담 제어하는 컨트롤러 내의 타겟 코드는 ArticleController 클래스에 배정된 show() 메서드다 . 소스 코드를 분석해 보면 이 메서드는 가공이 종결되는 시점에 articles/show 템플릿 파일 명칭을 뷰 리졸버로 넘겨주므로, 수정 제어권을 적용해야 할 가시적인 대상 파일은 show.mustache 파일임을 정확히 도출해 낼 수 있다.
상세 뷰 파일 수정: 식별된 show.mustache 파일을 연다. 상세 테이블 레이아웃을 표현하는 </table> 닫는 태그의 아래 공간을 찾아, 게시판 목록 조회용 고정 URL인 /articles 경로로 대상을 바인딩하고 가시적 노출 키워드를 Go to Article List로 코딩한 <a> 태그 내비게이터를 배치한다.
화면 동작 확인: 변경 소스를 컴파일하기 위해 망치 버튼을 눌러 프로젝트 빌드를 실행하고, 브라우저 환경에서 구현된 두 번째 글 상세조회 화면 주소(localhost:8080/articles/2)로 재접근하여 새로고침 처리를 가한다. 레이아웃 최하단 영역에 출력된 Go to Article List 링크 텍스트를 마우스로 선택했을 때, 전체 리스트가 바인딩된 메인 게시판 목록으로 온전하게 전향 복귀하는지 동작을 테스트한다.

6.2.5 <목록 페이지=""> → <상세 페이지=""> 이동가기

메인 목록 화면 페이지에 행 단위로 나열되어 출력된 여러 건의 데이터 행 중에서, 특정 데이터 라인의 제목 텍스트 속성을 마우스로 클릭했을 때 해당 레코드가 보유한 고유 가변 식별자(id) 상세 페이지 경로로 동적 타겟팅되어 다이렉트 전환되도록 하이퍼링크 인프라를 완성한다.

목록 뷰 파일 내 동적 바인딩: 목록 레이아웃 처리를 총괄하는 index.mustache 소스 파일을 편집기에 로드한다. 순회 렌더링 블록 내에서 순수한 데이터베이스 내 제목 인자를 문자열 형태로 뿌려주고 있는 구문인 <td>{title}</td> 영역을 찾는다. 출력 대상 문구인 {title} 변수 외곽 전체를 HTML <a> 태그로 감싸주어 마우스 트리거를 활성화하되, 이때 요청을 타겟팅할 세부적인 목적지 href 속성인 값의 구성에는 각 데이터 모델 요소가 보유한 정수형 데이터 식별 변수를 이중 중괄호 문법으로 실시간 매핑하도록 href="/articles/{id}" 구조의 표현식으로 소스 코드를 개정한다.
통합 연동 흐름 확인: 빌드 프로세스를 마무리 짓고 최종 목록 페이지 화면(localhost:8080/articles)으로 진입하여 새로고침 명령을 가한다. 출력 테이블 내의 제목 열 셀 데이터 값들에 연동용 하이퍼링크 언더라인 포맷이 일제히 활성화된 것을 볼 수 있다. 적재된 첫 번째 레코드 항목의 제목 텍스트를 누르면 주소창 경로가 /articles/1 코드로 변환되며 세부 화면으로 수월하게 이동하고, 뒤이어 다시 목록으로 빠져나온 뒤 두 번째 레코드 항목의 제목 요소를 누르면 가변 매핑 규칙에 유기적으로 상응하여 /articles/2 상세 화면으로 안전하게 연결 이동함을 실증할 수 있다.

ECC, Team-Project-BE, springboot3

This post is licensed under CC BY 4.0 by the author.