JS-2) login-form 만들기

 오늘은 웹페이지 상에 login-form을 만들어 볼 예정이다. 사용자가 이름을 input 하면 localStorage에 해당 내용을 담고, 해당 내용에 인사말을 덧붙여서 출력할 거다.

* 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다.

[HTML handling]

 - 우선 index.html에 form 태그를 입력하고, id="login-form"으로 설정한다. 이 id는 이후에 js파일에서 해당 태그의 내용을 handling할 때 사용된다.

 - 이제 이 login-form 안에 input 태그를 두 개 작성해준다. 하나는 type="text"로 사용자로부터 이름을 입력 받을 곳이고, 하나는 type="submit"으로 사용자가 해당 버튼을 누르면 함수가 작동하게 만들 예정이다. (HTML에서는 꼭 form 태그 안에 input 태그를 넣어야 동작한다.)

 - type="text" 를 기록한 input에는 requeired maxlength="15" 로 최대 입력 길이를 15개로 제한한다. 그리고 placeholder="" 로 칸에 넣었으면 하는 내용을 text로 표시해준다.

 - type="submit" 을 기록한 input에는 value="Log in" 으로 설정해 Log in 이라는 이름의 버튼을 생성한다. 이때, value 속성을 설정하지 않으면 사용자 에이전트가 선택한 기본 레이블이 지정된다. ex) 제출

[greetings.js handling]

작성 순서는 다음과 같다.

1) login-form에 입력한 값을 제출해줄 submit 함수를 만든다.

2) 제출한 값을 localStorage에 저장한다.

3) 사용자가 값을 제출할 경우 login-form을 웹 상에서 안 보이도록 만든다.

4) login-form을 대신해서 localStorage에 저장한 값을 불러오고, 거기에 더해서 내가 원하는 인사말이 함께 나오는 함수를 만든다.

5) 이를 if문으로 구현해서 localStorage에 저장된 값이 없을 경우 동작과 저장된 값이 있을 경우 동작으로 나누어 구현한다.

- JS-1에서 만들었던 greetings.js 파일로 넘어온다.

- 우선 다음과 같이 변수를 두 개 선언해 준다.

const loginForm = document.querySelector("#login-form")

const loginInput = document.querySelector("#login-form input")

각각 html에 작성한 id="login-form"과 그 아래의 input태그를 불러온 거다.

- 다음으로 addEventListener 메서드를 사용해서 submit을 구현한다.

loginForm.addEventListener("submit",  )

submit 뒤의 빈칸에는 submit 즉, 제출 시 동작할 함수(listener)를 넣어줘야 한다.

- 그 함수는 일단 다음처럼 작성한다.

function onLoginSubmit(event) {

    event.preventDefault();

    console.log(loginInput.value);

}

preventDefault()를 호출하면 브라우저의 기본 동작을 막아준다. 여기서는 submit 시에 웹 페이지가 자동으로 새로고침 되는 것을 막아준다

- 해당 함수를 위의 submit, 뒤에 넣어주고 실행시킨 상태로 웹 페이지의 console을 보면, 사용자가 입력하는 값이 출력되는 것을 볼 수 있다.

- 이제 loginInput.value를 변수 선언한 후 해당 변수로 우리가 원하는 인사말과 함께 출력하도록 만들어야 한다.

- 맨 처음 만들어뒀던 style.css에 .hidden{display:none}; 를 만들어 둔다. 이 속성값은 html에서 hidden이라는 class를 사용 중인 내용들을 보이지 않도록 감춰준다.

- index.html로 넘어가서 head 태그 안에 link 태그를 입력한 후 href="css/style.css"를 입력해서 css 파일과 html 파일을 연결해 준다.

- form태그 밑에 h1태그를 하나 만들어서 id="greeting" class="hidden"을 추가해준다.

- 이 greeting은 평소에는 숨어있다가 사용자가 값을 입력하면 해당 값을 받아서 우리가 원하는 인사말을 추가한 뒤 다시 출력해주는 역할을 할 예정이다. 따라서 빈칸으로 만들어둔다.

- greeting.js 파일로 넘어와서 html의 id="greeting"과 연결해 준다.

const greeting = document.querySelector("#greeting");

- 이제 onLoginSubmit 함수 내부에서 변수를 선언한다.

const username = loginInput.value;

- 인사말 함수를 추가한다.

function paintGreetings(username) {

    greeting.innerText = `Hello ${username}!!`;

    greeting.classList.remove("hidden");

}

- 해당 함수를 onLoginSubmit 함수 맨 아래에 연결한다.

paintGreetings(username); 을 추가

- 이 상태로 다시 웹 페이지로 돌아가서 input 값을 넣어보면, 사용자가 입력한 값과 우리가 추가한 말이 합쳐져서 Hello any!! 라는 말이 출력된다.

- 하지만 새로고침 하면 우리가 입력한 값은 사라지고, 다시 원래 모습으로 돌아오게 된다. 이러한 현상을 해결하기 위해 우리는 웹 페이지 상에 input 값을 저장해뒀다가 출력하는 형식으로 사용할 거다.

- onLoginSubmit 함수의 const username 아래에 다음을 추가한다.

localStorage.setItem("username", username);

이는 웹 페이지에 있는 localStorage에 "username" 이라는 이름으로 loginInput.value를 저장해준다. (정확히는 ""는 이름에 포함되지 않는다.)

- 나와서 변수를 하나 더 선언한다.

const savedUsername = localStorage.getItem("username");

이는 localStorage에 "username"이라는 이름으로 저장된 값을 불러오는 역할을 한다.

- 웹 페이지에 돌아가서 새로고침을 한 후 input 값을 넣어보면, localStorage에 값이 담기는 걸 확인할 수 있다. ( 보는 법은 cosole창의 application을 누르면 key, value 창이 나온다.)

- 이제 input 값을 계속 입력하는 걸 막기 위해 input 값을 입력할 경우 login-form을 보이지 않도록 만들어야 한다. 

- 그 전에 html 로 넘어가서 id="login-form" 태그의 기본 값을 class="hidden"으로 설정해 greeting 처럼 default 값을 hidden으로 만들어준다.

- login-form의 가시/비가시화는 다음과 같이 if문을 활용한다.

if(savedUsername === null) {

    loginForm.classList.remove("hidden");

    loginForm.addEventListener("submit", onLoginSubmit);

} else {

    paintUsername(savedUsername);

}

 위의 코드를 해석해 보면, savedUsername의 값이 null(주어지지 않은)일 경우 loginForm의 class="hidden"을 삭제한다. 이후 loginForm에 submit 되는 값을 onLoginSubmit 함수에 넣어 실행시킨다.

 그렇지 않을 경우(else), savedUsername이 존재한다면, paintUsername에 savedUsername을 넣어서 실행시킨다.

- 이렇게만 할 경우 login-form은 아직 사라지지 않은 상태일 것이다. 이는 if문에서 loginForm의 class="hidden"을 삭제했기 때문이다. 그렇기에 onLoginSubmit 함수 안에 remove와 반대로 add를 입력해 주면 된다.

loginForm.classList.add("hidden");

- 혹시나 있을 오타로 인한 실수를 방지하고, 찾아내기 위해서 같은 이름을 가진 string은 다음과 같이 변수를 선언해서 묶어준다.

const HIDDEN_CLASSNAME = "hidden";

const USERNAME_KEY = "username";

위의 과정으로 login-form 을 작동하게 만드는 greetings.js의 작성이 끝났다. 최종 코드는 아래와 같다.

같은 내용을 두 번째로 작성해 보는 중인데, 역시 한 번만 만들었을 때는 온전히 내 것이 되지 않는 것 같다. 이렇게 내용을 정리하면서 곱씹으니 두루뭉술 했던 것들이 선명해지는 느낌이다. 왜 국비지원 교육 강사님들이 블로그를 작성하라고 하셨던 건지 조금씩 이해가 되기 시작한다. 익숙하지 않은 내용이라 아직 시간이 많이 걸리는 것 같지만, 계속 쓰다 보면 조금씩 속도도 붙고 내용도 괜찮아질 거라고 생각한다.

"기억은 기록을 이기지 못한다" 내일도 힘내자!

* (3/15) 코드들을 좀 더 보기 쉽게 수정하고, 최종 코드를 이미지로 첨부 수정했다.