2026 연말정산 미리보기: 자바스크립트로 자녀 수 계산까지 완벽 구현한 카드 소득공제 계산기 제작기

안녕하세요, 함께 공부하며 성장하는 느종입니다! 벌써 2026년 2월이 지나가고 있습니다. 2026 연말정산을 슬슬 고민해야 할 시기가 다가오고 있습니다. 직장인들에게 ’13월의 월급’만큼 중요한 것도 없죠. 특히 이번 2026 연말정산은 소득공제 체계에 몇 가지 중요한 변화가 있었습니다. 자녀 수에 따른 공제 한도가 세분화되어 상향되었고, 많은 분이 기다리셨던 체력단련장(헬스장, 수영장) 이용료가 문화비 항목에 새롭게 포함되었습니다. 오늘은 이렇게 달라진 … 더 읽기

정규표현식 활용: 글자 수 세기 및 단어 빈도 자바스크립트 텍스트 분석기 제작 가이드

안녕하세요! 저번 [15번째 프로젝트: 객체 매핑으로 설계한 자바스크립트 단위 변환기 (Unit Converter)] 글에 이어서 오늘은 자바스크립트 텍스트 분석기를 제작하여 블로그를 작성해보려고 합니다. 우리는 일상 속에서 수많은 텍스트를 마주합니다. 블로그 포스팅을 작성할 때, 자기소개서를 준비할 때, 혹은 중요한 리포트를 제출할 때 우리는 항상 ‘글자 수’라는 물리적인 제약과 ‘단어 선택’이라는 질적인 고민을 동시에 하게 됩니다. 단순히 글자 … 더 읽기

Web Speech API 활용: 음성 지원 자바스크립트 영단어장 만들기

안녕하세요! 어느덧 12번째 프로젝트에 도달했습니다. 그동안 우리는 우선순위 대시보드, 가계부 등 자바스크립트로 데이터를 가공하고 시각화하며 ‘보여주는 방식’에 집중해 왔습니다. 하지만 이번 프로젝트부터는 조금 다른 관점에서 접근해 보려 합니다. 바로 “우리가 매일 쓰는 웹 브라우저가 기본적으로 어떤 강력한 기능들을 이미 내장하고 있는가?”에 대한 탐구입니다. 오늘 만들어본 ‘자바스크립트 영단어장’은 단순히 텍스트를 저장하는 메모장에 그치지 않습니다. 외부 유료 … 더 읽기

Chart.js 연동: 데이터 시각화 자바스크립트 우선순위 대시보드

안녕하세요! 10번의 프로젝트를 통해 우리는 데이터를 저장하고 관리하는 법을 배웠습니다. 하지만 문득 이런 생각이 들더군요. “할 일을 10개 적어놨는데, 내가 얼마나 해냈는지 한눈에 알 방법은 없을까?” 단순히 텍스트가 줄 그어지는 것보다, 원형 그래프가 실시간으로 차오르는 모습을 본다면 성취감의 차원이 다를 것입니다. 그래서 11번째 프로젝트는 ‘코드로 그림을 그리는’ 영역인 데이터 시각화에 도전했습니다. 자바스크립트 우선순위 대시보드를 테마로 … 더 읽기

배열 고차 함수(reduce)로 만드는 자산 관리 자바스크립트 가계부

안녕하세요! 오늘 10번째 프로젝트로는 누구나 한 번쯤 해봤을 법한 고민, “내 지출을 한눈에 관리할 수 없을까?”라는 질문에서 시작해 ‘나만의 자바스크립트 가계부’를 만들어보았습니다.. 사실 단순히 얼마를 썼는지만 기록하는 것은 반쪽짜리 가계부나 다름없습니다. “이번 달 수입은 얼마였고, 그래서 지금 내 통장 잔액은 얼마인가?”라는 질문에 답할 수 있어야 진짜 가계부라고 할 수 있죠. 이번 포스팅에서는 날짜 기반의 정렬부터 … 더 읽기

웹 개발 실습: 자바스크립트 타이핑 속도 측정기(WPM) 구현 및 로직

안녕하세요! 오늘 아홉 번째 프로젝트로 도전해 본 주제는 우리에게 너무나 익숙한 ‘자바스크립트 타이핑 속도 측정기’입니다. 사실 처음 기획할 때는 “글자만 비교하면 끝나는 간단한 로직 아닌가?”라고 가볍게 생각했습니다. 하지만 실제 구현 과정에서 마주친 디테일들은 결코 만만치 않았습니다. 특히 웹 환경에서 ‘한글’이라는 언어가 가진 특수성, 그리고 CSS 레이아웃이 1px 차이로 어긋나는 현상을 해결하며 많은 공부가 되었습니다. 이번 … 더 읽기

Fetch API 비동기 통신으로 구현한 실시간 자바스크립트 환율 계산기 제작기

안녕하세요! 여덟 번째 프로젝트로 인사드립니다. 그동안 우리는 브라우저 안에서만 작동하는 다양한 도구들([계산기], [그림판], [스톱워치] 등)을 만들어왔습니다. 하지만 진정한 웹 앱의 매력은 외부의 살아있는 데이터를 가져와 사용자에게 실시간으로 전달하는 데 있다고 생각합니다. 그래서 오늘은 자바스크립트 중급자로 나아가는 가장 중요한 관문인 ‘비동기 통신’을 다뤄보려 합니다. 바로 외부 API를 연동한 ‘실시간 자바스크립트 환율 계산기’입니다. 단순히 환율 수치를 계산하는 … 더 읽기

DOM 조작 기초: 실시간 자바스크립트 랜덤 명언 생성기 출력 서비스

안녕하세요! 어느덧 자바스크립트 미니 프로젝트 시리즈가 일곱 번째 시간에 접어들었습니다. 그동안 [계산기]나 [그림판]처럼 복잡한 로직과 UI를 가진 앱들을 만들어오면서, 가끔은 ‘가장 단순한 기능이 가장 큰 울림을 줄 때가 있다’는 생각을 하곤 했습니다. 그래서 오늘은 아주 클래식하지만, 어떻게 구현하느냐에 따라 서비스의 퀄리티가 천차만별로 달라지는 ‘자바스크립트 랜덤 명언 생성기’를 준비해 보았습니다. 이번 프로젝트에서 제가 집중한 포인트는 ‘데이터의 … 더 읽기

Canvas API 활용: 웹 브라우저 자바스크립트 그림판 만들기

안녕하세요! 벌써 여섯 번째 미니 프로젝트네요. 오늘은 웹 브라우저 위에 자유롭게 그림을 그릴 수 있는 ‘자바스크립트 그림판’을 만들어 보았습니다. 단순히 선을 긋는 기능을 넘어, 실제 사용자가 편리하게 도구를 전환하고 그림을 지울 수 있는 로직까지 고민해 본 시간이었는데요. 자바스크립트의 Canvas API는 처음 접하면 조금 생소할 수 있지만, 한 번 원리를 깨우치면 이만큼 강력하고 재밌는 도구도 없는 … 더 읽기

Date 객체로 완성하는 커스텀 자바스크립트 달력 제작법

벌써 다섯번째 글을 작성하네요. 이번에는 자바스크립트 달력을 만들어볼까 합니다. 스마트폰이나 윈도우 화면에서 쉽게 확인할 수 있는 달력을 한번 구현해보면서 공부해볼까 합니다. 사실 이미 만들어져 있는 달력 라이브러리들이 많지만, 그래도 직접 구현해보면 공부도 되고, 좋을 것 같아서 시작하게 되었습니다. 1. 설계 ① 월(Month) 구현하기 달력을 만들면서 가장 먼저 당황했던 건 new Date().getMonth() 결과값이었습니다. 분명 지금은 1월인데 … 더 읽기