쭐코딩

자바스크립트 Throttle(스로틀)과 Debounce(디바운스)의 개념과 차이점!

다쭐◠‿◠ — Fri, 8 Nov 2024 16:16:22 +0900

오늘은 자바스크립트에서 이벤트 핸들링을 최적화하기 위해 많이 사용하는 개념인

Debounce와 Throttle에 대해 알아볼 것이다.

최적화 필요성

자바스크립트에서 이벤트 핸들링을 최적화하는 이유는 성능과 사용자 경험을 개선하기 위해 필요하다.

특히, 사용자가 반복해서 발생시키는 이벤트(예: 스크롤, 리사이즈, 입력 등)는 자칫 성능 저하를 유발할 수 있기 때문에..

Throttle

목적: 특정 함수가 호출되는 빈도를 제한하여 자원 소모를 줄이기 위해 사용된다.
동작 원리: 함수를 일정 시간 간격(예: 1000ms, 1초)으로만 실행되도록 제한한다. 이 간격 동안에는 함수를 한 번만 실행하고, 그 후에 다시 호출할 수 있다.

throttle은 이벤트 핸들링, API 호출 등의 상황에서 쓰일 수 있다.

throttle을 사용하는 방법은 2가지가 있는데 첫 번째는 직접 함수를 작성하는 방법과 "Lodash"라는 라이브러리를 사용하는 방법이 있다.

codepen으로 확인하고 다른 예제로도 살펴보자.

See the Pen Throttle 예제 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.

직접 throttle 함수 작성하는 방법

function throttle(func, delay) {
  let lastTime = 0; // 마지막 함수 호출 시간을 저장

  return function (...args) {
    const now = new Date().getTime(); // 현재 시간

    if (now - lastTime >= delay) { // 설정한 시간 간격이 지난 후에만 함수 실행
      func.apply(this, args); // 주어진 함수 실행
      lastTime = now; // 마지막 호출 시간을 갱신
    }
  };
}

// 사용 예제
const log = () => console.log("버튼 클릭!");

const throttledLog = throttle(log, 1000); // 1초에 한 번만 호출되도록 제한

document.getElementById("myButton").addEventListener("click", throttledLog);

Lodash 라이브러리를 사용한 방법

<!-- Lodash CDN 링크 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<script>
  // 사용 예제
  const log = () => console.log("버튼 클릭!");

  const throttledLog = _.throttle(log, 1000); // 1초에 한 번만 호출되도록 제한

  document.getElementById("myButton").addEventListener("click", throttledLog);
</script>

두 가지 각각 장단점이 있는데,

직접 구현할 경우 라이브러리 의존성을 줄이고, 커스터마이징을 원할 때 유용하고

Lodash는 이미 최적화된 throttle 기능을 제공하므로, 시간과 성능, 코드를 절약하고 싶을 때 사용하기 좋다.

Debounce

목적: 빈번하게 발생하는 이벤트에 대해 불필요한 처리를 방지하고, 성능을 최적화하는 것
동작 원리: 이벤트가 발생할 때마다 타이머를 설정하고, 일정 시간이 지나기 전에 또 다른 이벤트가 발생하면 기존 타이머를 취소하는 방식

Debounce는 실시간 검색, 창 크기 조정, 스크롤 이벤트, 입력 유효성 검사, 검색 필터링 등의 상황에서 쓰일 수 있다.

Debounce을 사용하는 방법은 2가지가 있는데 첫 번째는 직접 함수를 작성하는 방법과 "Lodash"라는 라이브러리를 사용하는 방법이 있다.

See the Pen Debounce 예제 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.

직접 Debounce 함수 작성하는 방법

// debounce 함수 직접 구현
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer); // 이전 타이머 취소
    timer = setTimeout(() => func.apply(this, args), delay); // 새로운 타이머 설정
  };
}

// 검색 처리 함수
function search(query) {
  const results = document.getElementById('searchResults');
  results.innerHTML = query ? `<li>검색 결과: ${query}</li>` : '';
}

// debounce 적용 (1초 지연)
const debouncedSearch = debounce(search, 1000);

// 검색창 이벤트 처리
document.getElementById('searchInput').addEventListener('input', (e) => {
  debouncedSearch(e.target.value); // 1초 후에만 실행
});

직접 Debounce 함수 작성하는 방법

// 검색 처리 함수
function search(query) {
  const results = document.getElementById('searchResults');
  results.innerHTML = query ? `<li>검색 결과: ${query}</li>` : '';
}

// Lodash debounce 적용 (1초 지연)
const debouncedSearch = _.debounce(search, 1000);

// 검색창 이벤트 처리
document.getElementById('searchInput').addEventListener('input', (e) => {
  debouncedSearch(e.target.value); // 1초 후에만 실행
});

Throttle과 Debounce의 차이?

Throttle: 일정 시간 간격으로 이벤트를 실행 (주기적).
Debounce: 마지막 이벤트가 발생한 후 일정 시간 대기 후 실행 (마지막만 실행).

Throttle과 Debounce 둘 중 상황에 맞게 사용하면 될 것 같다!

split-type, gsap를 활용해 텍스트 효과 구현해보기!

다쭐◠‿◠ — Thu, 7 Nov 2024 16:09:36 +0900

gsap에서 제공되는 split text라는 기능이 있다.

하지만 그건 유료이기 때문에 split-type이라는 무료 플러그인을 사용해서 글자 쪼개기,

gsap를 활용해 애니메이션까지 구현해 볼 예정!

See the Pen Split-type, GSAP 활용한 텍스트 효과 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.

활용한 플러그인

<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

split-type과 gsap 플러그인 연결해주어야 한다.

로컬 파일로 저장해서 연결해도 ok

HTML 구조

<section>
  <button onclick="playBtn()">Play Split Text!</button>
  <p class="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nostrum
    distinctio ad quo natus et animi facere suscipit fuga sed rem aliquam
    exercitationem possimus non, ab enim illo dolore officia molestiae?
    Eligendi doloribus voluptatibus in necessitatibus, porro corrupti fugiat
    recusandae esse, provident ducimus ab iure ratione tenetur eius magni
    accusantium temporibus incidunt magnam nesciunt ipsa molestiae placeat
    facilis excepturi? Beatae reiciendis saepe eligendi quas est fugiat
    repellat. Nisi, earum quod non dignissimos eaque reprehenderit fugiat
    culpa corporis illum ullam error id totam, qui doloribus, quibusdam
    ipsam eum! Odit, incidunt, quos id ipsam inventore qui molestias facere
    pariatur perferendis unde beatae!
  </p>
</section>

간단하게 section 안에 p태그를 작성해 로렌입숨 작성~

text라는 class를 붙여주었다.

그리고 난 버튼을 누르면 애니메이션이 재생되도록 button태그와 onclick속성을 사용함.

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
    margin: 0;
    padding: 0;
}
body {
    overflow-x: hidden;
    font-family: "Roboto";
}
section {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 50px 0;
    align-items: center;
    justify-content: center;
}
section p {
    word-break: keep-all;
    padding: 0 30px;
    line-height: 30px;
    font-size: 22px;
}
button {
    border: 1px solid #000;
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    cursor: pointer;
}

//   overflow: hidden;
.line {
    display: inline-block;
    overflow: hidden;
}

딱히 css부분은 설명할 부분은 없지만,

신경써야할 부분이 있다.

바로 .line 부분인데 일단 스크립트 설명이 필요하다.

스크립트

function playBtn() {
  let typeSplit = new SplitType(".text", {
    types: "lines, words, chars",
    tagName: "span",
  });

  gsap.from(".text .word", {
    y: "100%",
    opacity: 1,
    duration: 0.3,
    ease: "circ.out",
    stagger: 0.1,
  });
}

글자 쪼개기

Split-type은 텍스트를 줄(lines), 단어(words), 그리고 글자(chars) 단위로 나누는 라이브러리이다.

new SplitType(".text", {...})는 .text 클래스를 가진 요소 내의 텍스트를 각 줄, 단어, 글자 단위로 분리한다.
tagName: "span" 옵션을 설정하면 각 줄, 단어, 글자가 <span> 태그로 감싸진다. 이 태그는 이후 애니메이션에서 각 텍스트 요소를 선택할 수 있게 해주는데, span이 아니고 다른 태그로 감싸기 가능(em, p, div 등등등..)

GSAP 애니메이션 주기

gsap.from(...)는 애니메이션이 시작할 때의 상태를 설정하는 메서드. 여기서는 ".text .word" 선택자를 통해 .text 요소 내의 각 단어(.word 클래스로 감싸진 요소들)에 애니메이션을 적용
y: "100%"는 각 단어가 애니메이션 시작 시 아래쪽으로 100% 위치에서 시작하도록 설정. 즉, 텍스트가 아래에서 위로 올라오는 효과가 나타난다.
opacity: 1은 각 단어가 애니메이션 시작 시 불투명도가 1로 설정되어 있으며(투명도가 없도록 설정), 이를 통해 부드러운 전환 효과가 난다.
ease: "circ.out"은 애니메이션의 속도 곡선을 정의하는데, circ.out은 빠르게 시작했다가 천천히 끝나는 원형의 속도 곡선으로, 자연스러운 움직임을 만든다. (다른 ease 효과도 많으니 참고!). https://gsap.com/docs/v3/Eases/
stagger: 0.1은 각 단어가 0.1초 간격으로 순차적으로 애니메이션되도록 하여 하나씩 등장하는 효과를 준다.

해당 구조를 살펴보면

text 안에 line,

line 안에 word,

word 안에 char가 있는 걸 확인할 수 있다!

.line에 overflow: hidden을 준 이유?

.line 요소에 overflow: hidden을 설정한 이유는 텍스트 애니메이션이 이동할 때 불필요하게 보이는 부분을 숨기기 위해서이다. 아래에서 위로 이동하는 애니메이션 중 텍스트가 화면 밖에 있는 동안 보이지 않게 하는 역할을 한다. word를 line이 감싸고 있기 때문에 .line에다 해당 속성을 준 것이다.

또한 span태그는 inline요소기 때문에 inline-block을 적용해 주어야한다. (태그에 따라 다르므로 참고.)

밑 예제는 overflow: hidden을 적용 시키지 않았을 때의 예제!

See the Pen test by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.

전체코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
      * {
        margin: 0;
        padding: 0;
      }
      body {
        overflow-x: hidden;
        font-family: "Roboto";
      }
      section {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 50px 0;
        align-items: center;
        justify-content: center;
      }
      section p {
        word-break: keep-all;
        padding: 0 30px;
        line-height: 30px;
        font-size: 22px;
      }
      .line {
        display: inline-block;
        overflow: hidden;
      }
      button {
        border: 1px solid #000;
        background: #fff;
        padding: 10px;
        border-radius: 20px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <section>
      <button onclick="playBtn()">Play Split Text!</button>
      <p class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nostrum
        distinctio ad quo natus et animi facere suscipit fuga sed rem aliquam
        exercitationem possimus non, ab enim illo dolore officia molestiae?
        Eligendi doloribus voluptatibus in necessitatibus, porro corrupti fugiat
        recusandae esse, provident ducimus ab iure ratione tenetur eius magni
        accusantium temporibus incidunt magnam nesciunt ipsa molestiae placeat
        facilis excepturi? Beatae reiciendis saepe eligendi quas est fugiat
        repellat. Nisi, earum quod non dignissimos eaque reprehenderit fugiat
        culpa corporis illum ullam error id totam, qui doloribus, quibusdam
        ipsam eum! Odit, incidunt, quos id ipsam inventore qui molestias facere
        pariatur perferendis unde beatae!
      </p>
    </section>
  </body>
  <script src="https://unpkg.com/split-type"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

  <script>
    function playBtn() {
      let typeSplit = new SplitType(".text", {
        types: "lines, words, chars",
        tagName: "span",
      });

      gsap.from(".text .word", {
        y: "100%",
        opacity: 1,
        duration: 0.3,
        ease: "circ.out",
        stagger: 0.1,
      });
    }
  </script>
</html>

해당 기능을 통해 스크롤 트리거까지 활용하면 훨씬 더 고급스러운 효과를 표현할 수 있다!

[GSAP] 스크롤에 따른 배경 트랜지션 효과 구현해보기

다쭐◠‿◠ — Fri, 25 Oct 2024 17:49:35 +0900

오늘은 GSAP(ScrollTrigger)와 Lenis 라이브러리를 써서 스크롤에 따라 반응하는 애니메이션을 만들어보았다

사용 라이브러리 (플러그인)

- GSAP

- ScrollTrigger(GSAP에서 제공하는 또다른 플러긘)

- Lenis (부드러운 스크롤 제공)

완성작

See the Pen GSAP image transition by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.

HTML 구조

<section>
  <!-- 이미지 영역 -->
  <div class='img_area'>
    <img src='https://images.unsplash.com/photo-1607798748738-b15c40d33d57?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
    <img src='https://images.unsplash.com/photo-1624377632657-3902bfd35958?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
    <img src='https://images.unsplash.com/photo-1607706189992-eae578626c86?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'>
  </div>
  
  <!-- 텍스트 영역 -->
  <div class='txt_area'>
    <ul class='txt_container'>
      <li>GSAP</li>
      <li> ScrollTrigger</li>
      <li>SmoothScroll</li>
    </ul>
  </div>
</section>

이미지 영역과 텍스트 영역을 나눠준다.

CSS

section {width: 100%; overflow-x: hidden;}

.img_area {width: 100%;}
.img_area img {width: 100%; height: 100vh; object-fit: cover; position: absolute; left: 0; top: 0;}

.txt_area {position: relative; }
.txt_area .txt_container {text-align: center; color: #fff; font-size: 3rem;}
.txt_area .txt_container li {height: 100vh; display: flex; align-items: center; justify-content: center;}

여기서 중요한 점은 img_area에 있는 이미지들을 absolute로 주어 3장 다 고정시켜주어야 한다.

텍스트는 높이를 100vh로 잡아놓은 뒤 화면 가운데에 배치하기 위해 flex,와 content, items요소들을 center로 잡는다.

txt_area에 position: relative를 준 이유는 img_area를 고정시켰기 때문.

스크립트 주소 연동

<script src='https://unpkg.com/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script src='https://unpkg.com/lenis@1.1.14/dist/lenis.min.js'></script>

사용할 스크립트 주소를 적어 연동한다.

순서대로

GSAP -> ScrollTrigger -> Lenis

스크립트 작성

// Lenis 초기화
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smooth: true,
});

const raf = (time) => {
  lenis.raf(time);
  requestAnimationFrame(raf);
};
requestAnimationFrame(raf);

일단 부드러운 스크롤 먼저 적용 시켜보자.

Lenis 초기화

duration: 스크롤 애니메이션의 지속 시간을 설정. 여기서는 1.2초로 설정
easing: 스크롤 애니메이션의 속도 곡선을 정의하는 함수. 여기서 사용된 함수는 타임(t) 값을 입력받아 0에서 1까지의 값을 출력하는데, 이 방식은 부드러운 시작과 끝을 만들기 위해 비선형적인 애니메이션 효과를 제공.
smooth: 이 속성이 true로 설정되면 부드러운 스크롤 효과를 활성화.

애니메이션 프레임 요청

raf: 이 함수는 requestAnimationFrame을 사용하여 Lenis의 스크롤 메커니즘을 매 프레임마다 업데이트함. time 매개변수는 현재 시간의 타임스탬프를 나타냄.
lenis.raf(time): 이 호출은 Lenis의 내부 애니메이션 로직을 업데이트.
requestAnimationFrame(raf): 이 함수는 다음 프레임에 raf 함수를 다시 호출하도록 요청. 이렇게 하여 부드러운 애니메이션 효과를 지속적으로 유지한다.

// 이미지 초기 설정
const images = document.querySelectorAll('.img_area img'); // querySelectorAll로 모든 이미지 가져와서 변수에 저장
gsap.set(images, { zIndex: 0, opacity: 0 }); // 모든 이미지의 z-index값과 opacity를 0으로 설정
gsap.set(images[0], { opacity: 1, zIndex: 1 }); // 첫 번째 이미지만 보이게 설정

// GSAP ScrollTrigger 설정
gsap.registerPlugin(ScrollTrigger);
const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: ".img_area",
    start: "top top",
    end: "bottom bottom",
    endTrigger: '.txt_container',
    scrub: true,
    pin: true,
    pinSpacing: false,
    onEnter: () => {
      gsap.to(images[0], { opacity: 1, zIndex: 1, duration: 0.7 }); // 페이지 로드 시 첫 번째 이미지 보이기
    }
  },
});

// 각 텍스트 항목에 대한 ScrollTrigger 생성
gsap.utils.toArray('.txt_container li').forEach((li, index) => {
    ScrollTrigger.create({
        trigger: li,
        start: 'top 80%',
        end: 'bottom top',
        onEnter: () => {
            gsap.to(images[index], { opacity: 1, zIndex: 1, duration: 0.7 });
        },
        onLeaveBack: () => {
            gsap.to(images[index], { opacity: 0, zIndex: 0, duration: 0.7 });
        },
        markers: true,
    });
});

맨 처음 이미지 초기 설정을 해야한다.

이미지 초기 설정

이미지 선택: .img_area 클래스 아래의 모든 이미지 요소를 선택하여 images 변수에 저장.
초기 스타일 설정: 모든 이미지의 zIndex와 opacity를 0으로 설정하여 처음에는 보이지 않도록 한다.
첫 번째 이미지 설정: 첫 번째 이미지만 opacity를 1로 설정하여 보이도록 하고, zIndex를 1로 설정하여 다른 이미지보다 위에 표시되도록 한다.

이미지 고정하는 ScrollTrigger Pin 효과 생성

ScrollTrigger 등록: GSAP의 ScrollTrigger 플러그인을 등록 함.
타임라인 생성: GSAP의 타임라인을 생성하고, 스크롤과 관련된 애니메이션을 설정함.

옵션 부가 설명 보기

trigger: 스크롤을 감지할 요소입니다. 여기서는 .img_area를 지정했습니다.
start: 스크롤의 시작 위치를 정의합니다. 여기서는 .img_area의 최상단이 뷰포트의 최상단에 도달할 때 시작합니다.
end: 스크롤의 끝 위치를 정의합니다. 여기서는 .img_area의 하단이 뷰포트의 하단에 도달할 때 종료합니다.
endTrigger: 끝 위치를 결정하는 다른 요소를 지정합니다. 여기서는 .txt_container를 사용합니다.
scrub: true로 설정하면 스크롤에 따라 애니메이션의 진행이 동기화됩니다.
pin: true로 설정하면 해당 요소를 고정(pinning)하여 스크롤 중에도 화면에 고정됩니다.
pinSpacing: false로 설정하면 핀 고정 시 추가 공간을 차지하지 않게 합니다.
onEnter: 스크롤이 시작될 때 첫 번째 이미지를 보이도록 애니메이션을 설정합니다.

각 텍스트 항목에 대한 ScrollTrigger 생성

텍스트 항목 선택: .txt_container 내의 모든 <li> 요소를 배열로 변환하여 각각의 텍스트 항목에 대해 반복.
ScrollTrigger 생성: 각 텍스트 항목에 대해 ScrollTrigger를 생성하여 스크롤과 관련된 애니메이션을 설정.

옵션 부가 설명 보기

trigger: 현재 <li> 요소를 스크롤 트리거로 설정합니다.
start: 해당 요소의 최상단이 뷰포트의 80% 지점에 도달할 때 애니메이션이 시작됩니다.
end: 해당 요소의 하단이 뷰포트의 최상단에 도달할 때 애니메이션이 종료됩니다.
onEnter: 해당 텍스트 항목이 뷰포트에 들어오면 해당 인덱스의 이미지를 보이도록 애니메이션을 설정합니다.
onLeaveBack: 해당 텍스트 항목이 뷰포트를 벗어나면 해당 인덱스의 이미지를 숨기도록 애니메이션을 설정합니다.
markers: true로 설정하면 디버깅을 위해 스크롤 트리거의 시작과 끝 지점을 화면에 표시합니다.

알리고 알람톡 보내기

다쭐◠‿◠ — Mon, 14 Oct 2024 14:13:03 +0900

알리고로 알람톡 보내려면 카카오 채널을 만들어야하고 비즈니스로 등록하려면 사업자 등록증이 필요하다.

api키 발급받는 것까진 공식 문서 정독을 추천한다(한국어니까)

https://smartsms.aligo.in/

알리고

알리고 - 국내 최저가 문자발송 알리고 문자, 단문8.4원 장문25원 그림60원 알리고 대량문자/단체문자/문자사이트/문자발송

smartsms.aligo.in:443

https://smartsms.aligo.in/aligoxkakao.html

알리고

알리고 - 국내 최저가 문자발송 알리고 문자, 단문8.4원 장문25원 그림60원 알리고 대량문자/단체문자/문자사이트/문자발송

smartsms.aligo.in:443

https://smartsms.aligo.in/alimapi.html

알리고

알리고 - 국내 최저가 문자발송 알리고 문자, 단문8.4원 장문25원 그림60원 알리고 대량문자/단체문자/문자사이트/문자발송

smartsms.aligo.in:443

알림톡 보내기 전 사용자 인증(토큰 발급)을 해야 알림톡을 보낼 수 있음

코드

<script>
  // 토큰 발급 함수
  function getToken() {
    let getTokenData = {
      'apikey' : '알리고 API KEY', 
      'userid' : '알리고 계정 ID'
    }
    
    // ajax로 비동기 통신
    $.ajax({
      // 토큰 발급하는 api url
      url : 'https://kakaoapi.aligo.in/akv10/token/create/30/s',
      data : getTokenData,
      type : 'post',
      success : function(result) {
        // result에서 나온 토큰을 변수 token에 저장
        let token = result.token;
        // sendMassage 함수에 매개변수로 token 전달해줌
        sendMessage(token);
      }
    });
  }
  
  // 알림톡 보내는 함수
  function sendMessage(token) {
    // 객체로 보냄
    let sendAlimTalkData = {
      'apikey' : '알리고 APIKEY',
      'userid' : '알리고 ID',
      'token' : token,// 매개변수로 받은 token
      'senderkey' : '알리고 senderkey(지급해줌)',
      'tpl_code' : '템플릿 코드', // 템플릿 생성하면 코드 알려줌 
      'sender' : '발신자 연락처', //발신자 연락처 따로 설정해야함
      'receiver_1' : '수신자 연락처', //php로 값을 받아와 변수에 지정 후 넣어줌 <?= $reciver ?> 이런식으로
      'subject_1' : '템플릿 제목', // 발송된 템플릿 제목 정확히 기입
      'message_1' : "발송될 템플릿 내용", // 발송될 템플릿 내용을 정규식으로 적어야함(띄어쓰기, 기호 등등. GPT에 물어보면 정규식까지 작성해줌)
      'message_2' : "발송될 템플릿 내용2", // 발송될 템플릿 내용2
        
      // 버튼 있을 시(옵션)
      'button_1' : '{"button" : [{"name":"버튼 이름", "linkType":"WL", "linkP" : "이동할 링크", "linkM": "이동할 링크"}]}' //발송될 템플릿 버튼 내용
    };
	  
    // ajax로 비동기 통신
    $.ajax({
      // 알람톡 보내는 api url
      url : 'https://kakaoapi.aligo.in/akv10/alimtalk/send',
      data : sendAlimTalkData, // 알림톡 데이터(객체)
      type : 'post',
      success : function(result) {
        // 성공시 디버깅
        console.log(result.code);
        console.log(result.message);
      }
    });
  }
	
  // 토큰 얻는 함수부터 실행해줌 
  getToken();
</script>

참고 - https://blog.naver.com/jeongkey3317/222942775688

https://blog.naver.com/dev-blackcat/222262387331

맥 전용 에디터 Nova로 FTP 연결해보기(노바 에디터, 구 코다)

다쭐◠‿◠ — Fri, 4 Oct 2024 18:20:03 +0900

맥으로 갈아탄 기념으루 ^.^

Nova FTP연결하는 방법을 기록해보려한다.

근데 Nova 에디터 사용하는 사람이 별로 없어서 그런지.. 구글링해도 잘 안 나온다.

이렇게 한 번 연결해놓으면 편하게 관리할 수 있당.

1. 프로젝트 추가

[Add Project] 클릭 후 -> [Add Remote Prject] 클릭

[Project Name]에 프로젝트명 쓰고 + 버튼 클릭

~~+이제 안 사실인데 굳이 안 적어도 되는듯 ?~~

2. FTP 정보 기입

3. 프로젝트 연결

추가하면 다시 이 화면으로 돌아오는데

추가한 프로젝트가 리스트처럼 뜬다.

그 상태로 해당 항목을 더블 클릭하면 이런식으로 바로 접속할 수 있게끔 뜬다.

노바 에디터 설정

툴바 상단에 Nova앱 위로 마우스 오버하면 Setting이 뜨는 걸 볼 수 있다.

단축키는 커맨드 + 쉼표

그럼 이런식으로 설정창이 나오는데

이 뒤로는 다른 에디터들과 비슷하므로 직접 확인하는게 더 빠를 것이다!

참고로 vscode처럼 extensions를 설치할 수 있는데

마찬가지로 상단 툴바를 확인해보면 Extensions를 확인할 수 있다.

단축키는 shift + 커맨드 + 2

여러 확장자들을 다운받고 적용할 수 있다.

나는 머터리얼 테마, 프리티어, 엠밋 정도 쓰고있다.

더 다양한 기능은 쓰면서 차차 알아가봐야할 것 같다.

퍼블리싱, 프론트엔드 개발시 유용한 링크모음

다쭐◠‿◠ — Fri, 6 Sep 2024 16:45:01 +0900

북마크 좀 정리할 겸..

기록용으로 적어둡니다~

꾸준히 추가할 예정

다들 줍줍하세요^//^

HTML

이미지맵(태그) 사이트 : https://www.image-map.net/

엠밋(단축어?) 사이트 : https://docs.emmet.io/cheat-sheet/

파비콘 사이트 : https://www.favicon-generator.org/

html 오류 체크 사이트 : https://validator.w3.org/

html 태그 정리 사이트 : https://www.w3schools.com/html/default.asp

폰트 어썸 사이트 : https://fontawesome.com/

무료 svg(아이콘) 사이트 : https://heroicons.com/

무료 svg(아이콘) 사이트 2 : https://ionicframework.com/

RemoveLineBreaks(줄바꿈 문자 제거 혹은 변환) 사이트 : https://removelinebreaks.net/

시멘틱 태그/중요한 태그 사이트(드림코딩) : https://youtu.be/T7h8O7dpJIg?si=0WYT7QdMZ91UyyGK

CSS

비율 계산기(aspect-ratio 속성 쓸 때 유용) : https://homzzang.com/ratio/

배경 그라디언트(속성) 사이트 : https://cssgradient.io/

css -> scss 변환 사이트 : https://css2sass.herokuapp.com/

눈누(웹폰트) 사이트 : https://noonnu.cc/

구글 폰트 사이트 : https://fonts.google.com/

pangrampangram(영문 이쁜 폰트) 사이트 : https://pangrampangram.com/

css 선택자 연습 사이트 : https://flukeout.github.io/

css 선택자 연습 사이트 2 : https://css-speedrun.netlify.app/

flex 속성 연습 사이트 : https://flexboxfroggy.com/#ko

css 배경 패턴 사이트 : https://bansal.io/pattern-css#grid

css 애니메이션 사이트 : https://animista.net/

css 레퍼런스 : https://wsss.tistory.com/

ui 효과 레퍼런스(버튼, 카드, 메뉴 등등등..) : https://stacksorted.com/buttons

ui 효과 레퍼런스 2 : https://navnav.co/

ui 효과 레퍼런스 3 : https://uiverse.io/

px -> rem 변환 사이트 : https://nekocalc.com/px-to-rem-converter

tailwind 템플릿 사이트 : https://www.tailwindawesome.com/

JS

모던 자바스크립트(이론정리) 사이트 : https://ko.javascript.info/

자바스크립트 자료구조 레포 : https://github.com/trekhleb/javascript-algorithms

json 검사 사이트 : https://kr.piliapp.com/json/validator/

초보자를 위한 자바스크립트 프로젝트 40가지 : https://www.freecodecamp.org/korean/news/javascript-projects-for-beginners/

webGL 레퍼런스 사이트 : https://wiss.tistory.com/

라이브러리

cdn 주소 모음 : https://cdnjs.com/

모바일 이미지맵 라이브러리 : https://github.com/stowball/jQuery-rwdImageMaps

라이트위젯(인스타그램 연동 라이브러리) : https://lightwidget.com/

부트스트랩 : https://getbootstrap.com/

코드 하이라이트 바꿔주는 라이브러리 : https://highlightjs.org/

swiper(쩰 유명한 슬라이드) : https://swiperjs.com/

slick(슬라이드) : https://kenwheeler.github.io/slick/

bxSlider(jquery 슬라이드) : https://bxslider.com/

gsap(쩰 유명한 애니메이션) : https://gsap.com/

ScrollReveal (스크롤 리빌효과) : https://scrollrevealjs.org/

lenis(부드러운 스크롤) : https://lenis.darkroom.engineering/

matter.js (물리엔진) : https://brm.io/matter-js/

디자인(레퍼런스)

gd웹 : https://www.gdweb.co.kr/main/

어워즈 (awwwards) : https://www.awwwards.com/

노트폴리오 : https://notefolio.net/

CSSDesignAwards : https://www.cssdesignawards.com/

코드롭(효과 위주) : https://tympanus.net/codrops/

코드펜(효과 위주) : https://codepen.io/

눈누(웹폰트) 사이트 : https://noonnu.cc/

구글 폰트 사이트 : https://fonts.google.com/

pangrampangram(영문 이쁜 폰트) 사이트 : https://pangrampangram.com/

mymind(색조합) : https://access.mymind.com/colors

color hunt (색조합) : https://colorhunt.co/

coolors (색조합) : https://coolors.co/

무료 이미지 : https://unsplash.com/ko

이미지 최적화 사이트(용량 줄여줌) : https://imagecompressor.com/ko/

개발 지식 블로그(사이트) or 개발자 커뮤니티

블로그 (혹은 사이트)

코딩하는디자이너 : https://usingu.co.kr/

코딩에브리바디(개념 정리 잘되어있음!) : https://codingeverybody.kr/

Inpa Dev(블로그) : https://inpa.tistory.com/

Light Dev(블로그) : https://light9639.tistory.com/

생활코딩(짱 유명한 개발자슨생님) : https://opentutorials.org/course/1

코딩애플(너무 재밌는 개발자슨생님/유튭채널도이씀) : https://codingapple.com/

디자인 키트 : https://www.designkits.co.kr/blog/

개발자 커뮤니티

커리어리 : https://careerly.co.kr/

OKKY : https://okky.kr/

요즘IT : https://yozm.wishket.com/magazine/

디스콰이엇 : https://disquiet.io/

벨로그(기술 블로그 플랫폼) : https://velog.io/

인프런 내 커뮤니티 : https://www.inflearn.com/community/questions

스택오버플로우 (해외 사이트) : https://stackoverflow.com/

sir 커뮤니티(주로 그누보드) : https://sir.kr/

그누스터디 커뮤니티 : https://gnustudy.com/

기타

깃허브 : https://github.com/

깃 명령어 연습 사이트 : https://learngitbranching.js.org/?locale=ko

인코딩 디코딩 사이트 : https://www.base64decode.org/ko/

도메인 dns 관리 : https://dnszi.com/

인프런(강의 사이트) : https://www.inflearn.com/

유데미(해외 강의 지분이 많은 사이트) : https://www.udemy.com/

노티콘 (노션에 귀여운 이모티콘 넣을 수 있음) 사이트 : https://noticon.tammolo.com/

vscode 추천 extensions(리액트개발자) : https://just-coding.tistory.com/1

netlify(무료로 배포할 수 있음) : https://www.netlify.com/

snippet generator(스니펫 생성) 사이트 : https://snippet-generator.app/

사파리 브라우저에서 폰트(글꼴) 적용

다쭐◠‿◠ — Fri, 26 Jul 2024 17:52:06 +0900

익숙한 크롬 브라우저에선 글꼴 적용이 잘 되는데...

항상 사파리 브라우저가 문제 ㅜㅜ

크로스 브라우징 생활화해야하는데 아직 쉽지 않다..

그러므로 사파리 브라우저에서 글꼴 적용하는 방법을 기록해보려한다.

보통은

html, body {font-family: "Pretendard";}

이런식으로 많이 적용하는데,

사파리 브라우저의 경우 적용이 안될 수도 있다.

그래서 항상 지정 폰트 뒤에 sans-serif를 붙여줘야한다.

html, body {font-family: "Pretendard", sans-serif;}

또한 웹폰트 방식 중 @import 방식을 사용한다면 import링크를 css파일 최상단에 적어야한다.

에디트플러스 단축키 모음! 그리고 자동완성,,,

다쭐◠‿◠ — Fri, 10 May 2024 13:26:20 +0900

내가 보려고 정리하는 것이므로,,

자주 쓰일 것같은 단축키만 모아서 표로 정리해보겠슴다...

vscode를 쓰면 좋겠지만,,, 기존 작업을 editplus해서 많이 했기 때문에

유지보수 하려면 단축키를 어느정도 알아놔야한다

Edit Plus 단축키

Ctrl + N	새 문서 작성
Ctrl + Shift + S	FTP 업로드
Ctrl + Z	실행 취소
Ctrl + Y	다시 실행
Alt + Shift + Del	줄 지우기
Ctrl + J	줄 복사
Ctrl + R	줄 선택
Ctrl + I	들여쓰기 (vscode의 tab기능)
Ctrl + Shift + I	들여쓰기 줄이기 (vscode의 shift + tab 기능)
Shift + F3	찾기
Ctrl + J	여러 줄을 한 줄로 만들어줌 (한 줄 코딩으로 변환할 때 개꿀)

그리고 에디트 플러스의 제일 불편한 점은....................

태그 자동완성이 안된다는 것 .. ㅜㅜㅜ

vscode에선 div 치고 탭 누르면 바로 <div></div>이런식으로 자동ㅇ완성됐는데...............................

찾아보니까 어떤 분이 감사하게도 템플릿을 올려두셨다!

글 참고해서 따라해보자~

https://m.blog.naver.com/vibi1201/221322459258

에디트플러스 자동완성 파일 (파일첨부포함)

웹디자이너 및 퍼블리셔라면 에디트플러스로 코딩시 꼭 필요한 자동완성 파일을 공유하려한다. html5 &...

blog.naver.com

에디트 플러스 자동완성

1. 파일 다운

일단 내가 위에 걸어놓은 링크 속 파일을 다운 받아야한다!

html5.acp와 css3.acp 다운 ㄱㄱ

설정

도구 -> 기본 설정을 연다.

설정 & 구문 강조에서 해당하는 파일을 선택해준다.

HTML이면 HTML,

CSS면 CSS.

그리고 자동완성 체크를 눌러준 다음 ... 을 클릭해 해당하는 템플릿 파일을 열어준다.

일단 html5.acp부터 적용시켜보자.

파일을 열었으면 적용 누르고 확인을 눌러준다.

3. 사용법

자 드가자~

원래 vscode는 ! 만 눌러도 바로 기본적인 html구조를 그려주는데...

에디트 플러스는 그런게 없으므로 일일히 만들어야한다.

여기선 언더바 (_)로 단축키를 통일한 싶다.

_html 라고 쓰고 엔터를 눌러주면..~

이야.. 진.짜. 오지자나?

태그도 마찬가지다. _div, _p , _a 이런식으로 써주고 엔터를 누르면?

이렇게 편한 기능이?!

사실 이 템플릿 파일은 내 입맛대로 수정 가능하다.

막상 파일을 까보면

이런식으로 되어있으므로 내가 #T=(단축키)를 지정해서 변형해도 된다는 뜻ㅇ다!!!!

개꿀,,,

하지만 vscode 못잃어............................

중복 이벤트 방지하기

다쭐◠‿◠ — Tue, 23 Apr 2024 17:22:25 +0900

오늘은 반응형에서 발생하는 에러인 중복되는 이벤트를 제거해보겠다!

오늘의 에러는 어쩌다 마주하게됐냐하믄..

열심히 반응형 작업 중, 퀵 메뉴에 대한 부분이 있었는데

모바일과 패드(세로) 기기에선 퀵 메뉴 중 하나를 눌렀을 때 모달창이 띄워지고

PC기준에서는 그냥 다른 링크로 보내버리는 로직을 짰다.

 <ul class="퀵메뉴임">
  <li class="메뉴 1임">
    <a href="보내버릴 링크임" target="_blank" id="modal">
      <div>메뉴 1인데 모바일에선 모달로 나타날거임</div>
    </a>
  </li>
  <li class="메뉴 2임">
    <a href="메뉴 2 링크임" target="_blank">
      <div>메뉴 2임</div>
    </a>
  </li>
</ul>

일단 저 첫 번째 메뉴를 누르면 새 페이지가 열리면서 원하는 링크로 이동한다.

하지만 modal이라는 아이디를 보면 알 수 있듯이, 사이트 정보 중 모바일 기기로 전환되면 레이아웃 처리가 곤란해지는 경우가 많다. 그렇기 때문에 퀵메뉴로 모달을 열 수 있도록 만드는 것임~~

그래서 모달창을 열고 닫는 제이쿼리를 추가해줌..

$("#modal").on("click", function (e) {
  e.preventDefault();
  $("#overlay").fadeIn(300);
  $(".quick_modal").fadeIn(300);
  lenis.stop();
});

 // 모달 닫기
$(".close_btn").on("click", function (e) {
  $("#overlay").fadeOut(300);
  $(".quick_modal").fadeOut(300);
  lenis.start();
});

이런식으로 on클릭 이벤트를 부여해 함수를 실행시켰다.

overlay는 모달 열었을 때 뒷배경 어둡게 해주기 위함이고,

lenis.stop()은 내가 모달을 열고있을 때 스크롤을 방지하기 위함이다.

이건 lenis 라이브러리를 쓸 때 사용하는 메서드이다.

이렇게 했으니 모달이 아주 잘 열리겠지?^^

아주 잘 열린당!

근데 문제는... 화면을 PC비율로 키웠을 때도 나타난다는 것..ㅋㅋㅋㅋㅋㅋㅋㅋ;;

해결방법은 window.resize 메서드를 써서 창 크기 변화에 따라 이벤트 핸들러를 다시 시작해주는 것이다.

// 처음에 작성했던 모달 열고닫는 함수
function modalOpen() {
  $("#modal").on("click", function (e) {
  e.preventDefault();
  $("#overlay").fadeIn(300);
  $(".quick_modal").fadeIn(300);
  lenis.stop();
});

 // 모달 닫기
$(".close_btn").on("click", function (e) {
  $("#overlay").fadeOut(300);
  $(".quick_modal").fadeOut(300);
  lenis.start();
});
}

// 초기 실행
modalOpen();

// 창 크기 변화에 따라 이벤트 핸들러 다시 확인
$(window).resize(function () {
  // 창 크기에 따라 이벤트를 다시 확인하여 중복 방지
  if ($(window).width() < 992) {
    // 이미 이벤트 핸들러가 바인딩되어 있으면 아무 작업도 하지 않음
    if (!$("#mapModal").data("events")) {
      modalOpen();
    }
  } else {
    // 창 크기가 992 이상인 경우 이벤트 핸들러 해제
    $("#mapModal").off("click");
    $(".close_btn").off("click");
  }
});

이런식으로 하면 창 크기를 변화할 때마다 이벤트를 다시 실행시키므로

중복 이벤트를 방지할 수 있다!

간단한 three.js 배경에 적용해보기

다쭐◠‿◠ — Wed, 17 Apr 2024 14:46:24 +0900

아래의 효과를 background에 넣어보려한다.

점들이 파도처럼 꿀렁이는? 효과이다.

See the Pen three.js canvas - particles - waves by deathfang (@deathfang) on CodePen.

Three.js 배경 적용

위에 언급한 효과는 스크립트가 굉장해엄청나 복잡하므로 ,,,(용량 장난없음;)

아래의 코드펜 예제를 참고하였다

https://codepen.io/mweslander/pen/JreNPj

ThreeJS Canvas Particle Waves

...

codepen.io

똑같은 효과인데 커스텀에 따라 느낌이 확 달라지므로

이쁘게 커스텀해보자~

HTML 구조

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js 배경 테스트</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <canvas id="background"></canvas>
    <header id="header">
      <div class="logo_area">
        <h1>Three.js</h1>
      </div>
      <div class="github_area">
        <a href="https://github.com/YeoDaSeul4355" target="_blank"
          ><i class="fa-brands fa-github-alt"></i
        ></a>
      </div>
    </header>
    <main id="main">
      <section id="content01">
        <h2>section <span>one</span></h2>
      </section>
      <section id="content02">
        <h2>section <span>two</span></h2>
      </section>
      <section id="content03">
        <h2>section <span>three</span></h2>
      </section>
      <section id="content04">
        <h2>section <span>four</span></h2>
      </section>
      <section id="content05">
        <h2>section <span>five</span></h2>
      </section>
    </main>
    <!-- fontAwesome -->
    <script
      src="https://kit.fontawesome.com/f8a51b75db.js"
      crossorigin="anonymous"
    ></script>

    <!-- 필요한 cdn -->
    <script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
    <script src="https://codepen.io/mweslander/pen/OxamJj.js"></script>
    <script src="https://codepen.io/mweslander/pen/LzXWOo.js"></script>
    <script src="https://codepen.io/mweslander/pen/JreWMV.js"></script>

    <!-- 스크립트 -->
    <script src="./js/script.js"></script>
  </body>
</html>

구조는 간단히 섹션만 나눠서 스크롤 느낌이 나게끔 설정하였다.

CSS

@import url("https://fonts.googleapis.com/css2?family=Shrikhand&display=swap");
body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Shrikhand", serif;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
section {
  width: 100%;
  height: 100vh;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

header {
  width: 90vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.github_area i {
  font-size: 3rem;
  color: #000;
  transition: all 0.3s ease-in-out;
}
.github_area i:hover {
  color: #ff84a9;
  transition: all 0.3s ease-in-out;
}

section h2 {
  margin-bottom: 10%;
  font-size: 3rem;
  color: #222;
  text-transform: uppercase;
}

section h2 span {
  color: #ccc;
}

나머지 스타일링은 별 거 없고 canvas태그만 position: fixed를 통해 고정시켜준다. 그리고 배경으로 깔아줄 것이기 때문에 z-index를 -1로 설정해 뒤에 깔리게끔 설정시켜주기!

스크립트

const lenis = new Lenis({
  duration: 2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
// particle 입자와 간격, 수
const SEPARATION = 100,
  AMOUNTX = 70,
  AMOUNTY = 70;

// Three.js의 카메라, 씬, 렌더러
let camera, scene, renderer;

// 입자들을 저장할 배열과 각각의 입자, 애니메이션 카운터
let particles,
  particle,
  count = 0;

// 마우스의 현재 위치
let mouseX = 0,
  mouseY = 0;

// 브라우저 창의 가로와 세로 크기의 / 2
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;

// 초기화 함수로 카메라, 입자들, 렌더러 등을 생성하고 설정
function init() {
  camera = new THREE.PerspectiveCamera(
    100, // 시야각
    window.innerWidth / window.innerHeight, // 종횡비
    2, // 전방 절단면
    10000 // 후방 절단면
  );
  camera.position.z = 2000; // z축 방향으로 2000의 거리
  scene = new THREE.Scene();
  // 입자들을 저장할 배열
  particles = new Array();
  var PI2 = Math.PI * 2; // 원주율의 두 배를 계산하여 PI2에 저장
  var geometry = new THREE.Geometry(); // Three.js의 Geometry 객체를 생성
  // 입자의 머티리얼을 설정
  var material = new THREE.SpriteCanvasMaterial({
    color: "#FF7384", // 입자 색상
    program: function (context) {
      context.beginPath();
      context.arc(0, 0, 0.2, 0, PI2, true); // 입자 크기
      context.fill();
    },
  });

  // 반복문
  var i = 0;
  for (var ix = 0; ix < AMOUNTX; ix++) {
    for (var iy = 0; iy < AMOUNTY; iy++) {
      particle = particles[i++] = new THREE.Sprite(material);
      particle.position.x = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2;
      particle.position.z = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2;
      scene.add(particle);

      if (i > 0) {
        geometry.vertices.push(particle.position);
      }
    }
  }

  //  Three.js의 CanvasRenderer를 생성
  renderer = new THREE.CanvasRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  document.addEventListener("mousemove", onDocumentMouseMove, false);
  document.addEventListener("touchstart", onDocumentTouchStart, false);
  document.addEventListener("touchmove", onDocumentTouchMove, false);
  window.addEventListener("resize", onWindowResize, false);

  // 스크롤 이벤트 리스너 추가
  window.addEventListener("scroll", function () {
    // 스크롤 위치 가져오기
    let scrollPosition = window.scrollY || window.pageYOffset;

    let content03 = document.querySelector("#content03").offsetTop;
    let content05 = document.querySelector("#content05").offsetTop;
    if (scrollPosition > content03 - 700 && scrollPosition < content05 - 500) {
      material.color.set("#ffffff");

      renderer.render(scene, camera);
    } else {
      material.color.set("#FF7384");
      renderer.render(scene, camera);
    }
  });
}

function onWindowResize() {
  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function onDocumentMouseMove(event) {
  mouseX = event.clientX - windowHalfX;
  mouseY = event.clientY - windowHalfY;
}

function onDocumentTouchStart(event) {
  if (event.touches.length === 1) {
    event.preventDefault();
    mouseX = event.touches[0].pageX - windowHalfX;
    mouseY = event.touches[0].pageY - windowHalfY;
  }
}

function onDocumentTouchMove(event) {
  if (event.touches.length === 1) {
    event.preventDefault();
    mouseX = event.touches[0].pageX - windowHalfX;
    mouseY = event.touches[0].pageY - windowHalfY;
  }
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  // 현재 색상
  let currentColor = new THREE.Color(renderer.getClearColor());

  // 목표 색상
  let targetColor = new THREE.Color();
  let scrollPosition = window.scrollY || window.pageYOffset;
  let content03 = document.querySelector("#content03").offsetTop;
  let content05 = document.querySelector("#content05").offsetTop;

  // 조건문
  if (scrollPosition > content03 - 700 && scrollPosition < content05 - 500) {
    targetColor.set("#000000");
  } else {
    targetColor.set("#ffffff");
  }

  // 색상 보간을 위한 보간 계수
  let interpolationFactor = 0.1;

  // 보간된 색상 계산
  let newColor = new THREE.Color()
    .copy(currentColor)
    .lerp(targetColor, interpolationFactor);

  // 부드럽게 변경된 색상 설정
  renderer.setClearColor(newColor, 1);

  // 나머지 렌더링 코드는 그대로 유지됨
  camera.position.x += (mouseX - camera.position.x) * 0.05;
  camera.position.y += (-mouseY - camera.position.y) * 0.05;
  camera.lookAt(scene.position);

  for (let i = 0; i < particles.length; i++) {
    let ix = i % AMOUNTX;
    let iy = Math.floor(i / AMOUNTX);
    let particle = particles[i];
    particle.position.y =
      Math.sin((ix + count) * 0.2) * 50 + Math.sin((iy + count) * 0.2) * 50;
    particle.scale.x = particle.scale.y =
      (Math.sin((ix + count) * 0.3) + 1) * 4 +
      (Math.sin((iy + count) * 0.5) + 1) * 4;
  }

  renderer.render(scene, camera);
  count += 0.1;
}

init();
animate();

lenis부분은 부드러운 스크롤 효과를 위해 넣은 것이므로 참고!

https://duektmf34.tistory.com/207

lenis 부드러운 스크롤 효과

패럴랙스 이펙트하면 가장 기본적인 것은 아마 스크롤의 감도? 아닐까 생각이 든다. 스크롤 움직이는 느낌에 따라 사이트의 퀄을 좌우할 수 있달까!? 난 그렇게 생각한다. 아무튼 가장 많이 쓰는

duektmf34.tistory.com

1. Three.js 객체 및 변수 초기화

const SEPARATION = 100,
  AMOUNTX = 70,
  AMOUNTY = 70;

// Three.js의 카메라, 씬, 렌더러
let camera, scene, renderer;

// 입자들을 저장할 배열과 각각의 입자, 애니메이션 카운터
let particles,
  particle,
  count = 0;

// 마우스의 현재 위치
let mouseX = 0,
  mouseY = 0;

// 브라우저 창의 가로와 세로 크기의 / 2
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;

상수 선언:
- const SEPARATION = 100: 입자 사이의 간격을 나타내는 상수입니다. 입자 사이의 간격이 100인 것으로 정의됩니다.
- const AMOUNTX = 70: x축 방향으로 입자의 수를 나타내는 상수입니다. 즉, x축에 70개의 입자가 배치됩니다.
- const AMOUNTY = 70: y축 방향으로 입자의 수를 나타내는 상수입니다. 즉, y축에 70개의 입자가 배치됩니다.
Three.js 객체 및 변수 초기화:
- let camera, scene, renderer;: Three.js에서 사용할 카메라, 씬, 렌더러를 선언합니다.
- let particles, particle, count = 0;: 입자들을 저장할 배열과 각각의 입자, 그리고 애니메이션 카운터 변수를 선언합니다.
- let mouseX = 0, mouseY = 0;: 마우스의 현재 위치를 나타내는 변수를 선언합니다.
- let windowHalfX = window.innerWidth / 2;: 브라우저 창의 가로 크기를 절반으로 나눈 값으로, 브라우저 창의 중심점 x좌표를 나타냅니다.
- let windowHalfY = window.innerHeight / 2;: 브라우저 창의 세로 크기를 절반으로 나눈 값으로, 브라우저 창의 중심점 y좌표를 나타냅니다.
변수 초기화 설명:
- camera, scene, renderer는 각각 Three.js의 카메라, 씬, 렌더러를 나타내는 변수입니다.
- particles는 입자들의 정보를 저장하는 배열입니다.
- particle은 현재 처리 중인 입자를 나타내는 변수입니다.
- count는 애니메이션 카운터로, 애니메이션을 제어하는 데 사용됩니다.
- mouseX, mouseY는 마우스의 현재 위치를 저장하는 변수입니다.
- windowHalfX, windowHalfY는 브라우저 창의 중심점을 나타내는 변수입니다. 이 값은 마우스 이벤트에서 사용되어 마우스의 위치를 화면 중심을 기준으로 계산하는 데 활용됩니다.

2. init 함수

function init() {
  camera = new THREE.PerspectiveCamera(
    100, // 시야각
    window.innerWidth / window.innerHeight, // 종횡비
    2, // 전방 절단면
    10000 // 후방 절단면
  );
  camera.position.z = 2000; // z축 방향으로 2000의 거리
  scene = new THREE.Scene();
  // 입자들을 저장할 배열
  particles = new Array();
  var PI2 = Math.PI * 2; // 원주율의 두 배를 계산하여 PI2에 저장
  var geometry = new THREE.Geometry(); // Three.js의 Geometry 객체를 생성
  // 입자의 머티리얼을 설정
  var material = new THREE.SpriteCanvasMaterial({
    color: "#FF7384", // 입자 색상
    program: function (context) {
      context.beginPath();
      context.arc(0, 0, 0.2, 0, PI2, true); // 입자 크기
      context.fill();
    },
  });

  // 반복문
  var i = 0;
  for (var ix = 0; ix < AMOUNTX; ix++) {
    for (var iy = 0; iy < AMOUNTY; iy++) {
      particle = particles[i++] = new THREE.Sprite(material);
      particle.position.x = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2;
      particle.position.z = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2;
      scene.add(particle);

      if (i > 0) {
        geometry.vertices.push(particle.position);
      }
    }
  }

  //  Three.js의 CanvasRenderer를 생성
  renderer = new THREE.CanvasRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  document.addEventListener("mousemove", onDocumentMouseMove, false);
  document.addEventListener("touchstart", onDocumentTouchStart, false);
  document.addEventListener("touchmove", onDocumentTouchMove, false);
  window.addEventListener("resize", onWindowResize, false);

  // 스크롤 이벤트 리스너 추가
  window.addEventListener("scroll", function () {
    // 스크롤 위치 가져오기
    let scrollPosition = window.scrollY || window.pageYOffset;

    let content03 = document.querySelector("#content03").offsetTop;
    let content05 = document.querySelector("#content05").offsetTop;
    if (scrollPosition > content03 - 700 && scrollPosition < content05 - 500) {
      material.color.set("#ffffff");

      renderer.render(scene, camera);
    } else {
      material.color.set("#FF7384");
      renderer.render(scene, camera);
    }
  });
}

카메라 설정:
- PerspectiveCamera를 생성하여 시야각, 종횡비, 전방 및 후방 절단면을 설정합니다.
- 카메라의 위치를 z축 방향으로 2000의 거리에 위치시킵니다.
Three.js의 Scene 객체 생성:
- THREE.Scene()을 호출하여 새로운 Scene 객체를 생성합니다.
입자들 생성:
- 입자들을 저장할 빈 배열 particles을 생성합니다.
- PI2 변수에는 원주율의 두 배를 저장합니다.
- 입자의 형태와 색상을 결정하는 SpriteCanvasMaterial을 생성합니다. 여기서는 원 모양을 그리고 입자의 색상을 지정합니다.
- 이중 반복문을 통해 AMOUNTX 및 AMOUNTY에 따라 입자들을 생성하고 scene에 추가합니다. 입자들은 SEPARATION 값에 따라 간격을 두고 배치됩니다.
Three.js의 CanvasRenderer 생성:
- THREE.CanvasRenderer()를 호출하여 새로운 CanvasRenderer 객체를 생성합니다.
- 렌더러의 픽셀 비율을 설정하고, 화면 크기를 브라우저 창의 크기로 조정합니다.
- 렌더러의 DOM 요소를 document body에 추가합니다.
이벤트 리스너 등록:
- 마우스 및 터치 이벤트에 대한 이벤트 리스너를 추가합니다. 마우스 이벤트가 발생하면 onDocumentMouseMove 함수가 호출됩니다.
- 창 크기 변경 이벤트에 대한 이벤트 리스너를 추가합니다. 창 크기가 변경되면 onWindowResize 함수가 호출됩니다.
- 스크롤 이벤트 리스너를 추가하여 페이지 스크롤에 따라 입자 색상을 변경하고, 변경된 내용을 렌더러를 통해 화면에 다시 렌더링합니다.

여기서 scroll을 감지해 특정 섹션에서는 particle의 색상을 바꾸도록 설정했다.

3. 이벤트를 처리하는 함수 (창 크기 변경, 마우스 이동, 터치 시작, 터치 이동 )

function onWindowResize() {
  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function onDocumentMouseMove(event) {
  mouseX = event.clientX - windowHalfX;
  mouseY = event.clientY - windowHalfY;
}

function onDocumentTouchStart(event) {
  if (event.touches.length === 1) {
    event.preventDefault();
    mouseX = event.touches[0].pageX - windowHalfX;
    mouseY = event.touches[0].pageY - windowHalfY;
  }
}

function onDocumentTouchMove(event) {
  if (event.touches.length === 1) {
    event.preventDefault();
    mouseX = event.touches[0].pageX - windowHalfX;
    mouseY = event.touches[0].pageY - windowHalfY;
  }
}

onWindowResize() 함수:
- 브라우저 창 크기가 변경될 때 호출되는 함수입니다.
- windowHalfX와 windowHalfY를 현재 브라우저 창의 가로와 세로 크기의 절반으로 업데이트합니다.
- 카메라의 종횡비(aspect)를 새로운 창 크기에 맞게 업데이트합니다.
- 카메라의 종횡비가 변경되었으므로, 카메라의 투영 행렬을 업데이트합니다.
- 렌더러의 크기를 새로운 창 크기에 맞게 조정합니다.
onDocumentMouseMove(event) 함수:
- 마우스가 움직일 때 호출되는 함수입니다.
- 이벤트에서 마우스의 현재 위치를 가져와서 브라우저 창의 중심으로부터의 거리를 계산합니다.
- 이 값을 mouseX와 mouseY 변수에 저장하여 입자들의 위치를 조정하는 데 사용됩니다.
onDocumentTouchStart(event) 함수:
- 터치가 시작될 때 호출되는 함수입니다.
- 터치가 한 개일 경우에만 이벤트를 처리합니다.
- 터치 이벤트에서 첫 번째 터치의 위치를 가져와서 마우스 이동과 동일하게 처리합니다.
onDocumentTouchMove(event) 함수:
- 터치가 이동할 때 호출되는 함수입니다.
- 터치가 한 개일 경우에만 이벤트를 처리합니다.
- 터치 이벤트에서 첫 번째 터치의 위치를 가져와서 마우스 이동과 동일하게 처리합니다.

4. render 함수

function render() {
  // 현재 색상
  let currentColor = new THREE.Color(renderer.getClearColor());

  // 목표 색상
  let targetColor = new THREE.Color();
  let scrollPosition = window.scrollY || window.pageYOffset;
  let content03 = document.querySelector("#content03").offsetTop;
  let content05 = document.querySelector("#content05").offsetTop;

  // 조건문
  if (scrollPosition > content03 - 700 && scrollPosition < content05 - 500) {
    targetColor.set("#000000");
  } else {
    targetColor.set("#ffffff");
  }

  // 색상 보간을 위한 보간 계수
  let interpolationFactor = 0.1;

  // 보간된 색상 계산
  let newColor = new THREE.Color()
    .copy(currentColor)
    .lerp(targetColor, interpolationFactor);

  // 부드럽게 변경된 색상 설정
  renderer.setClearColor(newColor, 1);

  // 나머지 렌더링 코드는 그대로 유지됨
  camera.position.x += (mouseX - camera.position.x) * 0.05;
  camera.position.y += (-mouseY - camera.position.y) * 0.05;
  camera.lookAt(scene.position);

  for (let i = 0; i < particles.length; i++) {
    let ix = i % AMOUNTX;
    let iy = Math.floor(i / AMOUNTX);
    let particle = particles[i];
    particle.position.y =
      Math.sin((ix + count) * 0.2) * 50 + Math.sin((iy + count) * 0.2) * 50;
    particle.scale.x = particle.scale.y =
      (Math.sin((ix + count) * 0.3) + 1) * 4 +
      (Math.sin((iy + count) * 0.5) + 1) * 4;
  }

  renderer.render(scene, camera);
  count += 0.1;
}

현재 배경 색상을 가져와 currentColor 변수에 저장합니다.
스크롤 위치를 기반으로 목표 색상을 설정합니다. content03과 content05의 위치에 따라 배경 색상이 변경됩니다.
보간 계수를 사용하여 현재 색상에서 목표 색상으로 부드럽게 변경될 새로운 색상을 계산합니다.
변경된 배경 색상을 설정합니다.
카메라의 위치를 부드럽게 조정하여 마우스의 위치를 따라 이동합니다.
입자들의 위치와 크기를 부드럽게 변화시켜 애니메이션 효과를 줍니다.
변경된 내용을 렌더러를 통해 화면에 렌더링합니다.

5. animate 함수

function animate() {
  requestAnimationFrame(animate);
  render();
}

requestAnimationFrame()을 사용하여 애니메이션을 반복 호출합니다.
매 프레임마다 render() 함수를 호출하여 화면을 렌더링합니다.

완성된 페이지

코드 확인하기

https://github.com/YeoDaSeul4355/clone_publishing/tree/main/threejs-background