[패스트캠퍼스] React 강의-4주차

스타벅스 웹사이트 따라하기

1. 순차적 애니메이션 - 순차적으로 요소 보이기(js)

  .fade-in 요소가 0.7초에 한 번씩 순차적으로 나타나는 애니메이션 js 

//나타날 요소(.fade-in)들을 찾기
const fadeEls = document.qureySelectorAll('.visual .fade-in'); 
fadeEls.forEach(function(fadeEl, index) {
 	// gsap.to(요소, 지속시간, 옵션);
    gsap.to(fadeEl, 1, {
    	delay: (index+1) *.7,
    	opacity: 1
    }); 
 });

수직 슬라이드(swiper)

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

사용방법

1. cdn 방식

2. swiper js파일을 다운받아 삽입 방식

3. npm으로 설치하여 사용

우리는 cdn방식으로 스크립트 소스를 불러와서 문서내에 삽입한다.

Use Swiper from CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

swiper는 슬라이드 라이브러리로 다양한 메소드와 설정을 지원 사용하기 매우 편리,

하위 브라우저에서도 문제없이 작동되기 때문에 크로스 브라우징 측면에서도 뛰어난 장점이 있다.

또한 사용법도 간단한데, 태그에 class만 넣어주고 스크립트에서 슬라이드로 사용할 태그를 지정만 해주면된다.

swiper-container > swiper-wrapper > swiper-slide 구조로 되어 있고, 클래스 명을 지정해서 사용

 

 

- 참조 블로그: https://velog.io/@function_dh/JavaScript-Swiper-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EA%B5%AC%ED%98%84

 

css 단위계산: width: calc(819px *3 + 20px); or width: calc(100%-50px);

//확대해도 정가운데 컨텐츠를 표시
left:50%;
margin-left: calc((819px * 3 + 20px) / -2);

 

다중 요소 슬라이드

new Swiper(' .awards . swiper-container', {
    autoplay: true,
    loop: true,
    spaceBetween: 30,
    slidesPerView: 5
    navigation: {
      prevEl: '.awards .swiper-prev',
      nextEl: '.awards .swiper-next'
    }
});

푸터 영역

날짜가 들어가는 영역 js 사용-자동으로 변경 될 수 있게 class="this-year"

const thisYear = document.querySelector('.this-year');
thisYear.textContent = new Date().getFullYear(); //2022 숫자 출력

특수기호: html entities

https://www.w3schools.com/charsets/ref_html_entities_4.asp 

HTML 4 Entities

img 요소가 display:block; + margin:0 auto;인 경우, width 속성이 없이도 가운데 정렬이 가능하다.

 

페이지 상단으로 이동 버튼

gsap & Scroll to plugin 삽입

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollToPlugin.min.js" integrity="sha512-lFUdnIP0VHYatqtK0Mni2SDBS62JtUUPq9F26a/SDPZMHoGp3E1WO9gHXu1DddaN1ig1fn4mvHAqJ4x0kauKQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

const toTopEl = document.qureySelector('#to-top');

toTopEl.addEventListener('click', function() {
	gsap.to(window, .7, {
      scrollTo: 0
    });
});

 

node js

Node.js는 크롬 v8 자바스크립트 엔진으로 빌드된 javascript 런타임(프로그래밍 언어가 동작하는 환경)

 

node 버전 매니저 설치
nvm(노드 버전 매니저): 언제든지 원하는 버전으로 지정해서 사용할 수 있다.

 

 

유의적 버전(의미가 있는 버전)

Major.Minor.Patch (12.14.1)

 - Major: 기존 버전과 호환되지 않는 새로운 버전.

 - Minor: 기존 버전과 호환되는 새로운 기능이 추가된 버전.

 - Patch: 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전.

^Major.Minor.Patch: Major 버전안에서 가장 최신 버전으로 업데이트 가능

 

NPM 프로젝트의 버전 관리(.gitignore)

.gitignore: 버전관리를 따로 하지 않도록 처리