아톨러브

이미지 파일 형식의 기본 개념이미지 파일 형식은 디지털 이미지를 컴퓨터에 저장하는 방식에 따라 나뉩니다. 크게 압축 방식과 색상 정보 저장 방식이 중요한 기준이 됩니다.손실 압축 (Lossy Compression): 파일 크기를 줄이기 위해 일부 데이터를 영구적으로 제거합니다. JPEG가 대표적이며, 압축률이 높지만 원본 이미지의 품질이 손실됩니다.비손실 압축 (Lossless Compression): 압축 후에도 원본 데이터를 완벽하게 보존합니다. PNG, GIF, TIF가 여기에 속하며, 압축률은 낮지만 이미지 품질을 유지할 수 있습니다.이제 각 파일 형식을 자세히 살펴봅니다.1. JPEG / JPG (Joint Photographic Experts Group)기술 및 특성:손실 압축 방식을 사용합니..

애플리케이션 개발 시 API 키와 같은 민감한 정보는 소스 코드에 직접 작성하지 않고 안전하게 관리하는 것이 매우 중요합니다. VS Code에서 Python을 사용할 때, API 키를 관리하는 가장 일반적인 두 가지 방법인 시스템 환경 변수와 .env 파일에 대해 단계별로 상세히 정리합니다.[ 방법 1: 시스템 환경 변수에 API 키 저장 및 사용 ]시스템 환경 변수는 운영 체제 전체에서 접근할 수 있는 전역 변수입니다. 이 방법을 사용하면 한 번만 설정하면 해당 컴퓨터의 모든 프로그램에서 API 키를 사용할 수 있습니다.단계 1: 시스템 환경 변수에 API 키 설정하기a) Windows (PowerShell 사용)PowerShell을 관리자 권한으로 실행합니다. 시작 메뉴에서 powershell을 검색..

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라는 이름의 함수형..