[Javascript] 자바스크립트 - 사용자 이름 입력하고 저장, 인사말 출력하기

/* 사용자가 이름을 입력하면 저장되고 인사말이 출력되는 페이지를 만들어 보자 */

 

먼저, 이름을 입력할 form과 input을 만든다.

 

위의 //시계 부분은 다음에 포스팅!

 

css에서 .form, .sayHello를 display: none; 해준다.

//사용자가 이름을 입력하면 창이 안 보여야 하기 때문에

 

사용자가 이름을 입력하면 다시 창이 보일 수 있도록

.showing { display: block; } 을 추가한다.

 

html에서 필요한 이름들을 가져온다 / userName은 사용자가 이름을 입력하여 로컬 스토리지*에 저장될 이름

 

*로컬 스토리지 local storage : 저장되는 데이터

각 이름들은 내가 알아보기 쉽게 변경할 수 있다.

(nameForm, nameInput, sayHello, userName, SAVE_NAME, SHOWING_CLASS)

 

아직 익숙하지 않아서 주석이 너무 많다;;

 

1. 사용자의 이름을 저장하는 함수

localStorage.setItem은 로컬 스토리지에 인자로 받은 그 텍스트값을 저장하겠다는 의미다.

 

2. 사용자 이름 묻기 함수

숨겨뒀던 form이 보여야 하기 때문에, classList(클래스 목록에 접근).add를 사용한다.

addEventListener()는 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다.

뒤에 나오는 writeSubmit 함수(사용자의 이름을 출력하는)를 제출하겠다는 의미

 

3. 사용자가 이름을 입력하면 나오는 인사말 함수

사용자가 입력하는 text를 인자로 받는다.

입력하면 다시 form이 없어져야 하기 때문에 classList.remove를 사용한다.

인사말이 나올 h4는 보여야 하기 때문에 classList.add를 사용한다.

Hello ${text]는 h4 안에 나올 인사말이다.

 

 

 

4. 사용자 이름을 입력해서 발생하는 이벤트 함수

preventDefault()를 사용하며 올바르지 않은 텍스트가 입력란에 입력되는 것을 막을 수 있다.

사용자가 input창에 입력할 이름값을 userValue로 할당한다.

해당 값으로 함수 helloUser(인사말 함수), saveName(이름 저장)을 출력한다.

 

 

5. 사용자 이름 출력되는 함수

로컬 스토리지에 저장된 이름을 가져오려면 getItem을 사용한다.

만약에 입력된 이름이 없다면 이름을 묻는 함수 askForName()을 출력하고,

그게 아니라면 인사말 함수 helloUser(로컬 스토리지에 저장된 이름을 갖는)를 출력한다.

 

위의 해당 함수를 출력하는 init까지 적용하면 끝!

 

application의 local storage에서 저장되는 이름을 확인할 수 있다. 

 

 

간단한 개념만 이해하고 바로 만들어 보는 예제를 연습해보니, 생각보다 더 어려웠다ㅜㅠ

어제는 이해 안되고 오늘은 조금 알겠고 내일은 이해할 것이다.

모르는 건 계속 보면 결국 안다.

안다기 보다는 눈에 익는다고 해야 하나..?

다음 강의도 잘 숙지하기를//

 

 

 

 

 

 

 

 

*혹시 잘못된 내용이 있으면 댓글 남겨주세요:) 피드백은 소중합니다.

*해당 내용은 노마드 코더의 강의 내용입니다.