21 - 2학기/슬기로운 코딩생활

[TIL]3주차 바닐라JS(3)_momentum 클론코딩

38기_김민서 2022. 1. 19. 22:32

TAB 2021 겨울방학 학회활동 [슬기로운 코딩생활]

3주차 TIL입니다.

작성자 : 38기_김민서

이번시간부터는 모멘텀 클론코딩을 통해 JS 기능 익히는것을 목표로 공부해보았다.

오늘 최종 구현 목표는 사용자가 자신의 이름을 기입하면, 사이트에서 그 값을 기억해서 표출하는것이다.

즉 간소화된 로그인 기능을 구현해보도록하겠다.

[결과화면]

위와 같이 이름을 입력하면, h1에 해당하는 문구가 오른쪽과 같이 바뀐다.

+추가조건

1. input태그에 해당하는 부분에는 15자 미만을 입력할수있고, 아무것도 제출하지않으면 아무런 변화가 일어나지않는다

2. 이름을 입력하고 log in 버튼을 누르거나 엔터를 눌러서 제출하면, input태그에 해당하는 부분이 없어져야함

3. 사이트를 새로고침해도 오른쪽과 같이 유지되어야함

1. 사용자의 값 제출하기

사용자가 값을 제출하는 방법은 대표적으로 input + button 태그를 이용하는 방법이 있다.

input태그로 생성된 칸에 값을 입력하고, button을 눌러서 값을 제출하는것이다.

이 기능에 form태그를 추가해서 사용하면 조건들을 추가할수있다

(ex 엔터를 눌러도 input값을 제출가능,글자수제한, 빈값으로 제출되는것을 방지)

<!--head부분은 생략-->
<body>
    <form id="login-form">
        <h1>Hello, what's your name?</h1>
        <input 
        required
        maxlength = "15"
        type="text" 
        placeholder="What is your name?"/>
        <button>Log In</button>
    </form>
    
    <script src = "app1.js"></script>
</body>
</html>
//loginForm에서 결과값을(반환값을)받아온다
const loginForm = document.getElementById('login-form');
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
function onLoginBtnClick(){
    console.log(loginInput.value)
}
loginForm.addEventListener("submit",onLoginBtnClick);

 

이렇게 구성된 웹사이트를 실행하면 위와 같은 결과가 나온다.

 

이런 결과가 나오는 이유는 submit 했을때 웹사이트가 하는 기본동작이 사이트를 리로드하는것이기 때문에,

값이 제출되자마자 리로드되서 값이 엄청 짧은속도로 log되었다가 없어진것이다.

(+이벤트를 submit로 쓴이유는 clikc해도 제출가능하지만 엔터를 눌렀을때 제출되는 이벤트까지 모두 포함해서 eventListner를 만들어야 했기때문)

event.preventDefault();

이때, JS에서는 함수를 실행시킬때(addEventListner로 추가해준 함수) 방금 일어난 이벤트에 대한 정보를 첫번째 인자로 전달해주는 기능이있다. 전달된 인자를 log로 찍어보면 아래와 같다.

위와 같이 사이트에서 발생한 이벤트에 관련된 내용을 갖고있는 정보가 인자로 전달됨을 알수있다.

이를 활용해, (전달된 인자).preventDefault() 코드를 실행하면 사이트가 자동으로 리로드되지않아 값을 전달받을수있다.

2. classList를 활용한 화면값 변경

저번시간에 잠깐 다루었던 classList를 활용해 앞선 2번을 구현할수있다.

구현하고자하는 기능은 값이 입력되면, input태그를 지우고, 문구를 변경하여 표출하는것이다.

css 기능중에 display를 설정할수잇는 코드가 있으므로, hidden이라는 클래스는 display값을 none으로 설정해주고,

위의 조건이 해당된다면(if문) hidden이라는 클래스를 classList에 add해주면 된다!

코드로 나타내면 아래와 같다.

//loginForm에서 결과값을(반환값을)받아온다
const loginForm = document.getElementById('login-form');
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
const link = document.querySelector("a");
const greeting = document.querySelector("#greeting");
function onLoginSubmit(event){
    event.preventDefault();//기본동작인 브라우저 새로고침을 막고있다
    const username = loginInput.value;//onLoginSubmit 함수에 대한 인자로 값을 전달받고있다
    loginForm.classList.add("hidden");
    console.log(username);
    greeting.innerText = "Hello" + username;
    greeting.classList.remove("hidden");
}

loginForm.addEventListener("submit",onLoginSubmit);

3. localStorage api 사용하여 사용자 입력값 저장하기

우리가 유투브에서 재생속도 설정을 하거나 로그인을 하고 다시 사이트를 켰을때 설정값이 남아있는 경우가 있다.

그것처럼 우리가 사이트를 리로드하거나 다시 켰을때 값이 남아있게 하려면 여러가지 방법이 있지만

localStorage를 이용하는 방법이있다!

개발자도구상에서는 메뉴바의 application->Storage 칸에 있다.

이런식으로 사이트의 저장소에 저장을 시키려면 아래의 코드를 추가하면 된다.

//저장할때 
localStorage.setItem("username",username);
//값을 가져올때
const savedUsername = localStorage.getItem(USERNAME_KEY);

이번주차 모각코에서는 로그인 기능을 구현해보았다.

다음 모각코 회차전까지 시계,todolist 기능을 최대한,,구현해서 개인블로그에 업로드하고 

다음 모각코시간에는 2학기에 수강한 자바나 c언어를 공부해서 알고리즘을 포스팅하도록하겠다

자세한 코드는 깃허브 참고><