코딩공부 146

[MCP] Task Master AI

설명https://www.youtube.com/watch?v=xdGQ5G2xmO4&t=525s커서와 Superbase라는 DB를 활용함(가장 적합)커서는 MCP 설정이 많음Superbase도 MCP로 연결하면 자동으로 DB 테이블 생성설치npm i -g task-master-aitask-master inittm으로 별칭 설정: y추가세팅:y모델선택에서 엔터 누른 후 AI선택AI를 3개 고름.env.example 파일을 .env로 변경사용하는 API 입력.cursor → mcp.json 파일“env” 안에 사용하는 API 입력AI를 통해 만들고자 하는 AI의 프로젝트 md 파일 생성scripts라는 폴더를 만들고, md파일 이동example_prd.txt# Overview [Provide a high-l..

코딩공부/MCP 2025.06.09

AI 에이전트 시대의 새로운 코딩 패러다임

AI 시대의 새로운 코딩 패러다임바이브 코딩(Vibe Coding)은 안드레이 카파시(Andrej Karpathy)가 2025년 초 제시한 혁신적인 개발 방식으로, 개발자가 자연어로 의도를 설명하면 AI가 실행 가능한 코드를 생성하는 새로운 패러다임입니다. 이는 단순한 코드 자동완성을 넘어서, 개발자의 사고방식과 작업 흐름 자체를 변화시키는 근본적인 전환을 의미합니다.바이브 코딩의 핵심 개념정의와 특징바이브 코딩은 사용자가 코드를 완전히 이해하지 못한 채 AI가 생성한 코드를 수용하는 것이 핵심입니다. 카파시는 "LLM이 코드의 모든 줄을 작성했지만, 당신이 모든 것을 검토하고 테스트하고 이해했다면 그것은 바이브 코딩이 아니다. 그것은 LLM을 타이핑 보조 도구로 사용하는 것이다"라고 명확히 구분했습니다..

Zustand의 개념 및 기능 정리

Zustand: 간단하고 강력한 상태 관리 라이브러리 🐻Zustand는 React에서 사용하기 쉬운 상태 관리 라이브러리입니다. Redux의 복잡성 없이 단순하면서도 강력한 기능을 제공합니다.1. create 함수 (콜백 set, get) 🛠️Zustand의 핵심은 create 함수로, 상태와 그 상태를 변경하는 액션을 정의합니다.import { create } from 'zustand';interface BearState { bears: number; increasePopulation: () => void;}const useBearStore = create((set, get) => ({ bears: 0, increasePopulation: () => set({ bears: get().bear..

상태관리 라이브러리 Zustand의 기본 개념과 기능

🐻 Zustand, 뭐하는 친구야?안녕하세요! 리액트를 사용하다 보면 상태 관리를 고민하게 되죠?Context API, Redux… 복잡하다고 느끼셨다면 ✋“작고, 빠르고, 정말 간단한 상태관리 라이브러리” → Zustand를 소개합니다!✅ Zustand는 이런 라이브러리예요가볍고 빠른 상태관리Redux보다 훨씬 코드가 짧고 심플Context API 없이도 전역 상태를 공유할 수 있음React 전용, TypeScript도 잘 지원💡 언제 써야 할까?여러 컴포넌트에서 전역 상태를 공유해야 할 때로그인 상태, 다크모드, 장바구니, 토글 상태 등을 관리할 때Context API가 불편하거나 깊은 구조에서 쓰기 힘들 때🛠️ 자주 쓰는 명령어/기능명령어/기능 설명create()상태 스토어 생성 함수 (Zus..

시계열데이터 PostgreSQL Timescale 압축률과 조회속도

📦 압축률 (Compression Ratio)일반적으로 90~95% 감소 (원본 대비 5~10% 크기)가 대표적입니다.사례 유형 원본 크기 압축 후 크기 압축률금융 틱 데이터5694 MB75 MB89% ↓IoT 센서 데이터1100 GB~5-10 GB90-95% ↓시계열 로그 데이터71 TB~50-100 GB90-95% ↓핵심 메커니즘:컬럼 기반 압축(Array 형식 저장) + 중복 제거segmentby(그룹화 컬럼)와 orderby(정렬 컬럼) 설정에 따라 효율성 차이5⚡ 조회 성능 향상시간 기반 청크(Chunk) 사용 시 50~90% 쿼리 시간 단축이 일반적입니다. 주요 요인별 개선 효과:1. 시간 필터 쿼리SELECT * FROM sensor_data WHERE time >= NOW() - INTE..

코딩공부/DB 2025.04.23

PostgreSQL TimescaleDB의 청크와 압축 개념정리

✅ 1. 청크(Chunk)의 개념과 "물리적인 데이터 분리"🔹 청크란?하나의 큰 테이블 데이터를 시간/범위 기준으로 나누어 저장한 작은 단위주로 TimescaleDB와 같은 확장 모듈에서 사용예: test라는 테이블이 있다고 하면, test_chunk_1, test_chunk_2 등으로 나뉘게 됨🧱 “물리적인 데이터 분리”란?단순히 "논리적으로 구분된 데이터"가 아니라, 실제 디스크상에서 각각의 청크가 독립된 테이블로 생성되어 분산 저장되는 것을 말합니다.📌 쉽게 말하면:큰 창고(test 테이블)를 작은 박스들(test_chunk_xx 테이블)로 나눠 담는 것!🖼 그림 예시┌────────────────────────────┐│ test 테이블 │└────────────..

코딩공부/DB 2025.04.18

리눅스/유닉스 터미널 명령어 가이드

기본 명령어curl (Client URL)의미: 클라이언트 URL 도구기능: URL을 통해 데이터를 전송하거나 받는 명령어. 웹 페이지 내용 다운로드, API 호출, 파일 다운로드 등 다양한 네트워크 작업에 사용예시: curl https://example.com - example.com의 HTML 내용을 터미널에 출력자주 쓰는 옵션:-o - 다운로드한 내용을 파일로 저장-O - 서버의 파일 이름 그대로 저장-X - HTTP 메소드 지정 (GET, POST 등)vi (Visual Editor)의미: 비주얼 에디터기능: 유닉스/리눅스 시스템의 텍스트 편집기. 명령 모드와 입력 모드가 분리되어 있음주요 명령:q - 종료wq - 저장 후 종료wq! - 강제 저장 후 종료:exit - 종료i - 입력 모드 진입E..

npm 스케줄러 라이브러리: cron과 node-schedule의 차이점

cron과 node-schedule이란?cron과 node-schedule은 Node.js 애플리케이션에서 정해진 시간에 특정 작업을 실행할 수 있게 해주는 스케줄링 라이브러리입니다. 이메일 발송, 데이터베이스 백업, 알림 전송 등 주기적으로 수행해야 하는 작업에 매우 유용합니다.주요 차이점1. 문법과 사용 방식cron은 유닉스 crontab 문법을 직접적으로 사용합니다:const cron = require('cron');// 매일 오전 10시 30분에 실행const job = new cron.CronJob('30 10 * * *', function() { console.log('매일 오전 10시 30분에 실행되는 작업입니다.');});job.start();node-schedule은 더 유연한 자바스크..

[Next.sj & Node.js] Slack을 통한 메시지 발송 및 파일업로드

# 기존방법- Slack Webhooks를 통해 Slack채널로 HTTP 요청- Icoming Webhooks: 가장 간단한 방법중 하나로 Slack에서 발급된 URL로 HTTP POST 요청을 보냄- Slack 웹훅을 사용하기 위해선 앱을 생성해야함 https://velog.io/@sssssssssy/nextjs-slack-webhooks Next.js와 Slack Webhooks로 실시간 에러 알림 시스템 만들기[FE] Next.js + Slack Webhooks 실시간 에러 알림 설정velog.io위의 링크를 통해 개발에 필요한 bot 생성 및 토큰 발행에 큰 도움을 받았다 (+git을 통해 기초코드까지 있음) # 문자 발송은 바로 되지만 파일은 실패!- 메시지 발송하는 방법은 위 링크에서 git을..

[Next.js] URL: 쿼리파라미터와 동적라우팅 방식

쿼리파라미터와 동적라우팅 URL 방식의 차이쿼리 파라미터 방식URL에 ? 이후로 키-값 쌍으로 데이터를 전달합니다.API 라우트에서는 request.nextUrl.searchParams로 값을 추출합니다.라우트 파일 위치: /app/api/sensor/route.tsURL: `/api/sensor?sensorId=${sensorCodeId}` 동적 라우팅 방식URL 경로의 일부로 값을 전달합니다.API 라우트에서는 params 객체로 값을 추출합니다.라우트 파일 위치: /app/api/sensor/[sensorCodeId]/route.tsURL: `/api/sensor/${sensorCodeId}` 쿼리 파라미터가 적합한 경우선택적(optional) 파라미터가 여러 개일 때필터링, 정렬, 검색 등 부가적..