16일차
2021. 08 .09 월요일
1. Today's Key points!
- DOM
- 이벤트 객체
- validator(sprint 과제)
- Algorithm, powerOfTwo, firstCharater - 알고리즘은 따로 카테고리를 만들어서 정리해보고자 한다.
2. 정리해보자!
- DOM이란? HTML문서의 구조와 관계를 객체(Object)로 표현한 모델. 즉, HTML을 javascript object로 표현하는데, 이것을 이용해서 엘리먼트의 속성값을 얻어내거나, 변경할 수 있다. 다시 간단하게 말하자면 'javascript를 읽는 기준 모델'이라고 할 수 있을 것 같다. 초기 웹 브라우저에서 정보를 보여주는데, 그 정보를 바꾸려면 통신요청을 해야했고, 이 과정에서 많은 비용과 시간이 필요했다. 그래서 이 비효율적인 문제를 해결할 방법으로 브라우저가 코드를 읽게 할 수 있는 javascript를 만들었고, 비용과 시간의 문제를 해결했다. 그런데 internet explosure, safari, chrome, edge 외에도 수많은 웹 브라우저가 있는데, 각자마다 js를 읽는 방식이나 규칙이 달라서 효율적이지 못한 부분이 있다. 그래서 수많은 개발자들이 모여 DOM을 구현하여 HTML을 조작할 때 DOM규칙을 따르게 했다. DOM은 각기 브라우저 마다 다르게 구현되어 있다. 다만 메이저 브라우저는 최대한 DOM Spec에 맞게 구현하려 노력하기 때문에, 웹 개발자는 JavaScript로 DOM 사용에 집중한다.
- 이벤트 객체 : 웹 사이트를 서핑하다 보면, 이미지나 카드를 클릭하거나 드래그하는 일이 있다. 이렇게 클릭이나 드래그하는 일을 이벤트라고 한다. 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체이다. 직접 실습을 통해 좀 더 알아보자.
DOM을 통해서 menus에 모든 button 엘리먼트를 담았다. menus를 콘솔로그에 찍어보면 저렇게 NodeList(2)[button. button]이라고 찍힌다. 그리고 handleClick이라는 함수를 만들어서 함수안에 currentMenuTest라는 변수에 event객체를 할당했다. 사실 이 부분이 명확하게 이해가 되지는 않았다. 그래도 공부하면서 내가 이해한 바를 설명해보자면, 지금 상태에서 btnAmericano와 btnCaffelatte는 button이라는 객체가 되었다. 이 button객체 안에는 수많은 속성들이 있는데, 그 중에 onclick이라는 이벤트 속성에 handleClick이라는 함수를 할당해 주었다. 그래서 button을 onclick하게 되면 handleClick이라는 함수가 시키는 일을 하게된다. 그래서 이제 이 함수안에 어떤일을 시키게 할 건지를 만들어 주어야하는데, onclick같은 이벤트 속성을 사용하게 되면, event라는 객체를 이용할 수 있게 되는 것 같다. 그래서 event라는 객체를 이용해서 원하는 value를 변수에 선언해줘서 onclick 했을 때 그 값이 나오게하는 함수를 만들 수 있고, 이러한 함수를 만들 수 있게 해주는 것이 DOM 덕분 인듯 하다. 이렇게 해서 위의 결과를 콘솔에서 실행시켜보면, 아래와 같이 나온다.
3. 복습하기!
- validator
아래의 사진은 15일차에 만들었던 결과이다.
이 때 해결되지 못했던 회원가입 버튼 비활성 상태에서 모든 유효성 조건에 만족했을 때 활성화 시키는 것을 해결했다. 어떤 식으로 해결했냐 하면, satisfiedID, satisfiedPassword,... 이러한 변수를 false값으로 할당해서 선언해 준뒤에, onkeyup같은 이벤트가 발생했을 때, 해당 유효성 조건을 만족하면 satisfiedID에 값을 true로 변환 시키고, 이렇게 선언해준 모든 변수들이 true이면 버튼을 활성화 시켜라 라는 함수를 만들어 주었다. 이렇게 하니 그 문제를 해결할 수 있었다. 그리고 추가적인 기능을 부여해 보았다. 아래 사진을 보면 어떤항목이 더 추가되었고 어떤 유효성을 만족해야 하는지를 확인해볼 수 있다.
그리고 이 모든 조건을 만족하면 다음과 같은 결과가 나온다. 중복체크라는 버튼을 누르면 저렇게 확인창이 나올 수 있도록 해보았다. 그리고 CSS를 추가시켜서 조금 꾸며 보았다.
회원가입 버튼을 누르게 되면 회원가입 결과 창이 나오도록 만들어 보았다.
홈과 로그인 창도 만들어 보았다.
마지막으로 CSS는 이전에 완벽하게 이해하지 못했던 flexbox를 사용해서 화면의 item들을 중앙에 배치하도록 해보았고, text를 입력하는 input과 label엘리먼트를 보기 좋게 정렬하는 것을 연습해보았다. CSS는 앞으로 많은 연습이 필요할 것 같다. 각각의 기능에 맞게 스타일링해보는 다양한 방법들을 알아보고 꾸미는 연습과 어떤 디자인을 보기만 하고 비슷하게 구현할 수 있을 정도로 연습이 필요할 것 같다.
