[패스트캠퍼스] 웹퍼블리싱 강의 6주차 - 자바스크립트 응용예제(1)

 오늘도 이어서 국비지원교육 과정으로 이뤄지는 "웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인" 강의 중 자바스크립트와 SCSS을 통해 만드는 응용 예제를 다룰 것이다. 개발 공부를 하면서 처음 본 라이브러리에 대해 소개도 할 것이며, 어떻게 구현하면 좋을지 전혀 감이 잡히지 않았던 문제에 대해서도 자세히 설명할 것이다.

 

---

 

요약

• 자동정렬기능의 반응형 갤러리 웹
• 시간(낮, 밤)에 따라 UI가 변하는 웹

 

---

 

1. 자동정렬기능의 반응형 갤러리 웹

Isotope을 이용한 반응형웹

CSS

• transform은 인라인 요소에 적용이 되지 않음.
• 너비값을 주지 않고 특정 위치에 margin 값을 주면 margin 값을 제외한 전체 길이를 너비로 갖음.

 

JS

Isotope

https://isotope.metafizzy.co/

Isotope · Filter & sort magical layouts

// 웹페이지의 모든 DOM과 리소스가 로딩이 완료되면
window.addEventListener('load', ()=>{
    const grid = new Isotope("section", { // 컨테이너 이름
        itemSelector: "article", // 배치하고 싶은 요소
        columnWidth: "article", // 기준되는 아이템 이름
        transitionDuration: "0.5s" // 트랜지션 속도
    })

• window load Event는 dom이 출력되는거 뿐만 아니라 이미지, 비디오 등 소스 자료가 전부 출력되는 거까지를 말한다.
  • 이미지가 겹치는 오류가 생기는 이유
    • 이미지가 로딩이 되지 않아 높이를 인지하지 못해서
    • 실제 돔이 로딩 완료되는거랑, 소스 자료가 출력이 완료가 되는건 별개
• isotope.js 사용방법
  • 로컬로 파일을 저장해서 스크립트 불러내기(<script defer src="js/isotope.pkgd.min.js"></script>)
  • 링크로 cdn 파일 연결
• isotope.js HTML 예시

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

 

• 필터

// odd, even, all을 변수로 저장
const btn_a = e.currentTarget.querySelector('a');
// 누른 a 태그의 링크를 변수로 저장
const a_href = btn_a.getAttribute("href");

// a 태그의 링크와 이름이 일치만 class만 출력
grid.arrange({filter: a_href})

 

 

성능적 누수 방지

// 클래스 on을 포함하고 있는지 확인
const isOn = e.currentTarget.classList.contains('on')

// 있으면 함수 실행 정지
if(isOn){
     return false
}

 

---

 

2.  시간(낮, 밤)에 따라 UI가 변하는 웹

시간에 따라 변하는 UI웹

JS

DOM 요소의 클래스 초기화

DOM.className = '';

 

forEach

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

• 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 
• currnetValue: 처리할 현재 요소
• index: 처리할 현재 요소의 인덱스
• array: forEach()를 호출한 배열

 

forof

for (variable of iterable) {
  statement
}

• variable: 각 반복에 서로 다른 속성값
• iterable: 반복되는 열거가능한 속성이 있는 객체

 

자바스크립트로 시간 가져오기

let now = new Date(); // 시간 객체 가져오기
let hr = now.getHours(); // 시간 가져오기
let min = now.getMinutes(); // 분 가져오기
let sec = now.getSeconds(); // 초 가져오기

 

• 시간 가져오는 간단한 예제

const numbers = document.querySelectorAll('.screen span');

setInterval(()=>{
    let now = new Date();
    let hr = now.getHours();
    let min = now.getMinutes();
    let sec = now.getSeconds();

    if(hr < 10) hr = '0'+ hr;
    if(min < 10) min = '0'+ min;
    if(sec < 10) sec = '0'+ sec;

    numbers[0].innerText = hr;
    numbers[1].innerText = min;
    numbers[2].innerText = sec;
}, 1000)

 

비구조할당

<div class="screen">
	<em class="am">am</em>
	<em class="pm">pm</em>
</div>

const [am, pm] = document.querySelectorAll('.screen em');

• DOM 요소를 불러옴과 보시에 각 변수에 am, pm을 저장
• 배열, 객체 등 여러 요소를 변수에 저장할 때 용이