PRG(Post/Redirect/Get) 패턴과 예시

| PRG 패턴 

웹 개발에서 사용되는 패턴으로 사용자가 폼을 제출한 후 새로 고침을 누르면 동일한 데이터가 중복 제출되는 문제를 방지하기 위해 사용된다. 이럴 경우 동일 게시물이나 같은 주문이 반복되어 이루어 질 수 있다. 이 패턴은 다음과 같은 단계로 동작한다.

 

1. POST: 사용자가 웹 양식을 작성하고 제출하면, 데이터는 POST 요청을 통해 서버로 전송된다.
2. Redirect: 서버는 데이터를 처리한 후, 사용자를 다른 페이지로 리다이렉트(예: 성공 페이지, 리스트 페이지 등)한다. 이때 리다이렉트는 GET 요청을 사용한다.
3. GET: 브라우저는 서버로부터 받은 리다이렉션 지시에 따라 GET 요청을 하여 새 페이지를 로드한다.

 

이 패턴의 핵심은 POST 요청으로 데이터를 전송한 직후에 브라우저가 새로고침을 하더라도 GET 요청만 다시 수행되기 때문에, 데이터가 중복으로 서버에 전송되는 것을 방지하다는 것이다.

 

이를 통해 사용자 경험을 개선하고, 웹 어플리케이션의 신뢰도를 높일 수 있다.

 

 

 

| PRG 패턴 예시 - 게시판 글 등록

아래 예시는 관리자 페이지 신규 공지사항 등록기능에 관한 것이다.

 

1. 사용자는 아래 JSP에서 게시글을 관련 항목을 입력하고 등록한다. '저장'버튼 클릭시 javascript 함수가 작동하면서 컨트롤러에 POST 요청이 전달된다.

 

<section id="container">
    <div class="contents">
        <h2>공지사항 ${subTitle}</h2>

        <form name="insertNoticeBoardOne" method="post" enctype="multipart/form-data">
            <input type="hidden" name="noticeBoardSubType" value="${noticeBoardSubType}"/>
            <input type="hidden" id="editmode" name="editmode" value="${editmode}"/>
            
            <div class="inner">
                <div class="inputWrap">
                    <div class="gridWrap">
                        <!-- 제목 입력 필드 -->
                        <div>
                            <span>제목</span>
                            <input type="text" id="bbsTtl" name="noticeTitle" maxlength="200"/>
                        </div>
                        <!-- 작성자 정보  -->
                        <div>
                            <span>작성자</span>
                           
                        </div>
                        <!-- 작성일 입력 필드 -->
                        <div>
                            <span>작성일</span>
                            <div>
                                <input type="text" name="noticeFirstRegistPtm" readonly="readonly" class="no-border"/>
                            </div>
                        </div>
                        <!-- 내용 입력 필드 -->
                        <div>
                            <span>내용</span>
                            <textarea id="bbsCn" name="bbsCn" rows="10" cols="40" maxlength="4000"></textarea>
                        </div>
                        <!-- 파일 첨부 필드 -->
                        <div class="file-upload">
                            <span>파일첨부</span>
                            <div id="file_upload_posbl" class="board_attach2">
                                <input name="file_1" id="egovComFileUploader" type="file" multiple />
                                <div id="egovComFileList"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 버튼 영역 -->
                <div class="btnArea">
                    <ul>
                        <li>
                            <button type="button" onClick="goList()">목록</button>
                        </li>
                        <li>
                            <button type="button" onClick="editData()">저장</button>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</section>

 

2. POST : 컨트롤러에서는 웹에서 요청받은 insertAdminNoticeBoard메서드는 게시글 등록 프로세스를 실행한다. 서버에 저장이 끝난 뒤 목록 페이지로 리다이렉트한다.

 

3. GET: 브라우저는 서버로부터 받은 리다이렉션 지시에 따라 GET 요청을 하여 게시글 목록 페이지를 로드한다.

 

    @PostMapping(value = "/insertAdminNoticeBoard.do")
    public String insertAdminNoticeBoard(final MultipartHttpServletRequest multiRequest, NoticeBoardVO boardVO, ModelMap model) throws Exception {
        List<FileVO> result = null;
        String atchFileId = "";
        boardVO.setNoticeBoardType(4);

        final Map<String, MultipartFile> files = multiRequest.getFileMap();
        if (!files.isEmpty()) {
            result = fileUtil.parseFileInf(files, "BBS_", 0, "", "");
            atchFileId = fileMngService.insertFileInfs(result);
            boardVO.setAtchFileId(atchFileId);
        }
     
        announcementAdminSerivce.insertBoard(boardVO);

        model.addAttribute("editmode", "I");
        model.addAttribute("boardVO", boardVO);

        return "redirect:admin/selectAminNoticeBoardList.admin";
    }

    @GetMapping({"/Announcement.do","/Board.do", "/QnA.do"})
    public String selectAminNoticeBoardList(@ModelAttribute("searchVO") NoticeBoardVO searchVO,  HttpServletRequest request, ModelMap model){



        /* pageing setting */
        PaginationInfo paginationInfo = new PaginationInfo();
        paginationInfo.setCurrentPageNo(searchVO.getPageIndex());
        paginationInfo.setRecordCountPerPage(searchVO.getPageUnit());
        paginationInfo.setPageSize(searchVO.getPageSize());

        searchVO.setFirstIndex(paginationInfo.getFirstRecordIndex());
        searchVO.setLastIndex(paginationInfo.getLastRecordIndex());
        searchVO.setRecordCountPerPage(paginationInfo.getRecordCountPerPage());


        List<NoticeBoardVO> boardList = announcementAdminSerivce.selectBoardList(searchVO);

        int totCnt = announcementAdminSerivce.selectBoardListTotCnt(searchVO);
        paginationInfo.setTotalRecordCount(totCnt);
        model.addAttribute("boardList", boardList);

        model.addAttribute("noticeBoardSubType", searchVO.getNoticeBoardSubType());

        model.addAttribute("paginationInfo", paginationInfo);



        return "admin/AdminNoticeBoardList.admin";
    }