DEV LOG
개발 공부 및 개발자 이야기를 올리는 블로그입니다.
Posts
내 노트를 AI 가 읽는다면 ?공부한 내용은 전부 옵시디언에 정리하고 있다.그런데 노트가 350개를 넘어가니까 이런 생각이 들었다."이 노트들 중에 블로그에 쓸 만한 걸 AI 가 골라주면 좋겠는데…?"그래서 옵시디언과 Claude 를 MCP 로 연결해 봤다.연결 자체는 10분이면 끝나는데, 그 과정에서 API 키를 GitHub 에 올리는 사고까지 쳤다. 그 이야기까지 같이 정리한다.(MCP 가 뭔지 모른다면 이전 글 MCP (Model Context Protocol) 을 먼저 보고 오면 좋습니다)구조Claude Code ──(MCP)── mcp-obsidian ──(HTTPS)── Local REST API 플러그인 ── 옵시디언 볼트 (호스트) (MCP 서버) ..
인터넷의 70% 가 비상2026년 10월 21일, PHP 에 긴급 패치가 나왔다."인증 없이, 원격에서, 서버에 아무 코드나 실행할 수 있다"보안 취약점 중에서도 제일 무서운 조합이다.이름은 PHP2Shell (CVE-2026-109618 , CVE-2026-109619)심각도는 CVSS 4.0 기준 9.2 (Critical)PHP 를 안 쓰니까 상관없다고 생각할 수 있지만,워드프레스 , 드루팔 , 줌라 같은 CMS 가 전부 PHP 기반이다.서버 언어가 알려진 웹사이트의 약 69% 가 PHP 를 쓰고 있으니, 사실상 인터넷 절반 이상이 대상인 셈이다.용어부터 정리RCE (Remote Code Execution)원격 코드 실행공격자가 내 서버에 자기가 원하는 코드를 실행시킬 수 있다는 뜻코드 실행이 되면 ..
MCP (Model Context Protocol)AI 모델이 외부 도구 , 데이터에 접근하는 방식을 표준화한 오픈 프로토콜2024년 11월 Anthropic 이 공개함 .왜 필요한가AI 는 학습한 내용 + 대화 내용만 알고 있음 → 내 파일 , DB , 서비스 데이터는 모름기존엔 서비스마다 연결 코드를 따로 만들어야 했음(AI 앱 N개 × 서비스 M개 = N×M 개의 연동)MCP 로 규격을 통일하면 서비스는 MCP 서버 하나만 만들고 , AI 앱은 MCP 클라이언트 하나만 만들면 됨(N + M 개로 줄어듦)→ 흔히 AI 용 USB-C 라고 비유함 (충전기 규격 통일처럼)구성 요소Host (호스트) : 사용자가 쓰는 AI 앱 (Claude Desktop , Claude Code , IDE 등)Client..
Next.js 에는 라우터가 두 개 ?Next.js 를 처음 공부하면 제일 먼저 헷갈리는 부분"pages 폴더로 하라는 강의도 있고, app 폴더로 하라는 강의도 있는데…?"둘 다 맞다.Next.js 에는 Page Router (pages 폴더) 와 App Router (app 폴더) 두 가지 방식이 존재한다.같은 집을 리모델링 했다고 생각하면 편하다.주소(URL) 는 그대로인데, 방 배치(폴더 구조) 와 배관(데이터 페칭) 이 싹 바뀌었다.(SSR , CSR 개념이 헷갈린다면 이전 글 SSR vs CSR 을 먼저 보고 오면 좋습니다)Page Router (구옥)Next.js 13 이전부터 쓰던 방식pages 폴더 안의 파일명이 곧 주소가 된다.pages/ ├─ index.tsx → / ├─..
map 과 forEach 차이const data.forEach((item) => { return item + 2;})const data.map((item) => { return item + 2;})forEach 는 반환이 없는 반면 map 은 새로운 배열을 반환함 선언형 프레임워크선언형 프레임워크의 경우 실제 html 을 내가 작성하여 변수 선언을 함기존 자바스크립트의 경우 명령형으로 메서드를 통해 html 을 그려서 만듬 리액트 {items.map(item => ( {item} ))}기존 방식const ul = document.createElement("ul");items.forEach(item => { const li = document.createElement("li");..
인덱스란 ?데이터를 빠르게 찾기 위한 도구 오라클에서 자동 생성 또는 개발자가 직접 생성 단, 인덱스 또한 생성의 개념이므로 디스크 공간을 차지함 -> 의미 없는 인덱스를 많이 만들면 오히려 안 쓰는게 더 빠름이점 ?where 조건 검색시에 속도가 빠름정렬 속도가 향상됨 (order 절)중복 제거 속도 향상 (DISTINCT , GROUP 절)단점 ?insert , update, delete 의 경우 오히려 더 느려짐 인덱스 생성 -> 디스크 공간 차지로 이어짐 (느려지는 문제로 이어짐)인덱스는 언제 쓸까 ??조회 중심의 테이블인 경우 조인 조건으로 걸리는 컬럼 where 조건 절에 자주 들어가는 컬럼 인덱스 유의 사항UPPER 쓰면 인덱스가 동작 안 해요... (프론트단에서 해결해줘야해요)LIKE 절의..
내 노트를 AI 가 읽는다면 ?공부한 내용은 전부 옵시디언에 정리하고 있다.그런데 노트가 350개를 넘어가니까 이런 생각이 들었다."이 노트들 중에 블로그에 쓸 만한 걸 AI 가 골라주면 좋겠는데…?"그래서 옵시디언과 Claude 를 MCP 로 연결해 봤다.연결 자체는 10분이면 끝나는데, 그 과정에서 API 키를 GitHub 에 올리는 사고까지 쳤다. 그 이야기까지 같이 정리한다.(MCP 가 뭔지 모른다면 이전 글 MCP (Model Context Protocol) 을 먼저 보고 오면 좋습니다)구조Claude Code ──(MCP)── mcp-obsidian ──(HTTPS)── Local REST API 플러그인 ── 옵시디언 볼트 (호스트) (MCP 서버) ..
인터넷의 70% 가 비상2026년 10월 21일, PHP 에 긴급 패치가 나왔다."인증 없이, 원격에서, 서버에 아무 코드나 실행할 수 있다"보안 취약점 중에서도 제일 무서운 조합이다.이름은 PHP2Shell (CVE-2026-109618 , CVE-2026-109619)심각도는 CVSS 4.0 기준 9.2 (Critical)PHP 를 안 쓰니까 상관없다고 생각할 수 있지만,워드프레스 , 드루팔 , 줌라 같은 CMS 가 전부 PHP 기반이다.서버 언어가 알려진 웹사이트의 약 69% 가 PHP 를 쓰고 있으니, 사실상 인터넷 절반 이상이 대상인 셈이다.용어부터 정리RCE (Remote Code Execution)원격 코드 실행공격자가 내 서버에 자기가 원하는 코드를 실행시킬 수 있다는 뜻코드 실행이 되면 ..
MCP (Model Context Protocol)AI 모델이 외부 도구 , 데이터에 접근하는 방식을 표준화한 오픈 프로토콜2024년 11월 Anthropic 이 공개함 .왜 필요한가AI 는 학습한 내용 + 대화 내용만 알고 있음 → 내 파일 , DB , 서비스 데이터는 모름기존엔 서비스마다 연결 코드를 따로 만들어야 했음(AI 앱 N개 × 서비스 M개 = N×M 개의 연동)MCP 로 규격을 통일하면 서비스는 MCP 서버 하나만 만들고 , AI 앱은 MCP 클라이언트 하나만 만들면 됨(N + M 개로 줄어듦)→ 흔히 AI 용 USB-C 라고 비유함 (충전기 규격 통일처럼)구성 요소Host (호스트) : 사용자가 쓰는 AI 앱 (Claude Desktop , Claude Code , IDE 등)Client..
Next.js 에는 라우터가 두 개 ?Next.js 를 처음 공부하면 제일 먼저 헷갈리는 부분"pages 폴더로 하라는 강의도 있고, app 폴더로 하라는 강의도 있는데…?"둘 다 맞다.Next.js 에는 Page Router (pages 폴더) 와 App Router (app 폴더) 두 가지 방식이 존재한다.같은 집을 리모델링 했다고 생각하면 편하다.주소(URL) 는 그대로인데, 방 배치(폴더 구조) 와 배관(데이터 페칭) 이 싹 바뀌었다.(SSR , CSR 개념이 헷갈린다면 이전 글 SSR vs CSR 을 먼저 보고 오면 좋습니다)Page Router (구옥)Next.js 13 이전부터 쓰던 방식pages 폴더 안의 파일명이 곧 주소가 된다.pages/ ├─ index.tsx → / ├─..
map 과 forEach 차이const data.forEach((item) => { return item + 2;})const data.map((item) => { return item + 2;})forEach 는 반환이 없는 반면 map 은 새로운 배열을 반환함 선언형 프레임워크선언형 프레임워크의 경우 실제 html 을 내가 작성하여 변수 선언을 함기존 자바스크립트의 경우 명령형으로 메서드를 통해 html 을 그려서 만듬 리액트 {items.map(item => ( {item} ))}기존 방식const ul = document.createElement("ul");items.forEach(item => { const li = document.createElement("li");..
인덱스란 ?데이터를 빠르게 찾기 위한 도구 오라클에서 자동 생성 또는 개발자가 직접 생성 단, 인덱스 또한 생성의 개념이므로 디스크 공간을 차지함 -> 의미 없는 인덱스를 많이 만들면 오히려 안 쓰는게 더 빠름이점 ?where 조건 검색시에 속도가 빠름정렬 속도가 향상됨 (order 절)중복 제거 속도 향상 (DISTINCT , GROUP 절)단점 ?insert , update, delete 의 경우 오히려 더 느려짐 인덱스 생성 -> 디스크 공간 차지로 이어짐 (느려지는 문제로 이어짐)인덱스는 언제 쓸까 ??조회 중심의 테이블인 경우 조인 조건으로 걸리는 컬럼 where 조건 절에 자주 들어가는 컬럼 인덱스 유의 사항UPPER 쓰면 인덱스가 동작 안 해요... (프론트단에서 해결해줘야해요)LIKE 절의..