React.js 프로젝트에 shadcn을 적용하고자 하였다.  공식 페이지(https://ui.shadcn.com/docs/cli)에 있는 아래 명령어를 입력하였으나 정상적으로 설치되지 않았다.npx shadcn@latest init다른 여러 방법으로도 시도해 봤지만 결국 적용하지 못했다. 설치 실패 메시지 중 프레임워크를 찾을 수 없다는 내용이 반복되어서 결국 Next.js 프로젝트에 적용해 보게 되었고 너무도 자연스럽게 진행됨을 경험했다.이 글을 쓰고 있는 시점에서 shadcn은 React.js 프로젝트보다는 Next.js 프로젝트(버전 15.0.3)에 적용하는 것이 정신건강에 이롭다고 정리해 본다.1. Next.js 프로젝트에 shadcn 적용Next.js 프로젝트에 shadcn 적용은 아래 공식 ..

local, dev, prod에 따라 각각 다른 설정이 적용되도록 환경 변수를 설정하려고 한다. 1. dotenv 사용 위한 기본 준비 사항dotenv가 설치되어 있지 않다면 아래와 같이 설치한다.npm install dotenvnpm install dotenv-cli -g dotenv를 사용할 수 있도록 index.js에 아래 코드를 추가한다.require('dotenv').config(); 2. package.json 설정 방법.env, .env.local, .env.dev, .env.prod 파일을 각각 준비한 후 package.json의 "scripts" 속성을 아래와 같이 수정한다."start:local", "start:dev", "start:prod"를 각각 추가했다.2-1. node로 실행하..

1. application.properties 환경별 설정개발 환경, 로컬 환경, 프로덕트 환경에 따라서 application.properties 설정을 각각 달리하여 관리할 수 있다.아래 코드는 dev, local, prod로 설정을 관리하는 예이다. resources 폴더 내에 resources-dev, resources-local, resources-prod 폴더를 각각 생성하여 관리하는 방식이다.# resources/resources-dev/application.propertiesspring.profiles.active=dev # 이 속성 값을 추가하여 관리한다!# application-dev.propertiesdb.url=jdbc:mysql://dev-db-urldb.username=dev-u..

1. vue-chartjs만으로는 data labels 표시할 수 없다!vue-chartjs로 렌더링 한 차트 영역에 값을 표시해야 했다. 그런데 "vue-chartjs" 라이브러리 만으로는 해결할 수 없었다. 추가로 "chartjs-plugin-datalabels" 라이브러리를 사용해야 한다. [그림 1]은 몇 번의 삽질 끝에 파낸 최종 결과물이다.  2. NPM 라이브러리 설치2-1. vue-chartjs 설치https://vue-chartjs.org/guide/#introductionnpm i vue-chartjs chart.js 2-2. chartjs-plugin-datalabels 설치https://chartjs-plugin-datalabels.netlify.app/guide/getting-st..

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..

Uncaught (in promise) TypeError: filteredFacilities.forEach is not a function 에러는 데이터가 배열이 아닌 다른 타입(예: undefined 또는 null)이어서 발생하는 에러이다. forEach는 배열에서만 사용 가능한 메서드이기 때문에, 데이터가 배열이 아닐 경우 이 오류가 발생한다.해결 방법은 아래 코드와 같이 isArray() 배열 메서드를 이용해 데이터가 배열 타입인지 확인하고 배열이 아니면 빈 배열([])이 평가되도록 한다.const result = Array.isArray(arr) ? arr : [];