Intro.도입 배경새로운 React 프로젝트에 shadcn 라이브러리를 도입하게 되었다.@radix-ui등 외부 라이브러리를 참조하게 되었다.sonner, next-themes, lucide-react 등 다른 외부 라이브러리들을 많이 참조한다.고객사(社) 내부망에 소스코드를 배포 후 npm install시 고객사 내부망 Nexus에 미리 설치 된 라이브러리만 설치 가능하다.빌드 시 수백개의 라이브러리가 필요함에 따라 어떤 라이브러리를 nexus에 추가해야 하는지 파악하기 어렵다.내부망 배포시 필요한 의존성 목록을 파악하기 위해 사내 Nexus에 라이브러리를 설치한다.설치된 의존성 목록을 파악 및 테스트를 진행한다.설정 목표해당 프로젝트는 외부 npm(https://registry.npmjs.org)이..
Apache Echarts 라이브러리를 사용해서 3개의 꺾은선 그래프를 만들었다. 라벨을 On/Off 하는 기능을 만들고 있었는데 하단의 가입, 탈퇴 그래프는 symbol 없이 선만을 표출하여 표현하고 싶었지만 라벨을 적용하는 순간 심볼이 없으면 라벨이 표출되지 않았다. 원래는 탈퇴도 심볼이 없어야 하지만 테스트상 추가하니 라벨이 보였다. 실패1) series 속성에 z(z-index), zlevel을 추가해 봤지만 모두 실패했다. // z(z-index), zlevel 모두 실패했다. series: [ { name: "가입", type: "line", smooth: false, showSymbol: false, ..
내가 원하는 정상작동Sonner(Toast) 팝업 시 닫기 버튼을 누르면 닫힌다. Dialog와 함께 사용하는 Sonnerhadcn의 Dialog컴포넌트 위에서 Sonner를 호출하여 오류를 안내하려고 했다.원래는 Sonner 닫기 버튼에 hover시 cusor pointer 옵션을 추가해 놓았었기 때문에 마우스 모양이 바뀌어야 하는데 pointer로 변경되지 않았고 닫기 버튼 클릭시 동작하지 않는 오류가 확인 되었다. 오류 해결 시도 (pointer-events-auto)Sonner 컴포넌트의 className에 pointer-events-auto을 추가 해보았다.// src/components/ui/sonner.tsximport { CircleCheckIcon, InfoIcon, Loader..
- props로 받는 onClose는 useSate의 setState이다.- useEffect 안의 로직이 핵심이며 useRef로 감지한다. 기본 코드import { Dispatch, SetStateAction, useEffect, useRef } from 'react';import styled from 'styled-components';interface LoginDropdownProps { onClose: Dispatch>;}const LoginDropdown = ({ onClose }: LoginDropdownProps) => { const selectRef = useRef(null); /** * Dropdwon 박스 바깥쪽 클릭시 닫힘 */ useEffect(() => { co..
개발환경react : v19vitetypescriptstyled-components : v6 폰트 다운로드 - Pretendard GOV woff 형식🔗 Pretendard GOV - woff 형식https://github.com/orioncactus/pretendard/tree/main/packages/pretendard-gov/dist/web/static/woff 폰트 경로사용할 폰트를 다운로드 후 public/fonts 폴더에 이동 시킨다.📂 public/ ├── 📂 fonts/ │ ├── PretendardGOV-Regular.woff2 │ ├── PretendardGOV-Bold.woff2src/assets/fonts/에 폰트 파일을 두면 vite build 실행 시 dist/ ..
✨ Intro카카오 로그인은 카카오계정으로 다양한 서비스에 로그인할 수 있도록 하는 OAuth 2.0 기반의 소셜 로그인 서비스를 구현하려고 한다. ✨ 카카오 로그인 시퀀스 다이어그램 🔗 서비스 로그인 과정 - kakao developershttps://developers.kakao.com/docs/latest/ko/kakaologin/common 로그인은 REST API, JavaScript SDK, Android SDK 등 여러가지 방식으로 구현할 수 있는데 이 중 REST API를 사용했다. ✨ 로그인 단계 및 요청 정리각 단계별 절차와 어디에 요청을 보내야하는지 정리 했다.단계설명요청1. 로그인 요청사용자가 로그인 버튼 클릭 → 카카오 로그인 페이지 이동https://kauth.kakao.com..
현재 지오서버에 전국 시군구 shp파일이 등록되어있는 상태라 지오서버를 활용해서 시군구 레이어를 받아 오려고 한다. 🚀 목표vue-query를 사용해 지오서버(GeoServer)의 시군구 레이어 불러오기 vue-query 설치vue 환경에서 서버 상태를 간편하게 관리하기 위해 react-query와 동일한 개념의 vue-query를 설치하면 된다. axios도 함께 설치 해준다.npm i axios @tanstack/vue-query 🔗 https://tanstack.com/query/v5/docs/framework/vue/installation Hook 작성vue-query를 사용해 Hook을 작성한다.cqlFilter : WMS나 WFS를 호출할 때 다양한 필터링을 적용할 수 있는 기능인데 여기서..
✨ Intro분명 createLayer라는 함수를 useMap.ts 파일에 작성 후 export까지 선언했음에도 VSCode에서 오류가 발생하지 않았다. (실행시 localhost에서는 Uncaught ReferenceError: createLayer is not defined 오류가 발생히며 실행되지 않는다.)createLayer 함수에 마우스 hover시 빠른 수정(auto import) 안내가 뜨지 않았다. ✅ 해결하기위 문제는 TypeScript의 타입 체크 설정과 관련이 있다고 한다. tsconfig.app.json 파일에서 아래 설정을 확인한다.// tsconfig.app.json"compilerOptions": { "allowJs": true, "checkJs": true,}all..
Introvite를 사용하여 vue 프로젝트 생성 했다. 일반적으로 함수 또는 import 경로를 “ctrl + 클릭” 시 해당 함수 또는 컴포넌트가 있는 곳으로 이동해야 하는데 작동하지 않았다.✅ 해결 방법Vue 프로젝트에서는 일반적으로 vite.config.ts 또는 vue.config.js에서 @를 src 폴더의 별칭으로 설정하면 된다고 한다.vite 사용시 vite.config.ts , vue CLI 사용시 vue.config.js에서 resolve.alias 아래와 같이 설정 해준다.// vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'export de..
✨ Intro🚀 목표Vue.js에서 오픈레이어스의 기본 지도인 OSM(Open Street Map) 띄우기 ⚙️ 환경Vue3(v 3.5.13) + Composition API + setup ✨ 프로젝트 생성 및 라이브러리 설치vite로 vue 프로젝트를 생성해준다.npm create vite@latestvite 설치 가이드 : https://ko.vite.dev/guide/ 프로젝트 생성 후 아래 명령어를 통해 vue 프로젝트로 경로 이동 후 node-modules를 설치 해준다.cd 프로젝트명npm install 오픈레이어스를 설치한다.npm i ol ✨ OpenLayers로 지도 띄우기src 폴더 밑에 composables 폴더를 생성한다. Composable은 Vue 3의 Composition ..
