[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

 

 

 

 

 

 

 

🚀 게시판 만들기 - 상세 조회

    🔽  화면

Q&A 게시판 - 상세 조회

 

 

    🔽  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="contentWrap" 끝 -->

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

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

      <div class="ListTbWrap mt-20">
        <table class="tView">
          <caption>Q&A 상세보기</caption>
          <colgroup>
            <col>
            <col style="width: 18%">
            <col style="width: 15%">
          </colgroup>

          <thead>

          <tr>
            <th class="alignL bolder">{{devInquryData.inqrySj}}</th>
            <th>
              <span>
                등록일&nbsp;&nbsp;
                <b>{{devInquryData.creatDt}}</b>
              </span>
            </th>
            <th>
              <span>
                첨부파일&nbsp;&nbsp;
                <a href="#" class="link_down2" v-show="devInquryData.fileSn"></a>
                <span v-show="!devInquryData.fileSn">-</span>
              </span>
            </th>
          </tr>

          </thead>
        </table>

        <div class="view_wrap">
          {{devInquryData.inqryCn}}
        </div>  <!-- div class="view_wrap" 끝 -->

        <template v-if="devInquryData.answerAt !== 'N'">
          <div class="view_wrap" style="border-top: 1px solid black;">

            <div style="margin-top:-30px; margin-left: -5px; front-weight: bold;">
              [ 답변 내용 ]
            </div> <!-- div style="margin-top:-30px; margin-left: -5px; front-weight: bold;" 끝 -->

            <br>

            {{devInquryData.answerCn}}
          </div>  <!-- class="view_wrap" style="border-top: 1px solid black;" 끝 -->
        </template> <!-- template v-if="devInquryData.answerAt !== 'N'" 끝 -->

        <table class="tView2 mt-40">
          <colgroup>
            <col style="width: 12%">
            <col>
          </colgroup>

          <tbody>
          <tr>
            <th>이전 글</th>

            <td>
              <template v-if="devInquryData.beforeInqrySn !== -1">
                <router-link to="/support/devInquryDetailView" @click="goDetailView(devInquryData.beforeInqrySn)">{{devInquryData.beforeInqrySj}}</router-link>
              </template> <!-- template v-if="devInquryData.beforeInqrySn !== -1" 끝 -->

              <template v-else>
                이전 글이 없습니다.
              </template> <!-- template v-else 끝 -->
            </td>
          </tr>

          <tr>
            <th>다음 글</th>
            <td>
              <template v-if="devInquryData.nextInqrySn !== -1">
                <router-link to="/support/devInquryDetailView" @click="goDetailView(devInquryData.nextInqrySn)">{{devInquryData.nextInqrySj}}</router-link>
              </template> <!-- template v-if="devInquryData.nextInqurySn !== -1" 끝 -->

              <template v-else>
                다음 글이 없습니다.
              </template> <!-- template v-else 끝 -->
            </td>
          </tr>
          </tbody>
        </table>
      </div> <!-- div class="ListTbWrap mt-20" 끝 -->

      <div class="btn_wrap">
        <a href="#" class="btn04" @click="goList()">목 록</a>

        <template v-if="devInquryData.answerAt !== 'Y'">
          <a href="#" class="btn03" @click="goRegist(devInquryData.inqrySn)">수 정</a>
        </template> <!-- template v-if="devInquryData.answerAt != 'Y'" 끝 -->

        <a href="#" class="btn03" @click="this.deletePopup = true">삭 제</a>
      </div> <!-- div class="btn_wrap" 끝 -->

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

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

  <!-- 글 삭제 관련 Pop Up -->
  <div class="card3_popup" style="display: block; top: 160px;" v-show="this.deletePopup">

    <div class="popup_body">

      <!-- Message -->
      <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 type="button" class="btn_m01_50" @click="doDelete()">확인</button>

      <button type="button" class="btn_m02_50" @click="this.deletePopup = false">취소</button>
    </div>  <!-- div class="btn_wrap_pop" 끝 -->

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

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

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


export default {
  data() {
    return {
      searchParam: {
        inqrySn: this.$route.query.inqrySn
      }, // searchParams 끝

      devInquryData : {},
      deletePopup : false
    }
  }, // data() 끝

  created() {
    this.getDetailView();
  }, // created() 끝

  methods: {
    getDetailView() {
      devInquryDetail({
        inqrySn: this.searchParam.inqrySn
      }).then(response => {
        console.log("Server에서 응답으로 들어온 Data의 상세 보기 정보를 출력 합니다(response.data.devInquryView) : ", response.data);

        this.devInquryData = response.data.devInquryVO;

        console.log("응답으로 들어온 모든 Data 내용 : " + this.devInquryData)
      }).catch(error => {
        console.log("Q&A 게시판 상세보기 axios 처리 중 문제가 발생 하였습니다.", error)
        this.goList();
      });
    }, // getDetailView() 끝

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

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

    goRegist(inqrySn) {
      this.$router.push({
        path: "/support/devInquryRegist",
        query: {
          status : 'U',
          inqrySn : inqrySn,
        } // query 끝
      });
    }, // goRegist(inqurySn) 끝

    doDelete() {
      devInquryDelete({
        inqrySn : this.searchParam.inqrySn
      }).then(response => {
        console.log("해당 하는 게시물이 삭제 됩니다! 해당 게시글 정보를 출력 합니다! ", response.data);
        // 삭제가 완료되면 글 목록으로 보낸다.
        this.goList();
      }).catch(error => {
        console.log("게시글을 삭제 하던 도 중 문제가 발생 하였습니다!" + error);

        alert('Q&A 게시글 삭제에 실패하였습니다! \r\n 관리자에게 문의 하여 주시기 바랍니다.')
      });
    } // doDelete() 끝
  }, // methods 끝
} // export default 끝
</script>

<style lang="">

</style>

 

 

 

 

    🔽  Code 분석

 

위의 Code는 아래 사진과 같이 처리를 위해 만들어 준 것이에요.

 

먼저 Colgroup를 통해서 게시글 제목, 등록일, 첨부파일이 표시될 공간을 먼저 잡아 준 것이에요.

 

 

26번째 줄은 제목이 들어갈 부분에 대한 큰 윤곽 설정을 위해 잡아 준 것이에요.

 

 

 

 

 

그 다음은 위와 같이 틀을 잡아 제목이 표시 되게 해 준 것이에요.

 

 

DevInquryDetailView.vue 40 ~ 50줄

 

최초 <thead>를 통해 표 상단에 제목이 들어갈 수 있는 부분을 만들어 준 것이에요.

그리고, <tr>을 통해 한 개의 행을 잡아주고, <th> 3개를 만들어 제목, 등록일, 첨부파일이 출력 되도록 해 준 것이에요.

34번째 줄을 먼저 살펴 볼 것이에요. devInquryData안에 들어 있는 InqrySj(제목)을 속성 형식으로 출력하겠다는 의미인 것이에요.

devInquryData는 data()에 선언이 되어 있는데, 객체(Object)로 선언이 되어 있는 것이에요.

data()

 

그러면 빈 값일텐데 어떻게 값을 가져오는지에 대한 의문이 드는 것이에요.

 

그것에 답은 바로 Vue Life Cycle Hook의 Created()에 있는 것이에요.
상세 보기 Page가 Rendering이 될 때, created() Hook이 동작하게 되는데, 이 때 아래 그림과 같이 GetDetailView() Method가 호출 되는 것이에요.

 

DevInquryDetailView.vue의 created() - Vue Life Cycle Hook

 

그럼 바로 getDetailView()를 만나러 가 볼 것이에요.

 

DevInquryDetailView.vue의 getDetailView()

 

이 Method는 Back End와 통신을 수행하여 요청을 보내고, 응답 값을 처리하는데 이용되는 Method인 것이에요.

최초 이 친구가 호출이 되면 DevInquryDetail()이 호출이 되는데, 객체(Object) Type에 게시물 일련번호(inqrySn)을 전달 해 주는 것이에요. 이 값은 searchParam에 들어 있는데, 

 

data()

반응형

 

위와 같이 data()에 객체 Type으로 정의가 되어 있고, router를 통해 해당 값을 받아 오는 것이에요.

상세 조회라는 것은 목록 조회에서 특정 게시물을 선택 했을 때, 그 게시물에 대해 상세하게 볼 수 있는 서비스 인 것이에요.

 

결국 해당 값은 목록 조회(DevInquryList.vue)에서 전달이 되었는데, 아래 goDetailView(inqurySn)이 보내 준 것이에요.

 

DevInquryList.vue - goDetailView(inqurySn)

 

여기를 살펴보면 router를 이용해서 Push (전달)을 하는데, 매개 변수로 path 즉, 상세 조회에 위치를 전달하게 되는 것이에요.

 

출처 :&amp;amp;amp;nbsp;https://junyharang.tistory.com/232

 

위와 같이 query를 이용해서 게시글에 일련번호를 전달 해 주는 것이에요.

 

DevInquryList.vue - goDetailView(inqurySn)

 

다시 이 Method로 돌아와서 분석 해 보면 목록 조회에서 Router를 통해 전달된 값이 위에 searchParam에 객체 형태로 담기게 되고, 여기서는 그 값을 다시 InqrySn이라는 이름으로 객체를 정의해 준 것이에요.

그럼 BackEnd에는 해당 게시물 일련번호가 전달이 되었을 것이고, BackEnd의 MyBatis를 통해 DB에서 해당 게시글을 찾을 것이에요.

 

BackEnd - DevInquryMapper.xml - 상세 조회

 

위의 SQL Code에서 유심히 봐야 할 부분은 73 ~ 75번째 줄인 것이에요. 게시물 일련번호(inqrySn)이 null이 아니고, 비어있지 않다면 and 조건절을 통해 INQRY_SN이라는 Column 값 중에 Request로 전달 된 게시물 일련번호가 일치한지를 확인하는 것이에요.

사실 위에 and 조건절을 Where 절에 바로 써도 되지만, if문을 통해 분기처리를 하기 위해 `Where 1=1`을 하고, and 조건절을 추가로 써준 것이에요. 

여기서 게시글을 찾으면 Response로 Vue에 다시 전달이 될 것이에요.

 

DevInquryList.vue - goDetailView(inqurySn) 그림 168번째 줄을 보면 Back End가 전달해 준 Data(Response - 게시글 상세 정보)가 `response`에 담기게 되고, 169번째 줄에 어떤 값이 들어 왔는지 확인을 위해 console에 찍어 보는 것이에요.

그런 뒤 response안에 있는 data안에 있는 게시글 한 개의 객체(devInquryVO)를 devInquryData 객체에 저장을 해 주는 것이에요.

 

data()

 

그런 뒤 다시 devInquryData에 어떤 값이 들어 있는지 확인을 해주고, 이 Method는 역할이 끝나는 것이에요.

하지만, Catch절에 들어가게 되면 어떤 이유로 error가 발생했는지 출력해주고, 목록 조회로 돌려 버리는 goList()를 호출해 버리는 것이에요. 

 

DevInquryDetailView.vue - goList()

 

 

 

DevInqryDetailView - 36 ~ 48번째 줄

 

다시 이 곳으로 돌아와서 결국 devInquryData는 상세 조회라는 Page가 Rendering이 될 때, 위에 Logic에 의해 Back End를 통해 전달 받은 Data를 갖고 있게 되고, 그 Data안에는 해당 게시글 제목(InqrySj)가 들어 있기 때문에 위와 같이 출력을 하도록 명령할 수 있는 것이에요.

또한, 동일한 이유와 Logic으로 등록일도 출력이 되도록 한 것이에요.

 

그럼 이제 44 ~ 45번째 줄을 살펴 보면 <a> Tag 내에서 V-show (조건이 거짓이더라도 Rendering을 하지만, 조건이 참이 아니면 출력하지는 않는다.)를 통해 devInquryData안에 파일 일련번호(fileSn)이 들어 있는지 확인 해 보는 것이에요.

없다면 굳이 화면에 굳이 보여줄 필요가 없기 때문인 것이에요.

그럼 파일이 없을 땐 어떤 내용이 출력이 될까요?
45번째 줄을 보면 <span>안에서 v-show가 다시 등장하고, 여기서는 devInquryData.fileSn이 없다면 [ - ]를 보여달라고 하고 있는 것이에요.

 

 

그래서 위 그림과 같이 첨부파일 부분이 [ - ] 가 표시되고 있고, 이건 결국 첨부 파일이 없다는 것이에요.

 

DevInquryDetailView.vue - 53 ~ 55번째 줄

 

이제 내용을 출력해야 할 것이에요. 내용은 이 곳에서 처리를 하는데, devInquryData안에 게시글 내용(inquryCn)을 출력하도록 한 것이에요.

 

그럼 이렇게 위와 같이 내용이 출력 되는 것이에요.

 

답글 내용을 확인하기 위한 다른 게시물

 

이번엔 답글에 대해 분석 해 보려고 하는 것이에요.

 

 

DevInquryDetailView.vue - 57 ~ 68번째 줄

 

여기서는 <template> 안에서 조건절을 이용하고 있는 것이에요. devInquryData 안에 답변 여부(answerAt)가 'N'이 아니면 즉, 답변 여부가 참이라면 해당 내용을 출력하라는 것이에요. v-if는 v-show와 다르게 조건이 거짓이면 Rendering 자체도 하지 않는다는 차이가 있는 것이에요.

그렇게 조건절이 참이되면 66번째 줄에 devInquryData 안에 답변 내용(answerCn)을 출력하게 해 준 것이랍니다.

 

 

 

이번엔 이 부분에 대해서 알아 볼 것이에요.
딱 보면 알겠듯이 이전 글과, 다음글로 넘어갈 수 있는 부분인 것이에요.

 

 

 

DevInquryDetailView.vue - 76 ~ 91 줄

 

Tag에 대한 설명은 미뤄두고, 실제적으로 어떻게 동작하는지에 대해 확인을 해 보면 81번째 줄에 v-if를 통해 devInqueryData 안에 이전 게시글 일련번호(beforInqrySn)가 -1이 아닌지를 확인하는 것이에요.

-1은 없다는 것을 의미하고, -100도 해도 되고, -9999도 저 곳에 넣어도 되는 것이고, 0을 넣어도 되는 것이에요.

결국 이전 게시글 일련번호가 있는지 없는지를 확인하는 것이에요.

 

이전 게시글 번호가 devInquryData안에 있다면 router-link를 통해 [ /support/devInquryDetailView ] URI로 보내게 될 것인데, 이 부분을 클릭하게 되면 Click Event가 발생해서 goDetailView()에 devInquryData 안에 이전 게시글 번호를 넣어 호출 하는 것이에요.

 

DevInquryDetailView.vue - goDetailView(inqrySn)

 

이 Method가 이전 게시글 번호를 가지고 동작을 하게 되면 router를 통해 자기 자신에 URI 값을 넣어주고, 매개 변수로 들어온 이전 게시글 일련번호를 전달해서 이전 게시글 내용이 출력 되도록 해 주는 것이에요.

 

DevInquryDetailView.vue - 76 ~ 91 줄

 

다시 위의 내용으로 돌아오면 결국 이전 게시글 일련번호로 Page가 이동이 되었고, 다시 그 이전에 게시글 제목을 출력해 주어야 하기 때문에 `devInquryData.beforInqrySj(이전 게시글 제목)`을 출력하도록 해 준 것이에요.

그리고, 87번째 줄에 v-else를 통해 이전 게시글 번호가 -1과 같다면 즉, 이 전 게시글이 없다면 '이전 글이 없습니다.'를 출력해 주도록 해 준 것이에요.

 

DevInquryDetailView.vue - 93 ~ 108번째 줄

 

위에 내용은 다음 글로 이동할 수 있는 Logic이고, 위에 이전 글과의 차이는 이전 게시글 일련번호를 가지고 처리하는 것이 아닌 다음 게시글 일련번호를 가지고 Logic을 수행한다는 차이만 있는 것이에요.

 

 

 

 

이번엔 위와 같은 버튼에 대해 알아 볼 것이에요.
수정과 삭제는 따로 작성하여 정리 하도록 할 것이고, 이 곳에서는 목록만 정리 하도록 할 것이에요.

 

 

DevInquryDetailView.vue - 112 ~ 113번째 줄

 

이 곳에서 중점적으로 볼 부분은 113번째 줄인 것이에요. '목록'이라는 버튼은 사실 <a> Tag로 만들어진 Link인 것이고, click이라는 Event가 발생하면 goList()를 호출하는 것이에요.

 

DevInquryDetailView - goList()

 

이 친구는 단순히 router를 이용해서 devInquryList 즉, 목록 조회 Page가 Rendering되게 만들어 주는 것이에요.
그렇게 되면 목록 조회 Page로 이동한 효과를 낼 수 있는 것이에요.