1. 히트맵 적용 후 성능 이슈히트맵에서 점의 크기는 radius 값으로 설정하는데 이 값이 100 이상 넘어가면 렌더링 성능이 떨어졌다. 이 문제를 해결하기 위한 하나의 방법으로 화면상에 노출된 좌표(위경도) 데이터만 필터링하는 방법을 적용해 보았다. 2. 지도 좌표 경계 확인 이용화면상에 노출된 좌표를 필터링하기 위해서는 지도 좌표 경계 확인이 필요했다. 아래는 관련 문서이다.※ React Naver Maps(지도 좌표 경계 확인하기) : https://zeakd.github.io/react-naver-maps/examples/map-tutorial-4-bounds/나의 경우 화면에 노출된 지도의 최대/최소 좌표 정보 획득이 필요했기 때문에 위 문서의 소스 코드 자체는 크게 도움이 되지 않았지만, u..

1. useState로 관리하는 지도 센터 값 성능 문제지도의 센터 위경도 값에 따라 breadcrumb의 표시 정보가 달라지는 기능을 구현하였다. breadcrumb의 정보가 자동으로 변경되려면 센터 위경도 값의 변경을 감지해야 하므로 useState를 사용하였는데 문제는 마우스 좌클릭하여 지도를 이동할 때마다 무수히 많은 센터 위경도 값이 생성되어 그만큼의 리렌더링이 일어난다는 것이다.지도는 "react-naver-maps": "^0.1.2" 라이브러리를 사용했는데 "NaverMap" 컴포넌트에 "onCenterChanged" props로 setState를 넘기면 지도의 중앙 위경도 값을 state로 관리할 수 있다. setMapCenterPoint(latLng)}>(생략)위와 연관된 useState..

1. 문제1) cors 문제무선 와이파이 서비스를 제공하는 AP 장비에 클라이언트가 캡티브포탈 브라우저에서 POST 요청을 보내는 상황이었다. 클라이언트의 IP와 AP 서버의 IP가 다르기 때문에 브라우저는 당연히 cors 오류를 내뱉었다.이 문제를 해결하기 위해 별도의 Node.js 서버를 두고 이 서버에 클라이언트가 POST 요청하면 이 요청을 AP 서버로 전달하도록 설계했다. 즉, 클라이언트와 AP 서버  사이에 Proxy 서버를 두어서-브라우저가 다른 도메인으로 요청을 허용하지 않는-cors 정책을 우회하도록 Proxy 서버가 실제 서버에 요청을 대신 보내는 구조를 만든 것이다. 2) axios를 이용한 POST 요청 문제Proxy 서버를 이용해 cors 문제는 잘 해결했다. 그런데 AP 서버의 ..

1. 스프링 부트 프로젝트 실행 중 이미 사용 중인 8080 포트VSCode에서 구동 중이었던 스프링 부트 프로젝트에 문제가 생겨 VSCode가 강제 종료되었다. 다시 VSCode를 열고 프로젝트를 실행했는데 기존의 프로젝트는 계속 8080 포트를 붙잡고 있었다. VSCode의 통제권(?)을 벗어났기에 강제 종료해야 하는 상황이었다. 아래 내용은 VSCode를 다시 열고 프로젝트를 구동했을 때 콘솔에 찍힌 문제의 부분이다.2024-11-28T11:10:26.584+09:00 ERROR 19300 --- [demo] [ restartedMain] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPLICATION FAILED TO..

1. 여러 환경 변수 설정Nest.js에서 .env 뿐만 아니라 .env.local도 사용하고자 하였다. 기존 프로젝트에서는 .env만 사용하고 있었고 MySQL과 TypeOrm을  사용하고 있었다. Nest.js에서 여러 .env 설정 방법은 아래와 같다.1-1. cross-env 패키지 설치npm install cross-envnpm install @nestjs/config dotenv 1-2. package.json 스크립트 수정"scripts": { "start:local": "cross-env NODE_ENV=local nest start --watch",} 1-3. app.module.ts에 아래 코드 추가import * as dotenv from 'dotenv';// 명령어에 따라 환경..

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