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