들어가며 HTML에서 a 태그는 링크를 만들 때 가장 많이 사용하는 태그입니다. 처음에는 단순히 다른 페이지로 이동할 때만 쓰는 것처럼 보이지만, 실제로는 이메일 보내기, 전화 연결, 파일 다운로드처럼 여러 기능을 처리할 수 있습니다. 이번 글에서는 a 태그에서 자주 사용하는 패턴을 하나씩 정리해볼게요. 기본 페이지 이동 가장 기본적인 사...
[TypeScript] React TypeScript 프로젝트 생성과 초기 세팅
들어가며 React를 TypeScript와 함께 사용하면 props, state, API 응답 타입을 더 안전하게 다룰 수 있습니다. 처음에는 설정 파일이 많아 보여서 어렵게 느껴질 수 있지만, 프로젝트 생성 흐름만 알면 크게 복잡하지 않습니다. 이번 글에서는 React TypeScript 프로젝트를 생성하고, 초기에 확인하면 좋은 파일들을 정리...
[JavaScript] GSAP ScrollTrigger 기본 사용법
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 → 일정 시간 ...