자바스크립트 MBTI 테스트 만들기: 로컬 스토리지를 활용한 데이터 저장 및 결과 분석기 제작

안녕하세요! 요즘 모임에서 빠지지 않는 주제가 바로 MBTI죠? 단순한 성격 유형 검사를 넘어 이제는 하나의 문화로 자리 잡은 느낌입니다. 개발을 공부하는 우리에게 이런 유행은 아주 좋은 실습 소재가 됩니다. 특히 자바스크립트 MBTI 테스트 제작은 사용자의 선택을 받고, 점수를 계산하고, 그 결과를 보여주는 과정이 포함되어 있어 웹 개발의 핵심인 ‘데이터 처리’와 ‘상태 관리’를 배우기에 최적이기 때문이죠. … 더 읽기

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

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

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

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

LocalStorage를 활용한 자바스크립트 할 일 목록(Todo List) 만들기

우리가 웹 서핑을 하다 보면 아이디를 저장하거나, 장바구니에 담은 물건이 다음날에도 그대로 남아있는 것을 볼 수 있습니다. 반면, 우리가 지난번 만든 스톱워치는 페이지를 새로고침하는 순간 모든 기록이 0으로 돌아갔죠. 오늘 만들 자바스크립트 할 일 목록(To-do List)은 바로 이 차이를 해결하는 프로젝트입니다. 앞서 우리가 만든 ‘OX 퀴즈‘와 ‘스톱워치’가 브라우저의 현재 상태(State)를 보여주는 데 집중했다면, 이번 프로젝트는 … 더 읽기