DEV LOG
개발 공부 및 개발자 이야기를 올리는 블로그입니다.
Posts
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 절의..
it국비지원교육 이전의 나나는 공대는 나왔지만, 전기공학과를 졸업했다. (당시엔 재학 중)그 중에서도 반도체와 임베디드 과목들을 주로 수강을 했었다.어쩌면 당연한 거다 삼성, 하이닉스 같은 반도체가 주력인 나라에서 반도체를 공부한게 특별하진않다. 맨날 8대 공정에 박막이 어쩌고 공부는 하지만 실제 어떻게 돌아가는지 볼 수는 없었다 (학교엔 반도체 장비 시설만 있었다) 공부할수록 뭘 하고 있는지 상상력으로 공부하는 느낌에 임베디드쪽으로 고개를 돌렸고,코딩이 재밌어 질 무렵 부품이 하나 고장 나면 진행할 수 없는 게 싫었던 나는 소프트웨어쪽으로 또 눈을 돌렸다. 그때 본 게 국비지원교육이다..it국비지원교육나는 역삼역 쪽 쌍용교육센터에서 국비교육을 받았다. (23년 12월 ~ 24년 6월)교육 받기 전 ..
상태관리 ?리액트에서 상태란 useState 를 통해 관리를 함 문제는 useState 발생마다 리렌더링이 동작 , 상태 공유가 복잡해짐 , 성능 저하useState 만으로는 상태관리가 어렵다 판단하여 등장한 전역 상태관리 도구Redux (지배의 악마)구조적이고 강력한 상태관리 툴액션 , 리듀서 , 디스패치 , 미들웨어 등등 기능이 다양함 (오히려 이게 요즘 단점)상태관리를 편하게 하고자 쓰는 기술이 오히려 더 복잡해지는 경우가 존재 상태 추적 가능 너무 많은 기능에 오히려 통제가 강함Zustand (시골쥐)기존 상태관리 툴에서 복잡한 기능들 제거 , 가벼운 툴로 등장 Hook 을 활용하여 직관적임useStore 로 set , get 모두 가능 코드가 짧고 직관적임상태 추적에선 불리 미들웨어 같은 작업은..
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 절의..
it국비지원교육 이전의 나나는 공대는 나왔지만, 전기공학과를 졸업했다. (당시엔 재학 중)그 중에서도 반도체와 임베디드 과목들을 주로 수강을 했었다.어쩌면 당연한 거다 삼성, 하이닉스 같은 반도체가 주력인 나라에서 반도체를 공부한게 특별하진않다. 맨날 8대 공정에 박막이 어쩌고 공부는 하지만 실제 어떻게 돌아가는지 볼 수는 없었다 (학교엔 반도체 장비 시설만 있었다) 공부할수록 뭘 하고 있는지 상상력으로 공부하는 느낌에 임베디드쪽으로 고개를 돌렸고,코딩이 재밌어 질 무렵 부품이 하나 고장 나면 진행할 수 없는 게 싫었던 나는 소프트웨어쪽으로 또 눈을 돌렸다. 그때 본 게 국비지원교육이다..it국비지원교육나는 역삼역 쪽 쌍용교육센터에서 국비교육을 받았다. (23년 12월 ~ 24년 6월)교육 받기 전 ..
상태관리 ?리액트에서 상태란 useState 를 통해 관리를 함 문제는 useState 발생마다 리렌더링이 동작 , 상태 공유가 복잡해짐 , 성능 저하useState 만으로는 상태관리가 어렵다 판단하여 등장한 전역 상태관리 도구Redux (지배의 악마)구조적이고 강력한 상태관리 툴액션 , 리듀서 , 디스패치 , 미들웨어 등등 기능이 다양함 (오히려 이게 요즘 단점)상태관리를 편하게 하고자 쓰는 기술이 오히려 더 복잡해지는 경우가 존재 상태 추적 가능 너무 많은 기능에 오히려 통제가 강함Zustand (시골쥐)기존 상태관리 툴에서 복잡한 기능들 제거 , 가벼운 툴로 등장 Hook 을 활용하여 직관적임useStore 로 set , get 모두 가능 코드가 짧고 직관적임상태 추적에선 불리 미들웨어 같은 작업은..