1) 학습한 내용

팀 프로젝트

자바스크립트로 서브메뉴를 누르면 해당 페이지로 이동한 이후, 자동으로 사라지게 하기

$(document).ready(function(){
    $('.menubar').click(function(){
        const nav_menu = document.getElementsByClassName('nav_menu')
        if($(nav_menu).hasClass('close')){
            $(nav_menu).addClass('more').removeClass('close');
        }else if($(nav_menu).hasClass('more')){
            setTimeout(function() { $(nav_menu).addClass('close').removeClass('more');}, 500);
        }
    });
    
    $('header #nav_gnb nav > ul ul a').click(function() {
         $('.nav_menu').addClass('close');
         setTimeout(function() { $('.nav_menu').addClass('close').removeClass('more');}, 500);
    });
});

위의 코드를 해석하면 해당 문서에서 클래스 메뉴바를 클릭할 경우,

상수 nav_menu로 정의된 곳에서 클래스 nav_menu가 생성된다.

if는 nav_menu가 close를 가지고 있을 경우, more가 생성되고 close가 제거되며 그렇지 않고 nav_menu에 more일 경우, nav_menu에 close가 생성되고 more가 제거되며 500ms가 걸린다.

.close{
    opacity: 0; 
    animation-duration: 5s;
}

여기에 css에 들어가서 클래스 이름이 close일 경우에 애니메이션 지속시간으로 5초간 지속되게 했었다.

해당 코드 작성에는 5팀_toco의 홈페이지를 참고했었다.

tip. 프로그래밍을 독학하는데 좋은 사이트

자바나 자바스크립트를 독학하는 데 좋은 사이트를 하나 올려보기로 했다.

인프런

인프런은 국내의 프로그래밍과 관련된 동영상을 제공하는 곳 중의 하나이다.

생활코딩

생활코딩은 이고잉이란 닉네임을 사용하는 분이 운영하는 사이트로 프로그래밍에 관한 설명과 관련된 영상을 무료로 제공하는 곳이다.

Udemy

유데미는 온라인 강의로 대표적인 곳 중의 하나로 내가 프로그래밍을 처음 공부한 곳도 이곳이다. 그리고, 할인도 자주하기 때문에 할인 때 구입을 하는 것을 추천한다. 온라인 강의는 주로 업데이트가 많이 되는 강의를 추천한다.

백준

백준은 코딩 테스트를 공부하는 데 도움이 되는 사이트다.

프로그래머스

프로그래머스 또한 코딩 테스트를 공부하는 데 도움이 되며 여기에 코딩 실력이 자신있으면 코딩테스트를 해볼 수가 있으며 잘하면 취업을 노려볼 수 있다.

2) 학습내용 중 어려웠던 점

자바스크립트를 통해서 클래스를 생성하고 없애는 것을 직접 했었다. 그리고, 직접 자바스크립트 작업을 하면서 여러차례의 시행착오와 테스트를 했었다. 코드를 작성하고 프로그램이을 한다면 테스트를 계속 하는 것은 몸에 배여야 한다는 걸 잊지 말아야 한다.

3) 해결방법

이번 자바스크립트 작성에 도움이 되었던 것은 다른 팀 특히, 5팀_toco의 홈페이지의 자바스크립트 코드가 도움이 되었다.

4) 학습소감

오늘은 팀 프로젝트 결과물을 제출하는 날이다. 나는 팀장에게 내가 작업했었던 피드백을 알렸고 merge 되었다. 그리고, 이번에 옥에 티로는 00_header.css를 미처 발견하지 못했던 것이 옥에 티였다.