9. JS 코드 리팩토링 해보기 (객체 리터럴 표기법에 사용)

💡 학습 목표 객체 리터럴 안에서 this 대한 개념을 반드시 알아야 한다. 현재 객체 참조 개념 - 객체 리터럴 내에서의 this는 보통 객체 자신을 가리킵니다. 동적 바인딩이란 뭘까? this는 메서드가 호출되는 시점에 결정됩니다. 만약 메서드가 다른 객체의 컨텍스트에서 호출되면, this는 해당 객체를 가리키게 됩니다. 하지만 객체 리터럴 내에서의 this는 보통 객체 자신을 가리킵니다. this 를 바인딩하는 경우 객체 리터럴 안에서 메서드를 정의할 때, 메서드가 이벤트 핸들러로 등록되거나, 다른 함수로 전달될 경우, this가 원래 객체를 참조하지 않을 수 있습니다.

예시 코드

const myObject = {
    name: "Alice",
    greet: function() {
        console.log("Hello, " + this.name + "!");
    }
};

const externalGreet = myObject.greet;
externalGreet(); // "Hello, undefined!" - this가 전역 객체를 참조하게 됨

const boundGreet = myObject.greet.bind(myObject);
boundGreet(); // "Hello, Alice!" - this가 myObject로 명시적으로 바인딩됨

 

signIn.js

const signInApp = {
    userList: JSON.parse(localStorage.getItem('userList')),
    elements: {
        inputs: document.querySelectorAll('.inputs'),
        button: document.querySelector('button')
    },

    init: function() {
        this.bindEvents();
    },

    bindEvents: function() {
        this.elements.button.addEventListener('click', this.login.bind(this));
    },

    login: function() {
        const username = this.elements.inputs[0].value.trim();
        const password = this.elements.inputs[1].value.trim();

        // 유효성 검사
        if (username === "") {
            alert('아이디를 입력하세요');
            this.elements.inputs[0].focus();
            return;
        }

        if (password === "") {
            alert('비밀번호를 입력하세요');
            this.elements.inputs[1].focus();
            return;
        }

        // 단, 한명도 회원가입 없을 경우 예외 처리
        if (!this.userList || this.userList.length === 0) {
            alert('등록된 사용자가 없습니다');
            location.href = "sign-up.html";
            return;
        }

        let userFound = false;

        for (let i = 0; i < this.userList.length; i++) {
            if (this.userList[i].username === username) {
                userFound = true;

                if (this.userList[i].password !== password) {
                    alert('잘못된 비밀번호 입니다');
                    this.elements.inputs[1].focus();
                    return;
                } else {
                    localStorage.setItem('user', JSON.stringify(this.userList[i]));
                    alert('로그인 완료');
                    location.href = "board-list.html";
                    return;
                }
            }
        }

        if (!userFound) {
            alert('해당 아이디가 존재하지 않습니다');
            this.elements.inputs[0].focus();
        }
    }
};

// 애플리케이션 초기화
signInApp.init();

 

signUp.js

const signInApp = {
    userList: JSON.parse(localStorage.getItem('userList')),
    elements: {
        inputs: document.querySelectorAll('.inputs'),
        button: document.querySelector('button')
    },

    init: function() {
        this.bindEvents();
    },

    bindEvents: function() {
        this.elements.button.addEventListener('click', this.login.bind(this));
    },

    login: function() {
        const username = this.elements.inputs[0].value.trim();
        const password = this.elements.inputs[1].value.trim();

        // 유효성 검사
        if (username === "") {
            alert('아이디를 입력하세요');
            this.elements.inputs[0].focus();
            return;
        }

        if (password === "") {
            alert('비밀번호를 입력하세요');
            this.elements.inputs[1].focus();
            return;
        }

        // 단, 한명도 회원가입 없을 경우 예외 처리
        if (!this.userList || this.userList.length === 0) {
            alert('등록된 사용자가 없습니다');
            location.href = "sign-up.html";
            return;
        }

        let userFound = false;

        for (let i = 0; i < this.userList.length; i++) {
            if (this.userList[i].username === username) {
                userFound = true;

                if (this.userList[i].password !== password) {
                    alert('잘못된 비밀번호 입니다');
                    this.elements.inputs[1].focus();
                    return;
                } else {
                    localStorage.setItem('user', JSON.stringify(this.userList[i]));
                    alert('로그인 완료');
                    location.href = "board-list.html";
                    return;
                }
            }
        }

        if (!userFound) {
            alert('해당 아이디가 존재하지 않습니다');
            this.elements.inputs[0].focus();
        }
    }
};

// 애플리케이션 초기화
signInApp.init();