ScrollTrigger란? ScrollTrigger는 GSAP에서 제공하는 플러그인입니다. 이름 그대로 스크롤 위치에 따라 애니메이션을 실행할 수 있게 도와줍니다. 예를 들어 사용자가 특정 섹션까지 스크롤했을 때 요소가 나타나게 하거나, 스크롤 진행 정도에 맞춰 이미지가 움직이게 만들 수 있습니다. 이번 글에서는 ScrollTrigger를 사...
[JavaScript] GSAP 기본 사용법 정리
GSAP이란? GSAP은 GreenSock Animation Platform의 줄임말입니다. JavaScript로 애니메이션을 만들 때 많이 사용하는 라이브러리이고, DOM 요소의 위치, 크기, 투명도, 회전 같은 값을 부드럽게 변경할 수 있습니다. CSS animation으로도 간단한 효과는 만들 수 있지만, 여러 애니메이션을 순서대로 연결하거...
[CSS] 넘치는 텍스트 말줄임 처리하기
들어가며 카드 UI나 게시글 목록을 만들다 보면 제목이나 설명이 예상보다 길어질 때가 많습니다. 텍스트가 길어지면 카드 높이가 들쭉날쭉해지고, 옆 영역을 침범하거나 레이아웃이 깨질 수도 있습니다. 이럴 때 자주 사용하는 방식이 말줄임표 처리입니다. 프론트엔드 개발자가 자주 만나는... 이번 글에서는 CSS로 한 줄 말줄임과 여러 줄 말줄임을...
[React] 프로젝트 파비콘과 사이트 제목 변경하기
들어가며 React 프로젝트를 처음 만들면 브라우저 탭에 기본 React 아이콘과 React App이라는 제목이 보입니다. 기능 구현에는 큰 영향을 주지 않지만, 실제 서비스처럼 보이게 만들려면 이 두 가지를 꼭 바꿔주는 것이 좋습니다. 이번 글에서는 React 프로젝트에서 파비콘과 사이트 제목을 변경하는 방법을 간단히 정리해볼게요. 파비콘...
[JavaScript] 배열 자르기와 변경 비교: slice() vs splice()
들어가며 JavaScript에서 배열의 일부를 가져오거나, 배열 중간의 값을 삭제하고 싶을 때 slice()와 splice()를 자주 만나게 됩니다. 두 메서드는 이름도 비슷하고 배열을 다룬다는 점도 비슷해서 처음에는 헷갈리기 쉽습니다. 하지만 가장 중요한 차이가 하나 있어요. slice()는 원본 배열을 바꾸지 않고, splice()는 원본 배...
[JavaScript] 배열 앞뒤를 조작하는 push, pop, unshift, shift 정리
🧐 배열 앞뒤에 값을 넣고 빼는 방법 JavaScript에서 배열은 정말 자주 사용하는 자료구조입니다. 단순히 값을 저장하는 것뿐 아니라, 앞이나 뒤에 값을 추가하고 제거하는 일도 많습니다. 이때 사용하는 대표적인 메서드가 push, pop, unshift, shift입니다. 이번 글에서는 네 가지 메서드가 배열의 어느 위치를 조작하는지, 그리고...
[TypeScript] styled-components props 타입 지정하기
🧐 styled-components props에도 타입이 필요해요 styled-components에서는 props를 이용해 스타일을 동적으로 바꿀 수 있습니다. 예를 들어 버튼의 색상, 크기, 애니메이션 지연 시간 등을 props로 전달할 수 있어요. TypeScript를 함께 사용한다면 이 props에도 타입을 지정해두는 것이 좋습니다. 그래야 ...
[JavaScript] setTimeout과 setInterval 차이점 정리
🧐 JavaScript에서 시간을 다루는 방법 웹 페이지에서 특정 시간이 지난 뒤 코드를 실행하거나, 일정 간격으로 같은 작업을 반복해야 할 때가 있습니다. JavaScript에서는 이런 작업을 위해 setTimeout과 setInterval을 사용할 수 있습니다. 두 함수는 비슷해 보이지만 역할이 다릅니다. setTimeout → 일정 시간 ...
[JavaScript] classList로 클래스 추가, 삭제, 토글하기
🧐 클래스는 어떻게 제어할까요? 프론트엔드 개발을 하다 보면 특정 요소에 클래스를 추가하거나 제거해야 하는 경우가 많습니다. 예를 들어 메뉴 열림 상태, 다크 모드, 애니메이션 트리거 같은 기능이 모두 클래스 제어와 관련이 있습니다. 예전에는 className 문자열을 직접 수정하는 방식도 많이 사용했지만, 지금은 classList API를 사용하...
[TypeScript] DOM 조작 시 타입 에러 해결하기
🧐 JavaScript에서는 되는데 TypeScript에서는 왜 에러가 날까요? JavaScript에서는 DOM 요소를 선택한 뒤 바로 스타일을 바꾸는 코드를 자주 작성합니다. 그런데 TypeScript에서는 같은 코드에 빨간 줄이 생길 때가 있습니다. 대표적인 예가 querySelectorAll로 요소를 선택한 뒤 style에 접근하는 경우입니다...