1. 무한한 깊이(depth)의 체크 박스 구현[그림 1]과 같이 무한한 깊이의 체크 박스를 구현할 필요가 있었다. 목차에 사용되는 데이터는 category 배열인데 이 배열의 요소는 객체이다. 이 객체 하나가 체크 박스 하나를 구성한다. 객체는 subcategory를 가지고 있어서 이를 통해 무한한 깊이의 목차를 만들 수 있다. 구현하고자 하는 기능은 다음과 같다.부모와 자식 체크 박스를 렌더링 할 때 시각적으로 구분이 가능하도록 margin-left 값을 자동으로 부여해야 한다.부모 체크 박스를 체크/해제하면 자식 체크 박스도 부모와 동일하게 체크/해제되어야 한다.자식 체크 박스를 체크/해제할 때는 부모 체크 박스에 영향을 주지 않아야 한다. 2. 구현 코드위 기능을 구현함에 있어 중요한 포인트는 재..

1. 지도 영역 크기 변경 후 지도 잘림 현상 문제 발생좌측 aside를 숨기는 기능을 구현하였다. 메인 콘텐츠 영역에는 [그림 1]과 같이 네이버 지도가 렌더링 되어 있다. aside 숨김 버튼을 클릭하면 [그림 2]와 같이 지도 부분이 비정상적으로 잘려서 표시된다. 2. 지도 리사이즈 이벤트 강제 트리거로 문제 해결지도 영역 변경 발생 시 리사이즈 이벤트를 강제 트리거하여 문제를 해결하였다. 강제 트리거 방법은 " naver.maps.Event.trigger()"를 호출하는 것이다. 아래는 적용된 코드 예시이다.useEffect(() => { // naverMap은 useRef()이다. if (naverMap.current) { setTimeout(() => { const { nav..

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. 여러 환경 변수 설정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)에 적용하는 것이 정신건강에 이롭다고 정리해 본다.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로 실행하..