close
프로필 배경
프로필 로고

dalsu

TIL(Today I Learn) · 2024. 7. 25. fullscreen 넓게보기

[데브코스 FE] 2주차 첫번째 수업 2024/07/22

2주차 월요일 수업에서는 

피그마로 제시해준 템플릿의 클론코딩을 해보았다.

 

이제 클론코딩을 실습때 진행해보니

레이아웃 잡는 것, 가상요소로 아이콘이나 배경이미지 배치하는 법 등은 방법을 터득한 것 같다.

 

그렇지만 아직까지 css 코드 작성 요령이나 

라이브러리를 활용하는 것 등이 미숙한 것 같다.

 

이번 수업에서는 'swiper'라는 라이브러리를 이용하여

카드가 한 장씩 넘어가도록 만드는 것을 배웠다.

또한 지금까지 미숙했던 라이브러리 요소에 커스텀 스타일 입히는 방법도 알아가게 되었다.

 

이번엔 swiper 적용을 중심으로 내용을

따로 정리해보고자 한다.

 

학습내용

  1. swiper 간단 사용법
  2. swiper에 커스텀 스타일 입히기
  3. swiper 사용시 tip
  4. 수업 때 질문들 Q&A

1. swiper 간단 사용법

https://swiperjs.com/demos

 

Swiper Demos

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

swiper는 카드나 사진들을 넘겨볼 수 있도록 해주는 라이브러리이다.

그래서 우리가 swiper를 활용하면 JS와 css를 한땀한땀 코딩하지 않고도

swiper에서 제공하는 것들을 이용하여 카드 넘기기를 구현할 수 있다.

 

홈페이지에 들어가면, 예시와 함께 코드소스를 볼 수 있다.

 

우리 실습에서는 아직까지 react나 vue를 사용하지 않은

순수 html 환경에서 코딩하기때문에

codeSandbox에서 'Core'를 클릭하여 소스코드를 가지고왔다.

 

React나 Vue 환경에서 사용한다면

각 환경의 codeSandbox 를 클릭하면 사용할 수 있는 코드가 나올것이다.

 

<html>파일에서 작업할거면 소스코드에서 다음의 코드들을 가지고 온다.

 

1. 외부 css 파일

<head>
<!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 </head>

 

2. swiper html 코드 & script (JS)코드

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

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

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>
</body>

 

이때 swiper에서 제공하는 코드들의 class 이름들과 상속구조는

되도록 변경해주지 않는 것이 좋다.

기능이 제대로 작동하지 않거나 나중에 css(style)이 틀어질 수 있기 때문이다. 

 

하지만, 바꿀 수 있는 것들이 있다!

<script>나 class명 뒤쪽을 보면, ".mySwiper" ~~ 처럼 my로 시작하는 이름은

사용자 마음대로 이름을 커스텀할 수 있다는 뜻이다.

 

그래서 나는 다음과 같이 swiper의 이름을 'myList'로,

pagination의 이름을 'pgList'로 바꾸어 주었다.

<div class="swiper myList">
  ...
  <div class="swiper-pagination pgList"></div>
</div>
var swiper = new Swiper(".myList", { // swiper 이름 변경
  slidesPerView: 4,
  spaceBetween: 30,
  centeredSlides: true,
  pagination: {
    el: ".pgList", // pagination 이름 변경
    clickable: true,
  },

});

 

굳이 있는 이름 쓰지 왜바꾸냐? 할 수도 있는데

 

1. 프로젝트에서 사용하는 여러 라이브러리와 컴포넌트들의 이름이 비슷하거나 동일할 경우, 혼란을 피할 수 있다.

2. 다른 라이브러리나 코드와의 네임스페이스 충돌을 피할 수 있다.

 

이 2가지의 이유로 커스텀 이름을 달아준다.

class명의 앞에있는 기본 이름(swiper- xxx 등)을 바꿔주는 것이 아닌

2번째 이름부터 바꾸어주는 것이 핵심!

 

2. swiper에  커스텀 스타일 입히기

swiper에서 기본으로 제공하는 css style말고도

디자이너가 요구하는 style 등

커스텀 스타일을 입힐 수 있다.

 

너비,높이 이런 기본적인 변경사항 제외하고

내가 클론코딩하면서 커스텀 스타일을 작업한 곳은 2가지가 있다.

 

1. swiper를 돌리면서 가운데 오는 요소에 highlight 스타일 입히는 것과

2. pagination의 스타일을 예쁜 색으로 입히는 것

 

이렇게 2가지를 작업하였다.

 

1. swiper를 돌리면서 가운데 오는 요소에 highlight 스타일 입히기

 

swiper에서 가운데 오는 요소를 'active'된 요소라고 한다.

이는 개발자 도구로 가운데 오는 요소의 class 이름을 보았을때 확인할 수 있다.

 

이를 참고하여 css 선택자로 active상태일때의 커스텀 스타일링을 입혀준다.

.swiper-slide.swiper-slide-active { // 배경색과 위치 변경
  border: 1.5px solid var(--Gradient-Primary-bg, #f76680);
  transform: translateY(20px);
}
.swiper-slide.swiper-slide-active h3 { // 글씨색 변경
  color: #f76680;
}

 

2. pagination의 스타일을 예쁜 색으로 입히는 것

 

이것도 1. 과 동일한 방법을 적용한다.

 

active되는 pagination 요소의 클래스이름을 확인하고,

css 선택자로 스타일을 입혀준다.

 

만약에!! 확인해서 스타일 입혔는데 적용이 안된다?

1. !important를 이용하여 우선적용해주기

2. css 선택자 점수를 높여주기(선택자를 더 자세히 적기)

 

1. 같은경우 임시방편이라 다른 스타일을 위해 되도록 피해주는 것이 좋고,

2. 같은 경우 부모 선택자들을 더 추가해서 작성해주면 된다.

 

.swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1.5px solid var(--Gray-gray-600, #959ca4);
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(
    --Gradient-Primary-bg,
    linear-gradient(225deg, #f76680 0%, #57007b 100%)
  );
  border: none;
}

 

3. swiper 사용시 tip 

수업시간에 잠깐잠깐 알려주신 swiper나 라이브러리 사용 tip 몇가지가 있었다.

 

1. swiper등 제공되는 기본적 요소에는 사이에 다른 요소 끼워놓지 않기

 

기본 구조(뼈대)나 상속구조가 틀어지면 swiper의 기능이나 스타일이 제대로 작동하지 않을 수 있다.

상속 구조는 건드리지 않기!

 

2. js 소스(<script>)는 따로 빼서 .js 파일로 관리하기

 

html 파일안에 <sciprt></script> 형식으로 작성해도 되지만,

가독성이 떨어지므로

따로 js 파일로 관리하여 한 번에 관리해주는 것이 좋다!

유지보수하기도 편리하고~~..

 

3. 반응형 swiper

 

검색창에 'responsive' 치면 반응형이 적용된 swiper 소스도 볼 수 있다!

적용방법은 의외로 간단하다.

<script> 의 swiper 부분에 breakpoints 부분을 추가해주면 된다.

var swiper = new Swiper(".myList", {
  ...
  breakpoints: {
    400: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    640: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    1024: {
      slidesPerView: 5,
      spaceBetween: 40,
    },
    1200: {
      slidesPerView: 7,
      spaceBetween: 50,
    },
  },
});

 

4. 수업때 Q&A 

Q: var(--swiper-pagination-top, auto) 는 무슨 의미 인가요? 

더보기

A: -swiper-pagination-top이라는 변수가 설정돼 있으면 해당 값을 사용하고,--swiper-pagination-top 변수가 설정돼 있지 않거나 비어 있으면 대체값으로 auto를 사용하라는 뜻입니다.즉, 기본값을 지정할 때 위와 같이 사용합니다.

Q: 라이브러리를 다양하게 이것저것 많이사용하면 성능에 영향을 미치나요?

더보기

A: 많은 라이브러리를 사용하면 전체 번들 크기가 커지므로, 페이지 로드 속도가 느려질 수 있습니다. 불필요한 리렌더링 및 복잡한 상태관리, 네트워크 요청 증가로 인해 렌더링 성능이 느려질 수 있습니다. 또한 외부 라이브러리에 의존하면 보안 취약이나 문제 노출에 취약해집니다.

Q: 현재 Figma를 이용하여 디자인 템플릿을 보고있는데, 일반적인 페이지 개발은 보통 어떻게 이루어지나요? 

또, 디자이너와 어떤 내용을 의논하나요?

더보기

A: 일반적인 페이지 개발은 모두 Figma(디자인) 를 기준으로 이뤄집니다.

디자이너와 보통 얘기 하는 내용은

  1. 특정 요소간의 간격을 고정할 것인지? (화면 크기 바껴도 그대로 유지)
  2. 특정 요소간의 간격을 화면 크기에 따라 간격을 유동적으로 할건지?
  3. 특정 요소를 중앙 고정으로 할건지?
  4. 디자이너가 원하는 슬라이드 형식이나 에니메이션 효과 구현가능한지?
  5. 개발 마감시한에 구현이 가능할지?
  6. 마감 시한 고려해서 불필요한 요소를 뺄지??

등등을 디자이너랑 의논합니다.

첫주차가 지나고 두번째 주차가 빠르게 다가온 것 같다.

아직까지는 클론코딩위주로 웹퍼블리싱 기본기를 탄탄히 하고 있는 단계에 있는것 같다.

 

지금까지 진행했던 프로젝트에서 많이 미숙했던 부분을

오늘 수업에서 많이 메꿀 수 있었다.

라이브러리를 가져오는 것은 많이 해봤지만 커스텀 스타일을 입히는 것... 등등..

 

어제의 나보다 오늘의 내가 더 발전하자는 마음가짐으로 요즘 수업도 듣고, 복습도 하고 있다.

typescript공부도 어서 마무리하고 next.js 공부도 해보아야겠다.

 

 

'TIL(Today I Learn)' 카테고리의 다른 글

[데브코스 FE] 2주차 세번째 수업 2024/07/24  (0) 2024.07.27
[데브코스 FE] 2주차 두번째 수업 2024/07/23  (0) 2024.07.26
[데브코스 FE] 1주차 네번째 수업 2024/07/19  (3) 2024.07.24
[데브코스 FE] 1주차 세번째 수업 2024/07/18  (2) 2024.07.22
[데브코스 FE] 1주차 두번째 수업 2024/07/17  (3) 2024.07.21
TIL(Today I Learn) 관련 글
더 보기

티스토리툴바