[FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 등록 /수정

 

 

 

🧑🏻‍💻 Git Hub 주소

 

 

 

🗂 목차

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Home / Main

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 목록 조회

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 상세 조회

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 등록 / 수정

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 삭제

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 등록 / 수정

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 삭제

 

👨‍👩‍👧‍👦 회원 관련

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 회원 관련 : 회원 가입

 

- 부 록 -

[Vue.js] axios 설치

[FrontEnd] html Tag 정리

[CSS] CSS 정리

[FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Paging 처리

[Vue.js] 기초 개념 정리 - Vue Router

 

 

 

 

 

 

 

🚀 게시판 만들기 - 등록 / 수정

    🔽  화면 - 등록

 

 

 

    🔽  화면 - 수정

 

 

 

 

 

    🔽  Source Code

<template>
    <!-- 컨텐츠 영역 -->
    <div id="contentWrap">

        <div id="topVisualWrap">
            
            <div class="topVisual">
                <p class="tit01">[JUNY COMPANY] 개발자 업무 협업 서비스 위한</p>

                <p class="tit02">인공지능 클라우드 주니하랑 플랫폼 <span></span></p>
            </div>  <!-- div class="topVisual" 끝 -->

        </div>  <!-- div id="topVisualWrap" 끝 -->

        <!-- 컨텐츠 영역 -->
        <div id="Content">
            <h2>
                <span>개발 지원</span>

                <span @click="goList()"><b>Q&A</b></span>
            </h2>

            <div class="ListTbWrap mt-20">
                
                <div class="margin-left:5px;margin-bottom:5px;">
                    <input type="checkbox" name="" id="result01" :checked="devInquryData.secretAt === false" v-model="devInquryData.secretAt" value=false>
                    <label for="result01">
                        <span></span>비밀글
                    </label>
                </div> <!-- div class="margin-left:5px;margin-bottom:5px;" 끝 -->

                <table class="tList">
                    <caption>Q&A 수정</caption>

                    <colgroup>
                        <col style="width:15%">
                        <col>
                    </colgroup>

                    <tbody>
                        <tr>
                            <td class="PalignL">제목
                                <span class="t_red">*</span>
                            </td>

                            <td class="PalignL">
                                <input id="" type="text" class="w100p" placeholder="제목을 입력 해 주세요!" v-model="devInquryData.inqrySj" ref="inqrySj">
                            </td>
                        </tr>

                        <tr>
                            <td class="PalignL">내용
                                <span class="t_red">*</span>
                            </td>

                            <td class="PalignL">
                                <textarea class="w100p" rows="15" placeholder="내용을 입력 해 주세요!" v-model="devInquryData.inqryCn" ref="inqryCn"></textarea>
                            </td>
                        </tr>

                        <tr>
                            <td class="PalignL">첨부 파일</td>

                            <td class="PalignL">
                                <template v-if="devInquryData.isNew === 'C'">
                                    <input type="file" name="" @change="doFileChange">
                                </template>

                                <template v-else>
                                    <input type="file" name="" @change="doFileChange">

                                    <a href="#" class="attatch_file ml-10">{{ devInquryData.fileNm }}</a>

                                    <button type="button" class="btnFileDel" :hidden="isNew">삭제</button>
                                </template>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>  <!-- div class="ListTbWrap mt-20" 끝 -->

            <div class="btn_wrap">
                <a href="#" class="btn04" @click="doRegist()">{{ this.isNewText }}</a>

                <a href="#" class="btn03" @click="goList()">취 소</a>
            </div>  <!-- div class="btn_wrap" 끝 -->
        </div>  <!-- div id="Content" 끝 -->

    </div>  <!-- div id="contentWrap" 끝 -->

    <!-- Pop up -->
    <div class="card3_popup" style="display: block; top:160px;" v-show="this.finishPopupShow">

        <div class="popup_body">

            <!-- Message -->
            <div class="card_mody mt-20">
                <p class="c_tit">게시글 수정이 완료 되었습니다!</p>
            </div>  <!-- div class="card_mody mt-20" 끝 -->

            <div class="btn_wrap_pop">
                <button class="btn_m01 blue">확 인</button>
            </div>  <!-- div class="btn_wrap_pop" 끝 -->

            <div class="popup_close" @click="this.finishPopupShow = false">닫기</div>

        </div>  <!-- div class="popup_body" 끝 -->

        <!-- Pop up 끝 -->

    <!-- Pop up -->
    <div class="card3_popup" style="display: block; top:160px;" v-show="this.validationPopupShow">

        <div class="popup_body">

            <div class="card_mody mt-20">
                <p class="c_tit">필수 항목은 꼭 입력 해 주세요!</p>
            </div> <!-- div class="card_mody mt-20" 끝 -->

        </div>  <!-- div class="popup_body" 끝 -->

        <div class="btn_wrap_pop">
            <button class="btn_m01 blue" @click="this.validationPopupShow = false">확인</button>

            <div class="popup_close" @click="this.validationPopupShow = false">닫기</div>
        </div>  <!-- div class="btn_wrap_pop" 끝 -->

    </div> <!-- div class="card3_popup" 끝 -->        
 
    </div>  <!-- div class="card3_popup" style="display: block; top:160px;" v-show="this.finishPopupShow" 끝 -->
    <!-- Pop up 끝 -->
</template>

<script>
import { devInquryRegist, devInquryDetail } from "@/api/devInquryApi";

export default {
    data() {
        return {
            finishPopupShow : false,
            validationPopupShow : false,
            isNew : false,
            isNewText : '등 록',
            devInquryData : {secretAt : false},
        }
    }, // data() 끝

    created() {
        // 글 등록을 들어가기 위한 조건절 (status가 C이면 등록으로 처리)
        if(this.$route.query.status !== 'C') {
            this.isNew = false;
            this.isNewText = '수 정';
            this.getDetailView();
        } else {
            this.isNew = true;
            this.isNewText = '등 록';
        } // if(this.$route.query.status != 'C') 끝
    }, // created() 끝

    methods : {
        goList() {
            this.$router.push({
                path : "/support/devInquryList",
            });
        }, // goList() 끝

        goDetailView(inqurySn) {
            this.$router.push({
                path : "/support/devInquryDetailView",
                query : {
                    inqurySn
                } // query 끝
            });
        },

        getDetailView() {
          devInquryDetail({
              inqrySn : this.$route.query.inqrySn
            }).then(response => {
                console.log("응답으로 들어온 상세 조회 정보 : " + response.data);
                
                this.devInquryData = response.data.devInquryVO;

                console.log("현재 DevInquryRegist.vue의 this.devInquryData 값 :" + this.devInquryData);
            }).catch(error => {
                console.log("게시물 / 수정 과정을 위한 글 상세 조회에서 문제가 생겨 Catch문이 동작하였습니다!" + error + "문제 발생으로 목록 조회로 이동 됩니다.");
                this.goList();
            });
        }, // getView() 끝

        doRegist() {
            console.log("글 등록(doRegist\(\)) Method가 동작하였습니다! DevInquryRegist.vue의 Member 변수 inqurySj 값 : " + this.devInquryData.inqrySj);
            // 필수 입력 항목 검사를 위한 Validation 분기절 (제목)
            if(this.devInquryData.inqrySj === undefined || this.devInquryData.inqrySj === '') {
                this.validationPopupShow = true;
                this.$ref.inqrySj.focus();

                return false;
            }   // if(this.devInquryData.inqurySj == undefined || this.devInquryData.inqurySj == '') 끝

            // 필수 입력 항목 검사를 위한 Validation 분기절 (내용)
            if(this.devInquryData.inqryCn == undefined || this.devInquryData.inqryCn == '') {
                this.validationPopupShow = true;
                this.$ref.inquryCn.focus();

                return false;
            } // if(this.devInquryData.inqryCn == undefined || this.devInquryData.inqryCn == '' 끝

            // 글 등록을 위해 API를 호출해서 Backend에 내용 전달
            devInquryRegist(this.devInquryData).then(response => {
                console.log("글 등록을 위해 Back End에게 내용을 요청하고, 응답 받은 값 : " + response.data);
                alert("게시글 " + (this.isNew === true ? "등록" : "수정") + "이 완료 되었습니다!");

                // 작성된 게시글 상세 조회로 이동 시키기 위해 해당 Method 호출
                this.goDetailView(response.data.resultSn);
            }).catch(error => {
                console.log("글 등록을 처리하는 중에 문제가 발생하여 catch문이 동작 하였습니다!");
                alert("게시글 " + (this.isNew === true ? "등록을" : "수정을" + " 실패하였습니다! \r\n 관리자에게 문의 바랍니다!"));

                // 목록 조회로 이동 시키기 위해 해당 Method 호출
                this.goList();
            });
        }, //doRegist() 끝

        doFileChange(e) {},
    }, // methods 끝
}   // export default 끝
</script>

 

 

    🔽  Code 분석 - 등록

 

글 등록과 수정은 한 Component에서 모두 처리를 하고 있는 것이에요.
그렇기 때문에 이 곳에 등록과 수정을 모두 분석해서 정리 해 보도록 할 것이에요.

 

 

DevInquryRegist.vue - 23 ~ 32번째 줄

 

먼저 비밀글을 Check하여 비밀글인지 아닌지를 정해줄 수 있는 부분인 것이에요.

사실 주니하랑은 이 부분에서 꽤나 고생을 했던 것이에요.

바로 비밀글 CheckBox에 기본값이 초기화 되지 않아 NPE가 발생하는 문제인 것이에요.
이 문제는 '이 곳'에 정리하여 준비해 둔 것이에요.

 

27번째 줄을 보면 `:checked`를 통해 기본적으로 어떤 것이 선택되게 할 것인지 설정을 해 준것이에요.
위에서 발생했다는 문제를 살펴보면 사실 이 줄은 없어도 되는 것이에요.

그런 뒤 Data Bindding을 위해 v-model 속성을 이용하여 secretAt에 값을 Bindding 해 준 것이에요.

그리고, 하도 Error가 나서 HTML 속성 value를 통해 `false`를 넣어줬는데, 사실 이 부분도 지워도 상관 없는 부분인 것이에요.

 

<tbody>
    <tr>
        <td class="PalignL">제목
            <span class="t_red">*</span>
        </td>

        <td class="PalignL">
            <input id="" type="text" class="w100p" placeholder="제목을 입력 해 주세요!" v-model="devInquryData.inqrySj" ref="inqrySj">
        </td>
    </tr>

    <tr>
        <td class="PalignL">내용
            <span class="t_red">*</span>
        </td>

        <td class="PalignL">
            <textarea class="w100p" rows="15" placeholder="내용을 입력 해 주세요!" v-model="devInquryData.inqryCn" ref="inqryCn"></textarea>
        </td>
    </tr>

    <tr>
        <td class="PalignL">첨부 파일</td>

        <td class="PalignL">
            <template v-if="devInquryData.isNew === 'C'">
                <input type="file" name="" @change="doFileChange">
            </template>

            <template v-else>
                <input type="file" name="" @change="doFileChange">

                <a href="#" class="attatch_file ml-10">{{ devInquryData.fileNm }}</a>

                <button type="button" class="btnFileDel" :hidden="isNew">삭제</button>
            </template>
        </td>
    </tr>
</tbody>

반응형

 

실제로 글 등록 / 수정에 대한 Data를 입력 받고, 전달하는 부분이 모두 이 곳에 있기 때문에 이 곳을 분석해 보려는 것이에요.

제목을 입력 받는 곳을 보면 Data를 Bindding 해 주는데, devInquryData안에 게시글 제목(inqurySj)로 Bindding을 해 주는 것이에요. 그렇게 되면 

 

DevInquryRegist.vue - 140 ~ 148번째 줄

 

이 곳 146번째 줄 devInquryData 객체(Object)에 inqurySj라는 객체 이름과 함께 제목에서 입력 받은 값이 들어가게 될 것이에요.

그 다음 제목 받는 부분에 `ref=inqrySj`라는 부분이 있는데, 이것은 Templat refs라고 불리는 것이에요.

 

 

위와 같이 198번째 줄을 작성해 주면 doRegist()가 호출이 되고, 제목이 없을 때 해당 제목이 비었다는 것을 표시하기 위해 focus()를 호출하기 위해 이용하는 것이에요.

 

내용도 위와 같은 Logic으로 만들어 준 것이에요.

 

DevInquryRegist.vue - 64 ~ 77번째 줄

 

이번에는 첨부 파일에 대해 알아 볼 것이에요.

최초 67번째 줄을 보면 v-if을 통해 isNew라는 객체 값이 'C'인지를 확인하는 것이에요. 이 값이 'C'이면 등록 Logic을 수행하고, 'U'이면 수정 Logic을 처리하게 하기 위해 그렇답니다.

등록 Logic 수행이 맞다면 68번째 줄이 수행 되는데, <input> Tag로 속성 file을 넣어 File을 Upload할 수 있는 환경을 만들고, Event가 발생하게 되면 doFileChange라는 Method를 호출하게 되는 것이에요. 결국 이용자가 어떤 File을 선택하게 되면 해당 Method가 호출되는 것이에요.

 

 

이 부분은 아직 구현이 안 되었기 때문에 구현이 완료되면 다시 수정 하도록 할 것이에요.

 

다시 돌아오면 71번째 줄에는 isNew가 'C'가 아니라면?을 처리하는데, 이는 수정이 될 것이고, 같은 Logic을 처리하는 것이에요.

그리고, 74번째 줄처럼 파일 이름(fileNm)을 출력하게 해 둔 것이에요.

 

그런데, 업로드한 파일을 취소하고 싶을 수도 있는 것이에요. 이를 위해 76번째 줄에 button을 만들어 준 것이고, isNew를 이용자에게 보이지 않게 처리 해 버리는 것이에요. :hidden은 HTML에서 `type=hidden`과 같은 속성이고, 숨겨진 입력 필드는 Rendering이 끝난 웹 페이지에서는 전혀 보이지 않으며, 페이지 콘텐츠 내에서 그것을 볼 수 있게 만다는 방법도 없게 만들어 버리는 것이에요.

 

 

 

이 번에는 이 Button에 대해 알아 볼 것이에요.

 

DevInquryRegist.vue - 84 ~ 88번째 줄

 

85번째 줄을 보면 Click Event가 발생했을 때, doRegist()가 호출 되는 것이에요.

DevInquryRegist.vue - doRegist()

 

이 Method가 호출되면 해당 Method가 동작했다는 것을 알려주기 위한 console 출력이 발생하고, 게시글 제목(inqrySj)가 비어있거나, null인지를 판단해서 그게 맞다면 `validationPopupShow`를 true 값으로 바꿔 주는 것이에요. 

 

 

DevInquryRegist.vue - 114 ~ 122번째 줄

 

`validationPopupShow`가 true가 되버리면 위에 Popup창이 뜨게 되고, '필수 항목은 꼭 입력 해 주세요!'라는 Message를 담은 Pop up이 뜨게 되는 것이에요.

 

 

DevInquryRegist.vue - 125 ~ 127번째 줄

 

해당 Popup 창에는 두 개의 Button이 있는데, 하나는 `확인`과 또 다른 하나는`닫기`인 것이에요. 두 Button은 기능이 똑같은데, Click Event가 발생되면 `validationPopupShow` 변수에 값을 `false`로 바꿔 해당 Popup 창이 없어지는 효과를 만들어 주는 것이에요.

 

 

 

 

 

    🔽  Code 분석 - 수정

먼저 '글 수정'은 상세 보기 Page에서 가능한 것이에요.

 

위와 같이 '상세 보기' Page에서 `수정` Button을 Click하면 '수정'할 수 있는 Page로 있는데, '글 등록'과 동일한 Component가 Rendering되어 '수정' Logic을 수행할 수 있게 해 주었답니다!

 

DevInquryDetailView.vue - 115 ~ 117

 

위와 같이 DetailView Component의 Button이 선언 되어 있는 것이에요.

저 Button은 답글이 없어야지 보여지게 되는데, 그 이유는 115번째 줄에서 template Tag안에 v-if를 통해 답변 여부(answerAt)이 'Y'가 아니라면 즉, 'N'이라면 Rendering 해라! 라고 해준 것이에요.

그리고, <a> Tag를 클릭하게 되면 Click Event로 인해 `goRegist()`가 호출되는데, 이 때, 매개변수로 게시글 일련번호(inqrySn)을 가지고 가는 것이에요.

 

DevInquryList.vue - 210 ~ 271

 

위에는 '글 등록' Logic을 처리하기 위한 Method인데, 매개 변수가 없는 형태로 호출이 되게 생성이 되어 있고, 해당 Method가 호출이 되면 DevInquryRegist Component를 Re Rendering하게 되어 있는데, query를 이용하여 status를 'C'로 주어 '등록'이라는 Logic이 처리되게 해 주는 것이에요.
 

 

 

DevInquryDetailView.vue - 200 ~ 208

 

이번에는 '수정' Logic을 수행하기 위한 `goRegist` Method 에요. '수정'이라는 Logic은 어떤 게시글 상세 보기에서 이뤄져야 하는 것이에요. 그렇기 때문에 이 친구는 매개변수가 들어와야 동작을하고, 그 매개변수는 게시글 일련번호인 것이에요.

이 친구가 호출되게 되면 먼저 Router를 통해 DevInquryRegist Component를 Re Rendering하게 되고, '등록'과는 다르게 status에 값을 'U'로 주어 글 수정 Logic이 수행되도록 만들어 준 것이에요.

그럼 글 등록과 동일한 Component가 Renderinge 되는 것인데, 어떻게 기존에 입력되어 있던 내용을 가져오면서 '수정'이라는 Action을 취하게 해 주는 것일까요? 🤔

정답은 바로 아래 그림에 있는 것이에요.

 

DevInquryRegist.vue - created()

 

여기 created()를 보게 되면 해당 Component가 Rendering될 때, 이 Method가 동작하게 되는데, 최초 router에서 전달된 query라는 객체 안에 status의 값을 확인 하는 것이에요.

152번째 줄에 보면 'C'가 아니라면? 이라고 적혀 있고, '수정' Logic을 수행하게 되는데, 최초 `isNew`를 `false`를 설정하여 새로 만들어 지는 게시글이 아니라고 설정을 해주고, `isNewText`에는 자랑스런 우리나라 한글로 '수 정'!을 딱 입력 해 준 것이에요.

그런 뒤 마지막으로, `getDetailView()`를 호출함으로, 본격적으로 '수정' 이라는 Logic이 수행될 수 있도록 해 준 것이에요.

 

그럼 `getDetailView()`를 만나러 가봐야 겠어요! 🏃

 

DevInquryRegist.vue - getDetailView()

 

최초 이 Method가 호출되면 devInquryDetail을 호출하는데, 이 Method는 API로 Axios를 통해 Back End와 통신을 위해 정의한 Method인 것이에요. devInquryDetail을 호출 할 때, 212번째 줄을 보면 게시글 일련번호를 상세 조회 때 가지고 있던 것을 넘겨 주는 것을 볼 수 있는 것이에요.

 

devInquryApi.js - devInquryRegist()

 

이 Method가 호출되면 Axios를 통해 Back End에서 지정한 Controller의 URI '/api/support/devInqury'로 HTTP Method를 'post'로 한 상태에서 매개 변수로 들어온 게시글 번호를 전달 해 주는 것이에요.

 

    /**
     * 게시글 등록 / 수정 서비스
     * @param devInquryVO - 회원 가입을 위한 이용자 입력값을 담은 DTO
     * @return Object - 서버 처리 여부에 해당하는 Status Code 및 Data 반환을 위한 객체
     * @see ""
     */

    // TODO - Controller에 있는 비즈니스 로직 ServiceImpl로 옮겨야 하며, 등록 / 수정 분리 작업 필요

    @ResponseBody @PostMapping("/devInqury")
    public Object devInquryRegist(@RequestBody DevInquryVO devInquryVO, HttpServletRequest request) throws Exception {

        log.info("devInquryRegist(@RequestBody DevInquryVO devInquryVO, HttpServletRequest request)가 호출 되었습니다!");
        log.info("Client에서 넘어온 Data Value를 먼저 확인 하기 위해 배열 변수에 값을 넣겠습니다!");

        Field[] fields = devInquryVO.getClass().getDeclaredFields();

        log.info("반복문을 통해 배열에 들어 간 Data를 하나씩 꺼내 확인 해 보겠습니다!");
        for (Field field : fields) {

            /** 참고 자료
             * @see "https://tyboss.tistory.com/entry/Java-%EC%9E%90%EB%B0%94-%EB%A6%AC%ED%94%8C%EB%A0%89%EC%85%98-reflection-setAccessible"
             */

            log.info("Java 리플렉션 기법 중 setAccessible(true) 통해 Field 객체 자료형 Type field의 접근제어 지시자에 의한 제어를 변경 하겠습니다!");
            field.setAccessible(true);

            System.err.println(field.getName() + " : " + field.get(devInquryVO));

        } // for (Field field : fields) 끝

        Map<String, Object> result = new HashMap<>();

        log.info("devInquryVO 값 : " + devInquryVO.toString());

        try {

            log.info("등록할 글이 비밀글인지 확인 하겠습니다!");
            if (devInquryVO.getSecretAt().equals("false")) {

                log.info("등록할 글이 비밀글이 아닙니다! 공개글로 등록 합니다!");
                devInquryVO.setSecretAt("N");

            } else {

                log.info("등록할 글이 비밀글 입니다! 비밀글로 등록 합니다!");
                devInquryVO.setSecretAt("Y");

            } // if (devInquryVO.getSecretAt().equals("false")) - else 끝

            log.info("등록 / 수정 판별을 위해 등록 요청에 게시글 일련번호가 있는지 확인 하겠습니다!");
            // TODO : 등록 / 수정 Logic 분리 필요
            if (CustomStringUtil.getString(devInquryVO.getInqrySn()) == "" || devInquryVO.getInqrySn() == 0) {

                log.info("등록 요청 게시글 일련번호가 비어있습니다! 게시글 등록을 수행 합니다!");
                // TODO - 회원가입 및 로그인 로직 구현 뒤 아래 하드코딩 수정 필요
                devInquryVO.setInqryUserSn(4);

                log.info("devInquryService.devInquryInsertUpdate(devInquryVO)을 호출 하겠습니다!");
                devInquryService.devInquryInsert(devInquryVO);

                log.info("Map result에 게시글 일련 번호를 넣겠습니다!");
                result.put("resultSn", devInquryVO.getInqrySn());

            } else {

                log.info("등록 요청 게시글 일련번호가 존재 합니다! 게시글 수정을 수행 합니다!");
                log.info("devInquryService.devInquryInsertUpdate(devInquryVO)을 호출 하겠습니다!");
                devInquryService.devInquryUpdate(devInquryVO);

                log.info("Map result에 게시글 일련 번호를 넣겠습니다!");
                result.put("resultSn", devInquryVO.getInqrySn());

            } // if (CustomStringUtil.getString(devInquryVO.getInqrySn() == "" || devInquryVO.getInqrySn() == 0)) - else 끝

            log.info("Logic이 완료 되었으므로, 200 Code를 Map result에 넣겠습니다!");
            result.put("code", 200);
        } catch (Exception e) {

            log.info("게시글 등록 / 수정에 문제가 발생(권한 문제)하여 catch문이 실행 되었습니다!");

            e.printStackTrace();

            log.warn(e.getMessage());

            log.info("Logic이 Error로 401 Code를 Map result에 넣겠습니다!");
            result.put("code", 401);

            return result;

        } // try - catch 끝

        return result;

    } // devInquryRegist(@RequestBody DevInquryVO devInquryVO, HttpServletRequest request) 끝

 

그럼 위와 같이 해당 Controller의 API가 호출이 되고, Logic을 처리해 주는 것이랍니다.

 

다시 `DevInquryRegist.vue - getDetailView()`로 돌아와 보면 BackEnd와의 통신을 끝 마치고, BackEnd는 게시글 일련번호로 조회를 요청했던 게시글 정보를 전달을 해 준것이에요. 그 내용이 173번째 줄 response에 담기게 되고, 176번째 줄에 BackEnd가 전달해 준 게시글에 모든 정보를 `devInquryData`라는 객체(Object)에 저장을 해 준 것이에요.

 

그럼 위에 HTML Code를 통해 해당 게시글 Data들을 이용해서 '수정'에 해당하는 DevInquryRegist Coponent가 Rendering 되면서 '수정'이라는 Logic을 수행할 수 있게 해주는 것이랍니다!  

 

만약 위 그림 `DevInquryRegist.vue - getDetailView()`에서 문제가 생겨 catch 문으로 진입하게 되면 어떻게 될까요?

​DevInquryRegist.vue - getDetailView(), catch 문

최초 Console에 문제 내용을 출력하고, 목록에 해당하는 Component가 Re Rendering 되도록 `goList()`를 호출해 주는 것이랍니다!