본문 바로가기

전체 글

FormData 콘솔로 확인하는 방법 // FormData 확인을 위한 코드 for (let pair of formData.entries()) { console.log(`${pair[0]}:`, pair[1]); // key와 value를 출력 }이 코드는 React에서 FormData 객체의 내용을 확인하기 위해 사용되는 반복문입니다. FormData는 HTML 폼의 데이터를 쉽게 다룰 수 있는 객체로, 주로 폼 데이터를 서버로 전송하거나 이를 조작할 때 사용됩니다.코드 설명:formData.entries():FormData 객체에는 entries()라는 메서드가 있습니다. 이 메서드는 FormData 객체 내에 저장된 모든 키-값 쌍을 **이터레이터(iterator)**로 반환합니다. 각 쌍은 배열의 형태로, 첫.. 더보기
241111기록 오늘은 월요일이라 시간 순삭 아침에 무기 안가지고 출근해서 진짜 정신 없이 돌아간 날 그래도 잘쉬고 내일 일 해야 될 에너지 충전 잘 해야지 더보기
파이토치 1. 인공지능(Artificail Intelligence) 컴퓨터가 인간과 같이 생각할 수 있도록 만드는 기법을 연구하는 학문 2. 머신러닝(Machine Learning)데이터에 기반한 학습을 통해 인공지능을 구현하는 기법 지칭머신러닝 알고리즘의 3가지 분류 1) 지도 학습(Supervised Learning)정답 데이터가 존재하는 상황에서 학습하는 알고리즘 입력(input) 데이터 x와 그에 대한 정답 레이블 y의 쌍(x, y)을 이용해서 학습하는 알고리즘 지도 학습의 목적은 어떤 값에 대한 예측을 수행하는 것 2) 비지도 학습(Unsupervised Learning)정답 레이블 y 없이 입력(input) 데이터 x만을 이용해서 데이터의 숨겨진 특징을 학습하는 방법론 비지도 학습의 목적은 데이터의 숨.. 더보기
[모니터링] OpenTelemetry, Tempo, Prometheus, Loki 적용하기 1. Opentelemetry 및 Prometetheus 의존성 추가 // Opentelemetry implementation("io.opentelemetry:opentelemetry-api") // Prometheus implementation 'io.micrometer:micrometer-registry-prometheus' 2. PrometheusExemplarSamplerConfiguration.javaPrometheus는 메트릭 지표를 수집하는 도구입니다. 예를 들어, 애플리케이션의 CPU 사용량, 메모리 사용량, 요청 속도 등의 성능 지표를 모니터링합니다.OpenTelemetry는 트레이스를 추적하여 분산 시스템에서 요청이 어떻게 처리되는지 파악할 수 있게 도와줍니다.Pr.. 더보기
[React] 키워드 추천 자동완성 기능 구현 1. 구현 내용사용자가 키워드를 입력하면 해당 키워드로 시작하는 제안 키워드가 나오고, tab 키를 누르면 제안 키워드가 입력되는 기능 2. 코드 import React, { useState } from "react";import menuList from "./MenuList.js";import "./App.css";function App() { const [menuName, setMenuName] = useState(""); const [filteredMenus, setFilteredMenus] = useState([]); // 메뉴명 필터링 결과(=자동 완성 리스트) const [suggestion, setSuggestion] = useState(""); // 메뉴명 자동완성 제안 텍스트 //.. 더보기
[React] 자동완성 기능 구현 중 한글이 두번 써지는 현상 해결하기 1. 문제 상황영어 입력은 문제가 없었지만 한글 입력의 경우 문제 발생했습니다.아래와 같이 입력중이던 마지막 문자가 추천키워드 뒤에 나온다는 것입니다.  2. 원인 IME의 조합 상태: 한글 IME는 자음과 모음이 조합되는 과정에서 compositionstart, compositionupdate, compositionend 이벤트를 발생시킵니다. React에서 상태 업데이트가 이 조합 중간에 실행되면 한글 입력이 중단되거나 커서 위치가 예기치 않게 이동할 수 있습니다.React의 비동기 상태 업데이트: React의 setState는 비동기적으로 상태를 업데이트하므로, 한글 입력 상태에서 Tab 키로 자동완성 텍스트를 추가하려고 할 때 업데이트 순서나 타이밍이 IME 입력 처리와 충돌할 수 있습니다.   .. 더보기
🖋 티스토리 "글쓰기 챌린지 2024" 이벤트 소개 🎉 안녕하세요, 블로거 여러분! 📢 이번에 티스토리에서 "글쓰기 챌린지 2024" 이벤트가 진행된다고 합니다! ✨ 글쓰기를 좋아하시는 분들, 블로그를 사랑하시는 모든 분들에게 좋은 기회가 될 수 있는 이번 이벤트, 함께 알아볼까요? 🧐 🏆 이벤트 개요"글쓰기 챌린지 2024"는 티스토리에서 제공하는 다양한 주제에 맞춰 매일 글을 작성해보는 챌린지입니다! 📝 꾸준히 글을 쓰며 블로그 성장을 노릴 수 있고, 또 다양한 주제에 대해 창의적으로 생각해보는 좋은 기회가 될 거예요.기간: 2024년 10월 30일 ~ 2024년 12월 31일 📅대상: 티스토리를 운영하는 모든 블로거 🙋‍♂️🙋‍♀️참여 방법: 챌린지 기간동안 매일 한번씩 #오블완 도전!(자세한 내용은 챌린지 시작일에 공지된다고 합니다!) .. 더보기
[모니터링] OpenTelemetry, Tempo, Prometheus, Loki 1. OpenTelemetryOpenTelemetry는 분산 시스템에서 트레이스(trace), 메트릭(metrics), 로그(logs)를 수집하기 위한 표준 API와 도구를 제공하는 오픈소스 프로젝트입니다. 즉, 애플리케이션의 성능과 동작을 모니터링하고 분석할 수 있도록 데이터를 수집해주는 통합된 프레임워크입니다.Trace (추적): 분산 트레이스를 통해 여러 서비스 간에 요청이 어떻게 전달되고 처리되는지 추적할 수 있습니다.Metrics (메트릭): 애플리케이션의 성능 지표 (CPU 사용량, 메모리 사용량, 요청 속도 등)를 수집합니다.Logs (로그): 애플리케이션 실행 시 발생하는 이벤트를 기록하여 문제 발생 시 원인을 파악하는 데 사용합니다.OpenTelemetry는 애플리케이션 코드에 이러한 데.. 더보기

티스토리툴바