jQuery
jQuery의 동작은 일반 JS와 유사하지만 사용법에 대한 극명한 차이가 있다
많은 문법들이 존재하지만 DOM에 접근하여 조작하는 것만 간단히 살펴보겠다
기본 설정
jQuery는 라이브러리를 다운받는 대신 script로 기능을 부여할 수 있다
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>HTML에 이러한 script태그를 붙이면 jQuery가 동작한다
DOM 조작
JS에서는 DOM에 접근하기 위해 querySelector를 활용하여 접근했었다
하지만 jQuery에서는 이보다 간단한 방법이 존재한다
const a = document.querySelector('.a'); // JS문법
const a = $('.a'); // jQuery문법눈으로 보기에도 매우 간단해진 모습이다
이벤트
기존에 JS에서 원래의 이벤트(submit 이벤트 or a태그의 링크 이동 이벤트와 같은 것들)를 차단하기 위해 e.preventDefault()를 사용했었다
jQuery에서도 사용가능하다
하지만 다른 방식으로도 기존의 이벤트를 차단할 수 있다
li.click(function(e) {
e.preventDefault(); // 기존 JS문법과 일치
...
return false; // jQuery에서 동작하는 e.preventDefault()와 같은 역할을 하는 return
});return false; 를 사용하게 되면 preventDefault()와 같은 역할을 하게 된다
하지만 코드를 대충만 봐도 기존의 사용하던 addEventListener()과는 다른 사용방법이다
동작에 대한 함수가 jQuery에는 기본적으로 있다
예를들어 그 동안 자주 사용하던 click, 그리고 마우스를 움직일때 일어나던 mousemove와 같은 것들이 존재한다
그리고 내부에 실행 함수를 입력하여 이벤트를 할당할 수 있다
또한 on을 사용하면 eventListener를 사용하는 것처럼 이벤트를 할당할 수 있다
$('.a').on('click','div', function(e) {
console.log('hello');
});첫 번째 인수로는 어떤 동작을 실행했을때 함수를 실행할 지, 두 번째 인수로는 a class를 가진 요소 아래에 어떤 요소를 대상으로 할지, 세 번째 인수로는 실행함수를 전달한다
장단점
이처럼 jQuery는 문법만 봐도 기존의 JS보다 사용하기 쉽고 접근성이 쉬워 단점이 존재하지 않아 보인다
하지만 여기엔 치명적인 단점이 존재한다
바로 사용법이 간단하기에 jQuery는 무겁다는 것이다
이는 등가교환이라고 봐도 무방하다
또한 jQuery의 인식은 '쉽다'가 가장 큰 장점이었는데 최근 JS의 사용법도 역시 쉬워지는 추세이다
따라서 쉽다는 장점이 옅어지고 있다
jQuery는 비동기 통신(Ajax)의 역할로는 아주 훌륭한 성능을 보인다
그러나 이것 하나만을 위해 jQuery를 사용하자니 너무 무겁고, 또한 axios로 대체가 가능하기에 이것 또한 옅어진다
마지막으로 최근 SPA(Single Page Application)이 많이 활성화되는 추세인데 jQuery는 이에 대한 개발이 불가능하다는 점이 있다
그러나 단점만 존재하는 것은 아니다
JS에서 반복문을 돌며 자식 요소에게 class를 제거하고 이벤트 바인딩을 하는 것에 비해
jQuery는 자동으로 이를 처리해주기 때문에 상당히 편리하다는 장점도 있다
또한 최근 사용하지 않는 추세다 jQuery는 이제 legacy의 영역이다 라고 하지만 2023년 11월 기준으로 약 77퍼센트의 사이트들이 jQuery를 사용하고 있다
따라서 jQuery를 몰라도 되냐? 라고 물어보면 단호하게 아니라고 대답할 수 있겠다
Swiper
Swiper도 jQuery처럼 script로 불러올 수 있다
(물론 react환경에선 npm으로 설치해도 가능하다)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />이번엔 Swiper를 적용하기 위해 기본 틀을 살펴보자
swiper공식 문서
여기를 HTML을 기본적으로 설정해주어야 한다는 것을 알 수 있다
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>참고로 slide1~3 적힌 부분만 적어도 Swiper을 구현하는 데는 문제가 없다
그 밑은 현재 위치를 알려주는 기능을 하는 pagination, 이전과 이후로 이동하는 버튼인 swiper-button, 그리고 스크롤바가 필요할때 사용하는 swiper-scrollbar이다 우리는 slide와 pagination에만 집중해보겠다
여러 가지 속성
- autoplay : 이는 자동 재생을 가능하게 하는 변수이다
- loop : 무한루프를 가능하게 한다 원래는 1->2->3->4->1 순서로 가긴 하지만 이미지가 4->1로 이동할 때 4->3->2->1을 매우 빠르게 지나간다
하지만 이때 loop를 true로 설정하게 되면 4->1로 바로 이동하게 된다 - speed : 이를 조절하여 애니메이션의 duration을 결정할 수 있다
- parallax : swiper 애니메이션에 특수 효과들을 부여할 수 있다(시차)
1. 참고로 HTML에 사용하면 된다data-swiper-parallax-x:a와b가swiper내부에서앞뒤를 차지한다고 해보자 이때a에서 슬라이드를 하게 되면b의 화면으로 가는데 이때하나의 연결된 그림이기에 자연스럽게꼬리를 물고 옆으로 이동하게 된다
하지만parallax-x를 부여하게 되면후미에 있는 녀석이 살짝delay가 걸리며애니메이션에 특수효과가 부여되는 형식이다data-swiper-scale:slide가 일어날때사라지는 쪽의크기가n배하며 사라진다- 이 외에도 다양한 속성들이 있다
pagination
pagination의 역할은 현재 위치한 영역이 몇 번째인지 그리고 총 몇 개의 데이터가 있는지를 확인할 수 있게 해주는 역할을 한다
기본 속성들은 다음과 같다
-
progressbar : 진행 상황을 1자의 형태로 나타내준다
-
bullets : 흔히 보는 ... 으로 표시된 순서를 알려주는 역할을 한다
- fraction : 직관적으로 알 수 있는 숫자로 현재의 위치를 표시해준다
이 외에는 custom으로 pagination을 꾸며주는 방법도 있다
주의 사항
swiper는 크기를 지정하지 않으면 사용이 어렵다
모듈 프로그래밍
사용법
script로 JS파일을 불러올 때 type="module" 을 부여하게 되면 모듈 프로그래밍을 사용할 준비가 됐다
그렇다면 모듈 프로그래밍이란 무엇인가?
바로 모든 JS파일들을 모듈화를 시켜 원하는 것들을 불러와 사용하는 것을 의미한다
이 과정에서 파일 자체가 캡슐화가 된다
이때 특정 변수나 함수를 내보내고 싶다면 export를 불러오고 싶다면 import를 사용한다
단어의 뜻만 놓고봐도 직관 적이다(export:수출 / import:수입)
export
export에는 두 가지 종류의 export가 있다
바로 named export와 default export가 있다
우선 named export먼저 살펴보자
-
named export
function이나 변수 앞에export를 붙여 사용하며 만약 이를 불러오고 싶다면
중괄호를 사용해 불러올 수 있다
이는JS파일에서여러 개의 export가 존재해도 된다 -
default export
우선named와의 차이는 사용법에서도 차이가 있다
내보내고 싶은함수나 변수 앞에export default를 사용해export할 수 있다
하지만default export가 선언됐다면 내부에또 다른 default export는 불가능하다
이는 불러올때 중괄호를 생략하여 불러올 수 있으며, 함수의 이름을 불러오는 과정에서 자유롭게 변경이 가능하다
이번엔 import를 살펴보자
import는 기본적으로
import name from './파일경로' // default export
import { name } from './파일경로' // named export와 같이 사용한다
default export의 경우 name은 마음대로 지정이 가능하다
만약 named export의 경우 이름을 변경하고 싶다면 alias를 설정하여 가능하다(as)
모듈 프로그래밍은 캡슐화가 가능하고 이걸 원하는 때에 꺼내쓸 수 있다는 장점이 있지만
사용하려면 항상 import를 사용해야한다는 번거로움도 동시에 존재한다
import를 할때마다 파일 경로를 찾는 것도 번거롭다
따라서 이를 조금이라도 해소하고자 re-export를 사용한다
re-export
이는 모든 export가 선언된 파일을 한 곳으로 모아 한 번에 export가 가능하게 해준다
사용법은 다음과 같다
// export가 선언된 파일을 한 곳으로 모으는 JS파일(index.js)
export * from './경로1';
export * from './경로2';
export * from './경로3';
...이렇게 하면 어떤 함수를 원하더라도 index.js에서 찾아서 사용하기에 경로찾는 것에 해소가 된다
만약 default export된 파일도 re-export하고 싶다면
export { default as functionName } from './파일경로';와 같이 사용해 가능하다
우리는 앞으로 기능별로 폴더를 여러 개로 나눌 것이기에 index.js도 여러 개 생길 가능성이 있다
이때 index.js를 또 한 번에 묶어서 내보내는 index.js파일을 만드는 것도 가능하다
최종 엔트리를 만들어 더욱 축약된 형식으로 재탄생하는 것이다
