본문 바로가기
반응형

javascript16

정규식 실전 치트시트 — 개발자가 자주 쓰는 패턴 모음 왜 이 글을 쓰나정규식은 쓸 때마다 구글링한다. 이메일 검증 패턴, URL 추출, 전화번호 포맷 — 머릿속에 완전히 외워지지 않는다. 매번 Stack Overflow나 Regex101에서 찾는데, 검색 결과가 너무 다양해서 어떤 게 맞는 건지 확인하는 데 시간이 또 걸린다.자주 쓰는 것만 한 곳에 정리했다. JavaScript 기준이지만, 패턴 자체는 Python, PHP, Java 등 대부분의 언어에서 그대로 쓰거나 조금만 고치면 된다.정규식 기본 문법 요약코드를 읽기 전에, 자주 등장하는 메타문자를 빠르게 훑고 간다.문자의미예시.임의의 한 문자 (줄바꿈 제외)a.c → abc, aXc*0회 이상 반복ab* → a, ab, abb+1회 이상 반복ab+ → ab, abb (a 단독 불가)?0회 또는 1회.. 2026. 3. 18.
[Pollinations.ai] API 키 없이 무료로 AI 이미지 생성기 만들기 (HTML/JS) 왜 만들었나AI 이미지 생성을 웹에 붙이려고 할 때 선택지는 뻔하다.Midjourney는 월정액이고, DALL·E 3는 OpenAI 계정에 크레딧이 필요하다. Stable Diffusion은 오픈소스지만 GPU 서버를 직접 굴려야 한다. 프론트엔드만 잘 아는 개발자가 이미지 생성 기능을 붙이려면 진입 장벽이 생각보다 높다.그러다 Pollinations.ai를 찾았다. 결론부터 말하면 이렇다.https://image.pollinations.ai/prompt/a%20cat%20on%20the%20moon이 URL을 에 넣으면 AI가 생성한 이미지가 바로 나온다. API 키도 없고, 서버도 없고, SDK 설치도 없다. 브라우저가 URL에 GET 요청을 보내고, Pollinations 서버가 PNG를 돌려준다... 2026. 3. 5.
[HTML/CSS/JS] 뽀모도로 타이머 만들기 뽀모도로 타이머 만들기왜 만들었나뽀모도로 기법은 25분 집중 → 5분 휴식 사이클을 반복하는 시간 관리 방법이다. 타이머 앱으로 배울 수 있는 것들이 많다. setInterval 기반 타이머, SVG 원형 진행바, Web Audio API 소리 알림, 세션 상태 관리까지 바닐라 JS 핵심 패턴이 한 곳에 다 모여있다.구현 목표:집중 / 짧은 휴식 / 긴 휴식 — 3가지 모드 자동 전환SVG stroke-dashoffset으로 원형 진행바Web Audio API로 외부 파일 없이 비프음 생성세션 카운터 — N세션 완료 시 긴 휴식으로 전환구조파일 하나, 외부 의존성 없음.08-pomodoro-timer/└── index.html화면 구성:영역역할모드 탭집중 / 짧은 휴식 / 긴 휴식 전환원형 타이머SVG .. 2026. 3. 1.
[HTML/CSS/JS] Canvas API로 그림판 만들기 Canvas API로 그림판 만들기왜 만들었나Canvas API는 픽셀 단위로 화면을 제어할 수 있는 강력한 브라우저 내장 기능이다. 라이브러리 없이 그림판을 만들어보면 이벤트 좌표 변환, 이미지 데이터 조작, 상태 관리가 어떻게 맞물리는지 직접 체감할 수 있다.구현 목표:펜, 지우개, 직선, 사각형, 원, 채우기 — 6가지 도구Undo/Redo — getImageData/putImageData로 히스토리 관리Flood Fill — 픽셀 단위 BFS 탐색으로 채우기 구현PNG 저장 — canvas.toDataURL()로 로컬 다운로드구조파일 하나, 외부 의존성 없음.07-canvas-drawing/└── index.html레이아웃:영역역할Toolbar도구 선택, 색상 팔레트, 굵기/투명도 슬라이더, 액션.. 2026. 3. 1.
[HTML/CSS/JS] 로컬스토리지 메모장 앱 만들기 로컬스토리지 메모장 앱 만들기왜 만들었나서버 없이 브라우저만으로 동작하는 메모 앱이 목표였다. localStorage로 데이터를 영구 저장하고, CRUD 전체를 바닐라 JS로 구현했다. 외부 라이브러리는 없다.구현 목표:메모 생성/수정/삭제 (CRUD 완성)자동 저장 — 타이핑 멈추면 600ms 후 저장 (디바운스)실시간 검색 — 제목 + 본문 동시 필터링XSS 방어 — escHtml()로 사용자 입력 이스케이프구조파일 하나, 외부 의존성 없음.06-localstorage-notepad/└── index.html레이아웃은 3영역으로 나뉜다.영역역할Topbar앱 타이틀, 검색창, 새 메모 버튼Sidebar메모 목록 (제목 + 미리보기 + 날짜)Editor제목 인풋 + 본문 textarea + 저장 상태 +.. 2026. 2. 28.
[HTML/CSS/JS] 다크모드 토글 포트폴리오 페이지 만들기 다크모드 토글 포트폴리오 페이지 만들기왜 만들었나CSS 변수와 localStorage만으로 다크/라이트 모드 전환을 깔끔하게 구현할 수 있다. 프레임워크 없이 바닐라 JS 한 파일로 완성하는 포트폴리오 페이지를 만들어봤다.목표는 세 가지였다.CSS custom properties로 테마 전환 — JS에서 클래스명 토글 하나로 전체 색상 변경prefers-color-scheme으로 시스템 설정 감지 — 첫 방문자에게 맞는 테마 제공localStorage로 사용자 선택 저장 — 새로고침해도 유지구조파일 하나짜리 단일 HTML. 외부 의존성 없음.05-darkmode-portfolio/└── index.html전체 구조는 간단하다.섹션내용Navsticky 헤더, 테마 토글 버튼Hero인트로 텍스트, CTA 버.. 2026. 2. 28.
반응형