메로그

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

우선 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: "./", // 상대 경로 설정});

Nextjs 란, React 를 이용하여 웹 어플리케이션을 만드는 프레임워크로써 React 에서 하기 어려웠던 SEO, SSR, SSG 등 을 제공합니다. Nextjs 는 버전 13과 이전 버전으로 나뉠 정도로 13부터는 구조적인 변화도 몇가지가 있었습니다. - app 폴더 - 폴더 기반 페이징 처리 - 서버 컴포넌트 - 이미지 최적화 아래는 공식 홈페이지 제공하는 install 입니다. https://nextjs.org/docs/getting-started/installationnpx create-next-app@latest my-app-test-1234설치하게 되면 my-app-test-1234 라는 폴더가 만들어질 것 입니다.그렇게 해서 만들어지면 app 폴더 아래에 Next 폴더 구조를 가지고 있..

redux 를 보다 쉽고 간단하게 사용할 수 있도록 해주는 라이브러리입니다. 아래는 설치방법입니다. # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 예제 아래 간단한 예제와 설명을 통해서 사용 방법을 익혀보시면 됩니다. index.ts 에서 Provider 와 store 를 가져와서 등록해줍니다. // index.tx import React from 'react'; import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import { store } from './app/store'; import App from './App'; im..

useState 에서 setState 는 비동기 동작 방식을 가지고 있다. 비동기로 동작하는 이유 하나의 페이지나 컴포넌트 내에서 수많은 상태값이 존재한다. 이를 하나 하나 바뀔 때마다 화면을 리렌더링한다면 성능 저하가 발생할 것이다. 그렇기 때문에 리액트는 성능 향상을 위해 한 번에 렌더링을 하는 방법을 채택하였다. 또한, setState를 연속 호출해도 배치(batch) 처리하여 한 번에 렌더링하도록 하여 아무리 많은 setState 가 연속적으로 사용되었어도 batch 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지한다. 하지만, 가끔 우리는 동기적으로 렌더링 시점을 잡아 무언가를 하고 싶은 경우가 있다. 아래 그에 대한 방법을 제시한다. 1. useEffect 를 사용해서 mount 시점을 잡..