양군의 행복한 이야기

스벨트로 토이 프로젝트를 개발중 콘솔창에서 오류가 발생되었다.content.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'target')at content.js:9:528113어디서 발생되는지 도무지 알수가 없었다.삽질에 삽질을 거듭 하던 중 찾았다.크롬의 DeepL의 확장 프로그램을 종료 시키지 오류가 멈췄다.아 내 시간이여...

환경vitejs, sveltkit내용env로 api key값을 저장후 사용 하는곳에서 읽어 조회를 하였다.API_KEY = "dskdosdlfkjisdlfkjXXXXXXXXXXXXXXXXXX" const serviceKey = import.meta.env.API_KEY; console.log(serviceKey);결과는 undefined ........코파일럿님은 dotenv를 설치 해서 써라....야 내가 알기엔 vite환경에선 dotenv는 기본 포함 되어 있단말이다. 헛소리 말아라 하며구글님께 헬프를 요청 하였다. vitejs sveltekit env 사용구글님은 링크 하나를 던져 주셨다.vitejs env내용을 읽다가 한줄이 눈에 들어왔다.VITE_를 접두어로 사용해야 한다. VITE_PI_K..

SveltKit에서 +page.server.js파일로 DB를 조회 할수 있다.그러나 모든 page마다 각각 조회로직을 사용하면 개발자로서 용납을 할수 없다.그리하여 +server.js 파일을 만들고 그안에다가 API 통합하여 조회 로직을 한쪽으로 몰아서 정리를 하려고 하여 코드를 만들었다./routes/api/+server.jsimport { json } from '@sveltejs/kit';import { supabase } from '$lib/util/supabaseClient';export const GET = async ({ url }) => { console.log('Starting get function...'); const id = url.searchParams.get('id'); const..

설치npm i -D sass svelte-preprocess설정 변경import adapter from "@sveltejs/adapter-auto";import preprocess from "svelte-preprocess"; 사용

align-content just works!  지원 버전 Chrome 123, Firefox 125, Safari: 17.4이상

Svelte환경에서 컴포넌트의 테스트 코드를 작성하던 중 내부의 값이 변경 안 되는 현상이 있었다. 테스트 진행서 props로 전달 받은 자료는 외부에서 변경을 해도 컴포넌트로 전달이 안된다고 Copilot이 알려줬다. 해결 방법은 변경된 자료를 컴포넌트에 다시 넣어주는 거다.     const { getByRole, component } = render(Componentard, {       props: {        parentsInfo: parentsInfo,        changeFunc: changeFunc,      },    });    component.$set({ parentsInfo : parentsInfo });            Component.svelte {paren..

TypeScript, NextJs, React 개발시 Input에 한글 입력 후 Enter로 이벤트처리시 이벤트가 두번 발생되는 현상이 나타났다. const msgEventHandler = (event: KeyboardEvent) => { let msgInput = event.target as HTMLInputElement; if (event.code === "Enter") { event.preventDefault(); console.log("input msg", mbox.msgInput); } 위의 코드로 개발시Enter를 입력 할때마다 input msg 입력값 input msg 입력값 이렇게 되었다. 원인 한글은 영문과 숫자와는 다르게 Key Event가 하나의 문자가 아니다. 예를 들어 "한"이란 ..

NextJs13에서 NextAuth사용시 클라이언트 컴포넌트에서 useSession을 사용하여 Console.log를 찍으며 무한으로 렌더링이 된다. 예시 "use client"; import { useSession } from "next-auth/react"; const ClientSession = async (props) => { let session = useSession(); console.log(session); return ( 클라이언트 세션 ); }; export default ClientSession; 위의 코드는 session을 무한으로 로그를 남기게 된다... 원인은 잘 모르겠다 ㅡㅡ;; 해결 방법은 컴포넌트를 다른 방식으로 만들면된다. "use client"; import { useS..