Code&Data Insights

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(..

HTTP와 HTTPS의 차이점 및 HTTPS의 장점=> 현재 웹에서는 대부분 HTTPS를 사용한다.주요 웹사이트와 브라우저들이 보안을 강화하기 위해 HTTPS를 기본으로 요구하고 있으며, HTTP로 접속할 경우 "안전하지 않음" 경고가 표시되는 경우도 많음.=> (24.10 update) 데이터 암호화를 가능하게 해줌 : 중간자 공격 방지 브라우저 렌더링 엔진의 HTML, CSS, JavaScript 해석 순서: 파일을 웹페이지로 변환하기 위해 브라우저가 따르는 흐름- DOM : 요소들의 위치, 배치, 모양에 관한 모든 정보가 담겨 있음=> 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를..

웹 애플리케이션은 클라이언트(웹 브라우저)와 서버 간의 요청-응답 사이클로 작동한다. 클라이언트가 서버에 정보를 요청하면, 서버는 필요한 리소스를 처리하여 클라이언트에게 반환한다. 이러한 과정 덕분에 사용자는 웹 페이지를 보고 상호작용할 수 있게 되는 것이다.Web 브라우저의 데이터 저장 방식웹 스토리지웹 애플리케이션은 사용자 데이터를 저장하기 위해 여러 가지 스토리지 옵션을 제공한다.세션스토리지: 세션스토리지는 현재 열려 있는 브라우저 창에서만 데이터를 유지한다. 창을 닫으면 데이터는 삭제되며, 약 5MB의 용량을 제공한다. 일시적인 데이터를 저장하는 데 적합하며, 역시 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. 일반적으로 폼 정보나 장바구니와 같은 휘발성이 강한 데이터를 저장하는 데 ..

https://www.aitimes.com/news/articleView.html?idxno=158463 "2년 내 LLM 학습 데이터 고갈...데이터 문제로 AI 발전 중단될 것" - AI타임스급속도로 성장하는 인공지능(AI) 모델이 데이터 부족 문제로 위협받고 있다는 지적이 나왔다. 현재 인터넷상에 존재하는 데이터만으로는 2년 내 AI 모델 성능을 높이는 데 한계를 맞을 것이라는www.aitimes.com요약 : AI 모델인 GPT-4나 구글의 제미나이와 같은 기술은 데이터 부족에 직면하고 있음. 데이터 요구량은 증가했지만, 품질이 낮거나 저작권 문제로 인해 접근이 제한되어 있기 떄문!--> 이에 대안으로 합성 데이터를 사용할 수 있지만, 모델 붕괴 가능성이 있습니다. 이러한 이유로 향후에는 도메인별..