[웹프로그래밍기초🎀] 수업을 마치며

-------

개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을  옮겼습니다.

https://blog.naver.com/0yeonjae2/222422833582

-------

실질적인 수업이 끝난 후부터 프로젝트의 최종본을 제출하기 전까지의 활동을 정리했다.

수정할 것이 없을 거라 생각했는데 생각보다 많았다.

 

(동영상은 네이버 블로그를 통해 볼 수 있습니다.)

 

js 코드의 간결화

js의 문법을 배우기 전 하나하나 상황을 다 고려해서 거진 400줄이나 되는 양의 코드를 사용해서 앨범 페이지 변화와 공지사항의 변화를 표현했었다. 이 부분을 코드의 간결성을 위해 수정해야겠다고 마음먹고 있다가 드디어 작업했다

앨범 페이지에 적용되는 js 코드만 거진 450줄을 제거하고 130줄 정도로 간결화하는 데 성공했다.

 

처음에는 종합 앨범이 보이는 상태이고, 화면번호가 2일 때는 ~하고, 국내 앨범이 보이는 상태이고, 화면번호가 4일 때는 ~게 한다.라는 방식으로 길게 작성했는데, 이번에는

const albumPageNumberChangeForC = () => {
    $comprehensive_albums.forEach((comprehensive_albums) => {
        comprehensive_albums.style.display = "none";
    });
    $albumPages.forEach((albumPages) => {
        albumPages.style.display = "none";
    });
};
// 종합앨범에서 -> 버튼을 클릭했을 때 발생할 함수 정의
const preAlbumShowForC = () => {
    albumPageNumberChangeForC();
    if (currentAlbumPage === $comprehensive_albums.length-1) {
        currentAlbumPage = -1;
    }
    currentAlbumPage++
    $comprehensive_albums[currentAlbumPage].style.display = "block"
    $albumPages[currentAlbumPage].style.display = "block"

}
// 종합앨범이 보이는 상태에서 <- 버튼을 클릭했을 때 발생할 함수 정의 
const nextAlbumShowForC = () => {
    albumPageNumberChangeForC();
    if (currentAlbumPage === 0) {
        currentAlbumPage = $comprehensive_albums.length;
    }
    currentAlbumPage--
    $comprehensive_albums[currentAlbumPage].style.display = "block"
    $albumPages[currentAlbumPage].style.display = "block"
}

 

이런 식으로 함수를 만들고 적재적소에 함수를 사용했다! 이미 알고 있는 코드를 상황에 맞게 변수만 바꾸면 되는 상황이었는데, 중간중간 잘되지 않아 고생을 했다.

 

계속 작업하다가 안 돼서 '에라 모르겠다' 하고 컴퓨터를 끄고, 다른 공부를 하다가 혹시 이런 방법을 쓰면 되지 않을까라는 생각에 다시 컴퓨터를 켰다. 혹시나 하는 마음에 수정 없이 다시 실행해봤는데 잘 실행돼서 당황스러웠던 적이 한두 번이 아니다. 계속 js 코드가 잘 되는지 확인하기 위해 똑같은 부분만 계속 건드려서 그런 것 같다. 어쨌든 성공적으로 코드를 간결하게 수정했다!

 

위의 코드와 유사한 방식으로 공지사항 부분의 화살표 js도 수정했다.

const noticeReset = () => {
    $footer_first_contents.forEach((footer_first_contents) => {
        footer_first_contents.style.display = "none";
        back.style.color = 'black'
        next.style.color = 'black'
    });
};
// > 버튼을 클릭했을 때의 변화
const clickToNextNotice = () => {
    if (currentNoticeNumber !== 2) {
        noticeReset();
        if (currentNoticeNumber === 1) {
            next.style.color = "#8b8b8b"
        }
        currentNoticeNumber++
        $footer_first_contents[currentNoticeNumber].style.display = 'block'
    } else {
        $footer_first_contents[currentNoticeNumber].style.display = 'block'
    }
}
nextnoticebtn.addEventListener("click", clickToNextNotice)
// < 버튼을 클릭했을 때의 변화
const clickToPreNotice = () => {
    if (currentNoticeNumber !== 0) {
        noticeReset();
        if (currentNoticeNumber === 1) {
            back.style.color = "#8b8b8b"
        }
        currentNoticeNumber--
        $footer_first_contents[currentNoticeNumber].style.display = 'block'
    } else {
        $footer_first_contents[currentNoticeNumber].style.display = 'block'
    }
}
backnoticebtn.addEventListener("click", clickToPreNotice)

 

 

 

다른 것과 다르게 공지사항 화살표는 마지막 내용 다음 버튼을 눌렸을 때 처음 내용이 나오지 않는다. 그래도 이 부분은 쉬워서 금방 처리했다.

 

 

---

프로젝트를 마무리하고 제출하면서

줄 수로만 보니 html이 엄청나 보이는데 중복이 많아서 실질적으론 별로 많지 않다. 코드 양과 내가 한 고생은 반비례한다. 2주 넘게 고민한 부분은 결국 제출까지 구현하지 못했다.

 

실시간 차트 내 부분은 원래 css를 통해 구현하려고 했는데, 지금 보니 css가 아닌 js로 다시 작업해야 할 것 같다. 원래 사이트의 코드를 개발자 도구를 이용해 뜯어보니 호버 자체를 css가 아닌 js로 함수를 만들어 구현했었다. 사이트를 처음 클론 코딩할 때는 js 코드를 작성할 줄 몰라서 css로 호버를 구현하고 후에 js 코드로 원하는 효과를 주려고 했었다. 기존의 css 코드가 생각보다 많아서 여유로운 날에 전체적으로 정리할 생각이다.

 

두 번째는 슬라이더의 멈춤 효과이다. 원래 다른 개발 일지에서도 언급했듯이 setInterval과 clearInterval을 변수명에 따라 실행되게 해서 효과를 구현하려고 했는데, 끝까지 실패했다. 좀 더 시도해보고 안 되면 슬라이더 기능 자체의 js 코드를 수정할 생각이다.

 

첫 번째 문제는 계획까지 세웠고 실천만 하면 되는데, 두 번째 문제는 감이 잘 안 잡힌다. 좀 더 고민해 봐야 할 것 같다.

 

나중에 이 부분들을 해결하면 추가적으로 개발일지를 작성할 생각이다. 지금 이 글을 쓰는 시점은 방학인데, 개인적으로 바빠서 아마 다시 이 글을 쓰는 시점은 올해 겨울이 될 것 같다. 

(+22.02.02. 오랜만에 다시 보니 JS가 잘 기억이 안 난다. 다시 공부를 하고 고쳐야 해서 좀 더 시간이 걸릴 것 같다. )

 

 

---

한 학기 동안 웹프로그래밍기초를 공부하며 들었던 생각

 

매주 목요일에는 파이썬과 웹프로그래밍 수업이 있어서 과제나 공부로 인해 밤새우는 것이 일상이었는데, 학기 중에는 정말 힘들었다. 수업을 들으면서 내가 잘 하는지에 대한 의문이 항상 들었고, 구글링으로 타인의 코드를 보면서 자괴감도 많이 생겼었다. 남과 비교하다 보니 자신감이 없어지다 못해 너무 우울해져서 마음고생이 심했다. 할 수 있는 것은 공부하는 것 밖에 없다고 생각해서 꽤 열심히 살았다. 최종적인 결과를 보니 한 학기동안의 고생을 잊을 수 있을 만큼 기뻤다.

 

컴퓨터공학과에 입학하고 처음 배운 실습과목이라 걱정이 정말 많았다. 그래도 끝까지 포기하지 않고 결과물을 내서 뿌듯하다. 수업 중간중간 교수님께서 해 주신 조언들 덕분에 힘든 시기를 잘 넘길 수 있었다. 그리고 같은 수업을 듣는 동기, 선배분들께서 열심히 하시는 모습을 보고 나도 열심히 하게 된 것 같다.