탄탄대로

오랜만에...지젼 힘든 이슈....해결....(눈물 방울바울) 자동완성 기능을 구현해야 했다.그것은 어렵지 않다. input에 값이 들어올때마다 filtering 해주는 함수를 호출해서 화면에 보여주면 되는 작업이니까 말이다.그런데 한글로 자동완성 기능을 만드려고 하니까 이게 글자 조합이 다 끝나야 v-model이 갱신되면서 이슈가 발생했다. 예를 들면 '기준'이라는 단어를 입력했다고 하면,'ㄱ', '기', '깆', '기주', '기준' 이런 식으로 하나, 하나 입력을 받아야하는데 vue의 v-model의 경우 한글이나 한자, 일본어처럼 컴퓨터 자판에 있는 글자보다 수가 더 많은 문자인 경우에는 IME 조합이 끝나야 반응한다는 것이다....ㅠㅠ!!!!그렇기 때문에 한글에 대한 실시간 처리를 하려면 v-mo..

useQuery Option - enabledTanStack Query(React Query와 같은)의 enabled 옵션을 사용하면 쿼리를 비활성화하거나 일시 중지할 수 있습니다. 이 옵션을 사용하면 특정 조건이 충족될 때까지 쿼리를 실행하지 않도록 설정할 수 있습니다. 다음은 이 옵션을 사용하는 방법과 주요 시나리오에 대한 설명입니다.주요 포인트영구적 비활성화 및 일시 중지:enabled 옵션은 쿼리를 영구적으로 비활성화할 수 있을 뿐만 아니라 나중에 특정 조건이 충족될 때까지 쿼리를 일시 중지할 수도 있습니다.조건부 실행:쿼리를 초기화할 때 바로 실행되지 않도록 하고, 특정 조건이 충족되었을 때만 실행되게 할 수 있습니다.사용 예시필터 폼에서의 사용사용자가 필터 값을 입력한 후에만 쿼리를 실행하고 ..

vue-query 란?vue-query는 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리입니다. 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌습니다.기존 상태 관리 라이브러리(vuex, pinia 등)는 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지 않습니다.클라이언트 상태(Client State)와 서버 상태(Server State)는 완전히 다른 개념이기 때문입니다.클라이언트 상태는 각각의 input 값으로 예를 들 수 있고,서버 상태는 데이터베이스에 저장되어 있는 데이터로 예를 들 수 있습니다.vue-query의 배경TanStackHigh-quality open-source softwar..

스캐폴딩(Scaffolding) 프로그래밍에서 새로운 프로젝트나 모듈을 시작할 때, 초기 구조와 설정을 자동으로 생성해주는 과정이나 도구를 가리킵니다. 이는 개발자가 처음부터 모든 것을 수동으로 설정하고 작성하는 번거로움을 덜어주고, 더 빠르게 개발을 시작할 수 있도록 도와줍니다.

인프런 강의 장기효(캡틴판교) 노트 타입스크립트란 무엇인가 자바스크립트에 타입을 부여한 또 다른 언어이다. 타입스크립트는 자바스크립트와 다르게 브라우저에서 실행하기 위해 파일을 한번 변환해주어야 한다. (컴파일, compile) 타입스크립트를 왜 쓰는가 1. 에러의 사전 방지 의미 없는 값들, 또는 없는 값을 사용하거나 함수를 호출하면서 엮어내는 경우가 발생한다. 화면에 바로 에러가 나타나게 된다. 코드상에서는 데이터의 값을 알 수 없기 때문에 화면에서만 확인 할 수 있고, 또는 직접 데이터를 확인해야한다. 오류 사항을 화면에서나 발견할 수 있는 것이다. 이 부분을 타입스크립트에서 보완할 수 있다. 타입을 정의하면서 브라우저에서 확인하기 전에 코드 상에서 예상되는 오류를 바로 살펴볼 수 있다. 이것은 자..

프로젝트 중에 Vue에서 팝업을 띄워야하는 경우가 있었다. 그냥 Javascript를 썼다면 parent 같은 명령어를 써서 부모창과 자식 창이 정보를 주고 받을 수 있을텐데 Vue에서는 불가능했다. 모달 창으로 띄우면 좋았을텐데 외부 API를 호출해서 사용하는 경우라 Redirect를 시켜야 했기 때문에 window.open()을 써야만했다. 구글 세상을 떠돌아다닌 결과 Vue에서는 대부분 addEventListener를 통해 팝업창과 통신하는 것 같았다. 그래서 나도 그렇게 구현했고 결과 값을 함수로 잘 받아 처리했다. 그런 의미로 알아보는 addEventListener 함수. 일단 공식 문서를 papago로 번역했다. 공식문서 https://developer.mozilla.org/en-US/docs..