[TIL] 자기소개 페이지 JS review

이나현·2021년 6월 12일

JavaScript

목록 보기

2/13

wecode 사전스터디) 자기소개페이지

위코드 사전스터디로 자기소개 페이지를 만들었다.
html, CSS를 지나 Javascript까지 넣어보았는데, 페이지를 완성해 가면서 6개월 독학으로 강의만 듣는 것보다 프로젝트를 통해서 원하는 기능을 배우는 것이 더 빠르게 배울 수 있다는 것을 깨달았다!
(사실.. 프로젝트를 하기가 힘들어서 미루고 미룬 것일수도+_+)

자기소개페이지를 완성하면서 좋았던 점
1) 프로젝트를 통해 원하는 기능을 배울 수 있었다.
2) 오류를 해결해 가면서 성취감을 느꼈다. 재밌었다.

아쉬웠던 점
1) 디자인 레퍼런스를 많이 찾아보고 시작할 걸 하는 아쉬움!
(디자인 적으로 예쁘게 만들면 보기 좋았을 것 같다. 4주차 스터디가 끝나고 하루이틀 정도 쉬는 날이 생길 때, 디자인 전면 수정 예정이다.)
2) Javascript의 기능과 원리를 더 알아야겠다고 느꼈음
(javascript에서 변수선언이나 함수 생성의 원리 등을 더 많이 연습해서 자연스럽게 나올 수 있도록 해야겠다고 생각했다. nomad 코더나 인프런 강의를 통해서 JS 기본 프로젝트를 내일부터 시작할 예정이다.

내가 완성한 페이지는 여기를 누르면 들어갈 수 있습니다:)

JS 코드 리뷰

햄버거 메뉴는 -*3 의 모양으로 = 대충 이런 모양으로 선이 3개 짜리이다.

const moreBtn = document.querySelector('nav .icon');
const navbar = document.querySelector('nav ul');

moreBtn.addEventListener('click', (ev) => {
  ev.preventDefault();
  navbar.classList.toggle('active');
});

이 부분에서 가장 어려웠던 부분은? ev.preventDefault!

ev가 없으면 햄버거 메뉴를 클릭하고 없애려고 한번 더 누르면, 원하는 단에 있지 않고 최상단으로 올라가게 된다.

그 이유는 메뉴바에 만들어 놓은 <a href="#"> 이 부분이 최상단으로 올라가는 고유의 동작이기 때문이다.

이벤트가 발생하면 기본적으로 부여되어있는 동작을 실행하게 되기 때문에 이 실행을 막아주는 이벤트 메소드인 event.preventDefault가 필요하다.

ev.preventDefault를 사용하면 메뉴바가 원하는 위치에서 열고 닫기가 가능해진다.

1. top버튼 클릭 시, 최상단으로 올라오기

총 3개의 단으로 이루어져 있는 자기소개 페이지에서 스크롤이 많이 내려갔을 때, 편하게 올라오기 위하여 스크롤 이벤트를 사용하여 최상단으로 쉽게 올라올 수 있는 기능을 구현하고 싶었다.

해당 이벤트는 1) 변수 지정, 2) 문서 높이 계산하기, 3)스크롤과 클릭 이벤트 작성 이렇게 3가지를 해야한다.

1) 변수지정하기

let btt = document.getElementById('back-to-top'),
  docElem = document.documentElement,
  offset,
  scrollPos,
  docHeight;

docElem은 문서 전체를 가져오는 변수이기 때문에 document.documentElement로 지정했다.

나머지 offset, scrollPos, docHeight는 변수 이름만 정해놓고 아래에서 더 자세히 쓸 예정이다.

2) 문서 높이 계산

docHeight = Math.max(docElem.scrollHeight, docElem.offsetHeight);

if (docHeight != 0) {
  offset = docHeight / 4; 
}

Math.max는 입력값으로 받은 값 중 큰 값을 반환하는 함수이다.
여기서 scrollHeight 프로퍼티와 offsetHeight 프로퍼티 중 큰 값을 반환해 내는 것이다. 사파리, 크롬 등 브라우저 마다 높이가 다른 경우가 있기 때문에 math.max로 두 프로퍼티를 비교한 뒤 더 큰 값을 반환하는 것이 안전한 방법이라고 한다.

scrollHeight: 엘리먼트의 스크롤 높이
offsetHeight: 화면을 봤을 때 보여지는 엘리먼트의 높이

offset의 높이는 전체 문서 높이의 1/4로 지정하여, 문서의 1/4 이후 위치부터 'TOP'버튼이 생성될 수 있게 만들었다.

3) 스크롤 이벤트 추가

window.addEventListener('scroll', () => {
  scrollPos = docElem.scrollTop;
  console.log(scrollPos);

  btt.className = (scrollPos > offset) ? 'visible' : '';

scrolltop은스크롤이 내려간 만큼의 y좌표를 알 수 있게 해주는 메서드이다.

btt.className = (scrollPos > offset) ? 'visible' : '';스크롤 위치 > 문서 1/4 이면, CSS부분의 visible을 작동시키고, else 그렇지 않으면 아무것도 작동시키지 않는다.

css.visible에 opacity: 1을 줘서 TOP태그가 보일 수 있게 만들었습니다.

4) 클릭이벤트 추가

btt.addEventListener('click', (ev) => {
  ev.preventDefault();
  scrollToTop();
});

햄버거 메뉴의 클릭이벤트와 동일
버튼을 누르면, scrollToTop(); 함수를 실행한다.

4-1) scrollToTop 함수

function scrollToTop() {
  let scrollInterval = setInterval(function () {
    if (scrollPos != 0) {
      window.scrollBy(0, -55);
    } else {
      clearInterval(scrollInterval);
    }
  }, 15);
}

scrollToTop 함수는 쪼개서 생각을 해야한다.
(1)일정시간 마다 할일 let scrollInterval = setInterval(할일. 시간);(이름이 있어야 함)
(2) 0.0015s = 15 (0.001 초)
(3) 윈도우 스크롤이 0이 아닐 때 실제로 할 일 : window.scrollBy(0,-55); x축은 바뀌는게 없고 y축만 바뀜
(4) 스크롤 양이 0 이면 setInterval을 멈춰라. clearInterval(이름);

setInterval은 주기적으로 이벤트를 발생시키고 싶을 때 실행

0.001초마다 스크롤이 55px만큼 올라가는 이벤트를 실행시키고 싶다.

scrollBy(xnum,ynum)은 지정된 픽셀 수 만큼 이동하는 것을 뜻한다.

xnum: 가로 픽셀로 이동
양수: 오른쪽으로 이동/ 음수: 왼쪽으로 이동

ynum: 세로 픽셀로 이동
양수: 아래로 이동/ 음수: 위로 이동
=> window.scrollBy(0,-55)은 위로 55px만큼씩 이동