[패스트캠퍼스] 프론트엔드 강의 학습후기 4주차

4주차 강의는 스타벅스 페이지를 마무리 했고
node.js 개요에 관한 내용까지 담겨있었다.

이제 계속 다뤘던 html의 추가적 학습이 끝났으니
남은 주차별 학습은 더 열공을 해야겠다는 생각과 걱정이 들었다는..

4주차 스타벅스 페이지 코드에는 애니메이션 기능을 추가하는 내용이 있어
라이브러리 사용법에 관한 내용이 주였던 것 같다.

swiper

• 생성자 함수를 사용하여 표기
• 기본 표기법: new Swiper(선택자, 옵션)
• 사용 예시

<!-- in HEAD -->
<link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>

<!-- in BODY -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
  </div>
</div>

• swiper 실제 사용 예시 이미지
  

Youtube ifame API

• 유투브 동영상 제어 기능
• 사용 예시

<!-- in HEAD -->
<script defer src="./js/youtube.js"></script>

<!-- in BODY -->
<div id="player"></div>

• 실사용 예시 이미지
  

scroll magic

• 브라우저의 스크롤과 요소의 상호 작용을 위한 라이브러리
  어느 지점에서만 요소를 보이게 할 때 사용하기 용이하다
• 실사용 예시 이미지
  

node.js

• 자바스크립트의 문법을 이해하고 동작시키는 자바스크립트의 런타임
  런타임 : 어떠한 프로그래밍 언어가 동작하는 환경을 의미한다.
• node.js 를 배우는 것 -> 컴퓨터를 제어하는 것을 배우는 것
  웹 페이지를 개발함에서 다양한 역할을 하기 위해 node의 도움을 받는 것
• node.js 설치 시 버전
  • LTS : 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전으로, 유지/보수와 보완(서버 운영 등)에 초점을 맞춰 대부분 사용자에게 추천되는 버전
    웹 페이지의 제품화 괒어에서 유용하게 사용 가능
  • 최신 버전 : 최신 기능들을 사용할 때 용이한 버전 비교적 안정적이지 못하다는 단점이 존재함

npm

• 전 세계 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리
• npm install ~
  • node_module라는 폴더가 생성됨으로써 패키지들이 다같이 설치가 됨
  • 축약으로 npm i 로도 표기
  • 패키지에 기록되어 있는 내역을 바탕으로 폴더를 지우더라도 명령어(npm install = npm i)를 통해 재설치 가능
• package.json
  • 직접적인 관리
• package-lock.json
  • 모듈들이 내부적으로 사용하는 또다른 모듈들을 관리할 때 내부에서 사용되는 패키지들의 대한 정보가 들어가게 됨
  • 자동으로 관리 되는 형태
• npm ~ -D / npm ~ (D 플래그를 붙이고 안붙이고 차이)
  • ~ -D : 개발용 의존성 패키지 설치
    내가 설치한 특정한 것이 개발할 때만 설치하고 웹 브라우저에서는 동작하지 않음
  • -D X : 일반적인 의존성 패키지를 설치하게 됨
    웹 브라우저에서는 동작하지 않음
  • 개발할때만 도움을 받는 용도인지, 웹 브라우저에서도 동작해야 하는 용도인지 구분하여 설치가 필요함

build

• 사용자들이 보는 환경에서 볼 수 있게 됨
• 난독화 : 작성된 코드를 일반 사용자들에게는 읽기 어렵게 만들고, 웹브라우저에서 동작하는 용도로 만들어주는 것을 말함
• 개발에 사용한 여러 모듈을 하나로 묶어내는 기능

유의적 버전 (Semver)

• 특정한 프로그램의 버전을 확인 할 때 사용
• Major.Minor.Patch (ex. 12.14.1)
  • Major (ex. 12)
    • 기존 버전과 호환되지 않는 새로운 버전
    • 어떤 프로젝트를 진행함에 있어 전혀 새로운 기능들을 도입했다면 메이져가 달라져야 함
  • Minor (ex. 14)
    • 기존 버전과 호환되는 새로운 기능이 추가된 버전
    • 총 14번의 새로운 기능이 추가되었다 라는 뜻
  • path (ex. 1)
    • 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전
• ^ : 메이저 버전 안에서 가장 최신 버전으로 업데이트가 가능하다 라는 것을 의미
  버전의 명시로 ^를 사용하면 노드를 업데이트 했을 때 메이저 버전은 바뀌지 않고 마이너, 패치 버전이 최근으로 바뀜

.gitignore

• git을 통해 버전 관리를 할 때 gitinore에 관리하지 않을 것을 모아두면 불필요한 파일들을 버전 관리 하지 않을 수 있음