Login에 사용할 유용한 양식들 (#11 Vanilla JS)

BTSBRINGMEHERE 2022. 3. 16. 14:17

## ``

innerText에는 2가지의 입력 방식이 있습니다. (아직 제가 배운내용 중에서는~~)

// 첫 번째
input.innerText = "Hello " + username;

// 두 번째
input.innerText = `Hello ${username}`

첫 번째 방식은 진짜 초창기에 배우는 입력양식입니다.

"(큰 따옴표) 나 '(작은 따옴표)를 이용해서 원하는 텍스트를 입력하고 + 값을 넣고 변수를 넣어주어서 완성 시켰습니다.

하지만 이런 방식은 아쉽게도 띄어쓰기를 입력하려면 따옴표 안에 띄어쓰기를 해줘야해서 이쁘지가 않습니다.

그래서 두 번째 방식은 ``(백팁) 이라고 부르는 양식입니다.

window: ctrl + ~
mac: option + ~

버튼을 눌러서 입력해줍니다.

기존 첫 번째 방식과 다른점은 처음부터 끝까지 입력값과 변수값을 넣어주며

변수에는 ${username} 을 입력해줘서 값을 넣어줍니다.

또 한, 백팁안에 모든것을 집어 넣어서 보기에도 이쁘고 변수도 ${} 안에 넣어줘서 보기에 직관적입니다.

사실 어떠한 방법을 사용하던지 주관적으로 편한 것을 사용해도 된다고는 합니다만.....

저는 두 번째 방법을 채용했습니다. 이유는 보기에 이쁘고 직관적이라서.. 허허허허허

## localStorage

브라우저에는 tiny한 db가 존재합니다.

콘솔창의 이러한 곳에 위치하며 key와 value값으로 이뤄져 있습니다. 마치 object와 비슷합니다.

key: value인 모습이....

localstorage

키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOMString의 형태로 저장합니다.
객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.

라고 Mdn에서 설명해 주었습니다.

모르는 것이 생겼을 때 설명이 되있어서 정말 편한 사이트입니다.~!!!!

// 현재 도메인의 로컬스토리지가 객체에 접근한 후 항목을 추가합니다.
localStorage.setItem("username", "YB")

// 위에서 추가한 항목을 읽는 법입니다.
localStorage.getItem("username")

// 위에서 추가한 항목을 삭제합니다.
localStorage.removeItem("username")

// 추가한 모든 항목을 제거합니다.
localStorage.clear()

이렇게 사용됩니다.

mdn에서 localStorage와 sessionStorage의 비교를 해줬는데

간단하게 session은 페이지 세션이 종료 되었을 때, 즉 페이지를 닫았을 때 데이터가 삭제되지만

local은 페이지 세션이 종료되어도 데이터가 만료되지 않습니다.

마지막으로

javascript에서는 무수히 많은 데이터 key 값과 CSS의 classname을 사용하게 될 것입니다.

그런것을 방지하고자

const HIDDEN_CLASSNAME = "hidden"

const USERNAME_KEY = "username"

이런식으로 변수명을 각자의 이름으로 설정하면서 대문자로 작성하면 보기 편하다고 했습니다.

변수이름을 대문자로 해준이유도 관습? 관행? 이라고 해주셨습니다.~~!