본문 바로가기

전체 글69

AI 시스템 구조 이해하기 MCP, 벡터 DB를 이해하기 전에 먼저 AI 시스템에 대한 구조를 이해해보자. 오늘날의 많은 AI 서비스는 LLM에 외부 도구 / 데이터를 표준화된 연결 방식으로 연결하는 구조로 이루어져 있다.이때 MCP를 사용해 AI가 외부 시스템을 안전하고 일관되게 쓰는 규칙을 정의하고,벡터 DB는 AI가 의미 기반 검색을 할 수 있도록 하는 기억 장치로 볼 수 있다.MCP (Model Context Protocol)MCP란?MCP는 AI 모델이 외부 기능(API, DB, 사내 시스템 등)을 쓰기 위한 표준 규격이다. Function Calling과의 차이Function Calling"이러이러한 함수가 있으니 필요하면 호출해"빠른 실험, 개인 자동화에 적합 MCP AI가 사용할 수 있는 기능을 외부 서버 형태로 제.. 2026. 1. 7.
간단하게 사용해볼 수 있는 와이어프레임 제작 AI툴 신규 서비스 구축을 위해 와이어프레임을 제작할 일이 생겼다.프론트엔드 개발자로서 기존에는 클로드로 모든 것을 해결했지만, 결과물을 프롬프팅뿐만 아니라 직접 수정해보고 싶기도 했고기술이 넘쳐흐르는 시대에 실제 UX/UI 디자이너들은 어떤 툴을 쓸지 궁금해서 여러가지를 사용해봤다. '자산 관리 시스템'에 대해 자산 등록, QR코드 프린트 및 실사 기능 등등의 기능을 포함해서chatGPT를 사용해 프롬프트를 작성해 동일하게 요청했다. 1. Figma - Wireframe DesignerFigma 플러그인에 설치해서 바로 사용 가능하다.💰 한달에 10회 무료 요청 가능 / Pro 업그레이드 비용 : $5상당히 저렴한 가격으로 제공되는데 결과물도 저렴하다. 한장짜리 오버뷰로 나옴.그리고 대화형 프롬프트가 .. 2025. 8. 22.
[React] useState/setState에서 실수하기 쉬운 점 버튼을 클릭하면 숫자가 1씩 늘어나는 코드이다.그런데 콘솔창에는 setCount(count + 1)을 통해 늘어난 값이 아닌 이전 값으로 프린트 되는 이유는? import { useState } from "react";export default function Counter() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); // 다음 렌더링에서 count = 이전 count + 1 console.log("after setCount:", count); } return ( {count} +1 );} 아래의 간단하게 구현된 useState를 보자.u.. 2025. 8. 19.
개발자 영어 표현 Under the Hood (내부적으로는 / 실제 구현에서는)직역하면 "보닛 아래에"라는 뜻으로, 겉으로는 보이지 않지만 내부에서 중요한 역할을 하는 자동차 부품처럼내부적으로 이렇게 동작하고 있다! 라고 설명할 때 덧붙여 쓸 수 있는 표현이다. JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects.= JSX는 겉보기에는 HTML 같지만, 실제 동작 원리는 자바스크립트다. immutable (불변의)OOP에 있어서 immutable objects는 생성 후 그 상태를 바꿀 수 없는 객체를 말한다.이는 실행 중인 쓰레드 간 sync 불일치 문제를 원천적인 차단해주므로 설계/구현/사용이 편리하다.한편으로는.. 2025. 8. 18.
[React] 리액트의 훅이란? 함수형 컴포넌트에서 상태(state)와 리액트의 여러 기능을 사용할 수 있게 해주는 특별한 함수 1. useState상태 관리용 Hook. React 컴포넌트 안에서 지역 변수(local variable)는 단순히 함수가 실행되는 동안만 존재한다.그래서 한 번 렌더링된 후 값이 바뀌더라도, 다음 렌더링 때는 완전히 새로 그려지므로 이전 값이 유지되지 않는다.또한 지역 변수의 값이 변한다고 해서 React가 다시 그려야겠다 라고 판단하지 않기 때문에 리렌더링도 발생하지 않는다. 컴포넌트가 새로운 데이터로 업데이트되려면 두 가지가 필요한데:렌더링 사이에서도 값이 보존되어야 하고값이 변할 때 React가 리렌더링을 트리거해야 한다.이를 해결하는 도구가 바로 useState 이다.useState는 상태 값을 렌.. 2025. 8. 18.
자바스크립트와 타입스크립트의 차이점 🔑 자바스크립트 (JavaScript)정의: 웹 브라우저에서 실행되는 대표적인 스크립트 언어. 현재는 서버(Node.js)에서도 널리 사용.특징동적 타입 언어 → 변수에 어떤 타입이든 넣을 수 있음.실행 시점(Runtime)에서 오류를 발견.별도의 빌드 과정 없이 바로 실행 가능.function add(a, b) { return a + b; // 문자열, 숫자 등 뭐든 들어올 수 있음}console.log(add(2, 3)); // 5console.log(add("2", "3")); // "23" 🔑 타입스크립트 (TypeScript)정의: 마이크로소프트가 만든 자바스크립트의 상위 집합(Superset).특징정적 타입 언어 → 변수와 함수에 타입 지정 가능.실행 전에(컴파일 시점) 오류.. 2025. 8. 18.
Lombok이란 / cannot find symbol 에러 Lombok이란,Getter, Setter, ToString, 생성자 등의 반복되는 메소드를 Annotation을 사용해서 자동으로 작성해주는 자바의 라이브러리이다. 1. Lombok 없이 만든 User 클래스public class User { private String name; private String email; private int age; public User() {} public User(String name, String email, int age) { this.name = name; this.email = email; this.age = age; } public String getName() { ret.. 2025. 4. 4.
React 테이블 커스텀하기 / MUI X DataGrid를 파헤쳐보자 Importimport { DataGrid } from '@mui/x-data-grid';  행/열 정의하기import * as React from "react";import { DataGrid, GridRowsProp, GridColDef } from "@mui/x-data-grid";const rows: GridRowsProp = [ { id: 1, title: "컴플리트 언노운", director: "제임스 맨골드", status: "완료" }, { id: 2, title: "첫 번째 키스", director: "츠카하라 아유코", status: "완료" }, { id: 3, title: "미키17", director: "봉준호", status: "완료" }, { id: 4, title: ".. 2025. 3. 23.
React 테이블을 만드는 방법 / react-bootstrap-table, material ui 1. react-bootstrap-tabledeprecated 된 상태이므로 react-bootstrap-table2를 사용할 것을 권장한다.https://allenfang.github.io/react-bootstrap-table/ React Bootstrap Table allenfang.github.io 예시는 요기 더 잘 나와있다.https://react-bootstrap.netlify.app/docs/components/table/ Tables | React BootstrapExamplereact-bootstrap.netlify.app  2. react-bootstrap-table22020년을 마지막으로 더이상 업데이트 되지 않고 있다.https://react-bootstrap-table.githu.. 2025. 3. 23.

티스토리툴바