20210327 JavaScript의 파워를 실감한 열번째 주

2021-03-27 19:00:07

배운 것들

각 생성자함수의 특징과 활용
- String, Number, Math, Date
정규표현식 문법과 활용법
스프레드 문법, 디스트럭쳐링 할당 등 객체를 더 효율적으로 활용하는 방법들
함수의 각 호출방식에서 this가 가리키는 것
브라우저의 동작 원리
- html 문서를 파싱하여 렌더링하는 동작원리
- DOM, CSSOM, AST 생성의 원리와 순서
- JS에서 DOM에 접근하는 방식들
이벤트
- 이벤트 핸들러 정의 및 바인딩 방식
- 이벤트 객체 정보 분석, 이벤트 프로퍼티 정보 취득
- 이벤트 위임과 전파 (캡쳐링, 타깃, 버블링)

Pair Programming을 통한 배열의 고차함수 문제들을 풀었다. 이 실습을 통해 익힌 것들이 나중에 만들 Todos 웹페이지에 유용하게 활용되었다.
Todos List 웹페이지
- 서버에서 받았다고 치고 DOM 콘텐츠 로드되었을 때 받은 데이터를 html 마크업으로 생성해 렌더링 (getTodos(). render())
- 할일을 추가하면 목록에 추가(addTodo())하는데, 버튼을 누르거나 엔터를 누를 때 추가되고 추가된 후에는 input의 칸에 있는 value를 없애주는 것.
- 추가된 할일에 새로운 숫자로 아이디를 부여하는 것(generateId())
- 삭제버튼을 누르면 삭제(removeTodo()), 완료 버튼을 누르면 체크되는 것
- 완료된 todo와 미완료 todo의 개수를 세서 표시하는 것
- 모든 todo를 완료시키는 Mark all completed와 모든 완료된 todo를 삭제하는 Clear Completed

JavaScript로 HTML과 CSS 위에 군림하는 기분이다. 여러번 반복해서 JS의 왕이 되고싶다.
DOM 부분 양이 워낙 방대하고 어려워서 지칠 뻔했는데, 열심히 읽은 이론이 내가 짠 코드를 통해 실제로 동작하니까 피곤함이 싹 사라졌다. 익히 들었던 JavaScript가 파워풀하다는 것이 무엇인지를 실감했다.

문정동에서 코딩하는 하나나입니다.