아톨러브

1. Amazon CodeWhisperer란 무엇인가?Amazon CodeWhisperer는 머신러닝 기반의 코드 생성 AI 도구로, 개발자가 코드를 작성하는 동안 실시간으로 코드 제안을 제공합니다. 주석이나 기존 코드에 기반하여 함수, 클래스, 코드 블록 등을 추천해 주기 때문에 개발 생산성을 크게 향상시킬 수 있습니다. 현재 VS Code, IntelliJ IDEA, PyCharm 등 다양한 IDE에서 사용할 수 있습니다. 이 문서에서는 VS Code에서 CodeWhisperer를 설정하고 사용하는 방법을 단계별로 상세히 설명합니다.2. 시작하기 전에 준비할 것들Visual Studio Code (VS Code): 최신 버전이 설치되어 있어야 합니다.AWS Builder ID: CodeWhisper..

AWS EC2 인스턴스에 설치된 백엔드(Flask + Qdrant)와 프론트엔드(React serve)를 처음부터 올바르게 구동하는 순서를 상세히 정리합니다. 현재 구동 중인 프로세스를 확인하고 종료하는 단계부터 시작하겠습니다.AWS EC2 인스턴스에서 애플리케이션 구동 순서 (단계별) 사전 준비물:AWS EC2 인스턴스에 SSH로 접속 가능한 터미널 창sudo 권한각 애플리케이션의 파일 경로 (예: /home/ec2-user/flask, /home/ec2-user/front/build)Flask 앱 파일명 (예: chapter5-1-3_from_4-2_from_3-7_copy.py)1단계: 현재 실행 중인 모든 관련 프로세스 확인 및 종료 이 단계에서는 Qdrant, Flask, serve 관련 프로세..

이 에러 메시지는 "Address already in use" (이미 사용 중인 주소) 문제로, Flask 애플리케이션을 실행하려는 5500번 포트가 이미 다른 프로그램에 의해 사용되고 있기 때문에 발생합니다.Port 5500 is in use by another program. Either identify and stop that program, or start the server with a different port.이 메시지처럼, 5500번 포트를 사용 중인 프로그램을 찾아 중지시키거나, Flask 서버를 다른 포트에서 시작해야 합니다. 해결 방법:옵션 1: 5500번 포트를 사용 중인 프로그램 찾아서 중지시키기 (권장)이 방법은 가장 일반적이며, 기존에 백그라운드로 실행해 둔 Flask 앱이나 ..

코드는 React를 사용하여 간단한 웹 챗봇 인터페이스를 구현한 것입니다. 사용자가 메시지를 입력하고 전송하면, 해당 메시지가 화면에 표시되고 백엔드 API(http://localhost:5500/searchChat)와 통신하여 챗봇의 응답을 받아 다시 화면에 표시하는 기능을 합니다.import React, {useState} from "react" // React 라이브러리와 React 훅인 useState를 가져옵니다.// useState: 컴포넌트 내에서 상태(데이터)를 관리할 수 있게 해주는 훅입니다.import "./ChatPage.css" // ChatPage 컴포넌트의 스타일을 정의하는 CSS 파일을 가져옵니다.const ChatPage =() => { // ChatPage라는 이름의 함수형..

아래의 Flask 애플리케이션 코드는 Qdrant 벡터 데이터베이스와 OpenAI API를 연동하여 간단한 RAG(Retrieval Augmented Generation) 기반 챗봇 서비스를 구현한 것입니다. 각 부분에 대한 상세 정리와 함께, 더 좋은 코드가 되기 위한 개선 사항 및 추가 코드를 정리합니다.1. 코드 전체 해설이 코드는 크게 세 가지 주요 구성 요소로 나뉩니다: Flask 웹 서버, Qdrant 벡터 데이터베이스 클라이언트, OpenAI API 클라이언트.1.1. 초기 설정 및 클라이언트 초기화from flask import Flask, request, jsonify # Flask 웹 프레임워크 관련 모듈from qdrant_client import QdrantClient # Qdran..

세 가지 Python 코드는 Qdrant 벡터 데이터베이스를 활용한 기본적인 벡터 검색 워크플로우를 보여줍니다. 각 코드가 어떤 역할을 하는지, 그리고 전체적인 흐름은 어떻게 되는지 상세히 정리합니다.전체 워크플로우 개요이 세 가지 코드는 다음과 같은 순서로 실행되어야 하며, 각기 다른 역할을 수행합니다.첫 번째 코드: Qdrant에 벡터를 저장할 **컬렉션(Collection)**을 생성합니다.두 번째 코드: OpenAI 임베딩 모델을 사용하여 텍스트를 벡터로 변환한 후, 이 벡터들을 생성된 컬렉션에 **삽입(Upsert)**합니다.세 번째 코드: 새로운 텍스트를 벡터로 변환한 후, 이 쿼리 벡터와 가장 유사한 벡터들을 컬렉션에서 **검색(Query)**합니다.이 과정은 RAG(Retrieval Aug..

Qdrant 컬렉션 검색을 위한, 파이썬 코드를 바탕으로 각 부분의 의미와 전체적인 동작 흐름을 상세히 설명합니다.1. 코드의 의미이 코드는 Qdrant 벡터 데이터베이스에 연결하여, 미리 정의된 test 컬렉션에서 특정 query_vector와 유사한 상위 2개의 포인트를 검색하고, 그 결과(ID, 벡터, 페이로드, 점수)를 출력하는 기능을 수행합니다.from qdrant_client import QdrantClient # Qdrant 서버와 통신하기 위한 클라이언트 라이브러리를 가져옵니다.from qdrant_client.models import Distance, VectorParams, PointStruct # Qdrant 모델 정의를 가져옵니다.# Distance: 벡터 간 거리 측정 방식 (예:..

Python 코드는 Qdrant 컬렉션에 실제 데이터인 **포인트(Point)**를 삽입(Upsert)하는 예시입니다. 각 부분의 의미와 실행 방법, 그리고 올바른 결과를 상세히 설명합니다.1. 코드의 의미이 코드는 test라는 이름의 Qdrant 컬렉션에 두 개의 포인트(벡터와 페이로드)를 삽입하거나 업데이트합니다. upsert는 "Update"와 "Insert"의 합성어로, 해당 id를 가진 포인트가 이미 존재하면 업데이트하고, 없으면 새로 삽입합니다.from qdrant_client import QdrantClient # Qdrant 서버와 통신하기 위한 클라이언트 라이브러리를 가져옵니다.from qdrant_client.models import Distance, VectorParams, Point..

아래 Python 코드는 Qdrant 벡터 데이터베이스에 새로운 컬렉션(Collection)을 생성하는 예시입니다. 각 부분의 의미와 실행 방법, 그리고 올바른 결과를 상세히 설명합니다.1. 코드의 의미이 코드는 Qdrant 클라이언트를 사용하여 test라는 이름의 새로운 컬렉션을 생성합니다. 이 컬렉션은 2차원(dimension) 벡터를 저장하며, 벡터 간의 유사도를 측정할 때 코사인 유사도(Cosine Distance) 방식을 사용하도록 설정됩니다.from qdrant_client import QdrantClient # Qdrant 서버와 통신하기 위한 클라이언트 라이브러리를 가져옵니다.from qdrant_client.models import Distance, VectorParams # Qdran..

React의 기본적인 동작 방식, React Router를 이용한 페이지 라우팅, 그리고 Redux Toolkit을 활용한 상태 관리 방법에 대해 상세히 설명합니다. 각 파일이 어떤 역할을 하는지 이해하시면 React 프로젝트의 구조와 흐름을 파악하는 데 도움이 될 것입니다.1. index.js 파일 : React 앱의 시작점index.js는 React 애플리케이션의 가장 첫 번째 진입점입니다. 웹 페이지의 HTML과 React 컴포넌트를 연결하고, 전역적으로 필요한 설정(라우터, 상태 관리 등)을 적용하는 역할을 합니다.import React from 'react'; // React 라이브러리를 가져옵니다. JSX 문법을 사용하기 위해 필수적입니다.import ReactDOM from 'react-do..