Vue.js 옵션(Options) 방식: 데이터 변경에 따른 리렌더링 완벽 가이드React.js에서 useState가 데이터 변경을 감지하고 컴포넌트를 리렌더링하는 핵심적인 역할을 하는 것처럼, Vue.js의 옵션(Options) 방식은 컴포넌트의 특정 옵션들을 통해 이러한 반응형 시스템을 관리하는 것이 특징이다. 이는 개발자가 직접 DOM을 조작하지 않아도 데이터 변경에 따라 UI가 자동으로 업데이트되도록 하는 Vue.js의 강력한 기능이다.1. data(): 컴포넌트의 핵심 반응형 상태이다.data() 옵션은 컴포넌트의 반응형 상태를 선언하는 가장 기본적인 방법이다. 이 옵션은 함수 형태로 정의되며, 이 함수가 반환하는 객체 내부의 모든 속성들은 Vue의 반응형 시스템에 의해 면밀히 추적되는 것이 특..

Vue.js 환경 변수 관리(.env): --mode 옵션으로 깔끔하게 해결하는 법Vue.js 프로젝트에서 개발, 테스트, 배포 등 다양한 환경에 따라 API 엔드포인트나 기타 설정 값을 다르게 지정하는 것은 개발 과정에서 필수적이다. 이 환경 변수를 효율적으로 관리하기 위해 Vue CLI는 강력한 --mode 옵션을 제공하고 있다. 이 글에서는 기존에 발생했던 cross-env 사용 시의 문제점을 짚어보고, --mode 옵션을 활용하여 환경 변수를 정확하게 매핑하는 방법을 소개한다.1. cross-env 사용 시 발생했던 문제점이전에 package.json 스크립트에서 cross-env를 사용하여 VUE_APP_ENV와 같은 환경 변수를 주입하는 방식이 흔하게 사용되었다. 예를 들어, 다음과 같은 설정..

1. 네이버 지도의 카운트다운 서클 타이머 버튼모니터링 서비스에 사용자가 새로고침 버튼을 클릭하지 않아도 일정 시간이 지나면 자동으로 최신의 정보를 서버에서 받아와 리렌더링 하는 기능이 필요했고, [그림 1]과 같은 네이버 지도앱의 카운트다운 서클 타이머 버튼이 적당해 보였다.  2. Vue.js용 컴포넌트 제작 및 적용[그림 2]는 Vue.js용으로 만든 카운트다운 서클 타이머 버튼 컴포넌트를 적용한 사례이다. 시간은 15초부터 시작하고 0초가 되면 refresh 아이콘이 시계방향으로 회전한 후 초기화된다. 0초가 되거나 버튼을 클릭하면 $emmit에 의해 부모 컴포넌트의 함수를 호출한다. 부모 컴포넌트의 함수에는 서버에 get 요청하는 코드를 적용할 수 있다. 아래 코드는 부모 코드에서 사용한 사례이..

1. Bootstrap Autoplaying Carousel 오작동 문제https://getbootstrap.com/docs/5.3/components/carousel/#autoplaying-carousels위 링크는 부트스트랩 캐로우셀 자동 슬라이드 예제이다. 핵심은 data-bs-ride 속성에 "carousel"을 적용하면 캐로우셀의 슬라이드가 자동으로 넘어간다. 이 코드를 Vue.js 프로젝트에 적용했는데 오작동 문제가 발생했다.해당 페이지를 처음 열었을 때는 슬라이드가 정상적으로 동작하는데 다른 페이지에 다녀오면 멈춰 있다. 다음 버튼을 클릭하면 그제야 슬라이드가 동작하기 시작한다. 사용자의 버튼 이벤트 발생 시 자동 플레이가 되는 옵션은 "carousel"이 아니라 "true"이며 나의 경우 ..

두 개 이상의 값 변경 감지둘 이상의 값에 대한 변경을 감지하여 하나의 값이라도 변경이 일어나면 특정 메서드를 실행하는 코드가 필요했다. 아래 코드는 computed에 임의로 정의한 data1(), data2()의 반환 값을 watch에서 감지하여 둘 중 값이 하나라도 변경되면 동일한 handleUpdate() 함수가 호출되도록 작성한 것이다. 주의할 점은 감시하는 값이 객체인 경우에는 "deep" 속성을 추가해야 변경을 감지할 수 있다.computed: { data1() { return this.$store.state.data1; // vuex 상태 값1 }, data2() { return this.$store.state.data2; // vuex 상태 값2 }},watch: { d..

1. 브라우저 정책으로 사용자와 상호작용 없는 오디오 재생 불가 문제 브라우저 정책으로 사용자와 상호작용없는 오디오의 재생이 안 되는 문제가 있어서 고민하고 리서치하다가 일렉트론을 이용한 데스크톱 애플리케이션으로 실행하면 오디오 재생이 가능하다는 것을 알게 되었다. 그래서 배포된 Vue.js 애플리케이션을 데스크톱 애플리케이션으로 만들어 보았다. 2. 일렉트론 프로젝트 생성하여 오디오 재생 성공! 2.1. 일렉트론 프로젝트 생성 일렉트론 공식 페이지의 Quick Start를 참고하여 프로젝트를 생성하였다. 데스크톱 애플리케이션으로 만들고자하는 웹 애플리케이션과는 별도로 일렉트론 프로젝트를 생성한다. // 별도의 일렉트론 프로젝트 폴더 생성 => 이동 => 설치 명령어 실행 npm i 2.2. 의존성 설치..

1. this 문제로 발생한 오류 2. 화살표 함수로 해결Vue.js의 methods에 카카오맵을 초기화하기 위해 initMap 메서드를 선언했다. 그리고 해당 메서드 안에 funcClick 메서드를 선언했다. 그런데 funcClick 메서드 내에서 Vue.js의 data에 접근하기 위해 this를 사용했는데 [그림 1]과 같이 에러가 발생했다.이 문제는 일반 함수를 화살표 함수로 변경하여 해결했다. methods 객체에서 initMap 메서드를 선언하고 그 메서드 내에서 일반 함수(function 사용)를 정의하면 해당 메서드에서의 this는 해당 메서드를 호출하는 initMap 객체를 가리킨다. 아래 코드를 보면 initMap 메서드 내에는 count 변수가 없다. 따라서 [그림 1]과 같은 오류가 ..

1. 카카오 지도 API 커스텀 오버레이 표시되지 않는 문제 새로고침 시 커스텀 오버레이가 화면에 표시되지 않는 문제가 발생했다. setTimeout으로 1초 멈춘 후 커스텀 오버레이를 그리도록 하여 문제를 해결했다. mounted() { if (window.kakao && window.kakao.maps) { this.initMap() this.displayCustomOverlay() } // 아래는 새로고침시 실행되는 코드이다. 커스텀 오버레이가 표시되지 않는 문제가 발생하였다. // setTimeout으로 1초 멈춘 후 커스텀 오버레이를 그리도록하여 문제를 해결했다. else { const script = document.createElement('script') /* global kakao */ ..