MediView 개발블로그..(4)

MediView 개발블로그..(4) - JavaScript

2024. 6. 7. 14:40ㆍ카테고리 없음

Django를 활용한 웹개발 프로젝트 회고

개발 과정

사용자의 UX/UI의 경험을 조금 더 풍족하게 하기 위해 프론트엔드 쪽에서 TailwindCSS를 이용하여 가시성은 향상을 시켰지만 기능적으로 할 수 있는 일이 많지 않았다. 사용자가 입력이 없다면 자동으로 로그아웃을 어떻게 시킬까? 그냥 버튼 말고 유저 드롭다운 메뉴를 만들고 싶은데 어떻게 할 수 있을까? 그렇게 손을 한번 대어 본 것이 JavaScript였습니다.

도전과제와 해결책

도전과제 : 사용자의 입력이 없을 시 자동 로그아웃 구현, 유저 드롭다운 메뉴 구현
해결책 : JavaScript를 이용하여 프론트엔드 사이드에서 구현

도전과제 1 : 자동으로 유저 로그아웃

문제 : 웹 페이지의 runserver를 중지했다가 다시 실행해도 계속 유지되어 있는 로그인 상태, 로그아웃을 하지 않으면 언제 켜도 로그인이 되어 있는 상태를 유지하는 문제가 있어, 보안상의 문제가 발견되었습니다.

해결책 : 특정 시간동안 사용자의 입력이 없다면 자동으로 로그아웃을 하여 보안을 조금 더 향상시켰습니다.

 function startLogoutTimer() {
            const logoutTime = 15 * 60 * 1000;  // 15 minutes in milliseconds
            const logoutTimerElement = document.getElementById('logout-timer');
            let remainingTime = logoutTime;

            function updateTimer() {
                const minutes = Math.floor(remainingTime / (60 * 1000));
                const seconds = Math.floor((remainingTime % (60 * 1000)) / 1000);
                logoutTimerElement.textContent = `자동 로그아웃까지 남은 시간: ${minutes}분 ${seconds}초`;
                if (remainingTime > 0) {
                    remainingTime -= 1000;
                } else {
                    clearInterval(timerInterval);
                    window.location.href = '/users/logout/';
                }
            }

            updateTimer();  // 초기 타이머 업데이트
            const timerInterval = setInterval(updateTimer, 1000);  // 매초마다 타이머 업데이트
        }

        startLogoutTimer();  // 페이지가 로드될 때 타이머 시작

로그아웃 시간은 15분 (900,000 밀리초)로 설정하였고, HTML 문서에서 ID기 'logout-timer'인 요소를 찾아 'logoutTimerElement' 변수에 저장하고 'remainingTime' 변수를 'logoutTime'값으로 초기화하여 남은 시간을 추적합니다.

내부함수 updateTimer()는 사용자에게 남은 시간을 계산하고 가시적으로 자동 로그아웃까지의 시간을 보여주는 역할을 합니다.

도전과제 2 : 유저 드롭 다운 메뉴

문제 : 사용자가 메인 기능 말고 사용자에 대한 기능(로그아웃, 프로필 등)을 제공하기 위해 유저 드롭 다운 메뉴를 생성하고자 했습니다.

해결책 : JavaScript를 이용하여 프론트엔드 사이드에서 구현

function toggleDropdown() {
    var dropdown = document.getElementById('userMenuDropdown');
    var isVisible = dropdown.style.display === 'block';
    dropdown.style.display = isVisible ? 'none' : 'block';
}

이 함수는 사용자의 드롭다운 메뉴를 표시하고 숨기는 역할을 합니다. 기능은 HTML 문서에서 ID가 'userMenyDropdown'을 찾고 dropdown.style.display를 검사하여 현재 드롭다운 메뉴가 보이는 상태인지 확인합니다. 보이는 상태이면 none 아니면 block으로 설정하여 메뉴를 숨기거나 노출시킵니다.

결론 및 배운점

프로젝트를 진행하면서 웹개발에서 계속해서 기술 스택이 점점 추가되면서 다양한 기술 스택을 접하는 것에 대한 중요성을 알았습니다. 분명 처음 시작은 Django였는데 프론트엔드에서 HTML을 하기 시작하면서 TailwindCSS를 접하고, 기능을 프론트엔드에 넣기 위해 자바 스크립트를 접하는 등 다양한 기술 스택을 조합하고 이를 적절히 활용하는 것이 웹 개발에서 얼마나 중요한지를 깨닫게 해주었습니다. 또한 사용자의 UI/UX 개선을 위해 계속 생각을 하게 되고, 보안적인 측면에서도 좀 더 신중하게 고려해야한다는 점을 느꼈습니다.

HanWool