노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 듣고 내용을 정리합니다.
🦖 string 길이 구하기
const username = "hello"
console.log(username.length);출력 : 5
🦖 input 태그의 특징
input의 attirubte로 required, maxlength를 지정해줄 수 있다.
단, 이러한 input의 유효성 검사는 input 태그가 form 태그로 감싸져 있을 때만 가능하다.
<form>
<input required maxlength="15" type="text" />
</form>🦖 form 태그의 submit
아래의 경우에는 굳이 버튼에 click 이벤트를 주지 않아도 자동으로 submit이 된다.
기억하자 - submit은 엔터를 누르거나 버튼을 클릭할 때 발생한다.
enter 버튼이나 input 안에 있는 button을 누를 경우
<form>
<input type="text" placeholder="입력하세요"/>
<button>로그인</button>
</form>
enter 버튼이나 type이 submit인 input / 엔터를 누를 경우
<form>
<input type="text" placeholder="입력하세요"/>
<input type="submit" value="로그인"/>
</form>🦖 event의 기본동작 막아주기
form 태그의 submit
위에서 봤듯 form 태그의 submit은 자동으로 submit이 되는데, 그 때 자동으로 페이지가 새로고침이 되면서(기본동작) 입력한 value 값도 우리가 받기 전에 사라진다.
이를 해결하기 위해서는 submit 이벤트에 대한 함수를 만들어주어야 하고, 해당 함수에서 새로고침을 막아주는 코드를 적어주어야 입력한 value를 우리가 받아낼 수 있다.
HTML
<form id="login-form">
<input type="text" placeholder="입력하세요"/>
<input type="submit" value="로그인"/>
</form>Javascript
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event) { //argument에 submit 이벤트에 대한 정보가 저장됨
event.preventDefault(); //event의 기본동작을 막아주는 코드
console.log(loginInput.value); //콘솔창에 사용자가 input란에 입력한 값이 뜬다.
}
loginForm.addEventListener("submit", onLoginSubmit); //submit event모든 EventListener function의 첫 번째 arugment에는 항상 지금 막 벌어진 일들에 대한 정보를 담은 object가 들어간다. JS가 그 정보를 제공하기 때문에, 우리는 그냥 arguement라는 공간만 주면 된다. 우리가 argument만 작성해주면 JS가 방금 일어난 event(여기서는 submit)에 대한 정보를 argument에 채워넣어준다. argument명은 아무거나 와도 되지만 보통은 event라고 작성한다.
console.log(event)를 작성해주면 object에 담긴 정보들을 확인할 수 있다.
preventDefault()
어떤 event의 기본행동도 발생되지 않는 것. 즉, 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작을 막아주는 것. 여기서는 submit 이벤트의 기본동작인 브라우저의 페이지 새로고침을 막아주는 것이다.
a 태그의 link
link의 기본 동작은 클릭 시 다른 페이지로 이동하는 것이다. 이걸 막아보자!
HTML
<a href="https://nomadcoders.co">링크</a>Javascript
const link = document.querySelector("a");
function handleLinkClick(event) {
event.preventDefault();
}
link.addEventListener("click", handleLinkClick);
이제 link를 클릭해도 해당 페이지로 이동하는 기본동작이 작동되지 않는다!
참고) 함수 뒤에 ()를 작성하는 경우와 작성하지 않는 경우
함수 뒤에 ()를 작성한 코드는 바로 해당 함수를 실행시키겠다는 의미
브라우저가 이 코드를 보는 순간 함수를 바로 실행시킨다. 그래서 EventListener를 할 때 함수 뒤에 ()를 안 붙이는 것이다. 바로 실행시키는게 아니라 이벤트가 발생했을 때만 실행시키려고 하는 거니까! addEventListener에 안에 있는 함수는 우리가 직접 실행하는게 아니라는 것을 명심하자! 내가 아니라 브라우저가 해주는 것이고, 브라우저는 실행시켜줄 뿐만 아니라 event에 대한 정보도 제공해준다! 우리가 argument로 자리만 마련해주면, 그 정보를 argument에 공짜로 넣어준다!
🦖 CSS - visibility:hidden과 display:none의 차이점
visibility: hidden;
공간은 그대로 두고, 눈에만 안 보인다.
display: none;
잡아둔 공간까지도 모두 사라진다.
🦖 변수명 convention) string만 포함된 변수
일반적으로 string만 포함된 변수는 대문자로 표기한다.
const HIDDEN_CLASSNAME = "hidden";
🦖 string과 변수 조합하는 방법 2가지
단순히 ""와 +로 연결
const username = loginInput.value; //input에서 사용자 입력값을 받아와 변수에 저장한다고 가정
console.log("Hello " + username); //honi를 입력하면 콘솔에 "Hello honi" 출력`와 변수값을 의미하는 $ 이용하기 (추천!)
const username = loginInput.value;
console.log(`Hello ${username}`); // 위의 코드와 동일하게 동작반드시 `로 감싸야하고, ${변수명} 으로 작성하면 JS가 알아서 변수에 저장된 값으로 바꿔준다.
🦖 localStorage API
우리가 브라우저에 뭔가를 저장할 수 있게 해준다.
예를 들어 유튜브에서 볼륨을 조절하고 새로고침하면, 유튜브가 그 볼륨값을 기억하는 등 뭔가를 기억할 수 있도록 해주는 것이다.
local storage에 뭐가 들어있는지 보고 싶으면 개발자 도구 - Application - local storage를 찾으면 된다.
localStorage에는 다양한 메소드들이 있다.
setItem
local storage에 정보를 저장할 수 있다.
localStorage.setItem("username", "nico") // (key값, value값)getItem
local storage에 저장된 정보를 불러올 수 있다.
localStorage.getItem("username") // key값에 해당하는 value를 가져온다만약 없는 key값으로 getItem을 한다면, null이 반환된다!
removeItem
local storage에 저장된 정보를 지울 수 있다.
localStorage.removeItem("username") // key값에 해당하는 값을 지운다.여기부터는 과제하면서 내가 삽질한 이야기..
🦖 input으로 입력받은 값의 자료형
input에 사용자가 입력한 값은 문자열로 취급한다... 심지어 input type이 number여도....................... 숫자만 입력해도 숫자로 이루어진 문자열로 본다..........
