Spring MVC (3) 게시판 프로젝트 -> 메인 페이지 만들기(JS편)

비전공자에 입장에선 일단 JS가 더 지옥이였다 .

 

자바를 설치한지 2달된 .. 자바스크립트를 1주일 한 사람에겐 막막해서 

 

일단 기능 정리를 먼저했다.

 

1. 메인페이지의 넣는 비디오부분에 재생,멈춤 부분을 넣자.

 

2. 템플릿을 보시면 아시겠지만 밑에 슬라이드 부분에 영화 설명 관련 API 슬라이드가 있는데 

이걸 삭제하고 내가 슬라이드를 만들어서 개발자 관련 유튜브 영상을 올려서 실행되는 무한슬라이드를 만들자.

 

3. '구글' 처럼 로그인 하였을때 우측 상단에 프로필이 뜨고 거기서 개인 정보를 수정할수 있게하자.

 

이렇게 정리를 하고 구글링을 하며

(GPT면 다 된다고 생각 하시는 나와 같은 초보자 분들에게 JS나 CSS는 시간이 걸리더라도 GPT를 안믿고 직접 찿아보면서 적용하시는 것을 추천한다. (WHY : AI가 미적감각이 매우 떨어진다..)

document.addEventListener('DOMContentLoaded', function() {
    const mobileMenu = document.querySelector('.mobile-menu');
    const menuList = document.querySelector('.menu-list');
    const video = document.getElementById('mainVideo');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const playIcon = '<i class="fa-solid fa-play"></i><span> 재생</span>';
    const pauseIcon = '<i class="fa-solid fa-pause"></i><span> 멈춤</span>';
    
    mobileMenu.addEventListener('click', function() {
        menuList.style.display = menuList.style.display === 'flex' ? 'none' : 'flex';
    });

    playPauseBtn.addEventListener('click', () => {
        if (video.paused) {
            video.play();
            playPauseBtn.innerHTML = pauseIcon;
        } else {
            video.pause();
            playPauseBtn.innerHTML = playIcon;
        }
    });

 이렇게 비디오 재생 버튼을 만들었고 나름 모바일 메뉴도 만들었다.

 

2번째. 무한 슬라이드 만들기 ( 유튜브 썸네일 뽑기)

    const sliders = [
        {
            id: 'slider1', videos: [
                { thumbnail: 'https://img.youtube.com/vi/KJLSPwAXL-E/hqdefault.jpg', title: '엔비디아 CEO의 생각', url: 'https://www.youtube.com/watch?v=KJLSPwAXL-E' },
                { thumbnail: 'https://img.youtube.com/vi/Qve-SRfQr1s/hqdefault.jpg', title: '구글부사장이 생각하는비전', url: 'https://www.youtube.com/watch?v=Qve-SRfQr1s&t=938s' },
                { thumbnail: 'https://img.youtube.com/vi/9Tjha6yr9p4/hqdefault.jpg', title: '코딩강사의 소신발언', url: 'https://www.youtube.com/watch?v=9Tjha6yr9p4&t=1081s' },
                { thumbnail: 'https://img.youtube.com/vi/6QT6SMPwFXk/hqdefault.jpg', title: '30년개발자의 조언', url: 'https://www.youtube.com/watch?v=6QT6SMPwFXk&t=1916s' },
                { thumbnail: 'https://img.youtube.com/vi/ax-Q1iedXJA/hqdefault.jpg', title: '구글부사장이 생각하는비전', url: 'https://www.youtube.com/watch?v=ax-Q1iedXJA&t=539s' },
                { thumbnail: 'https://img.youtube.com/vi/Vn2uIk-G_B0/hqdefault.jpg', title: 'GPT-4o와 미래', url: 'https://www.youtube.com/watch?v=Vn2uIk-G_B0' },
                { thumbnail: 'https://img.youtube.com/vi/j8Z5kKUYlKQ/hqdefault.jpg', title: 'CS지식 어디까지 알아야', url: 'https://www.youtube.com/watch?v=j8Z5kKUYlKQ' },
                { thumbnail: 'https://img.youtube.com/vi/JTUIOC2QmR0/hqdefault.jpg', title: '반란군기질이 개발자를 성공시킨다', url: 'https://www.youtube.com/watch?v=JTUIOC2QmR0&t=271s' }
            ]
        },

해보니 유튜브는 URL에 V= 뒤에 VALUE 값이 있어서  그 값을 적고 저렇게 .jpg 처리하면 썸네일로 뽑아서 주는 기능이있었다. 그래서 찿아서 넣고 적용해보니 어렵진 않았고 시각적인 효과도 좋아서 상당히 만족했다.

 

2-2 슬라이드의 작동부분

sliders.forEach(slider => {
        const sliderElement = document.getElementById(slider.id);
        slider.videos.forEach(video => {
            const div = document.createElement('div');
            div.className = 'item';
            div.innerHTML = `
                <img src="${video.thumbnail}" alt="${video.title}">
                <p>${video.title}</p>
            `;
            div.addEventListener('click', () => {
                window.open(video.url, '_blank');
            });
            sliderElement.appendChild(div);
        });

        const nextButton = document.querySelector(`.next[data-slider="${slider.id}"]`);
        const prevButton = document.querySelector(`.prev[data-slider="${slider.id}"]`);
        makeSlider(sliderElement, prevButton, nextButton);
    });

    function makeSlider(element, prev, next) {
        next.addEventListener('click', () => {
            const offsetX = element.offsetWidth;
            element.scrollBy(offsetX, 0);
        });
        prev.addEventListener('click', () => {
            const offsetX = element.offsetWidth;
            element.scrollBy(-offsetX, 0);
        });
    }
});

 

이게 슬라이드의 방향표를 만들고 움직이게 하는것인데 상당히 고생했다. 

appendChild 개념, offset,scrollBy 등의 완전 새로 알게된 것들이 있어서 적용하는데 어려웠지만 구글링 해보시면 다 나온다 그리고 개념같은 경우는 gpt에 물어보시면 잘 설명해주니 꼭 이해하고 가자.