setTimeout 메서드

setTimeout 메서드를 활용해 js로 로그인, 로그아웃 div를 전환하기

setTimeout

setTimeout 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정.
비동기 함수임

활용 예시 코드 확인

var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = setTimeout(function[, delay]);
var timeoutID = setTimeout(code[, delay]);

• function = 타이머가 만료된 뒤 실행할 function
• code = 함수 대신 문자열을 지정하는 대체 구문으로, 타이머가 만료될 때 코드로 컴파일 후 실행, eval()이 보안 취약점인 것과 같은 이유로 사용을 권장하지 않음
• delay = 주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간. 생략하거나 0을 지정할 경우 "즉시", 더 정확히는 다음 이벤트 사이클에 실행한다는 뜻. 실제 딜레이는 의도했던 것보다 더 길 수 있음
• arg1, ..., argN = function에 전달할 추가 매개변수

메서드(method)

메서드 또는 멤버 함수는 객체 지향 프로그래밍에서 객체와 관련된 서브 루틴 (또는 함수)이자 클래스가 갖고 있는 기능이다. 데이터와 멤버 변수에 대한 접근 권한을 갖는다. 클래스 기반 언어에서 클래스 내부에 정의되어 있다.
쉽게말해 js에 지정된 함수 = 메서드

프로젝트 적용

SPA에서 로그인과 로그아웃 버튼을 display.none / display.block 처리해서 원하는 버튼만 나타나게 하는 것이 목적

코드확인

html

			<div id="loginBox">
                <form onsubmit="handleAuth(event)">
                    <div class="authInput">
                        <div>EMAIL:</div>
                        <input id="email" type="text" />
                    </div>
                    <div class="authInput">
                        <div>PW:</div>
                        <input id="pw" type="password" />
                    </div>
                    <section id="authBtnSection">
                        <input type="submit" id="authBtn" value="로그인" />
                        <p id="authToggle" onclick="onToggle()">회원가입 화면으로</p>
                    </section>
                </form>
                <section class="socialBtns">
                    <button name="google" onclick="socialLogin(event)">Google Login</button>
                    <button name="github" onclick="socialLogin(event)">Github Login</button>
                </section>
            </div>
            <div id="logoutBox">
                <button onclick="goToProfile()">프로필 관리</button>
                <button onclick="logout()">로그아웃</button>
            </div>

js

const authBtnText = document.querySelector("#authBtn").value;
  console.log("authBtnText:", authBtnText);
  if (authBtnText === "로그인") {
    // 유효성검사 후 로그인 성공 시 메인 화면으로
    signInWithEmailAndPassword(authService, emailVal, pwVal)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        window.location.hash = "#newsfeed";
        console.log("로그인 성공")
        setTimeout(() => {
          const loginBox = document.getElementById("loginBox");
          const logoutBox = document.getElementById("logoutBox");
          loginBox.style.display = "none";
          logoutBox.style.display = "block";
        }, 100);
        // document.getElementById("loginBox").style.display = "none"; // 오류코드
        // document.getElementById("logoutBox").style.display = "block"; // 오류코드
        console.log("loginBox 가리기, logoutBox 보이기")
      })
      .catch((error) => {
        const errorMessage = error.message;
        console.log("errorMessage:", errorMessage);
        if (errorMessage.includes("user-not-found")) {
          alert("가입되지 않은 회원입니다.");
          return;
        } else if (errorMessage.includes("wrong-password")) {
          alert("비밀번호가 잘못 되었습니다.");
        }
      });
  } else {
    // 회원가입 버튼 클릭의 경우
    createUserWithEmailAndPassword(authService, emailVal, pwVal)
      .then((userCredential) => {
        // Signed in
        console.log("회원가입 성공!");
        const user = userCredential.user;
      })
      .catch((error) => {
        const errorMessage = error.message;
        console.log("errorMessage:", errorMessage);
        if (errorMessage.includes("email-already-in-use")) {
          alert("이미 가입된 이메일입니다.");
        }
      });
  }
};

피드백

피드백을 받았을때 좋은 코드가 아니라는 것을 알았다. 먼저 html에서 하위객체가 상위객체를 변화시키려고 하는 것은 좋지 못한 방법이다. 그로인해 setTimeout()함수 대신에 '오류코드'를 넣었을 때 표면적인 오류는 없었지만 원하는 출력이 나오지 않았다. (두 번 클릭해야 원하는 출력이 나오는 버그가 발생)
setTimeout 메서드(비동기 방식)를 통해 출력되는 순서를 조절(100ms를 delay 시킴으로 가장 늦게 출력)해서 원하는 출력이 나올 수 있었다.

---

이번 작업을 통해 배운 점은

• html을 효과적, 체계적으로 짜야함
• 함수명, 변수명은 직관적으로 짜야함 (작성자 외 누가봐도 알 수 있도록)
• setTimeout 메서드를 통해 비동기식의 함수 특성을 배움