[데브코스] TIL-109 DOM, event, timer

DOM객체, 이벤트, 타이머

 

  어제 월요일 강의를 들으면서 많은 당황을 했었다. 바로 바닐라 자바스크립트로 컴포넌트를 구성하면서 'TodoList' 를 만들어 보는 강의였다. 그 동안의 강의에서는 자바스크립트 기초개념, 알고리즘과 자료구조에 대해서 공부를 했었다. 그래서 나에게는 그래도 익숙한 부분이라 그렇게 빡빡하게 느껴지지는 않았다. 그런데 오늘 강의에서는 실제로 어떤 기능을 구현하는(?)것들을 시작했는데 순간 머리속이 하얗게 질렸었던 것 같다. 그러다 곧 내가 무엇이 부족한지를 깨달을 수 있었다. DOM객체를 한 번도 조작해 본적이 없고 이벤트가 발생했을때 이벤트 핸들러를 조작해 본적이 없었다. 그와 더불어 setTimeout, setInterver과 같은 클라이언트 사이드 웹 API도 제대로 개념을 알고 있지 못했었다. 그래서 다시 그 부분부터 공부를 하기 시작했다. 저것과 관련된 기초 지식이 너무 부족했기 때문에 Modern JavaScript Deep Dive로 해당 부분들을 다 읽기 시작했다. 

 

  공부를 할 때 종이에 적어가며 정리하는 것을 좋아해서 해당 내용들을 전부 블로그에 바로 정리하기는 어렵다. 그래서 공부했던 사진을 올리고자 한다. 

---

DOM

DOM

DOM

DOM

강의 들으면서 모르는것 체크ㅎ

이벤트, 타이머

비동기 처리, Promise

---

  이렇게 다시 DOM과 이벤트에 대해서 공부하였고, 그리고 어제 강의를 다시 처음부터 듣기 시작했다. 열심히 공부하고 난 이후에 이렇게 했는데도 강의를 들으면서 이해를 못하면 어떻하지?에 대한 순간 걱정이 있었는데 정말 기분좋게도 강의 내용들이 귀에 쏙쏙 들리기 시작했고 기분좋게 따라 만들어 볼 수 있었다. 그 순간이 가장 행복한 순간이 아니었나 싶다 ㅎㅎㅎㅎㅎㅎ이 맛에 뭔가 공부를 계속해서 하게 되는것 같다.

 

강의 들으며 따라 만든 ToDoList

---

  진짜 몸이 두 개이고 싶다는 생각을 오랜만에 해봤다. 이것저것 해야할것도 많고 알아야 할 것도 많은데,,, 하루종일 책만 들여다 보고 있으면 집중도가 떨어지는것이 느껴졌다. 그럴때는 반대로 코드를 작성하는 연습을 했다. 특히 유튜브를 보면서 '테트리스 게임'을 바닐라 자바스크립트로 구현하는 것들을 보면서 따라서 열심히 만들어 보았다. 전체적으로 코드를 구성하고 작성하는것에 익숙하지 않기 때문에 이러한 부분이 도움이 많이 될 것이라고 들었다. 그리고 바로 나의 깃허브 계정에도 push해서 넣었다.

https://github.com/WooDaeHyun/tetris_game_by_VanilaJS.git

GitHub - WooDaeHyun/tetris_game_by_VanilaJS

물론, 내가 직접 구상해서 만든것도 아니고 단순히 유튜브를 보면서 따라친게 전부였다. 그럼에도 테트리스 게임이 만들어졌다는 그 사실 하나만으로도 뭔가 재미있고 흥미로웠던것 같다. 또 조금씩 코드를 작성하는 것들이 조금은 나아지고 있는게 느껴진것 같다. 

---

오늘을 마무리 하며

 

바쁘다.. 할게 많다...뭔가 그래도 조금씩 성장해 가고 있을것이라는 굳은 믿음으로 열심히 해보려고 한다. 내일은 비동기 처리와 promise async/await 등등을 공부해 보아야할 것 같다. (강의 내용과 깊은 관련이 있다...) 뭔가 지금 할게 많아 정신이 없다보니 오늘의 TIL은 여기까지 작성하련다..안녕~🤪