- Nomad Coder - 바닐라 JS로 크롬 앱 만들기 필기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Momentum App</title>
</head>
<body>
<!-- 정규식 넣어보기.... but 최근의 로그인 시스템은 토큰으로 구글로그인, 네이버로그인, 카톡로그인을 사용한다....... -->
<form class="hidden" id="login-form">
<input
type="text"
required
maxlength="15"
placeholder="what is your name?"
/>
<!-- input태그로 submit가 발동될때 새로고침후 form을 submit하도록 브라우저에 프로그래밍되어있다. -->
<input type="submit" value="Log-In" />
<!-- <button>Log in</button> -->
</form>
<h1 class="hidden" id="greeting"></h1>
<script src="app.js"></script>
</body>
</html>
// 1.유저가 form에 아이디를 입력하면 받아오고 싶다.
const loginForm = document.querySelector('#login-form')
const loginInput = document.querySelector('#login-form input')
const greetingH1 = document.querySelector('#greeting')
// ****** 자주 쓰이는 데이터(String,number)는 상수화 시켜서 관리(어디에 적용되어있는지 잘보기) ******
const HIDDEN_CLASSNAME = 'hidden'
const USERNAME_KEY = 'userName'
// 3. localStorage에 userName이 있으면, h1태그로 아니면 form태그 그대로 보여줌(로그인 한번하면 계속 로그인되는것 구현)
const saveUserName = localStorage.getItem(USERNAME_KEY)
if (saveUserName === null) {
//show the form
loginForm.classList.remove(HIDDEN_CLASSNAME)
loginForm.addEventListener('submit', onLoginSubmit) // submit 이벤트 클릭 대기
} else {
// show the h1(greeting)
paintGreeting(saveUserName)
}
// log-in 버튼을 누르면 html 조건에 의해서 이버튼을 실행할지 안할지 검사함.
// html input의 조건에 맞으면 이 메서드를 실행하게 하고 아니면 html단에서 막음
function onLoginSubmit(event) {
event.preventDefault()
const userName = loginInput.value
//2. 데이터를 받으면 html에서의 form디자인을 없애고 싶다.
//1) form을 지우기
//2) form을 안보이게 처리하기
//2) 방식 채용 style.css에 확인하기(hidden)
// 이부분에서 js로 정규식을 사용하거나 html input태그단에서 정규식을 사용하자.
if (userName === '123') {
alert('123은 안됩니다.')
return
}
// **localStorage : 내컴퓨터의 웹브라우저에 저장 --> 나중에는 이정보를 서버에 보내서 서버의 DB에 저장해야함.
localStorage.setItem(USERNAME_KEY, userName)
loginForm.classList.add(HIDDEN_CLASSNAME)
console.log(userName)
//greetingH1.innerText = 'Hello! ' + userName
paintGreeting(userName)
//console.log(event)
}
// 4.중복된 코드들을 함수화
function paintGreeting(userName) {
greetingH1.classList.remove(HIDDEN_CLASSNAME)
greetingH1.innerText = `hello! ${userName}` // --> 이걸 잘쓰자
}
.hidden {
display: none;
}
- 메인 로직
- className , id로 form, h1 태그를 hidden(CSS)으로 처리함
- html tag 활용법 : https://365kim.tistory.com/64
- js에서 코드를 이용하여 input = "text"의 value값을 localStorage에 저장함(처음 로그인 할때는 input = "text"의 value값을 받아서 출력하게함.)
- if문으로 분기를 나누어 localStorage에 값이 있으면 h1태그의 hello! id를 아니면 form 태그의 내용을 보여주게함.
배운것
- html의 내용과 데이터를 js가 유기적으로 출력해주지만, CSS는 html 형태, 및 디자인을 해준다.
- event.preventDefault()
- js에서 html에 출력하거나 입력받은 데이터를 확인할때 사용할 수 있는 중요한 메서드이다.
- html에서 각테그 혹은 기본적으로 브라우저에서 진행되도록 하는 흐름을 정지시켜서 정확히 어디서 어떤 데이터를 출력 혹은 입력 받는지 알수있다.
느낀점
- 프론트단에서 관리하고 신경써야 할 부분이 생각보다 굉장히 까다롭다. 더군다나 아직은 오류가 발생해도 제대로 찾을수 없어서 코드를 상수화 시키거나 하는 것을 습관화해야 겠다.
- html, js, css가 유기적으로 사용되기 때문에 항상 화면설계시 꼼꼼하게 설계해야되겠다고 생각했다.
의문점
onLoginSubmit 메서드 내에 paintGreeting(saveUserName)라고 입력하면 아이디를 입력하면서 로컬스토리지에 저장(localStorage.setItem(USERNAME_KEY, userName))이 될것이고 이것을 const saveUserName = localStorage.getItem(USERNAME_KEY)
받아서 사용할것 같은데 왜 null이 출력되는지 모르겠다.
답변(chatGPT)
주어진 코드에서 const saveUserName = localStorage.getItem(USERNAME_KEY) 라인에서 saveUserName 변수가 초기화될 때, localStorage.getItem(USERNAME_KEY)의 반환값이 null일 경우 saveUserName 변수도 null로 설정됩니다. 이는 localStorage에 해당 키로 저장된 값이 없을 때의 초기 상태를 의미합니다.
따라서 localStorage.setItem(USERNAME_KEY, userName)를 호출하여 localStorage에 값을 저장한 이후에도, saveUserName 변수는 null 값으로 남아있게 됩니다. 이유는 코드 상에서 saveUserName 변수가 한 번 초기화되면 그 이후로 해당 변수의 값이 변경되지 않기 때문입니다.
코드에서 const saveUserName = localStorage.getItem(USERNAME_KEY)는 파일이 로드되면서 실행되는 부분입니다. 따라서 페이지를 열 때마다 localStorage에서 USERNAME_KEY에 해당하는 값을 불러와 saveUserName 변수에 할당합니다.
이 코드는 페이지가 로드될 때마다 사용자의 이름을 localStorage에서 가져와 saveUserName 변수에 할당합니다. 이렇게 할당된 값은 이후에 코드에서 사용될 때 유효합니다. 따라서 onLoginSubmit 함수에서 localStorage.setItem(USERNAME_KEY, userName)를 호출하여 값이 저장되더라도, 이미 할당된 saveUserName 변수에는 영향을 주지 않습니다.
만약 onLoginSubmit 함수에서 저장된 값을 saveUserName 변수에 업데이트하려면, saveUserName 변수에 새로운 값을 할당해야 합니다. 이렇게 하면 localStorage에 저장된 값과 변수에 할당된 값이 일치하게 됩니다.
-
나는 저게 전역변수처럼 사용할 수 있는줄 알았는데, 그게 아니다 -_-!
저부분을 js에서 처음 읽어오면 saveUserName = null이 저장 되면 끝이고 set했다고 해서 저 부분이 변경되지 않는다. js는 위에서 아래로....읽으면 끝이다. -
따라서 저 코드에서 함수내에 저장된값을 출력하려면 또 변수로 받아서사용해야 된다. const someName = localStorage.getItem("userName)으로 해서 saveUserName = someName을 선언해야 된다.....
-
이벤트 함수내에서 다시.... 호출...
