Articles
Technical articles and updates.
도구 소개 테이블 설계에서 CREATE TABLE 문을 자동 생성하는 구조 | DDL 빌더
테이블을 시각적으로 설계해 CREATE TABLE 문과 ER 다이어그램을 생성하는 DDL 빌더의 구현을 해설합니다. MySQL/PostgreSQL/SQLite의 타입 변환 규칙과 JSON 샘플에서 컬럼을 추론하는 알고리즘을 예제와 함께 정리했습니다.
활용 사례 GitHub Actions needs 설계 패턴집｜CI를 빠르게 만드는 의존관계 구성과 안티패턴
GitHub Actions의 needs로 만드는 job 의존관계를, 고속화 패턴과 안티패턴 표로 정리합니다. concurrency를 이용한 중복 실행 취소, fail-fast, matrix×needs 조합, 재사용 가능한 워크플로우까지 실전 예제로 해설합니다.
활용 사례 Mermaid ER 다이어그램 문법 레퍼런스｜관계 기호와 실전 예제
Mermaid erDiagram 문법 완전 정리: 까마귀발 표기법 카디널리티 치트시트, 1대다 vs 다대다, PK/FK를 포함한 속성 정의, 전자상거래 완전 예제까지 다룹니다.
도구 소개 SQL 빌더로 SELECT·JOIN 쿼리를 시각적으로 작성하는 방법
브라우저에서 시각적 SQL 빌더로 SELECT, WHERE, JOIN을 조립하는 방법을 해설합니다. 값의 자동 따옴표 판정 원리, JOIN 사용 구분표, 여러 테이블 JOIN 작성법까지 다룹니다.
활용 사례 SQL JOIN 완전 레퍼런스｜INNER·LEFT·RIGHT·FULL의 차이와 결과 행 수 이해하기
SQL JOIN 종류(INNER/LEFT/RIGHT/FULL/CROSS/SELF)를 치트시트와 결과 행 수 예제로 정리합니다. 1대다 JOIN에서 행이 늘어나는 이유, WHERE절과 ON절의 NULL 처리 차이, 여러 테이블 JOIN 작성법까지 다룹니다.
도구 소개 Case Converter ― camelCase·snake_case·kebab-case 등 9종류를 한 번에 변환
식별자나 변수명을 camelCase·PascalCase·snake_case·CONSTANT_CASE·kebab-case 등 9종류의 명명 규칙으로 동시 변환하는 방법을 해설합니다. 연속 대문자(HTTPServer)와 숫자 처리, 여러 줄 일괄 변환까지 다룹니다.
도구 소개 LLM API 비용 계산기 ― Claude·GPT·Gemini 요금을 동일 조건으로 견적 비교
프롬프트를 붙여넣고 예상 출력 토큰 수만 입력하면 Claude·GPT·Gemini의 API 이용 비용을 모델 간 비교하는 방법을 해설합니다. 입력/출력 단가 구조, 요금 자동 업데이트, 개략치의 한계까지 다룹니다.
도구 소개 AI Rules 생성기 ― AGENTS.md·CLAUDE.md·Cursor Rules를 폼 한 번으로 일괄 생성
Claude Code·Cursor·GitHub Copilot·Windsurf·Gemini CLI의 규칙 파일을 한 번에 생성하는 방법을 해설합니다. AGENTS.md 표준의 배경, 도구별 파일 형식 차이, AGENTS.md를 기준으로 삼는 운영의 장점을 정리합니다.
도구 소개 LLM 토큰 카운터 ― Claude·GPT·Gemini의 토큰 수를 브라우저에서 한 번에 확인
텍스트를 붙여넣기만 하면 Claude / GPT / Gemini의 토큰 수를 나란히 확인하는 방법을 해설합니다. 토큰의 기초, 모델별 토크나이저 차이, 일본어의 토큰 효율이 나쁜 이유, 개략치의 한계까지 정리합니다.
도구 소개 IP/CIDR 서브넷 계산기 ― 네트워크·브로드캐스트·마스크를 한눈에
192.168.1.10/24 같은 CIDR 표기에서 네트워크 주소·브로드캐스트 주소·사용 가능한 호스트 수·서브넷 마스크·와일드카드 마스크를 계산하는 방법과 프리픽스 조견표를 해설합니다.
활용 사례 인코딩·해시·암호화의 차이와 구분법: 개발자가 혼동하기 쉬운 3가지 정리
Base64 인코딩, SHA-256 같은 해시, 암호화는 자주 혼동되지만 목적이 완전히 다릅니다. 비교표와 구체적 예시로 3가지의 차이를 정리하고, 용도별 올바른 선택법을 해설합니다.
도구 소개 HEX·RGB·HSL 색상 변환과 대비(Contrast) 확인 방법
CSS 색상 형식을 변환하고 HSL로 색을 조정하며, 전경색·배경색의 대비를 확인해 읽기 쉬운 UI를 만드는 방법을 예제와 함께 설명합니다.