Angular에서 SwiperJS 적용하기

예제코드 분석

• head 태그 안에 css, js 라이브러리가 정리되어 있다.

  → Linking Style Sheet 방법으로 적용되어 있음

  <script src="resources/kb-chat/js/lib/kb-swiper-bundle.min.js"></script>

  • CSS를 HTML에 적용시키는 방법
    • Inline Style Sheet : HTML 태그의 style 속성에 CSS 코드를 넣는 방법
    • Internal Style Sheet : HTML 문서 안의 안에 CSS 코드를 넣는 방법
    • Linking Style Sheet : 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법

• swiper js 라이브러리 사용방법
  • js에서 슬라이드 기능을 구현하기 위해서는 HTML 작성 규칙이 존재하고 클래스 명을 동일하게 작성해야 한다.
  • swiper 초기화의 경우, 2가지 방법이 있다. 초기화 될 때와 초기화 된 후 설정할 수 있는데 mySwiper01의 경우, 매개변수로 사용하였고 swiper가 초기화 될 때 동작한다.

const mySwiper01 = new Swiper('.slider01', {
		// number 또는 'auto'로, 한번에 몇개의 슬라이드를 보여줄지를 지정하는 속성
		// 'auto'의 경우, 각 슬라이드 넓이에 맞게 자동 설정
		slidesPerView: 'auto',

		// 
		slidesPerGroup : 1,
		spaceBetween: 16,

		// 페이징을 클릭하면 해당 영역으로 이동
		// 페이지 번호 요소 선택자 지정 & 사용자의 페이지 번호 요소 제어 가능 여부 지정
		pagination: {
			el:'.slider01 .indi',
			clickable: true,
		},

		// 네비게이션 설정, 이전 화살표 버튼과 다음 화살표 버튼
		navigation:{
			nextEl : '.slider01 .next',
			prevEl : '.slider01 .prev',
		},

		// 
		grabCursor: false,
		slidesOffsetBefore : 0,
		slidesOffsetAfter : 0,

		
		/* 이벤트 사용 */
		// 이벤트를 사용해서 시점별로 일어나는 이벤트 제어 가능
		
		on: {
			// 슬라이더가 생성되었을 때, init에 할당한 함수를 실행
			// 값은 'this'키워드를 이용해 접근 가능 -> 
			init: function() {
				thisSlide = this;
				slideAll = document.querySelectorAll('.slider01 .swiper-slide');
				realSlideAll = document.querySelectorAll('.slider01 .swiper-slide:not(.swiper-slide-duplicate)');
				slideLength = realSlideAll.length - 1;
				navigations['prev'] = document.querySelector('.prev');
				navigations['next'] = document.querySelector('.next');
				slideAll.forEach((element, i) => {
					if (element.classList.contains('swiper-slide-duplicate')) {
						element.setAttribute('aria-hidden', 'true');
					}
					slideAll[thisSlide.activeIndex].setAttribute('tabindex', '0');
					let focusTarget = Array.prototype.slice.call(element.querySelectorAll('a, button, [role="button"], [tabindex="0"]'));
					focusTarget.forEach((el, idx) => {
						if (el.closest('.swiper-slide') !== slideAll[thisSlide.activeIndex]) {
							el.setAttribute('tabindex', '-1');
						};
					});
				});
				realSlideAll.forEach((element, idx) => {
					slideFocus[idx] = Array.prototype.slice.call(element.querySelectorAll('a, button, [role="button"], [tabindex="0"]'));
					slideFocus[idx].unshift(element);
					slideFocus[idx][0].removeEventListener('keydown', (e) => slideKeyDownEvt(e, idx));
					slideFocus[idx][0].addEventListener('keydown', (e) => slideKeyDownEvt(e, idx));
				});
				Object.values(navigations).forEach((navigation) => {
					navigation.addEventListener('keydown', () => {
						onClickNavigation = true;
					});
				});
				navigations['next'].removeEventListener('keydown', (e) => slideFocusAct(e, thisSlide.activeIndex, true));
				navigations['next'].addEventListener('keydown', (e) => slideFocusAct(e, thisSlide.activeIndex, true));
				navigations['prev'].removeEventListener('keydown', (e) => slideFocusAct(e, thisSlide.activeIndex, false));
				navigations['prev'].addEventListener('keydown', (e) => slideFocusAct(e, thisSlide.activeIndex, false));
			},
			touchMove: function() {
				return onClickNavigation = false;
			},

			// "slideChangeTransitionEnd"와 동일하지만 "정방향"에만 해당
			slideNextTransitionEnd: function() {
				// 키보드 탭 버튼으로 인한 슬라이드 변경 시 동작
				if (focusOut) {
					slideFocus[this.realIndex][slideFocus[this.realIndex].length - 1].focus();
					focusOut = true;
					};
			},

			// "slideChangeTransitionStart"와 동일하지만 "뒤로" 방향 전용
			slidePrevTransitionStart: function() {
				// 키보드 탭 버튼으로 인한 슬라이드 변경 시 동작
				if (focusOut) {
					slideFocus[this.realIndex][0].focus();
					focusOut = true;
				};
			},
		},
	});

• DOM 속성 추가
  setAttribute(’속성 이름’, ‘속성 값’);

프로젝트에서의 오류

🚨 프로젝트의 경우, 동적으로 swiper관련 class가 추가되어야 하는데 안되고 있다.. 🚨

1. 스크립트, css 파일 로드가 안 되었나?
   → 개발자 도구를 통해 확인해보면 script, css 파일, 라이브러리등이 다 올라와 있는 걸 확인할 수 있다.

2. DOM 로드 확인 → Swiper JS를 초기화하는 JS코드가 DOM이 로드 된 후 실행되도록 → 작동안함

   document.addEventListener('DOMContentLoaded', function() {
     // 여기에 Swiper 초기화 코드 작성
   });

gpt한테 물어보니 Angular 컴포넌트 탬플릿의 경우, Angular 컴파일러에 의해 처리되고 동작된다. 컴파일러는 템플릿의 HTML을 분석하고 Angular 컴포넌트와 관련된 로직을 생성한 다음 실행 가능한 JS코드로 변환한다. 이 과정에서 ‘script’태그 안의 코드는 단순히 텍스트로 처리되고 실행되지 않는다…

→ Angular 컴파일러가 걍 무시해버렸기 때문에 swiper 관련 이벤트나 모든 것이 안먹힐 수밖에……

해결 방법

angular component 클래스 내부에서 TS코드를 작성하고 해당 로직을 처리해야 한다!

ngAfterViewInit()은 Angular의 lifecycle hook 중 하나로 Angular의 컴포넌트의 뷰와 관련된 초기화 작업 시점에 사용자 정의 로직을 수행하는데 유용하다.

• 외부 라이브러리와의 통합 : 외부 라이브러리(ex. Swiper JS)를 사용하여 컴포넌트의 뷰를 초기화하고 설정할 때, 사용 가능
• DOM 조작 : 컴포넌트 뷰가 초기화 된 후에 DOM 요소를 참조하고 조작해야 할 때 사용 가능. 예를 들어, 특정 DOM 요소에 이벤트 리스너를 추가하거나 DOM 요소의 속성을 변경하는 등의 작업을 수행할 수 있다.
• ViewChild 및 ContentChild 설정 : ‘@ViewChild’를 사용해서 템플릿의 자식 요소에 접근하거나, ‘@ContentChild’를 사용하여 프로젝션된 컨텐츠에 접근하는 작업을 이 함수 안에서 작성할 수 있다.

현재, pagination빼고는

css 적용 & 왼쪽, 오른쪽 스크롤 액션은 잘 작동하는 걸 확인할 수 있다 !