가수면

vuetify를 이용해 작업하다보면 v-select와 v-autocomplete 등을 사용할 때 input이나  placeholder, 드롭다운 등의 스타일을 커스텀하고 싶은 때가 온다.이 경우 스타일을 수정하는 데에는 크게 2가지 방법이 있다.1. 선택자를 사용해 스타일을 수정하는 법먼저 두 가지 방법이 있다.전역적으로 적용하는 방법, 컴포넌트 내에서 scoped를 사용해 컴포넌트 단위로 적용하는  방법 1. 전역적으로 적용하는 방법별 거 없이 import된 scss나 css 파일에 클래스를 설정해주면 된다.클래스는 개발자 도구로 열어서 타게팅할 요소의 클래스를 직접 확인해서 지정해주면 된다..v-list-item-title { font-size: 14px;}or.custom-selector .v-l..

프론트에서 파일을 다운받기 위해 백엔드로 요청 보낼 때 백엔드에서 구성해야할 로직을 정리한다.백엔드 (JAVA) public void downloadFile(HttpServletResponse response, String fileOriginNm, String policyFileNm, String policyFlpth) { String uploadPath = policyFileService.getPolicyUploadFile(policyFlpth, policyFileNm); // uplo..

MySQL과 Docker 기반으로 배포된 데이터베이스 데이터 이전 방법 정리기존 데이터베이스 덤프 생성docker exec 기존_컨테이너_이름 mysqldump -u 유저이름 -p비밀번호 --all-databases > 저장할_경로/backup.sql 우분투에서 로컬 컴퓨터로 덤프 파일 복사복사하고자하는 경로에서 아래 명령어 실행scp promartians@192.168.40.202:저장된_경로/backup.sql ./backup.sql 새로운 데이터베이스 도커 컨테이너에 복사docker cp /path/to/backup.sql test-db:/backup.sql 데이터 이전// 컨테이너 접속docker exec -it test-db /bin/bash// 데이터 이전 (단일 테이블)mysql -u roo..

LLM 기본 원리몇 개의 단어가 차례로 모인 것을 문장이라고 한다.이 특성대로 다음에 올 단어들 중 가장 확률이 높은 단어를 선택하는 방식을 통해 차례대로 단어를 배치함 (다음 단어가 무엇인지 추측)자동 완성 기능과 유사한 방식이다. (lang을 검색하면 chain이 자동 완성 목록에 뜨는 식)프롬프트의 구성 요소1. 명령어어떤 작업을 수행해야하는지ex) 번역2. contextAI 모델이 작업을 더 잘 이해하고 더 정확한 응답을 생성하는 데 도움이 되는 추가 정보context 제공를 통해 ai 결과값(성능)을 크게 향상시킬 수 있음ex) 대화 상황, 맥락 등3. 입력 데이터AI 모델이 처리해야할 정보ex) 번역해야할 문장4. 출력 표시기기대하는 응답 형태명령어에 포함되어 있는 경우도 있음ex) 출력 포맷..

다수의 문서 등 대량의 데이터를 프롬프트로 전달해야할 경우 토큰 처리map reduce chain랭체인 예시)chain = load_summarize_chain(llm, chain_type="map_reduce")1. 여러 문서에 대해 각각의 문서를 요약하는 요청을 병렬 처리2. 각각의 요약 결과들을 하나로 모아서 재요약 요청단점:1. 요청이 많아지니 비용문제 발생2. 정보 손실 refine chain문서를 하나 하나 중첩 요약해가며 정보의 정확성을 높이는 방법랭체인 예시) chain = load_summarize_chain(llm, chian_type="refine")1. '빈 값 + 첫 문서' 요약2. '1번 요약 + 두 번째 문서' 요약3. '2번 요약 + 세 번째 문서' 요약...대화 세션 유지를..

구현 방법구현 방식의 기본 개념 및 필요 요소들은 다음과 같다. 1. tool로 사용할 함수를 정의한다. 이때, 함수명과 설명을 잘 적는 것이 중요하다.예시)def get_text_length(text: str) -> int: """Returns the length of a text by characters"""2. 에이전트 프로세스를 실행시킬 프롬프트를 작성한다. 2-1. 이때  프롬프트에는 tool의 이름/설명과 tool 목록을 전달하여 LLM이 선택할 수 있도록 한다. 2-1. 최종 프롬프트의 주요 구성 사항은 다음과 같다. tools 제시 및 설명포맷 지정 명령Question: 사용자의 질문Thought: 에이전트가 무엇을 할지Action: 특정 작업을 수행 지시 (알맞은 tool 고르기)A..

langchain 로더 - https://github.com/langchain-ai/langchain/tree/master/libs/langchain/langchain/document_loaders langchain/libs/langchain/langchain/document_loaders at master · langchain-ai/langchain🦜🔗 Build context-aware reasoning applications. Contribute to langchain-ai/langchain development by creating an account on GitHub.github.comText Splitter - llm의 경우 한번에 보낼 수 있는 토큰 제한이 있어 큰 텍스트를 청크로 나누는..

LLM 애플리케이션 기본 구현 방식from langchain.prompts.prompt import PromptTemplatefrom langchain_openai import ChatOpenAIfrom langchain_core.output_parsers import StrOutputParserfrom third_parties.linkedin import scrape_linkedin_profilesummary_template = """링크드인의 유저 정보를 줄테니 아래 요구사항에 맞춰 답변을 생성해주세요.1. 짧은 요약2. 흥미로운 사실 2가지{information}"""summary_prompt_template = PromptTemplate( input_variables=["information..

버전 관련 오류내 os에 설치된 yarn의 버전과 기존 프로젝트에서 사용되고 있는 yarn의 버전이 불일치했을 때 버전을 동기화시키는 과정에서 발생할 수 있는 오류와 방법들을 정리한다. 다운그레이드 해야하는 경우내 os에 설치된 버전이 프로젝트보다 버전이 높아 다운그레이드해야 하는 경우.이 경우 yarn을 삭제 후 재설치 하는 방법이 있겠으나, 그냥 기존에 설치했던 방법에서 버전만 수정하는 방법을 권장한다.그 이유는 yarn을 설치하는 방법이 homebrew, npm, 기본 corepack 등 다양하므로 기존에 설치해서 진행하던 프로젝트들과 yarn 명령어 사용하는 부분에서 충돌을 일으킬 수 있다. 오류 예시) error This project's package.json defines "packageMa..

- JPA -기타 DB 조작 SQL 쿼리https://jhchoi1182.tistory.com/272 MySQL스프링 부트에서 MySQL 도커로 실행했을 때의 환경으로 정리 의존성 설치 // Spring Boot 3.1 이상 com.mysql mysql-connector-j // Spring Boot 3.0 이하 mysql mysql-connector-java 설정 // application.properties spring.datasource.urjhchoi1182.tistory.com@EntityGraph다대일이나 일대다가 설정된 속성을 지정해주면 조인 연산을 수행한다.선언적으로 사용하기 쉬우며, 연관 엔티티들을 한 번의 쿼리로 가져올 수 있다.public interface PostRepository ..

상태 관리Svelte는 let 변수가 변경될 때마다 이를 사용하는 모든 부분이 그냥 자동으로 업데이트된다.예시 코드1) Clicked {count} times예시 코드2)name 변수가 변경될 때마다 greeting 변수도 자동으로 업데이트 됨{greeting}전역 상태 관리writable을 그냥 export해서 사용하면 됨 import { writable } from 'svelte/store';export const count = writable(0);사용법.set(): 스토어의 값을 설정합니다..update(): 현재 값을 기반으로 새로운 값을 설정하는 함수를 받습니다..subscribe(() => {}): 스토어의 값이 변경될 때마다 호출될 콜백 함수를 등록합니다.get(상태값): 스토어의 ..

computed vs watchcomputed종속된 데이터가 변경될 때 자동으로 다시 계산되는 속성을 정의할 때 사용watch와 다르게 데이터 값의 변경이 일어나지 않더라도 최초에 정의된 함수가 실행됨. Full Name: {{ fullName }} watch 정의된 데이터 값 하나만을 감시computed와 다르게 실제 변경이 일어나기 전까지 실행되지 않음.(값이 할당되지 않음) props로 객체 전달props: { // 기본 타입 체크 ('null'과 'undefined'는 모든 타입 유효성 검사를 통과합니다.) propA: Number, // Number 타입 체크 propB: [String, Number], // 여러 타입 허용 propC: { // 문자열이고 부모..

Vuex타입스크립트 적용1. vuex 타입 에러 문제공식 문서에 따르면 특별한 TypeScript 구성이 필요하지 않다고 하는데 모듈 선언에 대한 오류가 발생할 수 있다.import { createStore } from "vuex";모듈 'vuex'에 대한 선언 파일을 찾을 수 없습니다. 'c:/Users/yhhnn/Desktop/dev/frontend/Private/Vue/weather/node_modules/vuex/dist/vuex.mjs'에는 암시적으로 'any' 형식이 포함됩니다.There are types at 'c:/Users/yhhnn/Desktop/dev/frontend/Private/Vue/weather/node_modules/vuex/types/index.d.ts', but this ..

라우팅내부 페이지 라우팅href 속성에 #id(섹션 id) 설정// Navbar Home Portfolio About // Title 섹션 .. // Portfolio 섹션 .. // About 섹션 페이지 라우팅npm i vue-router// router.tsimport { createWebHistory, createRouter } from "vue-router";import TitlePage from "../components/Title.vue";im..

바뀐 부분 상태값  = data() {}   →   ref(초기 상태값)  // 상태값 가져오려면 .value로 가져와야함함수 = methods   →   그냥 선언마운트 시 = mounted() {}    →  onMounted(() => {}); 컴포넌트 import그냥 스크립트에 importPropsconst props = defineProps({});로 props 정의// Child Component {{ color }} const emits = defineEmits(["onSearchCity"]);@click="emits('onSearchCity', inputText)"상위 컴포넌트로 onSearchCity라는 이벤트 전달, inputText는 전달된 값  ..

기본 방식리렌더링 조건큰 조건은 리액트와 동일하다.1. 상태값 변경2. 부모 컴포넌트 리렌더링3. props 변경4. 강제 리렌더링 그러나 1번의 경우 리액트와 다른 점이 있다.리액트의 경우 상태값이 변경되는 컴포넌트가 리렌더링이 발생하여 리렌더링을 방지하기 위해 memo, useMemo, useCallback 등을 이용해야하지만, Vue의 반응형 시스템은 상태 변경을 추적하여 필요한 부분만 리렌더링하므로 React처럼 명시적으로 리렌더링을 방지하는 메커니즘이 크게 필요하지 않다.기본 형식data에 상태 및 변수 정리 영화정보 {{ title }} // :속성명="데이터" 개봉: {{ year }} 장르: {{ category }} 반복문 및 조건문 형식으로 컴포넌트 반복문 사..

컴퓨터 메모리 부족 문제 Error occurred during initialization of VM Could not reserve enough space for 2097152KB object heap  JVM에 할당하기 위한 컴퓨터 메모리가 부족하다는 오류이다.이 경우 컴퓨터의 여유 메모리를 확보하든가, gradle.properties의 설정을 통해 JVM에 할당하는 메모리를 줄여야한다.// android/gradle.propertiesorg.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m-Xmx2048m: 이 옵션은 JVM에 할당할 수 있는 최대 메모리 양-XX:MaxMetaspaceSize=512m: 타스페이스에 사용할 수 있는 최대 메모리. 메타스페이스..

React Native를 위한 안드로이드 스튜디오 설치 및 세팅https://reactnative.dev/docs/environment-setup Setting up the development environment · React NativeThis page will help you install and build your first React Native app.reactnative.devhttps://developer.android.com/studio/run/emulator-acceleration Configure hardware acceleration for the Android Emulator  |  Android Studio  |  Android DevelopersDiscover how the ..

설치 및 구성Next의 경우npm init playwright# oryarn create playwright# orpnpm create playwright기타https://playwright.dev/docs/intro#installation Installation | PlaywrightIntroductionplaywright.dev테스트 실행테스트를 실행하는 방법에는 여러가지가 있다.1. Playwright Test for VSCode 확장 프로그램 설치설치하면 좌측에 탭 목록에 '테스트' 탭이 생긴다. 해당 탭에서 테스트 실행.2. 명령어 입력// 헤드리스 모드에서 실행되며, 테스트 결과와 테스트 로그가 터미널에 표시npx playwright test// 테..

초기 상태값을 설정하는 과정에서 'next referenceerror: localstorage is not defined'와 같은 오류가 발생하는 경우가 있다. 단순 해결 방법이야 간단하다.상태값의 업데이트를 useEffect 안에서 수행하거나, typeof window === 'undefined'와 같은 타입 가드를 사용하면 오류를 해결할 수 있다. 그러나 만약 '로그인 한 상태에서 새로고침 시 로딩이나 로그인 버튼 노출 없이 바로 닉네임이 노출되도록 하는 기능'을 구현한다고 한다면, 위 방법으로는 해결할 수 없다. 내가 바로 이 경우였는데, 오류 해결 이후 원하는 기능을 구현하기 위해 나는 '왜 이런 오류가 발생한 것일까?', '구조적으로 이게 진짜 한계인 건가?'라는 의문을 품게 되었다..