오늘부터 공부한다

AI 디자인 도구 모음

Claude DesignClaude Design은 Anthropic이 2026년 4월 17일 공개한 디자인 도구다. 원하는 화면을 글로 적으면 프로토타입, 슬라이드, 한 장짜리 문서를 만들어주고, 결과는 Canva, PDF, PPTX, HTML로 내보내거나 Claude Code로 넘겨 바로 개발로 이어갈 수 있다.처음에는 Pro, Max, Team, Enterprise 구독자만 쓰는 연구 미리보기(research preview)였는데, 2026년 9월 16일 릴리스 노트부터 Free를 포함한 모든 플랜에서 쓸 수 있게 바뀌었다. 5월이나 9월 초에 나온 요금 비교 글에는 아직 Free가 빠져 있다고 적힌 경우가 많아서, 이 글은 공식 릴리스 노트를 기준으로 했다.claude.ai/design 단독 사이트..

Node.js에서 TypeScript 실행하기

타입 스트리핑이란타입 스트리핑(Type Stripping)은 Node.js가 .ts 파일에서 타입 부분만 지우고 바로 실행하는 기능이다. tsc로 빌드하거나 ts-node, tsx를 깔 필요가 없다.Node 22.18, 23.6부터 기본으로 켜져 있고, 24.12부터 정식(stable) 기능이 됐다. 이 글은 Node 24.21에서 돌렸다.타입은 지우기만 하고 검사는 하지 않는다. 타입이 틀려도 그냥 실행된다.바로 실행해보기// hello.tstype User = { name: string; age: number };const u: User = { name: "kim", age: 20 };console.log(`${u.name} (${u.age})`);> node hello.tskim (20)타입이 틀린..

Cursor 마켓플레이스 Claude Code 확장 백도어

사건 내용10월 29일 Cursor 마켓플레이스의 Claude Code 확장(Anthropic.claude-code) 2.1.312, 2.1.313에 백도어가 들어간 채 배포됐다. 정식 확장의 업데이트로 나가서 자동 업데이트만 돼도 받게 된다.Cursor에서 받은 macOS, Windows 사용자만 해당된다. VS Code, VSCodium, claude CLI 사용자는 상관없다.피해공격자가 SSH로 내 PC에 들어올 수 있게 키를 심고, 호스트명이나 Git 이메일 같은 PC 정보를 공격자 서버로 보낸다. 접속까지 되면 소스 코드와 각종 키가 다 노출될 수 있다.확인 방법Windows는 PowerShell에서 실행한다.$files = "$HOME\.ssh\authorized_keys", "C:\Progr..

1.소형 LLM API란?소형 LLM API는 각 AI 회사가 가장 싼 값에 파는 언어 모델을 API로 호출하는 것이다. 회사마다 이름이 다르다. Anthropic은 Haiku, OpenAI는 nano, mini, Luna, Google은 Flash와 Flash-Lite, DeepSeek은 Flash라고 부른다.플래그십 모델보다 덜 똑똑한 대신 값이 훨씬 싸고 응답이 빠르다. 분류, 요약, 정보 추출, 번역, 고객 응대 챗봇처럼 호출이 많고 문제가 단순한 일에 쓴다.이 글의 가격과 수치는 모두 2026-10-24 기준 각 회사 공식 가격 페이지와 모델 문서에서 가져왔다. 가격은 100만 토큰당 달러다.2.한눈에 비교각 회사의 최신 소형 모델만 모았다.모델입력출력컨텍스트최대 출력주의할 점Claude Hai..

1.PHP2Shell이란?PHP 엔진(php-src) 자체의 메모리 안전성 버그 두 개다. 워드프레스나 라라벨 같은 애플리케이션 코드가 아니라 PHP 런타임의 문제라서, PHP로 웹 요청을 처리하는 서버라면 어떤 애플리케이션을 쓰든 해당될 수 있다.CVE공식 이름한 줄 설명CVSS v4.0CVE-2026-109618RCE via OOM corruption메모리 부족(OOM) 처리 중에 요청 내부 데이터가 깨진 상태로 남는다9.2CVE-2026-109619RCE via stale global state끝난 요청의 상태가 해제된 메모리를 가리킨 채 다음 요청까지 남는다9.2유출 당시에는 CVSS 10.0으로 알려졌지만 PHP 공식 점수는 9.2다. 공격 복잡도가 High로 잡혀 있어서 한 번에 성공하지 않을..

이번 포스팅에는 간단하게 git에 webHooks 연동하는 방법을 정리해본다. 1. 디스코드 채널의 채팅방에서 [우클릭] 후 [채널 편집] 선택 2. [연동] 이동 후 [웹후크 만들기] 클릭 3. 이름 변경 및 git 적용시킬 채널 선택 웹후크 URL 은 나중에 사용해야하니 복사해둔다 4. Git 페이지 접속 레포지토리 생성 후 Setting > Webhooks로 이동 Add webhook을 통해 웹 훅을 생성한다. 5. 설정 Add webhook 버튼 클릭시 아래 화면이 나오는데 Payload URL 부분에 디스코드에서 복사한 URL을 사용한다. 복사한URL/github 로 해야함. 복사한 URL 뒤에 꼭 /github를 붙여야함. 그 밑으로는 본인이 취향 것 고르면 된다. 바꾸기 싫으면 굳이 안바꿔도..

create-react-app 모듈을 통해 리액트 앱을 생성할 수 있다. 위 사진은 스터디에 index.css같은 필요없는 파일들을 제거하고 react 구동에 있어서 필수적인 파일들로 구성했으며, 주로 src 폴더의 App.js, index.js를 수정하게 됩니다. react는 App.js에서 컴포넌트를 정의하고 정의된 컴포넌트에서 html을 반환하여 index.js의 ReactDOM.render() 모듈을 통해 컴포넌트를 import하여 사용한다. ReactDOM.render({컴포넌트}, {id or class}) 이때, id와 class는 public 폴더 안의 index.html의 태그들로 결정됩니다. src/App.js function App() { return ( hello!!!! ); } s..

웹 개발을 하다보면 의미없는 노동을 할 때가 있습니다. 대표적인 예시로 자바의 Getter, Setter가 있습니다. 캡슐화를 위한 필수적인 작업이지만 저희는 IDE를 통해 직접 입력하지 않고 쉽게 생성합니다. 이런 단순한 노동을 없애주는 것을 보일러 플레이트(Boiler Plate)라고 합니다. 보일러 플레이트의 사전적인 뜻은 아래와 같습니다. 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다. 자바가 익숙하지 않은 사람들은 getter, setter로 인한 공감을 하기 힘들 수 있기에 또다른 예시를 내봅니다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; impor..

Javascript 개발자라면 한 번쯤은 v8엔진이라는 단어를 들어보셨을 겁니다. Nodejs에 관한 내용이 아니지만, 마땅히 적을 카테고리가 없어서 이곳에 작성합니다. 사실 저희가 자바스크립트를 사용할 떄, 로우 레벨(Low Level) 단계까지 신경 쓰지는 않습니다. 그러나 정말 자바스크립트로 뽑아낼 수 있는 최적의 성능을 사용하고 싶다면 내 코드가 어떤 식으로 실행되는 지에 대한 이해가 어느 정도 필요합니다. 때문에 본 포스팅에는 v8이 우리의 자바스크립트 코드를 어떻게 해석하고 실항하는지에 대한 설명을 하겠습니다. v8엔진을 간단하게 소개하자면 Google이 개발한 오픈소스 C++로 구성, 개발 Nodejs 런타임, Chrome Browser에서 사용됩니다. 대략적인 설명은 위와 같은데, Java..

Nodejs를 사용할 때 자주 볼 수 있는 파일이 있습니다. package.json과 package-lock.json입니다. 자주 보고, 자주 건드려 보지만 둘의 차이와 사용 목적을 잘 모르는 경우가 있습니다. 이번 포스팅에서는 둘의 차이점과 사용 목적, 사용 방법 등을 작성하겠습니다. Nodejs을 조금 사용하신 분들은 npm init과 npm install package.json을 통해 작성된 패키지 모듈을 설치해 본 경험이 있을 것입니다. 그게 아니라면 scripts 부분의 빌드 부분을 만져보셨을 겁니다. supervisor 또는 nodemon 등등.. 빌드와 실행 구문을 수정해본 경험이 없으신가요? 없더라도 여기서 알아가면 됩니다. ^^ 1. package.json 이란? 가장 먼저, packag..