클로드로 바이브코딩을 하면서 supabase db에 대해 알게 되었다. 그래서 이번기회에 글을 작성하기로 했다! Supabase 데이터베이스란 무엇인가Supabase는 한마디로 정의하면 PostgreSQL 기반의 오픈소스 백엔드 서비스(BaaS)입니다. 단순히 데이터베이스만 제공하는 게 아니라 인증(Auth), 파일 저장소(Storage), 실시간 구독(Realtime), 엣지 함수(Edge Functions)까지 한 번에 묶어서 제공한다는 게 핵심입니다.여기서 가장 중요한 포인트는 데이터베이스 엔진이 PostgreSQL이라는 점입니다. Firebase의 Firestore가 NoSQL 방식이라 SQL을 모르는 개발자도 쉽게 접근할 수 있다는 장점이 있지만, 복잡한 관계형 데이터나 조인 쿼리가 필요한 서비..
기존 프로젝트에서 Redis는 JWT 토큰 관리 용도로만 쓰고 있었다.refresh:{userId} → Refresh Token 저장 (14일)blacklist:{token} → 로그아웃된 토큰 블랙리스트force-logout:{userId} → 강제 로그아웃 플래그 (24시간)그런데 같이 프로젝트 하는 친구가 실무에서 자주 조회되는 데이터를 redis 넣어 관리한다고 해 이 부분에 대해 알아보기로 했다.GET /me (내 프로필 조회) → 로그인한 사용자가 페이지를 이동할 때마다 호출GET /auth/tech-stacks (기술 스택 목록) → 거의 바뀌지 않는 공통 코드 데이터이 두 가지는 매번 Oracle DB에 쿼리를 날리는 것이 비효율적이라 Redis 캐싱을 도입하기로 했다..
멀티에이전트 시스템이 무엇인가?멀티에이전트 시스템이라는 말이 뭔가 거창해 보이는데 별거 없어요. 그냥 AI 여러 개가 역할 나눠서 같이 일하는 것이에요.원래 AI는 내가 물어보면 혼자 답하고 끝이었잖아요. 근데 생각해보면 이게 좀 이상하긴 해요. 회사에서 혼자 기획도 하고, 개발도 하고, 검토도 하고, 보고서도 쓰는 사람이 어딨어요. 당연히 팀으로 나눠서 하죠.멀티에이전트가 딱 그 개념이에요.🔍 리서처 에이전트 → 정보 수집 담당💻 코더 에이전트 → 코드 작성 담당✅ 검증 에이전트 → 결과물 검토 담당📝 리포터 에이전트 → 최종 보고서 작성 담당이것들이 서로 결과 넘겨주면서 하나의 작업을 완성하는 거예요. 말하자면 AI 팀을 꾸리는 거죠.왜 갑자기 이게 뜨나요가트너가 2026년 10대 전략 기술 트..
MCP란?MCP(Model Context Protocol)는 AI(Claude, ChatGPT 등)가 외부 시스템과 직접 연결되어 작업할 수 있도록 해주는 표준 프로토콜이다.기존에는 AI가 코드만 분석할 수 있었다면, MCP를 사용하면 GitHub, Redis, 파일 시스템, API 서버 등에 직접 접근하여 조회하거나 작업을 수행할 수 있다. MCP를 사용 하는 이유기존 개발 방식개발자 ↓GitHub 접속 ↓PR 확인개발자 ↓Redis 접속 ↓토큰 확인개발자 ↓Postman 실행 ↓API 테스트 프로젝트 적용 예정 MCP1. GitHub MCP목적GitHub 저장소를 Claude가 직접 조회 및 조작할 수 있도록 한다.활용 예시PR 조회코드 리뷰이슈 생성브랜치 확인커밋 조회사용 예시현재 열린 PR 목록 ..
(Next.js + Spring Boot) 📌 1. 개요이번 프로젝트에서는 Oracle Cloud Infrastructure(OCI)를 사용하여 프론트엔드와 백엔드를 각각 분리된 서버에 배포하였다. ☁️ 2. OCI 서버 구성프론트 서버 1대백엔드 서버 1대각각 public ip 할당- 네트워크 설정Public Subnet 사용Internet Gateway 연결포트 개방3000(프론트)9090(백엔드)⚙️ 3. 프론트엔드 배포 과정1️⃣ 서버 접속2️⃣ Node.js 설치3️⃣ 프로젝트 다운로드 및 설치4️⃣ 환경변수 설정(NEXT_PUBLIC_API_BASE_URL=http://:9090)5️⃣ 빌드 & 실행❗ 문제: 빌드가 멈춤-> OCI 무료 서버에서는 메모리가 부족해서 Next.js build가..
📌 1. 프로젝트 소개Teamo는 팀 매칭 및 커뮤니케이션을 위한 사이드 프로젝트로,사용자 인증, 마이페이지, 소셜 로그인, 게시글 기능 등을 중심으로 개발 중이다.프론트엔드와 백엔드를 분리한 구조이다. 🧱 2. 전체 아키텍처[ Client (Next.js) ] ↓[ Backend (Spring Boot) ] ↓[ Database ] 프론트: 사용자 화면 처리백엔드: API 서버 + 인증 처리DB: 사용자 및 서비스 데이터 관리☁️ 3. 배포 환경- Oracle Cloud Infrastructure 🔗 GitHub👉https://github.com/jaeyoung1375/teamo-server / https://github.com/jaeyoung1375/teamo-ui G..
🧩 Next.js란?👉 Next.js는 React를 기반으로 한 프레임워크로,React를 더 쉽고 효율적으로 사용할 수 있게 도와준다.React는 UI를 만드는 라이브러리이고,Next.js는 그 위에 기능을 더한 프레임워크이다. 🧩 React와 Next.js의 차이1. 리액트는 라우팅 직접 설정해야함 / Next.js는 파일 만들면 끝👉 React// 직접 설정해야 함} /> 👉 Next.js/app/login/page.tsx 2. 리액트는 기본적으로 브라우저에서만 동작, Next.js는 서버에서도 실행되고, 브라우저에서도 실행된다.3. 리액트는 구조가 규칙 기반, Next.js는 자유("use client"->브라우저에서 실행)* useState,useEffect, 이벤트, local stor..
🧩 DOM 방식 vs React 렌더링 방식1️⃣ DOM 방식 (Vanilla JS)👉 결과를 직접 하나씩 바꾸는 방식화면(UI)이 바뀌면개발자가 직접 DOM을 찾아서 수정해야 함즉, "결과를 직접 제어"하는 방식document.getElementById("count").innerText = count;✔ 특징변경할 요소를 직접 선택해야 함상태가 많아질수록 코드가 복잡해짐유지보수 어려움2️⃣ React 방식👉 원인(state)만 바꾸면 결과(UI)는 자동으로 변경개발자는 화면을 직접 바꾸지 않음대신 상태(state) 만 변경setCount(count + 1);✔ 핵심 개념상태가 바뀌면 → 컴포넌트가 다시 렌더링됨React가 이전 화면과 비교해서👉 바뀐 부분만 업데이트 🧩 useEffect 완벽 ..