반응형

문제

해당 라이브러리의 카카오맵을 생성하기위해서는 width, height 를 입력받아야한다. docs 에서 width, height 의 type 이 String, Number 로 작성되어있어 숫자 혹은 숫자와 단위를 포함한 문자열을 입력할 수 있다는 것을 알 수 있다. 하지만, 예상외로 로컬 환경에서 문자열 값이 적용되지 않는 문제를 발견했다.

문제코드

const r = S(() => ({
      width: isFinite(+i.width) ? i.width + "px" : i.width,
      height: isFinite(+i.height) ? i.height + "px" : i.height
}));

해당 코드는 얼핏보면 문자열과 숫자를 모두 입력받는 것을 의도하지만 정작 문자열값이 적용이 되지 않았다.

<KakaoMap
    :width="`${50}vw`"
    :height="`${90}vh`"
    :lat="37.566826"
    :lng="126.9786567"
    @onLoadKakaoMap="onLoadKakaoMap"
/>
  • 추후에 알게 된 것이지만 width, height 값에 문자열을 삽입하려면 위와 같은 작업을 거쳐야 했다. 이러한 설명이 docs에는 준비되어있지않아 애초에 문자열로 받도록 한다면 문제가 없을것이라 판단했다.

멍청 비용 발생

<KakaoMap
    :width="'50vw'"
    :height="'90vh'"
    :lat="37.566826"
    :lng="126.9786567"
    @onLoadKakaoMap="onLoadKakaoMap"
/>
  • 작은 따옴표로 감싸면 된다 ^^;
  • 멍청비용 한시간 발생
반응형

+ Recent posts