본문 바로가기

프론트엔드111

Pretendard 폰트 Pretendard 폰트Pretendard는 오픈 소스 산세리프 한글 웹폰트로, 깔끔하고 현대적인 느낌을 주는 글꼴이다.애플의 San Francisco와 비슷한 느낌을 주면서도 한글 지원이 뛰어나서 UI 디자인, 웹사이트, 앱 등 다양한 곳에 많이 사용되고 있다. Orion Cactus라는 디자이너/개발자 (본명: 김용민)님이 주도해서 만들었다.GitHub를 통해 오픈 소스로 배포하고, 많은 디자이너/개발자들이 함께 개선에 참여하고 있다.기존 한글 웹폰트들이 대부분 무겁고 성능이 좋지 않다.한글과 영문의 조합이 어색하거나, UI에서 쓸 만큼 정돈된 폰트가 부족했다.애플의 San Francisco처럼 UI 친화적이면서도 한글을 자연스럽게 표현하는 폰트를 원했다. 그래서 Pretendard는 **"SF Pr.. 2025. 4. 13.
Lottie 애니메이션 Lottie 애니메이션Lottie란?Airbnb에서 만든 애니메이션 렌더링 라이브러리After Effects에서 만든 애니메이션을 JSON으로 변환해서 웹/앱에서 재생 가능SVG 또는 Canvas로 부드럽고 가벼운 애니메이션을 구현애니메이션 고르기: LottieFiles 사용법https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship .. 2025. 4. 12.
Ant Design Ant Design Ant Design은 중국의 알리바바 그룹에서 만든 React UI 라이브러리로, 기업용(enterprise-grade) UI 설계에 초점을 맞췄다.디자인이 깔끔하고 일관성 있으며, 수많은 고급 컴포넌트를 제공해서 생산성을 엄청 높여준다.Ant Design이란?풍부한 UI 컴포넌트: 버튼, 모달, 테이블, 폼 등 거의 모든 걸 제공.디자인 시스템 기반: 깔끔하고 일관된 UX를 제공.i18n 지원: 다국어, RTL 등의 기능도 기본 탑재.TypeScript 지원: TS로도 완벽하게 쓸 수 있음.커스터마이징 가능: 테마 변경도 쉬움.설치 방법npm install antdCSS를 전역에 포함해야 하므로 보통 index.js나 App.js에 다음을 추가합니다:import 'antd/dist/.. 2025. 4. 12.
객체의 불변성 객체의 불변성React에서 useState로 객체를 다룰 때 불변성(Immutability) 개념을 잘 이해하고 있어야, 예상대로 리렌더링이 잘 되고 버그도 예방할 수 있다.불변성이란, 원래 객체를 직접 수정하지 않고, 복사해서 수정된 새 객체를 만드는 방식을 말한다.React에서는 상태가 변경될 때 컴포넌트가 리렌더링되는데, 기존 객체를 직접 수정하면 변경을 감지하지 못해 리렌더링이 일어나지 않을 수 있다. 나쁜 예시 (불변성 깨짐)const [user, setUser] = useState({ name: 'Alice', age: 25 });// ❌ 직접 객체 수정user.age = 26;setUser(user);이 경우 user 객체의 참조는 바뀌지 않았기 때문에, React는 "아무것도 안 바뀌었네".. 2025. 4. 12.
useParams vs useNavigate useParams vs useNavigateuseParams와 useNavigate는 React Router에서 제공하는 Hook들이다.이 둘은 라우팅 관련 기능을 사용할 때 아주 자주 사용한다.useParams – URL의 파라미터를 가져오는 Hook라우트(URL 경로) 안에 동적 파라미터가 있을 때, 그 값을 컴포넌트에서 꺼내서 사용하고 싶을 때 사용한다.// App.jsimport { BrowserRouter, Routes, Route } from 'react-router-dom';import UserPage from './UserPage';function App() { return ( } /> );} // UserPage.jsimport { us.. 2025. 4. 6.
useState vs useEffect useState vs useEffect useState와 useEffect는 React의 함수형 컴포넌트에서 가장 자주 사용하는 Hook 중 하나다.useStateuseState는 컴포넌트의 상태(state)를 저장하고 관리할 수 있도록 해주는 Hook이다. const [state, setState] = useState(initialValue); state: 현재 상태 값setState: 상태를 업데이트하는 함수initialValue: 초기 상태 값 import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} se.. 2025. 4. 6.

티스토리툴바