Zustand

Zustand 는 React 애플리케이션의 상태 관리를 간편하게 해주는라이브러리 입니다. Zustand 는 상태 관리를 위해 React 의 Context API 와 함께 사용되며,Redux 와 비슷한 기능을 제공하지만 훨씬 간단하고 직관적입니다.  특징간단한 APIZustand 는 간단하고 직관적인 API 를 제공하여 상태를 관리합니다.create 함수를 사용하여 상태를 초기화하고, 이를 통해 상태를 업데이트하고 구독할 수 있습니다.Hooks 기반Zustand 는 React Hooks 와 함께 사용되어 React 애플리케이션의 상태를 관리합니다.이는 함수형 컴포넌트에서 상태를 쉽게 관리할 수 있음을 의미합니다.최적화Zustand 는 내부적으로 Immer 라이브러리를 사용하여 불변성을 유지하면서 상태를 업..

• format_list_bulleted 라이브러리
• · 2024. 9. 25.
• textsms

browser-image-compression

간단하게 이미지 압축을 위한 라이브러리 입니다.이 라이브러리를 사용하면 서버에 이미지를 업로드 하기 전에 해상도나 저장 용랼을 줄여 서버에 부담을 줄일 수 있습니다. browser-image-compression 은 이미지 압축을 위해 웹 브라우저에서 실행되는 javascript 모듈입니다.공식 홈페이지에서는 이미지를 서버에 업로드하기 전에 해상도나 혹은 크기를 줄여 jpeg, png, webp 및 bmp 이미지를압축하는 데 이 모듈을 사용할 수 있다고 설명하고 있습니다. 설치npm i browser-image-compressionimport imageCompression from "browser-image-compression"; 기본 옵션const options: Options = { maxSiz..

• format_list_bulleted 라이브러리
• · 2024. 7. 15.
• textsms

React 에서 gsap 사용하기

gsap 만으로 모든 애니메이션 기능을 만들수 있는 유용한 라이브러리 입니다. 설치npm install @gsap/react gsap 기본 사용법import gsap from 'gsap';import { ScrollTrigger } from 'gsap/ScrollTrigger';// GSAP 플러그인 등록gsap.registerPlugin(ScrollTrigger); const About = () => { useGSAP(() => {  gsap.to(".a", {   x: 400,   rotate: 360,   repeat: -1,     // 무한히 반복   yoyo: true,    // 앞뒤로 애니메이션 반복   duration: 3   // 애니메이션 시간 설정  }) })  return (  ..

• format_list_bulleted 라이브러리
• · 2024. 7. 3.
• textsms

React 에서 AOS 사용하는 방법

AOS는 애니메이션을 쉽게 적용해 주는 라이브러리 중 하나입니다. 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우,AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다.AOS 라이브러리는 자바스크립트를 쓰지 않고도 쉽게 사용하고 적용할 수 있는 장점이 있습니다. 근데 문득 그런 의문이 들 수도 있습니다.' 나는 motion 라이브러리를 사용하고 있는데 굳이 AOS 라이브러리를 사용해야해??' 간단하게 설명하자면 페이지가 스크롤 될 때 간단한 애니메이션을 추가하고자 할 때 유용합니다.motion 라이브러리는 고급 애니메이션 기능을 제공하기 때문에 파일 크기가 aos 라이브러리 보다 크다는 단점도 있죠.따라서 간단한 스크롤 애니메이션을 구현하게 된다면 aos 라이브러리를 사용..

• format_list_bulleted 라이브러리
• · 2024. 5. 18.
• textsms

React-router-dom

라우팅은 웹 애플리케이션에서 사용자가 요청한 URL에 따라 적절한 컴포넌트나 페이지를 보여주는 것을 말합니다. 웹 애플리케이션은 일반적으로 여러 개의 페이지나 화면으로 구성되어 있습니다. 브라우저의 URL이 변경될 때마다, 해당 URL에 맞는 컴포넌트를 로드하고 보여주는 것이 라우팅의 역할입니다.  쉽게 이야기 하자면, 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있습니다.마치 우체국에서 편지를 집 주소에 맞게 배달하는 것처럼 말이죠. React router dom Tag 가 있는데 왜 굳이 react-router-dom 을 사용하는 것일까요??React 의 주요 장점 중 하나는 단일 페이지 애플리케이션(SPA) 입니다.SPA 는 한번에 하나의 HTML 페이지만 ..

• format_list_bulleted 라이브러리
• · 2024. 5. 1.
• textsms

Styled-components

React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리입니다. 이 라이브러리를 사용하면 JavaScript 파일 안에서 CSS를 작성할 수 있습니다. 이러한 방식은 컴포넌트 지향 아키텍처와 잘 어울리며, CSS를 컴포넌트와 함께 유지 및 관리할 수 있도록 도와줍니다.styled-component 는 제가 제일 좋아하는 CSS-in-JS 라이브러리 입니다.  그리고 제가 가장 많이 쓰는 css 스타일 방법 중에 하나입니다. 하지만 문득 내가 진짜 styled-component 를 재대로 사용하고 있는 것이 맞을까?? 라는 의문이 생겼습니다. 그래서 좀더 자세히 공부를 하다 보니 제가 모르는 부분이 많다는 것을 느껴 제대로 styled-component 를 정리할 겸 이러한 정보들을 공유하기 위해 ..

• format_list_bulleted 라이브러리
• · 2024. 5. 1.
• textsms