일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Flex Box 기본
- numpy
- java spring
- HTML5
- 관계형데이터베이스
- 자바스프링
- SQL 연산자
- 리액트
- spring 환경설정
- Hooks
- 이클립스
- 람다식
- node.js
- 객체지향프로그래밍
- REACT
- ubuntu
- SQL 문제
- 타입
- 노마드코더
- spring
- 자바 스프링
- SQL 명령어
- 오산대맛집
- SQL
- Eclipse
- 플랙스박스기본
- Flexbox Froggy
- 스프링
- 환경설정
- java설치
- Today
- Total
이것저것
크롬 Momentum 클론코딩(사용자) 본문
querySelector는 찾은 것의 첫 번째를 가져온다.
querySelectorAll은 모든 것을 가져온다. 클래스명에 따른 엘리먼트들을 가져오는데 array로 가져온다. 단점은 array에서 하나의 엘리먼트를 가져오는 방법이 귀찮다고 한다.
getElementById는 querySelector의 다른 방법이다.
우선 사용자의 이름을 물어보는 input창에 이름을 입력하면 이름을 local에 저장하고 출력하게 할 것이다.
<!DOCTYPE html>
<html>
<head>
<title>Somethings</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form">
<input type="text" placeholder="What is your name?" />
</form>
<script src="clock.js"></script>
<script src="gretting.js"></script>
</body>
</html>
html에 form을 추가해줬다. form에는 js-form이라는 클래스와 안에 input창을 넣어주었다.
placholder는 input창에 입력하기 전 출력해주는 내용이다.
그리고 gretting.js라는 파일을 추가해줬다.
//gretting.js
const getForm = document.querySelector(".js-form"),
input = getForm.querySelector("input");
function init(){
}
init();
local storage에 대해서 알아보자면 유저의 컴퓨터의 작은 정보들을 저장하는 곳을 local storage라고 한다.
크롬의 콘솔 창(f12)에서 오른쪽을 보면 Application창이 있다. 그곳에서 Storage에서 Local Storage를 찾을 수 있다.
내가 생성한 페이지에는 저장된 값이 없으므로 아무것도 안 나온다.
console창에서 localStorage.setItem("chicken", true); 를 입력하고 Application의 Local Stroage를 가보면 chicken true가 생성되어있는 것을 확인할 수 있다.
새로고침을 해도 그대로 유지된다.
다시 consol창으로 돌아와서 localStorage.getItem("chicken")을 입력하면 true라고 나온다.
그리고 getItem에서 chicken대신 아무 단어를 쓴다면 값이 없으므로 null이 뜰 것이다.
이제 form에 user데이터가 localStorage에 들어왔을 때 user 이름이 나오도록 해보자.
<!DOCTYPE html>
<html>
<head>
<title>Somethings</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-gretting gretting"></h4>
<script src="clock.js"></script>
<script src="gretting.js"></script>
</body>
</html>
우선 html에 js-form 클래스에 form 클래스를 추가해준다.
앞의 js-form은 js에서 쓰는 클래스이고 뒤의 form은 css에서 사용하는 클래스이다.
헷갈리지 않게 js-form으로 표현해놨던 거다.
그리고 user가 생성되면 form이 사라지고 출력되어야 하므로 h4를 생성하였다.
h4도 js클래스와 css클래스를 모두 생성해주었다.
/* css */
body{
background-color: yellowgreen;
}
h1{
color: white;
}
.form,
.gretting{
display: none;
}
.showing{
display: block;
}
form과 gretting은 우선 보이지 않도록 display: none을 설정해주고 상황에 맞게 보이도록 showing이라는 class를 따로 생성하였다.
//gretting.js
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
gretting = document.querySelector(".js-gretting");
const USER_LS = "currentUser";
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null) {
//currentUser가 없을 경우
} else {
//currentUser가 있을 경우
}
}
function init(){
loadName();
}
init();
먼저 html에서 추가해준 js-gretting class를 불러온다.
그리고 currentUser를 불러올 객체를 만들어준다. (const USER_LS = "currentUser")
loadName 함수로 currentUser가 있을 경우와 없을 경우에 따른 실행결과를 만들어줄 것이다.
우선 localStorage에 user를 저장할 것이니 localStorage.getItem을 이용해 currentUser에 값을 불러온다.
현재는 localStorage에 데이터가 없으므로 null이 나올 것이다.
출력이 돼야 코드가 올바른지 알 수 있으므로 데이터가 있는 쪽을 생각해보자.
//gretting.js
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
gretting = document.querySelector(".js-gretting");
const USER_LS = "currentUser",
SHOWING_CN = "showing";
function paintGretting(text){
form.classList.remove(SHOWING_CN);
gretting.classList.add(SHOWING_CN);
gretting.innerText = `Hello ${text}`;
}
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null) {
//currentUser가 없을 경우
} else {
//currentUser가 있을 경우
paintGretting(currentUser);
}
}
function init(){
loadName();
}
init();
paintGretting 함수에 argument를 하나 추가한다.
text형식으로 들어올 것이니 text라고 해주자.
gretting.innerText = `Hello ${text}`는 text가 들어오면 출력될 문장을 나타낸다.
css에서 생성한 showing클래스를 객체로 만들어준다. SHOWING_CN으로 생성했다.
form은 currentUser가 없을 때 출력되므로 paintGretting 함수가 실행되면 form은 사라져야 한다.
그러므로 remove를 사용해 showing을 제거해준다.
그리고 gretting은 출력이 돼야 하니 add를 사용해 showing을 추가해준다.
else문에는 paintGretting에 currentUser를 넣어준다.
하지만 브라우저에서 출력이 되지 않는 것은 지금 localStorage에는 내가 추가한 "chicken", true 밖에 없기 때문이다.
localStorage에 들어가서 chicken을 currentUser로 수정하고 true를 이름으로 바꿔준 다음에 새로고침을 하면 문장이 출력된다.
갑자기 어려워져서 몇 번이나 다시들었다...
이제 처음에 form에 데이터를 입력받기 위한 코딩을 할 것이다.
우선 null값일 때 form이 나올 수 있도록 함수를 만들 것이다. (그전에 브라우저의 localStorage에 있던 데이터를 삭제해준다.)
//gretting.js
function askForName(){
form.classList.add(SHOWING_CN);
}
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null) {
askForName();
} else {
paintGretting(currentUser);
}
}
(코드가 길어져서 수정 부분만 적어야겠다.)
aksForName이라는 함수를 생성했고 form이 다시 보일 수 있도록 add를 사용했다.
그리고 if문에도 aksForName을 삽입했다.
실행화면으로 가서 form에 데이터를 입력 후 엔터를 치면 새로고침 되는 것을 확인할 수 있다.
하지만 데이터가 localStorage에 들어가진 않는다.
엔터에 대한 기본값은 데이터를 받으면 document의 어딘가로 값이 전송되기 때문이라고 한다.
그냥 엔터의 기본값이 input창에서 누르게 되면 새로고침 되는 게 기본값이라는 뜻이다.
엔터에 대한 default값을 수정해 input창의 데이터가 전송되게 할 것이다.
//gretting.js
function handleSubmit(event){
event.preventDefault();
}
function askForName(){
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
}
askForName에 eventListener를 추가했다.
handleSumbit에 preventDefault는 기본으로 정의된 이벤트를 작동하지 않게 하는 것이다.
브라우저로 가서 input창에 넣고 엔터를 클릭해도 새로고침 되지 않는다.
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
console.log(currentValue);
}
handleSubmit에서 input의 값을 받기 위해서 객체를 만든다.
input.value가 맞는지 확인하기 위해 log도 걸어줬다.
input의 value가 들어오는 것을 확인할 수 있다.
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
paintGretting(currentValue);
}
//paintGretting은 수정없음
function paintGretting(text){
form.classList.remove(SHOWING_CN);
gretting.classList.add(SHOWING_CN);
gretting.innerText = `Hello ${text}`;
}
input에 넣은 value를 가지고 paintGretting을 부르게 되면 form을 지워주고 gretting을 보여주며 gretting에는 text(value)를 넣게 된다.
value가 화면에 출력되는 것을 확인할 수 있지만 새로고침 하면 다시 input창이 출력되는 문제가 있다.
여기에서는 생각해보면 처음에 했던 localStorage.setItem으로 value를 넣어줘야 한다는 것을 알 수 있다.
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
paintGretting(currentValue);
localStorage.setItem(USER_LS, currentValue);
}
//강의코드
function saveName(name){
localStorage.setItem(USER_LS, name);
}
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
paintGretting(currentValue);
saveName(currentValue);
}
그래서 나는 handleSubmit에 바로 localStorage를 추가해줬다.
하지만 강의에서는 localStorage.setItem을 따로 함수로 빼주었다.
예전에 함수로 뺄 수 있는 코드들은 따로 빼주는 것이 좋다고 들었다
어떤 걸 빼야 좋고 나쁜지 아직까지는 잘 모르겠다...
좀 더 하다 보면 눈이 트일 것이다...
마지막으로 전체 코드이다.
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
gretting = document.querySelector(".js-gretting");
const USER_LS = "currentUser",
SHOWING_CN = "showing";
function saveName(name){
localStorage.setItem(USER_LS, name);
}
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
paintGretting(currentValue);
saveName(currentValue);
}
function askForName(){
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
}
function paintGretting(text){
form.classList.remove(SHOWING_CN);
gretting.classList.add(SHOWING_CN);
gretting.innerText = `Hello ${text}`;
}
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null) {
askForName();
} else {
paintGretting(currentUser);
}
}
function init(){
loadName();
}
init();
'JavaScript' 카테고리의 다른 글
크롬 Momentum 클론코딩(ToDo List) (0) | 2021.09.03 |
---|---|
크롬 Momentum 클론코딩(시계) (0) | 2021.05.31 |
JavaScript에서 init을 왜 쓰는 걸까..?? (0) | 2021.05.31 |
자바스크립트 기본 끄적끄적2 (0) | 2021.05.28 |
자바스크립트 기본 끄적끄적 (0) | 2021.05.25 |