DEV LOG
개발 공부 및 개발자 이야기를 올리는 블로그입니다.
Posts
L4 ? L7 ?인프라 이야기를 듣다 보면 이런 말이 나온다."앞단에 L4 두고, 그 뒤에 L7 로 라우팅해요"여기서 L4 , L7 은 OSI 7계층의 4계층 , 7계층을 말한다.보통은 로드밸런서가 몇 계층의 정보를 보고 트래픽을 나누는지를 뜻한다.택배 분류로 생각하면 쉽다.L4 : 상자에 붙은 주소만 보고 분류한다 (상자는 안 뜯음)L7 : 상자를 뜯어서 내용물까지 보고 분류한다OSI 7계층 , 간단하게계층이름하는 일예시7응용 (Application)실제 데이터의 의미HTTP , HTTPS , DNS6표현 (Presentation)인코딩 , 암호화TLS (보통 여기로 설명)5세션 (Session)연결 유지4전송 (Transport)포트 , 신뢰성 있는 전송TCP , UDP3네트워크 (Network)경로..
내 노트를 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");..
L4 ? L7 ?인프라 이야기를 듣다 보면 이런 말이 나온다."앞단에 L4 두고, 그 뒤에 L7 로 라우팅해요"여기서 L4 , L7 은 OSI 7계층의 4계층 , 7계층을 말한다.보통은 로드밸런서가 몇 계층의 정보를 보고 트래픽을 나누는지를 뜻한다.택배 분류로 생각하면 쉽다.L4 : 상자에 붙은 주소만 보고 분류한다 (상자는 안 뜯음)L7 : 상자를 뜯어서 내용물까지 보고 분류한다OSI 7계층 , 간단하게계층이름하는 일예시7응용 (Application)실제 데이터의 의미HTTP , HTTPS , DNS6표현 (Presentation)인코딩 , 암호화TLS (보통 여기로 설명)5세션 (Session)연결 유지4전송 (Transport)포트 , 신뢰성 있는 전송TCP , UDP3네트워크 (Network)경로..
내 노트를 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");..