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] 배포시 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

Next.js API Key 보관

Api key 는 너무나도 중요하기 때문에다른 누군가가 사용하지 않게 해야 합니다. Next.js 로 개발을 하다가 특정 api key 를 가져와야 하는 경우가 생겨서 공부하면서 정리해 보았습니다. 설명보통 개발을 하면서 자신의 Github 에 프로젝트를 올리고 관리할 것입니다.개발을 하다보면 피치못하게 다른 개발자의 API 나 공공하게 사용하는 API 를 사용해야하는 경험을 하셨을 것입니다.이때 대부분 API key 를 이용해서 API 를 불러옵니다.API 에 따라 다르지만, 대부분 API 인증키가 본인 이외의 외부에 보여지는 것은 좋지 않습니다.그래서 Next.js 는 .env.local 이라는 파일을 지원해 줍니다. 사용법Next.js 에서 어떻게 .env.local 이라는 파일로 api key 를..

• format_list_bulleted 카테고리 없음
• · 2024. 8. 1.
• textsms

Next.js MetaData 심화

metadata 를 간단하게 사용하고 있다가 다양하게 사용할 수 있는 걸 알게 되어 정리해 보았습니다.  설명metadata 를 모른다면 개인적으로 조금 공부하고 오거나 제 블로그에 next.js 소개 part 부분을 읽어 보시면 좋습니다. 기본적인 metadata 활용은 아래처럼 사용 할 수 있습니다.export const metadata = { title: "next.js", description: "hello next.js"} 하지만 항상 페이지별로 metadata 를 적용하고 설명하고 추가하고 하는것은 귀찮을 수 있기 때문에 동적으로 만들 수도 있습니다.import { Metadata } from 'next';export const metadata:Metadata = { title: { t..

• format_list_bulleted Next
• · 2024. 7. 30.
• textsms

Next.js - 경로

usePathnameusePathname 은 현재 URL 경로를 가져와 주는 기능 입니다.usePathname 을 사용하려면 클라이언트 컴포넌트 이기 때문에 "use client" 를 사용하셔야 합니다."use client"import React from 'react'import Link from 'next/link'import { usePathname } from 'next/navigation'import '@/styles/styles.css'const Navigater = () => { const path = usePathname(); return ( Home About )}export default Navigater // 똑같습니다. 원하는 형식에 맞춰서 사용하..

• format_list_bulleted Next
• · 2024. 5. 21.
• textsms

Next.js

Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 페이지 생성을 지원하여 성능을 향상시키고, 개발자들이 간편하게 웹 애플리케이션을 구축할 수 있도록 도와줍니다.시작하기npx create-next-app@latest 위에 명령어를 입력하면 이러한 문구가 보이실 것입니다. 이때 자기가 원하는 기능에 맞춰 No / Yes 를 누르시면 됩니다.파란색으로 칠한 건 제가 원하는 기능에 맞춰 고른 부분이라 신경쓰지 않으셔도 됩니다.What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwin..

• format_list_bulleted Next
• · 2024. 5. 21.
• textsms