목적

MDN의 자바스크립트 기초 부분을 다 읽고 난 후, 자바스크립트에 익숙해지기 위함이다.

동기

특정 언어를 배웠다면 해당 언어로 CRUD 시스템을 만들어봐야 한다고 생각했다.

그렇다고 서버를 만들자니 아직 node.js부분을 잘 모르는 상태에서 express모듈을 설치해서 프로젝트를 진행하기엔 목적에 부합하지 않다고 생각했다.

따라서 localStorage API를 이용해 간단한 CRUD 시스템을 만들기로 하였고 TODO 웹 어플이 이에 적합하다고 생각했다.

하다보니 TODO기능만 덩그러니 있으니 보기에 심심해서 브라우저의 시작 메인화면과 비슷하게 만들어 보기로 했다.

나만의 시작 페이지를 만드는 것도 좋을것 같아서 TODO기능 말고도 시간, 북마크 기능까지 추가했다.

어려운 점

이벤트라는 개념이 이해는 되지만 막상 사용하려하니 익숙치 않아서 어려웠다.

특히 이벤트 전파와 엘리먼트의 기본 동작에 대해서는 그간 잘못알고 있었다.

예를들어 이런거다.

<a href="https://naver.com">
  <button>X</button>
</a>

document.querySelector("button").addEventListener("click", (e)=>{
	e.stopPropagation();
  	e.currentTarget.closest("a").remove();
});

위의 코드에서 버튼을 누르면 어떻게 될까?

클릭 이벤트의 전파를 막기때문에 a 엘리먼트가 삭제되는게 끝이다.

...라고 생각했다면 다시 공부하자.

해당 부분은 CSS시리즈의 이벤트 입문파트에 정리해놓았다.

또한 새로운 기술들을 많이 사용해보고 적용하려고 노력하다보니 코딩시간이 길어져서 시간조절이 어려웠다.

사용한 기술

• <dialog> 엘리먼트를 사용
• fontawesome 대신에 boxicons를 사용
• @font-face 를 통해 로컬 폰트(메이플스토리 폰트)로 웹 페이지를 제작
• 시계기능을 new Date() 가 아닌 Intl API를 사용해서 구현
• localStorage API를 사용해 데이터를 저장
• 정규식을 사용 ( 북마크에서 사이트를 추가할 때, 프로토콜 유무 체크 )
• favicon

결과물

• 깃헙 저장소 : 깃헙➡️

• 라이브 데모 사이트 : 깃헙 배포➡️

PC 화면

모바일 화면