붉은범의개발일기

ERD, Chen, IE, UML 클래스 다이어그램 표기법

ERD(Entity-Relationship Diagram)데이터베이스 설계 단계에서 맨 처음 단계인 개념적 모델링 단계에서 ERD 를 작성한다.Entity (개체) 란 현실에 존재하는 개별적으로 식별할 수 있는 물리적 또는 추상적인 개체이며, 각 Entity 는 특징을 나타낼 수 있는 Attribute (속성) 들을 가지고 있다. ‘고객’ 이라는 Entity 는 ‘아이디’, ‘회원 등급’ 등의 Attribute 를 가질 수 있고, ‘상품’ 이라는 Entity 는 ‘상품 번호’, ‘가격’ 등의 Attribute 를 가질 수 있다.ERD 표기법의 종류와 특징ERD를 작성하는 방법은 여러 가지가 있으며, 가장 대표적인 표기법을 정리하면 아래와 같다 표기법특징사용 목적Chen 표기법엔티티: 직사각형, 속성: 타..

SKALA/Back-end, DB 2025. 4. 3. 10:25

MVVM 패턴, MVC패턴

Vue의 특징 - MVVM 패턴MVVM 패턴은 Model-View-View Model 패턴Model과 View 사이에 ViewModel 이라는 중간 계층을 두어, View와 Model 간의 결합도를 낮추는 패턴MVVM 패턴 (Vue.js 기준)MVVM(Model-View-ViewModel)은 UI 로직과 비즈니스 로직을 분리하는 패턴으로, Vue.js에서는 다음과 같이 적용된다.MVVM 구성 요소Model: 데이터를 저장하는 영역 (ex: Vue의 data 혹은 Vuex/Pinia 상태)ViewModel: Model과 View를 연결하는 중간 계층 (ex: Vue의 computed, methods, watch)View: 실제 UI (ex: Vue 템플릿, template 부분) MVC 패턴 (Spring..

SKALA/Front-end 2025. 4. 2. 13:53

Proxy란??

프록시(Proxy)란?JavaScript의 Proxy 객체는 객체를 감싸서 동작을 가로채고 수정할 수 있는 기능을 제공한다. 즉, 어떤 객체를 감싸서 해당 객체의 프로퍼티 접근, 값 변경, 함수 호출 등을 가로채서 특정 로직을 추가하거나 동작을 변형할 수 있왜 Proxy를 쓰는가?로컬 개발 환경에서는 보통 프론트엔드(Vite)와 백엔드(Spring Boot)가 분리되어 있다. 이때, CORS (Cross-Origin Resource Sharing) 문제가 발생할 수 있다.브라우저 보안 정책상, 다른 도메인(예: http://localhost:5173 → https://something.com)으로 요청을 보내면 차단될 수 있기 때문이다.Vite의 프록시를 설정하면:CORS 문제 해결: 프론트엔드에서 백엔..

SKALA/Front-end 2025. 4. 1. 16:18

Vue.js , v-show vs v-if 차이

v-showv-show는 CSS의 display: none;을 이용해 컴포넌트를 숨긴다.즉, DOM에는 남아 있지만, 화면에 보이지 않도록 설정된다. 토글 이 문장은 v-show로 제어됨v-show vs v-if 차이점기본 작동 방식v-if:조건이 false일 때 DOM에서 요소를 완전히 제거한다.전환 시 요소를 새로 생성하거나 제거한다.템플릿 블록 내부의 이벤트 리스너와 자식 컴포넌트가 제거되고 다시 생성된다v-show:항상 DOM에 렌더링되지만, 조건이 false일 때 display: none CSS 속성을 통해 숨김 처리한다.초기 렌더링 비용이 더 높지만 전환 비용은 더 낮다.언제 무엇을 사용할까?v-if 사용 시기:조건이 런타임에 자주 변경되지 않을 때초기 로딩 성능이 중요할 때조건부 콘텐츠에..

SKALA/Front-end 2025. 3. 31. 10:45

Vue.js, watch() 메소드, 사용법

watch() 메소드란?Vue의 watch() 메소드는 특정 반응형 데이터(ref, reactive 등)의 변화를 감지하고, 값이 변경될 때 실행할 콜백 함수를 정의하는 데 사용된다.watch() 사용 방법watch(감시할 변수, (새 값, 이전 값) => { 실행할 로직 })여러 개의 변수를 감시할 수도 있음.ref, reactive 데이터에서 사용 가능.1. 사용법ref는 watch()에서 바로 감시할 수 있음ref는 내부적으로 .value를 감지하도록 Vue가 알아서 처리해 줌.reactive 객체의 속성은 Vue가 직접 감지하지 못함.그래서 () => page.current처럼 getter 함수를 넘겨줘야 함.page.current.value는 아예 존재하지 않는다만약 그냥 page 객체안에 어느..

SKALA/Front-end 2025. 3. 28. 09:03

Fine-tuning 개념 및 장단점

Fine-tuning미리 학습된 LLM을 특정 작업이나 도메인에 적합하게 조정하는 과정학습이 완료된 기준 LLM 모델의 가중치를 새로운 학습 데이터를 이용하여 변경시키는 것파인 튜닝의 목적도메인 특화된 모델 생성다국어 지원기존 모델의 성능/기능 향상Fine-tuning 프로세스에서 LangChain 역할데이터 준비 : LangChain은 특정 작업에 맞는 데이터 세트를 준비하는데 도움을 제공모델 훈련 : LangChain은 파인 튜닝을 위한 효율적인 훈련 파이프라인을 설정하는데 도움을 제공모델 평가 : LangChain은 파인 튜닝된 모델의 성능을 평가하는 데 도움을 제공파인 튜닝의 영향대량의 데이터로 학습된 모델에게 새로운 데이터 제시LLM 학습의 결과물인 기존 파라미터가 수정됨이를 Catastroph..

SKALA/AI 2025. 3. 27. 15:30

Python 지니 차트 크롤링하기

파이썬으로 웹 크롤링 하기!! 조원분들과 토이 프로젝트를 진행하고 있었다주제는 Vector DB와 RAG를 구축하여 사연을 받고 해당 사연과 비슷한 감성의 노래를 Vector DB에서 찾아 추천해주는 시스템이다. LLM은 gpt-4o-mini를 썻던 걸로 기억한다 내가 맡은 부분은 Vector DB에 넣을 노래 자료, 제목, 가수, 가사를 크롤링해서 1000개 준비하기!!일단 지니차트에서 TOP 200을 2025년,24년,23년,22년,21년 자료를 가지고 온다. 이 때 가사까지는 못 가지고 오니제목과 가수만 가지고 온다 import requestsfrom bs4 import BeautifulSoupimport datetimeimport timeimport jsondef crawl_genie_chart_..

SKALA 2025. 3. 26. 21:25

토큰, 청크, 벡터 DB, RAG

토큰(Token)LLM이 텍스트를 내부적으로 처리하는 최소 단위단순히 "단어"가 아니라, 문자, 부분 단어, 공백, 문장 부호 등도 포함예시"Hello, world!" → ["Hello", ",", " world", "!"] (공백도 포함됨)"책상" → ["책", "상"] (단어가 조각날 수도 있음)청크(Chunk)LLM을 학습하거나 추론할 때, 긴 텍스트를 일정한 크기로 나눈 블록한 번에 처리할 수 있는 문장의 길이를 제한하기 위해 사용됨하나의 청크는 여러 개의 토큰으로 구성됨예시"Hello, world! This is ChatGPT. Nice to meet you!" →청크1: "Hello, world! This is ChatGPT."청크2: "Nice to meet you!"만약 한 청크당 10개 ..

SKALA/AI 2025. 3. 25. 13:04