2022.02.17

일일 회고 15회차

Previous2022.02.18 Next2022.02.16

Last updated 2 years ago

2022.02.17

일일 회고 15회차

할일 및 한일

배터리 관제 시스템의 사이트 관리 페이지 구현 (50%)

경험 및 배움

`배터리 관제 시스템`의 사이트 관리 페이지 구현

오늘은 사이트 관리 페이지의 사이트 등록 기능을 구현했다. 해당 기능은 사용자가 사이트 관련 정보들을 입력하도록 하고 주소 및 위도, 경도 정보는 Daum 우편번호 API와 Kakao 로컬 API를 통해 입력되도록 구현 완료했다.

사이트 등록 기능을 금방 구현할 줄 알았으나, Daum 우편번호 API를 연동하는데 생각보다 오랜 시간이 걸렸다. 그 이유는 Daum 우편번호 API를 쉽게 사용할 수 있도록 구현해놓은 라이브러리를 추가하고, 해당 라이브러리가 제공하는 컴포넌트를 import 했을 때 'windows is not defined' 라는 에러가 발생했기 때문이다.

<template>
...
</template>

<script>
import {VueDaumPostcode} from "vue-daum-postcode"
...
</script>

해당 문제를 해결하기 위해 많은 분석과 조사를 진행했다.

먼저 라이브러리를 사용할 때 추가로 설정이 필요한 것이 있는지 확인하기 위해, 해당 라이브러리(vue-daum-postcode)의 도큐먼트를 살펴봤다.

도큐먼트를 봤을 때는 잘못 설정한 부분이 보이지 않아, 해당 라이브러리를 다른 사람들은 어떻게 사용했는지 확인해보기 위해 GitHub에 nuxt daum postcode를 검색하여 코드를 분석해봤다.

위의 리포지토리들을 살펴봤을 때는 거의 다른 점이 존재하지 않아, nuxt에서 'window is not defined ' 에러가 발생하는 이유에 대해 조사를 진행했다.

조사를 해본 결과, 아직 window가 존재하지 않는데 import한 컴포넌트가 서버 사이드 렌더링 통해 컴포넌트를 바인딩하려하기 때문에 문제가 발생했음을 알 수 있었다.

그래서 import문을 제거하고 vue-daum-postcode 태그만 작성한 결과, 정상적으로 컴포넌트를 바인딩 시킬 수 있었다.

<template>
  <el-dialog v-if="visible" id="addressDialog" title="주소 검색" 
      :visible.sync="visibleDialog" append-to-body
      model-append-to-body="false" :show-close="false" @close="closeDialog">
    <el-row style="margin-top: -20px">
      <el-col>
        <vue-daum-postcode v-if="visible" @complete="onComplete"/>
      </el-col>
    </el-row>
  </el-dialog>
</template>

...

위와 같이 API 연동은 잘 됐으나, 또 문제가 발생했다. 이는 처음에 API를 불러올 때는 정상적으로 불러오지만 그 후로는 못 불러오는 문제가 발생했기 때문이다.

위의 문제를 해결하기 위해 개발자 도구에서 Network를 확인해 본 결과, 처음 주소 검색 다이얼로그가 띄워졌을 때는 API를 호출하지만 그 다음부터는 API를 호출하지 않는 것을 알 수 있었다.

호출하지 않는 이유에 대해 생각해본 결과, Vue가 기존에 Daum 우편번호 API를 rendering 했던 것에 대해서는 re-rendering을 하지 않는 것으로 판단했다. 기존에는 element-ui에서 제공하는 dialog의 속성인 visible.sync를 사용하여 다이얼로그의 가시성을 변경했지만, 문제를 해결하기 위해 Vue가 re-rendering 할 수 있도록 v-if 를 추가하여 가시성을 변경했다.

// 기존 코드
<template>
  <el-dialog id="addressDialog" title="주소 검색" 
      :visible.sync="visibleDialog" append-to-body
      model-append-to-body="false" :show-close="false" @close="closeDialog">
    <el-row style="margin-top: -20px">
      <el-col>
        <vue-daum-postcode @complete="onComplete"/>
      </el-col>
    </el-row>
  </el-dialog>
</template>

// 수정한 코드 (v-if 추가)
<template>
  <el-dialog v-if="visible" id="addressDialog" title="주소 검색" 
        :visible.sync="visibleDialog" append-to-body
        model-append-to-body="false" :show-close="false" @close="closeDialog">
    <el-row style="margin-top: -20px">
      <el-col>
        <vue-daum-postcode @complete="onComplete"/>
      </el-col>
    </el-row>
  </el-dialog>
</template>