✨ 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 ..
IntroVue는 컴포지션 API, 옵션 API, setup 사용 유무 등 여러가지 코딩 스타일이 존재하는데, 아래 내용은 Vue 공식 문서 권장에 따라 컴포지션 API(Composition API) + setup 옵션을 적용한 스타일을 기준으로 설명한다.https://ko.vuejs.org/api/composition-api-setup.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 🚀 목표props로 값 전달하는 방법props 값을 구조 분해 할당하여 사용하기 ✨ 기본적인 Props 전달 방법Vue의 모든 props는 하위 속성과 상위 속성 사이의 단방향 바인딩을 형성하므로 부모가 내려준 값을 자식이 직접 변경할 수 없다.즉, ..
✨ 클로저 트랩이란(Closure Trap)?"stale closure" (오래된 클로저) 문제라고도 하며, 함수형 컴포넌트에서 useEffect, useCallback, useMemo 등의 훅을 사용할 때, 이전의 상태(state)나 props가 의도치 않게 캡처되는 문제를 의미한다. 특히 useEffect 내부에서 이벤트 리스너를 추가할 때, 오래된 상태를 참조하는 경우가 많다. ✨ 클로저 트랩이 발생하는 이유자바스크립트의 클로저(Closure)는 외부 변수의 상태를 기억하는 함수이다. React에서는 렌더링될 때마다 함수형 컴포넌트가 다시 실행되는데, 이 과정에서 클로저가 이전의 상태(state)나 props를 캡처하면 예상과 다른 동작이 발생할 수 있다. ⚠️ 문제 발생 예제 1 - useEff..
v-if 를 사용하여 조건부 랜더링✅ 장점Vue가 필요할 때만 해당 컴포넌트를 생성하므로 불필요한 랜더링이 없다.🟧 단점한 번 v-if로 렌더링을 제거하면 해당 컴포넌트의 상태도 사라지기 때문에 다시 렌더링하면 초기 상태로 돌아간다. A 버튼 B 버튼 v-show를 사용하여 렌더링✅ 장점v-show는 DOM에서 제거되지 않고, CSS display: none;으로 숨김 처리된다.따라서 컴포넌트의 상태가 유지된다. (예: input 입력값 등이 남아있음)🟧 단점모든 컴포넌트가 한 번 렌더링되며, DOM에 계속 남아 있기 때문에 메모리 사용량이 증가할 수 있다. A 버튼 B 버튼 component를 사용하여 렌더링✅ 장점는 동적 컴포넌트 또..
Vue3에서는 상태를 반응형으로 관리할 때 computed와 watch를 사용하는데 동작 방식과 목적이 다르다. ✨ computedcomputed는 어떤 상태(state)로부터 계산된 값을 만들 때 사용한다.ref와 달리 의존하는 값이 변경될 때만 다시 계산되기 때문에 성능 최적화에 유리하다.Composition API를 사용할 때 computed는 ref나 reactive를 기반으로 계산된 값을 반환하는 getter 함수를 받는다.computed는 기본적으로 읽기 전용(read-only) 이지만, getter와 setter를 함께 정의하면 값을 설정할 수도 있다.언제 사용할까❓반응형 상태를 기반으로 새로운 값을 만들 때성능을 고려할 때 (computed는 결과를 캐싱한다.)다른 데이터에서 의존적인 값을..
v-for 사용시 key값 사용하기🚨 Vue 3에서는 사용 시 key가 없으면 경고(warning)가 발생한다.일반적인같은 경우에는 여전히 key 없이도 동작하지만, 사용을 권장한다고 한다.또 다른 주의점은 v-for를 사용할 때 key 값으로 index를 사용하는 것은 몇 가지 문제를 일으킬 수 있다는 점이다. key 값으로 index를 사용시 문제점1. 컴포넌트 상태 유지 문제 Vue는 key를 기준으로 가상 DOM에서 요소를 식별하고 업데이트할지 여부를 결정한다. index를 key로 사용하면 배열이 변경될 때 예상치 못한 상태 유지 문제가 발생할 수 있다. 첫 번째 요소 { id: 1, value: "A" }를 제거하면 id: 2와 id: 3이 한 칸씩 앞으로 이..
