3-4
바닐라js로 크롬 앱 만들기 1 끝에서 만들었던 건,
우리가 유저를 가지고 있다면 실행 되고 유저가 없다면 실행되지 않을 것이다.
그렇다면 유저가 없을 때는 무엇을 할까.
function을 만들어보자
아, css에 display: none -> display에 등장하지 않는다. display: block -> display에 등장한다. 라는 의미구나!
이렇게 askForName 함수로
currentUser이 null일 때
input창이 드러나도록 form태그를 display:block 해줬다.
이제 text를 적는 란에 이름을 적을 건데
적으면 form을 제출 submit한다는 의미가 된다.
유저가 enter를 누르면 바로 알아차리길 바래서 form이라는 태그를 썼다고 한다.
자 이제 이름을 넣었을 때 어디론가 보내져야 하는데
그 작업을 해보자.
.
.
(먼저 이벤트를 없애고..?)
addEventListener을 추가해주고
이 함수를 만들었다. 이 함수는 event와 동시에 실행될 것이다.
실행시킬 함수니까 두 번째 인자로 받아준다.
이제 function handleSubmit에서 event의 preventDefault라는 걸 할거다.
보통은 event를 실행하면 root에서 일어나고 form에서 일어난다.
event는 일종의 "거품" 같은 것이다.
왜? event가 올라가면서 다른 모든 것들이 event에 반응하게 되기 때문이다.
만약, form을 제출하는 event가 발생하면 event는 계속 위로 올라간다. document까지/
그리고 document는 다른 어딘가로 갈 것이다.
입력되서 어디론가 가고 페이지를 새로고침이 되는 것이다.
여기서 이 event의 기본 동작. 기본값을 막고 싶다.
그!래!서!
- 기본 동작을 막는데 필요한 1단계.
함수 안에 event.preventDefault();라는 메소드를 작성한다.
->이걸 쓰면 시계 밑 입력창에서 이름을 적고 엔터를 눌러도 아무 일도 일어나지 않는다.
왜? event가 금지 되었기 때문이다.
- parameter의 현재 value가 필요하다.
현재 value를 가져올 수 있게 currenValue를 넣어준다.
이제 우리가 필요한건
- value값을 받고 paintGreeting function을 다시 부를것이다.
왜? form을 지워주고 나에게 greeting을 보여줄거고 내가 보낸 text를 넣을 것이다.
단! 여기서 기억할건.
paintGreeting은 text를 필요로 한다.
이렇게 해주면
이름을 입력했을 때 이렇게 된다!
이 다음에 해야할 문제는 새로고침하면 내 이름을 기억하지 못하고
다시 이름을 입력하는 칸이 생긴다는 것이다.
이름을 부르도록 프로그램되었지 저장하도록 프로그램된게 아니기 때문이다.
자, 마지막 function을 만들어보자.
function을 만들고. handleSubmit에서도 불러줬다.
============
다른 얘기인데, localStorage는 URL의 기초로 동작한다.
이 웹사이트는 facebook이 그곳에 넣은 local storage를 가져올 순 없다.
즉 우리가 만든 페이지의 localstorage에 들은 정보는 다른 페이지의 local storage에 영향을 미치지 않는다는 것이다.
============
우리가 원하는 대로 이름을 입력하고, 입력창이 사라지고, hello 텍스트가 나오면서
local storage에 저장되게 만들었다.
그리고 다시 새로고침을 해도
저 화면이 그대로 유지된다.
만약 다시 username을 물어보고 싶다면 개발자 도구에서 정보를 지워주면 된다.
우리가 그렇게 코딩했으니까.
이게 사용자의 이름을 기억하게 하는 방법이다.
=========================================================
3.5 to do list 만들기
to do list를 만드는 것은 우리가 만든 greeting이랑 비슷한데
이번에는 hiding이랑 showing을 가지지 않을 것이다.
이건 그냥 todo list니까.
첫 번째로 todo.js를 만들어주자/
그리고 h4 greeting 밑에 form과 class를 만들어주자
그리고 리스트를 만들어줄 것이다.
-> html에는 이렇게 만들어주고
<참고만 할 것. 우리가 지금 할 것이 아님>
->todo.js파일에는 이렇게 시작하려고 했으나..
이것은 greeting.js에서와 같은 이름을 썼기 때문에 좋은 코드가 아니다.
만약 작은 모듈을 만드는 것을 배우고 싶다면 zero to hero js과정을 보자.
(자바스크립트의 모듈들을 분리 시킬 수 있는)
처음 js에서 dom을 통해 html에서 가져오기! 그리고
니코 방식으로 function init 함수 만들고
안에 loadToDos라는 함수 넣어주기.
왜냐면 무언가를 load해야 하는데 local storage에서 온 것이기 때문이다.
-> 그래서 local storage에서 가지고 올 코드를 함수안에 써준다.
==<지금까지 쓴 것-html에서 class와 태그를 가지고 왔고. 함수 호출해줄 init함수를 써주고.
local storage에서 무언가를 가지고 올 것을 toDos라는 변수에 넣어주었다.
가지고 올 것 getItem에 들어있는 toDos는 변수가 아니라 입력될 것임.>==
라고~ ~ ~ ~ 하려고 했는데!
toDos 가 null이라면 아무것도 할게 없다. 해야 하는 것이 없다.
항상 showing하고 있어야 한다.
그러므로 그냥 toDos가 null이 아닐경우만 쓰도록 한다.
=====> 여기에서 if (toDos !== null) {} 까지만 해주고 나중에 해줄 것이다.우리가
local storage에서 할 일을 알면 좀 이상한걸 하면서 추가해줘야 하기 때문이다.
- 그래서 일단 todo를 생성해주자.
첫 째로, 실행 함수에 sumbmit이 들어오면 handleSubmit을 실행시켜줄 toDoForm.addEventListener을 추가해준다.
둘 째로, 함수 handleSubmit을 만들어서 실행되었을 시 event가 막아지게 만들었다.
+++++greeting.js에서 했던 것과 비슷하게 만들거야.
handleSubmit에서 currentValue를 console 창에 띄웠고
확인해본 결과 정상적으로 작동했다!
tada~
자 이제 누군가가 엔터를 눌렀을 때 todo 리스트를 생성하고 기존 창에 있는 것은 삭제하고 싶다.
먼저 맨 밑에 toDoinput.value = ""; 를 넣음으로서 값을 넣으면 칸은 빈칸이 되지만 paintToDo 함수는 호출되는 상황으로 만들도록 한다.
이제 우리가 만들 todo는 엄청 간단하게 보일 것이다.
<li id="1">blabla</li>
라는 식으로 보여야 겠지
->html 파일에 추가해줬다.(id는 나중에 이용할 것)
이제 우리는 paintToDo에 ul을 만들건데
여태까지는 querySelector를 이용했다(=html에서 필요한 것을 얻었다는 띃)
지금 이용할 것은
우리가 무엇인가를 creat하고 싶을 때 사용하는 것인데
document.createElement()를 사용하면 된다.
그래서
생성해줬다.
그리고 삭제 버튼도 생성해준다.
이렇게 li, 버튼, 버튼의 텍스트, span, li에 버튼 먼저 넣고 span(목록으로 들어올 글자들)도 li에 넣었다.
위에까지는 치면 생성되지만 새로고침하면 사라져서 저장이 안됌.
이제 저장하는 것을 해볼것이다.
그리고 이 저장한 것들이 나열되도록 할 것이다.
그러기 위해 빈 배열
const toDos = [];
를 만들어줬다.
해야 할 일을 생성해줬을 때 이 배열에 들어간다.
이렇게!
--
이거는 위에꺼 만들면서 헷갈려질 것 같으니 이름 바꿈!
--
이제 목록을 치면 toDos라는 배열에 text가 입력되고 id도 주어진다.
@@
이제 우리는 li에도 id를 주고 싶다.
왜? delete할 때 무엇을 지울 지 식별할 수 있어야 하니까.
이렇게 추가 해주면
element를 보면 id가 주어지는 것을 볼 수 있지.
그럼 li랑 toDos 배열 둘다 id를 가지고 있는거네..!
-> 이유는 local storage에도 저장해야 하기 때문이다!
local storage에 저장하는 함수를 만들어줬다.
저장을 하려면 toDos에 집어넣은 후에 불러야 하니까
toDos로 넣는 push 밑에 줄에 넣어야 한다.
그런데 application에서 확인하니까 toDos 는 object라는 값으로만 저장되고 있다.
왜? local storage에는 자바스크립트의 data를 저장할 수가 없기 때문이다.
자바스크립트는 local storage에 있는 모든 data를 오직 string으로 저장하려고 한다.
--
이것을 해결하기 위해서
우리는 아주 좋은 트릭인 JSON.stringify를 쓸 것이다.
JSON.stringify 는 자바스크립트의 object를 string으로 바꿔준다.
여기까지 저장하는 방법 끝-
