> 크롬 앱 클론코딩
1.로그인 form
로그인 form을 만드는데 HTML을 잘 이용하면 위와같이 javascript 내에서 EventListener을 사용할 필요없이
HTML태그를 밑과 같이 변경하면 된다
required는 필수라는 뜻인데 form에 무조건 데이터를 입력하게 끔 만들어주는 함수이다
max=15 함으로 최대 문자 길이는 15글자로 제한된다
위와같이 form 태그를 사용할때 주의할 점은
form 안에 input을 넣을경우 자동적으로 submit이 된다
브라우저 자체에서 엔터를 누를때
새로고침하고 form을 submit하도록 되어있다.
그 말은 데이터를 입력하여 submit되면 페이지가 새로고침된다.
javascript를 통해 이런 기본동작을 제어할 수있다.
2. preventDefault()
preventDefault() → 어떤 event의 기본 행동이 발생되지 않도록 막는 함수이다
기본행동이란 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작을 뜻한다
예를 들어 누군가 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있는데 preventDefault() 를 통해
새로고침을 막아버리는 것이다
preventDefault 함수를 사용하지 않았더라면 페이지가 새로고침 되어 위와같이 console 에 username이 찍히지 않았을 것이다
하지만 preventDefault 함수를 사용함으로 form의 기본행동인 submit을 제어하였기 때문에 console.log가 작성된 것이다.
