메로그

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)..

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

SEO 최적화를 위해서는 robots.txt, sitemap.xml 을 생성해주어야 합니다.robots.txt 는 사이트에 크롤링을 할 대상을 알려주는 파일입니다.sitemap.xml 은 검색엔진에 색인할 모든 페이지를 나열한 XML 파일입니다. robots.txt 만들기Nextjs 14 에서는 app/robots.ts 파일을 만들면 됩니다. 그러면 ts 파일이 txt 파일로 만들어져 /robots.txt 로 접근이 가능해집니다.import { MetadataRoute } from 'next' export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: '*', allow: '/', ..

우선 styled componets 를 알기 전에 CSS in JS 가 뭔지 알고 지나가야 합니다. CSS in JS css 파일을 사용하지 않고 JavaScript 로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다. 이렇게 쓰면 별도의 css 파일을 관리하지 않기 때문에 관리 포인트가 줄어들 수도 있고 컴포넌트 기반의 개발시 좀 더 유용한 패턴이 될 수도 있습니다. (하지만, 사용하는 사람마다 다름!) 그 중에 가장 유명한 라이브러리가 styled components 다~~~ 라고 알고 있으면 됩니다. 설치 및 사용법 아래 명령어를 이용해 설치해줍니다. npm 쓰시는 분들은 yarn add 빼고 npm install 넣으시면 됩니다! yarn add styled-components 사용법은 아래와 ..

트러블 슈팅Vite 로 만든 React 를 마이크로 프론트엔드 아키텍쳐를 이용해서 다른 프로젝트에 정적파일로 넣는 방법을 하고 있습니다.그런데, build 시에 .html 에서 js, css 를 /assets/ 경로로 참조하는 것에 문제가 발생했습니다. 우리가 원하는 경로는  ./assets/ 입니다.방법은 아래와 같이 vite.config.js 에서 base 를 추가하여 상대 경로로 변경해줍니다.import { defineConfig } from "vite";import react from "@vitejs/plugin-react";export default defineConfig({ plugins: [react()], base: "./", // 상대 경로 설정});

준비하기 Redux 를 사용하고 있는데, 새로고침을 하게 되면 데이터가 다 날아가는 것을 볼 수 있다. 이를 유지하기 위한 방법으로 redux-persist 가 있는데, 이를 사용하는 방법을 알아보자. 우선 아래와 같이 준비를 해주자. 해당 로직은 redux-toolkit 을 이용한 셋팅이다. combineReducers 까지 사용해서 여러 리듀서를 묶은 것을 확인할 수 있다. import { configureStore, combineReducers } from "@reduxjs/toolkit"; import cartReducer from "./cartSlice"; import countReducer from "./countSlice"; // combineReducers 로 리듀서를 묶을 수 있음. co..