Code&Data Insights

1. Google Colab 초기 세팅   2. OpenAI API 키 받아오기 & 입력 import os# OpenAI API 키 설정os.environ['OPENAI_API_KEY'] = "your_key"    3.  모델 설정 **  " model = " 객체 생성 시 옵션 값 지정 할 수 있음 => temperature | max_tokens   4. Chain 실행 &  PromptTemplate 객체 생성 ( input : 유저의 질문 ) # chain 실행llm.invoke('한국에서 가장 좋은 신용카드는?') # ChatPromptTemplate.from_template() - 문자열 형태의 템플릿을 인자로 받아 해당 형식에 맞는 프롬프트 객체를 생성from langchain_core.p..

상태관리 라이브러리를 상황에 따라 선택해야됨! 각 라이브러리에 맞게 성능 향상 방법을 고민하는 것이 중요함!  [ 라이브러리 분류 ] 1) Flux: Redux, Zustand2) Proxy: Mobx, Valtio3) Atomic: Recoil, Jotai Redux - 모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 리듀서에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에서 좋음 - 서버 사이드 렌더링이 가능- redux toolkit [단점]- 보일러 플레이트와 장황한 코드가 필요함 - 방대한 코드량, 익숙하지 않은 원리와 직관적이지 않은 코드 => 러닝 커브 높음 - 리액트 전용 라이브러리가 아니기 때문에, 리액트 내부 스케줄러에 접근하기 어려웠음-..

동기(Synchronous) vs 비동기(Asynchronous)동기(Synchronous) 프로그래밍- 코드가 작성된 순서대로 차례대로 실행- 각 작업이 완료될 때까지 다음 작업이 시작되지 않음 비동기(Asynchronous) 프로그래밍- 코드가 작성된 순서와 상관없이 실행- 한 작업이 완료될 때까지 기다리지 않고 다른 작업을 동시에 수행할 수 있음 비동기를 사용하는 주요 이유? => 멀티태스킹을 구현하여 시스템 자원을 효율적으로 사용하기 위해서! => 여러 스레드나 프로세스가 동시에 실행됨    비동기 프로그래밍의 발전 순서 1) Callback 함수:  함수를 등록하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출해서 실행하는 함수 - 초기 비동기 프로그래밍에서는 콜백 함수를 ..

Flux 패턴 & 단방향 데이터 흐름: 리액트는 단방향 데이터 흐름(Action → Dispatch → Reducer → Store)을 기반으로 하는 Flux 패턴을 사용 Action: 상태 변경을 트리거하는 객체Dispatch: Action 객체를 Store에 전달하는 함수Reducer: Action에 따라 상태를 업데이트하는 함수Store: 애플리케이션의 전역 상태를 관리하는 객체View: Dispatch된 Action을 통해 상태를 변경하고, 상태가 변경되면 UI가 자동으로 업데이트됨 Redux: Flux 패턴을 구현한 라이브러리로, 애플리케이션의 상태를 단방향 데이터 흐름으로 관리 [장점]- 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고 전달할 수 있어 효율적- 상태 변경이 예측 가능..

검색증강생성(Retrieval-Augmented Generation): 응답 생성 전 외부의 신뢰할 수 있는 데이터를 추가적으로 제공함으로써 LLM의 출력을 최적화시키는 방법  - 목적: Generative AI가 잘못된 답을 하는 환각현상을 줄일 수 있음 => LLM의 외부에서 추가 데이터를 제공해서 질문과 관련도가 높은 답변을 하도록 함  - 유사한 활용 기법 : According to' + 사전정보를 참고하여 더 정교화되고 정확한 답변을 제공   "According to ...": Prompting Language Models Improves Quoting from Pre-Training DataLarge Language Models (LLMs) may hallucinate and generate ..

상태(State)와 상태 관리란?State: 컴포넌트의 데이터 상태(ex) 사용자가 입력한 값이나 버튼 클릭 상태 상태 관리 : 화면을 변경하는 데 필요한 데이터를 관리하는 과정 [ 상태관리의 필요성 & 효과 ]- 상태가 변경될 때, Virtual DOM을 사용하여 관련된 DOM만 효율적으로 업데이트함 => 불필요한 DOM 접근최소화- 상태관리를 통해 코드 간결화와 유지보수성 강화가 가능 => 상태 관리는 필요한 상태만 관리하는 것이 중요! 최소한의 상태를 관리 : 불필요한 상태를 관리하면, 코드가 복잡해지고 렌더링 성능이 저하됨! 상태 관리의 범위1) 로컬 상태 (Local State) => useState: 각 컴포넌트 내에서만 사용되는 상태- 사용자가 입력한 데이터를 처리하거나 UI의 동작을 제어하..

React란?: Meta(구 Facebook)이 개발한 UI 라이브러리 주요 특징 Keyword (1) 컴포넌트 기반 구조(2) Virtual DOM 바탕의 성능 최적화(3) SPA 개발에 필요한 기능과 도구를 제공=> SPA(Single Page Application) : 하나의 HTML 페이지를 처음에 로드한 뒤, 페이지 이동이나 추가 데이터가 필요할 때 자바스크립트를 이용해 서버와 소통하여 필요한 부분만 업데이트하는 방식 React의 특징1) 컴포넌트를 기반으로 UI를 표현할 수 있음 -> 유지 보수 측면에서 매우 효율적임-> 페이지를 컴포넌트 단위로 개발할 수 있음  2) 화면 업데이트 구현이 쉬움-> 리액트는 선언형 프로그래밍(목적만 깔끔하게 명시, 코드가 간결함)의 방식으로 동작함==> 업데이..

(1) "use strict": strict mode 선언시, 선언되지 않은 변수를 사용할 수 없음  (2) 문자열 인덱싱 (string index): 문자열의 특정 인덱스에 접근가능=> str[0]  (3) string literal break up : 문자열을 여러 줄로 나누어 작성이 가능" hello" + "hh" => return hello hh  (4) 예약어를 속성 이름으로 사용 가능 (5) 배열의 모든 요소를 합산하거나, 특정 로직을 적용하여 값을 축약할 수 있음=> Array reduce(), reduceRight() : sum of all numbers in an array  (6) 배열의 모든 요소가 특정 조건을 만족하는지 확인=> Array every() : numbers.every(..