211027_개발자 준비하기(26일차) - DOM, Event handler, eventListener

오늘 배운 것(TIL)

유효성 검사하는 법
- 정규식을 통한 ID, PW 유효성 검사
- event handler(구식 방법인 on과 신식 방법인 eventlistener를 통하여 이벤트 값 받기)
console.log와 dir의 차이점
script tag를 body, head에서 각각 선언할때의 차이점

<페어 스프린트>

오늘 페어분과 기존 유효성 검사 스프린트는 다 통과를 해서 각자 과제를 부여해서 추가하는 식으로 진행했다.

나는 회원가입하면 떠오르는게 네이버라서 후다닥 네이버 회원가입창으로 달려갔다.

내가 네이버에 아이디를 처음 만든게 2000년대 초반이었던 것 같은데 그때보다는 확실히 심플하고 깔끔해졌다는 것을 알 수 있었다. 그래서 더욱! 클론하기에 쉬워보였다.(나중에서야 이것도 버겁다는 ㄱㅓㄹ 깨달ㅇ...)

하루를 갈고나서야 흉내는 낼 수 있었는데 그조차도 너무 허접하지만 그래도 지금 이정도로 만든게 어디냐고 어깨를 으쓱했다.

아직 회원가입 버튼을 완성을 못시켰다. 마지막에 어떻게 모든 input값이 유효한 지 감이 안잡혀서

좀 찾아보고 주말에 완성시켜 볼 생각이다.~~(css로 중앙정렬을 가변적으로 못만들어서 창크기를 바꿀때마다 위치가 바뀐다는 것도 함정이다..)~~

그리고 네이버에서 유효성 검사를 해서 생년월일을 계산해서(아마도) 나이가 100살 이상일때와 미래의 년도를 설정을 하게 되면 저렇게 유머스럽게 표현하고 있다는 것도 처음 알았다 (우리 네이버.. 생각보다 힙하구나?)

그래서 요것도 내 과제에 비슷하게 붙여놓았다.

그 외에 공부를 통해

Cheat Sheet을 알게 되었다. 외국엔 오픈북 시험이 많아서 이렇게 정리해놓은게 많다고 하더라.

이런 것들을 뽑아두어서 곁에 두고 자주자주 읽으면 도움이 될 것 같다.

💡 <script>를 head에 넣는 것과 <body>에 넣는 것의 차이가 무엇일까?

이 부분도 사소하지만 중요한 핵심이었는데, 알기 전까진 당연히 뒤에 넣어야된다고만 알고있었다.

DOM을 배우고 나니 뒤에 선언을 해야 DOM구조 완전히 불러올 수 있고 HTML 렌더링에 영향을 안준다는 것을 알았다. 그리고 async와 defer의 차이도 배우게 되었다.

내일 배울 것

고차함수
- 일급 객체(first-class citizen)의 세 가지 특징
- 고차 함수(higher-order function)에 대해
- 고차 함수를 자바스크립트로 작성

[참고자료]

이 문제에 관하여(211027_개발자 준비하기(26일차) - DOM, Event handler, eventListener), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wngud4950/211027개발자-준비하기26일차-DOM-Event-handler-eventListener

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다