[TIL] 230110 - 230111 토이프로젝트 1일차 - 2일차

20230110 - 230111

향해99에 처음 합류하고 바로 시작한 토이프로젝트.

 

사전에 알게된 파이썬과 바닐라 JS로만 만들어야 했던 조그마한 토이프로젝트가 4일간의 여정을 시작했다.

 

주특기만 정해진 네명의(프론트엔드2 백엔드 2) 팀원들과 BookMark Saver라는 프로젝트를 만들고 하나하나 기능을 추가해 나갔다.

 

우선 큰 틀은 로그인을 하면 메인화면에 입장하게 되고, 그곳에서 저장하고 싶은 웹사이트 URL, 카테고리, 태그를 넣어주면 각 사이트마다 정해진 meta og tag를 가져와 페이지에 뿌려주는 방식의 북마크 웹 사이트다.

Index

인덱스 페이지에서는 간단하게 로그인 화면으로 이동할 수 있게 버튼을 생성하고 Typing 되는 JS 로직을 만들어 텍스트 효과를 프런트엔드 쪽에서 주었다.

// typing
var typeText = document.querySelector('.typing');
var textToBeTypedArr = ['북마크 세이버', 'Book Mark Saver'];
var index = 0,
    isAdding = true,
    textToBeTypedIndex = 0;

(function playAnim() {
    setTimeout(
        function () {
            typeText.innerText = textToBeTypedArr[textToBeTypedIndex].slice(
                0,
                index
            );
            if (isAdding) {
                if (index > textToBeTypedArr[textToBeTypedIndex].length) {
                    isAdding = false;
                    typeText.classList.add('showAnim');

                    setTimeout(function () {
                        typeText.classList.remove('showAnim');
                        playAnim();
                    }, 3000);
                    return;
                } else {
                    index++;
                }
            } else {
                if (index === 0) {
                    isAdding = true;
                    textToBeTypedIndex =
                        (textToBeTypedIndex + 1) % textToBeTypedArr.length;
                } else {
                    index--;
                }
            }

            playAnim();
        },
        isAdding ? 90 : 30
    );
})();

그리고, nav는 스크롤 Y좌표가 50 정도 떨어지게 되면, nav에 class를 추가해 색상 및 텍스트 크기등이 변경되게끔 해줬다.

        <!-- Page Navbar -->
        <nav class="custom-navbar">
            <div class="container">
                <a class="logo" href="/">BookMark Saver</a>
                <ul class="nav">
                    <li class="item">
                        <a class="link" href="#home">홈</a>
                    </li>
                    <li class="item">
                        <a class="link" href="#about">로그인</a>
                    </li>
                </ul>
                <a href="javascript:void(0)" id="nav-toggle" class="hamburger hamburger--elastic">
                    <div class="hamburger-box">
                        <div class="hamburger-inner"></div>
                    </div>
                </a>
            </div>
        </nav>

$(window).scroll(function () {
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        $('.custom-navbar').addClass('scroll');
    } else {
        $('.custom-navbar').removeClass('scroll');
    }
});

 이 과정에서 hamburger라는 라이브러리를 가져와 사이드바의 애니메이션 효과가 적용될 수 있도록 해줬다.

GitHub - jonsuh/hamburgers: Tasty CSS-animated Hamburgers

Login

로그인 기능이 Oauth를 사용하기엔 백엔드 쪽의 기술이 더 필요하고 보통 Node.js나 Spring.js에서 다루기 때문에 파이썬을 사용하는 토이프로젝트에서는 간단하게 로컬에만 사용될 수 있도록 DB를 포함한 로직을 짰다.

const loginBtn = document.querySelector('#login-btn');
const signUpBtn = document.querySelector('#sign-up-btn');
const signUpCheckBtn = document.querySelector('#sign-up-check');
const signUpBackBtn = document.querySelector('#sign-up-back');

const idInput = document.querySelector('#floatingId');
const passwordInput = document.querySelector('#floatingPassword');
const passwordCheckInput = document.querySelector('#floatingPasswordCheck');

우산 위와 같이 필요한 로그인 / 회원가입 / 로그인창으로 이동 등과 같은 아이디 값을 가져와서 각종 이벤트 들을 파이썬과 연결해줬다.

 

그리고 selectorShowOrHide라는 함수를 만들어 로그인과 회원가입 버튼에 스타일을 주도록 해줬다.

function selectorShowOrHide(boolean, ...selectors) {
    if (boolean === true) {
        selectors.map((selector) => (selector.style.display = 'block'));
    } else {
        selectors.map((selector) => (selector.style.display = 'none'));
    }
}

signUpBtn.addEventListener('click', (e) => {
    e.preventDefault();
    selectorShowOrHide(false, loginBtn, signUpBtn);
    selectorShowOrHide(true, passwordCheckInput, signUpCheckBtn, signUpBackBtn);
});

signUpCheckBtn.addEventListener('click', (e) => {
    e.preventDefault();
    const userId = idInput.value;
    const password = passwordInput.value;
    const passwordCheck = passwordCheckInput.value;

    if (!singupCrossCheck(userId, password, passwordCheck)) {
        return;
    }

    if (!sendUserData(userId, password, passwordCheck)) {
        return;
    }

    selectorShowOrHide(true, loginBtn, signUpBtn);
    selectorShowOrHide(false, passwordCheckInput, signUpCheckBtn, signUpBackBtn);
});

Ajax에서는 로그인 값을 받아올 때 값을 DB부분에서 체크하고 호원 정보가 없으면 회원에 가입될 수 있도록 한다.

function sendUserData(id, password, passwordCheck = null) {
    let checkData = true;

    $.ajax({
        type: 'POST',
        url: '/login',
        data: {
            id_give: id,
            pw_give: password,
            pw_check_give: passwordCheck,
        },
        async: false,
        success: function (response) {
            if (response['complete']) {
                response['complete'];
            } else if (response['create']) {
                toastr.success(response['create']);
            } else if (response['fail']) {
                toastr.error(response['fail']);
                checkData = false;
            } else {
                toastr.error(response['error']);
                checkData = false;
            }
        },
        error: function () {
            alert('로그인 정보가 없습니다.');
            checkData = false;
        },
    });
    return checkData;
}

이 과정에서 원래 자바스크립트 기본 메서드인 Alert를 사용하지 않고 toastr 라이브러리를 사용했다.

GitHub - CodeSeven/toastr: Simple javascript toast notifications

로그인 인덱스에서는 프론트엔드 쪽에서 아래와 같이 디자인을 주었다.

토이프로젝트 GitHub

GitHub - Seogun95/12jo_ToyProject