메로그

zutand 는 react 상태 관리 라이브러리(중앙 집중형 스토어) 중 하나로, 최근 들어 redux 보다 편하고 가볍기 때문에 많이 사용하고 있는 추세입니다.우선 상태관리 라이브러리는 왜 쓰는지 알꺼기 때문에 디테일한 설명을 들어가지 않습니다~~.실제로 github stars 를 보면, 많은 사용자가 쓰고 있고 라이센스도 MIT 를 사용하고 있습니다. 설치yarn add zustand예제import { create } from "zustand";const counterStore = (set) => ({ count: 0, increment: (val) => set((state) => ({ count: state.count + (val ?? 1) })), decrement: (val) => set(..

리액트에서 컴포넌트로 개발하다 보면, 컴포넌트를 만들어서 재사용하면서 애플리케이션을 만들게 됩니다.그렇다보면, 테스트, 관리포인트를 좀 더 잡고 싶은 경우가 발생하는데 그럴 때 사용하는게 스토리북입니다.StoryBook 왜 쓸까요?StoryBook은 한 줄 요약해서 UI 컴포넌트를 관리, 테스트를 도와주는 도구 입니다.1. 정리하고 설명 요약하는데 편리함.2. 재사용성을 고려한 디자인 & 개발 가능 -> 퍼블리셔, 디자이너 등이 편해짐.3. 테스트 용이 그렇다 보니, 개발자들한테는 불필요한 작업을 줄여줌과 동시에 컴포넌트 단위의 테스트가 가능해집니다.StoryBook 싸이트에 들어가서 showcase 를 들어가면 다른 서비스에서 어떤 식으로 사용하고 있는지 알 수 있습니다.StoryBook 설치 및 사용..

React Router v6 에서 새롭게 도입된 API 중 하나로, 라우터 객체를 생성하는데 사용됩니다.이 함수는 라우터 구성을 객체 형태로 선언적으로 만들 수 있게 해줍니다. 이를 통해 보다 상세한 정의를 할 수 있게 됩니다. 또한, loader 라는 기능을 사용하여 컴포넌트를 렌더링할 때 데이터를 미리 보낼 수 있습니다.정의한 곳에서 이제 useLoaderData 를 이용하여 데이터를 가져와서 사용할 수 있습니다.소스 코드import { lazy, Suspense } from "react";// React Router v6에서의 createBrowserRouter 사용 예import { createBrowserRouter, RouterProvider } from 'react-router-dom';//..

React 에서 폼을 간편하게 관리하기 위한 라이브러리입니다.설치# npmnpm install react-hook-form# yarnyarn add react-hook-formuseForm설치가 완료되면, useForm 훅을 사용하여 폼을 초기화하고 제출 처리 함수를 정의하면 됩니다.import { useForm } from "react-hook-form";function UseForm() { const { register, handleSubmit, formState: { errors }, } = useForm({ defaultValues: { name: "", }, }); const onSubmit = (data) => { console.log(data)..

SEO 는 검색엔진에 친화적인 사이트를 구축하여 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 잡는 작업을 의미 합니다. 이렇기 때문에 SEO 는 단순한 방법이라기 보다는 우리가 사용자에게 유의미한 양질의 콘텐츠를 제공함하는 일종의 마케팅 작업이라고 생각해야 합니다. 그렇기 때문에 SEO 에서 가장 중요한 것이 무엇일까? 라는 질문에는 사용자가 검색한 검색어를 기반의 키워드 콘텐츠를 작성해야하고 이를 통해 싸이트의 순위를 올리는 것 입니다. SERP(Search Engine Result Page) 에 Ad, 광고 라는 라벨이 붙어 상단에 노출되는 부분을 Paid Search Result 라고 하며, 그 밑이 자연 검색 결과로 SEO의 영향을 받는 부분 입니다. 우리는 이 부분을 공략해야 하는 것..

props drilling 을 해결하기 위해 페이스북에서 만든 공식 라이브러리로 redux 대신 사용하는 상태관리 라이브러리 입니다. atoms 기반의 상태관리를 사용하여 컴포넌트 간 상태를 유기적으로 관리할 수 있습니다. 조끔더 쉽게 말해서 redux 보다 사용하기 쉬워서 사용하는 라이브러리입니다. 대신 단점으로는 별도의 디버깅 툴이 존재하지 않습니다. 설치 yarn add recoil 설치가 완료되면, 바로 최상단 루트로 가서 recoil 을 사용하겠다라는 명시를 해주도록 합시다. RecoilRoot 를 사용해서 최상단에 감싸주면 됩니다. import React from 'react'; import { RecoilRoot } from 'recoil'; function App() { return ( )..