분류 전체보기129 두 라인 사이에 색 채우기 Chart.js 두 라인 사이에 색 채우기 Chart.js Chart.js로 두 라인 사이에 색을 채우되, 두 라인 중 더 높은 라인의 색으로 라인 사이를 채우는 차트를 만들어보았다.차트 내용은 다음과 같다.서로 다르게 움직이는 In temp와 Out temp가 있다.In temp가 Out temp보다 높을 때는 In temp 라인의 아래에 In Temp 라인 색이 채워짐.Out temp가 더 높아지면 반대로 설정.구현의 핵심은 fill 속성이다.fill 속성으로 Chart.js에서 라인 차트 아래 영역을 채우는 방식을 제어한다.fill 속성 구조fill은 라인 차트에서 선 아래를 채울지, 그리고 어떻게 채울지를 정하는 설정이다.각 데이터셋 안에 개별적으로 지정할 수 있다.fill: { target: 1, // 또.. 2025. 4. 13. react-share 소셜 미디어 공유 버튼 라이브러리 react-share 소셜 미디어 공유 버튼 라이브러리 react-share는 React 애플리케이션에서 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 도와주는 인기 있는 오픈 소스 라이브러리다. 트위터, 페이스북, 카카오톡, 텔레그램 등 다양한 플랫폼에 맞는 공유 버튼을 제공하며, 각 플랫폼의 URL 스킴을 자동으로 처리해줘서 매우 간편하게 사용할 수 있다.주요 특징다양한 소셜 플랫폼 지원: Facebook, Twitter, Telegram, WhatsApp, Reddit, LinkedIn 등아이콘 포함 버튼 제공커스터마이징 가능 (아이콘 크기, 스타일 등)TypeScript 지원설치 방법npm install react-share또는yarn add react-share 기본 사용법 예시예를 들어 페이.. 2025. 4. 13. 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. 이전 1 2 3 4 ··· 22 다음
