안녕하세요! 어느덧 12번째 프로젝트에 도달했습니다. 그동안 우리는 자바스크립트로 데이터를 가공하고 시각화하며 ‘보여주는 방식’에 집중해 왔습니다. 하지만 이번 프로젝트부터는 조금 다른 관점에서 접근해 보려 합니다. 바로 “우리가 매일 쓰는 웹 브라우저가 기본적으로 어떤 강력한 기능들을 이미 내장하고 있는가?”에 대한 탐구입니다. 오늘 만들어본 ‘자바스크립트 영단어장’은 단순히 텍스트를 저장하는 메모장에 그치지 않습니다. 외부 유료 API나 무거운 라이브러리 없이도 … 더 읽기
안녕하세요! 10번의 프로젝트를 통해 우리는 데이터를 저장하고 관리하는 법을 배웠습니다. 하지만 문득 이런 생각이 들더군요. “할 일을 10개 적어놨는데, 내가 얼마나 해냈는지 한눈에 알 방법은 없을까?” 단순히 텍스트가 줄 그어지는 것보다, 원형 그래프가 실시간으로 차오르는 모습을 본다면 성취감의 차원이 다를 것입니다. 그래서 11번째 프로젝트는 ‘코드로 그림을 그리는’ 영역인 데이터 시각화에 도전했습니다. 자바스크립트 우선순위 대시보드를 테마로 … 더 읽기
안녕하세요! 오늘 10번째 프로젝트로는 누구나 한 번쯤 해봤을 법한 고민, “내 지출을 한눈에 관리할 수 없을까?”라는 질문에서 시작해 ‘나만의 자바스크립트 가계부’를 만들어보았습니다.. 사실 단순히 얼마를 썼는지만 기록하는 것은 반쪽짜리 가계부나 다름없습니다. “이번 달 수입은 얼마였고, 그래서 지금 내 통장 잔액은 얼마인가?”라는 질문에 답할 수 있어야 진짜 가계부라고 할 수 있죠. 이번 포스팅에서는 날짜 기반의 정렬부터 … 더 읽기
안녕하세요! 오늘 아홉 번째 프로젝트로 도전해 본 주제는 우리에게 너무나 익숙한 ‘자바스크립트 타이핑 속도 측정기’입니다. 사실 처음 기획할 때는 “글자만 비교하면 끝나는 간단한 로직 아닌가?”라고 가볍게 생각했습니다. 하지만 실제 구현 과정에서 마주친 디테일들은 결코 만만치 않았습니다. 특히 웹 환경에서 ‘한글’이라는 언어가 가진 특수성, 그리고 CSS 레이아웃이 1px 차이로 어긋나는 현상을 해결하며 많은 공부가 되었습니다. 이번 … 더 읽기
안녕하세요! 여덟 번째 프로젝트로 인사드립니다. 그동안 우리는 브라우저 안에서만 작동하는 다양한 도구들을 만들어왔습니다. 하지만 진정한 웹 앱의 매력은 외부의 살아있는 데이터를 가져와 사용자에게 실시간으로 전달하는 데 있다고 생각합니다. 그래서 오늘은 자바스크립트 중급자로 나아가는 가장 중요한 관문인 ‘비동기 통신’을 다뤄보려 합니다. 바로 외부 API를 연동한 ‘실시간 자바스크립트 환율 계산기’입니다. 단순히 환율 수치를 계산하는 로직을 넘어, 실제 … 더 읽기
안녕하세요! 어느덧 자바스크립트 미니 프로젝트 시리즈가 일곱 번째 시간에 접어들었습니다. 그동안 계산기나 그림판처럼 복잡한 로직과 UI를 가진 앱들을 만들어오면서, 가끔은 ‘가장 단순한 기능이 가장 큰 울림을 줄 때가 있다’는 생각을 하곤 했습니다. 그래서 오늘은 아주 클래식하지만, 어떻게 구현하느냐에 따라 서비스의 퀄리티가 천차만별로 달라지는 ‘자바스크립트 랜덤 명언 생성기’를 준비해 보았습니다. 이번 프로젝트에서 제가 집중한 포인트는 ‘데이터의 … 더 읽기
안녕하세요! 벌써 여섯 번째 미니 프로젝트네요. 오늘은 웹 브라우저 위에 자유롭게 그림을 그릴 수 있는 ‘자바스크립트 그림판’을 만들어 보았습니다. 단순히 선을 긋는 기능을 넘어, 실제 사용자가 편리하게 도구를 전환하고 그림을 지울 수 있는 로직까지 고민해 본 시간이었는데요. 자바스크립트의 Canvas API는 처음 접하면 조금 생소할 수 있지만, 한 번 원리를 깨우치면 이만큼 강력하고 재밌는 도구도 없는 … 더 읽기
벌써 다섯번째 글을 작성하네요. 이번에는 자바스크립트 달력을 만들어볼까 합니다. 스마트폰이나 윈도우 화면에서 쉽게 확인할 수 있는 달력을 한번 구현해보면서 공부해볼까 합니다. 사실 이미 만들어져 있는 달력 라이브러리들이 많지만, 그래도 직접 구현해보면 공부도 되고, 좋을 것 같아서 시작하게 되었습니다. 1. 설계 ① 월(Month) 구현하기 달력을 만들면서 가장 먼저 당황했던 건 new Date().getMonth() 결과값이었습니다. 분명 지금은 1월인데 … 더 읽기
지난 번에는 LocalStorage을 활용하는 방법에 대해서 글을 작성했는데요. 오늘은 간단한 사칙 연산이 포함된 계산기를 만들어볼까 합니다. 단순하고 간단해 보이지만 실제로 구현하면 신경 써야 될 부분이 더러 있습니다. 숫자 버튼을 누르면 화면에 숫자가 나오고, 연산자를 누르면 계산이 된다. 단순해 보이는 이 흐름 뒤에는 생각보다 꼼꼼한 설계가 필요했습니다. 자바스크립트 계산기의 코드를 처음 짰을 때, 숫자를 누르기도 전에 … 더 읽기
우리가 웹 서핑을 하다 보면 아이디를 저장하거나, 장바구니에 담은 물건이 다음날에도 그대로 남아있는 것을 볼 수 있습니다. 반면, 우리가 지난번 만든 스톱워치는 페이지를 새로고침하는 순간 모든 기록이 0으로 돌아갔죠. 오늘 만들 자바스크립트 할 일 목록(To-do List)은 바로 이 차이를 해결하는 프로젝트입니다. 앞서 우리가 만든 ‘OX 퀴즈’와 ‘스톱워치’가 브라우저의 현재 상태(State)를 보여주는 데 집중했다면, 이번 프로젝트는 … 더 읽기