오늘 새롭게 배운 것 ✨
DOM_ Document Object Model
html문서를 브라우저가 불러올때,
<html>
<head>
<title>웹페이지</title>
<body>
<div class="nothing"></div>이 문서의 요소(태그)들을 하나하나 분석하고
자신이 이해할 수 있는 Javascript, node라는 object로 변환!
이 node라는 객체는 EventTarget을 상속함,
즉, 모든 node는 이벤트가 발생할 수 있다!
document도 node를 상속하기 때문에, 이런 node의 종류는 굉장히 다양!
그렇다면, DOM과 HTML의 차이는? 같은거 아냐???no!
예를 들어, 우리가 연습을 위해 head나 body태그를 쓰지 않고 div만 하나 써서 작성한 html문서를 브라우저에서 연다고 생각해보자,
이때 브라우저는 html문서를 분석하면서 자동으로 head와 body에 해당하는 node를 만들고 그 안에 div를 생성할 것!
- Hierarchy
유효성 검사 (Form validation)
일반적인 회원가입 페이지에서 , 아이디, 비밀번호, 비밀번호 확인 등과 같은 인풋태그에서 전달받은 값이 원하는 형식에 유효한지 검사하는 기능!
유효성 검사의 목표는 회원 가입이라는 핵심 기능에 대해, 작동이 가능한 MVP(Minimum Viable Product)를 만들어 내는 것
실제 개발에서 굉장히 자주 마주치는 문제!
- 관심사 분리를 적용
- 유효성 검사 함수를 따로 분리해서 설계
Spread/ Rest 개념정리
rest 파라미터는 배열내부에 '남아있는 것들'을 "모아주는"
spread 연산자는 iterable(반복가능한) object를 하나의 요소, argument로 '펼치는'
느낀 점
- 이제야 드림코딩 엘리의 강의들이 '아!' 하고 이해되는 느낌! 꿀단지인지 몰라봐서 죄송함돠...
- 토이...한끝차인데, 왜 안보일까, 막힐 때 한발 뒤에서 보는 여유!
- 토이2... 검색찬스 너무 사리지 말자 - 그래도 내가 생각해서 쓰는게 좋은데, 시간제한 뭐가 더 우선순위일까?!
- 떠오르는 아이디어들, 사용자 관점, 관리자 관점으로 나누어 생각해보자
내일은 😆👊💥
- 유효성 검사 정규식 활용 업뎃
- CSS도 업뎃? or 내가 원하는 페이지 새로 만들기
- 기상시간 30분 앞당기기!
- 8시-9시 토이하고, 쉬는 시간 갖고 새로운 공부시작해야겠다, 아니면 뚝배기 cpu 발열로 새로운 공부가 안된다..ㅠ
생각하는 사람