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

[Next.js] 이미지 최적화

프론트엔드에서 최적화 1순위는이미지 최적화 입니다. 웹 개발에 있어서 이미지 최적화는 사용자 경험과 성능 향상에 필수적입니다. 특히 모던 웹에서는 이미지 로딩 속도가 페이지 로딩 시간에 큰 영향을 미치므로, 이를 효율적으로 관리하는 것이 중요합니다.  다행히도 Next.js 에서는 자체적으로 Image 라는 컴포넌트를 제공함으로써코드 몇줄만으로 이미지를 최적화 시켜줄 수 있습니다. 다음 그림과 같이 일반적인 Tag 와 Tag 를 비교해 봐도 확연하게 차이가 나는 것을 보실 수 있습니다. 기본적인 형식Image 컴포넌트는 아래와 같은 properties 가 필수적으로 들어가야 합니다.import Image from 'next/image' export default function Page() { re..

• format_list_bulleted Next
• · 2024. 9. 22.
• textsms

[Next.js] 패키지 최적화

최선 버전의 Next.js 에서는 패키지 가져오기를 최적화 했습니다. 여러 라이브러리를 사용하거나 패키지를 이용하는 경우 불필요한 함수와 컴포넌트까지 불러와져서번들 파일이 커지는 현상이 발생하는 경우가 생기기 시작했습니다. 따라서 Next.js 는 이러한 문제점을 인식하고 개선하였습니다. 이 글에서 이러한 변경이 필요했던 이유와 현재 해결 방법을 찾기까지의 과정, 그리고 개선된 성능에 대해 설명하겠습니다. Barrel file 이란?자바스크립트에서 배럴 파일은 단일 파일에서 여러 모듈을 그룹화하여 내보내는 방법입니다. 그룹화된 모듈에 접근할 수 있는 중앙화된 위치를 제공함으로써 그룹화된 모듈을 더 쉽게 가져올 수 있습니다. 예를 들어, components/index.ts 내에 2개의 모듈 Button.t..

• format_list_bulleted 카테고리 없음
• · 2024. 9. 21.
• textsms

[Next.js] 배포시 console 지우기

Next.js 을 이용해 production 환경에서 console 을 지우는 방법을 알아보겠습니다.Next.js 에서 사용하기기본 사용법Next.js는 빌드 후 결과물에 console 이 뜨지 않도록 하는 기능을 자체적으로 제공하고 있습니다.next.config.js 파일의 compiler에 아래와 같이 removeConsole 옵션을 주면 간단하게 해결됩니다.만약 removeConsole 을 조건 없이(process.env.NODE_ENV 없이 ) 그냥 true값으로 주면, 개발환경에서도 콘솔이 뜨지 않게 됩니다.  특정 console 예외 방법만약 모든 console 을 제거하는 게 아닌, 특정 console ( error, warn ) 은 띄어주고 싶다면 아래와 같이 작성하시면 됩니다. 혹시 배포..

• format_list_bulleted Next
• · 2024. 9. 20.
• textsms

React 에러 핸들링

React에서 에러 핸들링은 사용자 경험을 향상시키기 위해 매우 중요합니다.특히, 애플리케이션이 크거나 복잡할수록 예상치 못한 에러가 발생할 가능성이 커지므로, 이를 적절히 처리해야 사용자에게 불필요한 불편을 줄일 수 있습니다. JS Error 객체Error: 기본적인 에러 객체SynTaxError: 문법이 틀렸을 때 발생하는 객체ReferenceError: 잘못된 참조를 했을 때 발생하는 객체RangeError: 숫자 변수가 범위를 벗어났을 때 발행하는 객체TypeError: 변수나 값의 타입이 예상과 다를 때 발생, 예를 들어, 숫자가 아닌 값에 대해 숫자 메서드를 호출할 때 발생HTTP 에러 코드 (서버와의 통신에서 발생하는 에러)React 애플리케이션이 API를 통해 서버와 통신할 때, HTTP ..

• format_list_bulleted React
• · 2024. 9. 10.
• textsms

axios Interceptors

axios 를 자세히 공부 중에 인터셉터 라는 기능을공부해서 정리해 보았습니다.인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하는 경우가 생깁니다.하지만 이러한 경우가 많이 발생할 경우 중복 코드가 발생하고 유지보수가 복잡해 지는 문제가 발생합니다.사용자 지정 config 로 새로운 Axios 인스턴스를 생성하여 사용하면 더욱 편리하기 때문에 Axios 인스턴스를 기초로설명하겠습니다. 적용해보기Axios 인스턴스 생성하기const instance = axios.create({ baseURL: "www.text.com", timeout: 1000, // 요..

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

메뉴 밑줄 슬라이딩 만들기

프로젝트를 개발 중 메뉴 밑줄 슬라이딩을자연스럽게 구현하고 싶어 정리해 보았습니다. 용어 설명메뉴 밑줄 슬라이딩을 구현하고 싶은데 어떻게 만들어야 할지 막막하다면 여기서 정리한 내용만 차근차근 읽어보시면어떻게 구현하고 어떤 방식으로 만들 수 있는지 이해하실 수 있습니다. 특정 메뉴로 이동하고 싶을 때 애니메이션을 적용하고 싶다면 offset 이라는 기능을 사용하시면 됩니다.그림에서 보시는 바와 같이 검정색 화면이 브라우저 화면이라고 가정해 봅시다.그럴 때 브라우저에서 내가 측정하고 싶은 요소와 브라우저 간의 거리를 확인하고 싶다면 offsetTop 을 이용하시면 됩니다. 이 기능을 이용해서 간편하게 구현하시면 됩니다.아래의 코드는 React 를 이용해서 구현한 코드입니다.아직은 tsx 로 넘어가지 않았으..

• format_list_bulleted React
• · 2024. 8. 26.
• textsms

Jotai

jotai 는 전역 상태를 편리하게 도와주는라이브러리 입니다.설명Jotai는 리액트 애플리케이션에서 상태 관리를 위한 간단하고 현대적인 라이브러리입니다.이 라이브러리는 Context API와 리액트 훅을 기반으로 만들어졌으며, 상태를 최소 단위인 "원자 (Atoms)"로 분해하여 관리하는 Atomic 디자인 패턴을 채택합니다.jotai에 대해 찾아보면서 context와 비슷하다고 느꼈었는데, 실제로 다른 상태 관리 라이브러리들보다는 context나 useState와 비교되는 경우가 더 많습니다.Atomic 접근 방식이 패턴은 상태를 최소 단위인 "원자 (Atoms)" 단위로 분해하여 관리하는 방식을 의미합니다. jotai 를 시작하기 전에 앱 컴포넌트 내의 router 를 Provider 로 감싸 주어야..

• format_list_bulleted 라이브러리
• · 2024. 8. 24.
• textsms