메로그

리액트 프로젝트를 진행하다 보면, 여러 리액트 프로젝트 구조를 상상하게 된다.가장 우리가 기본적으로 나열하는 components 와 pages 폴더를 만들어서 나열하는 구조가 있지만, 이러한 구조는조금만 규모가 커지거나 훅, 상태 관리 등이 들어오게 되면 가독성이 확연하게 떨어지게 된다. 그래서 features 기반으로 그룹화(페이지, 컴포넌트, 훅, 스토어 등)하여 사용하게 되는데, 이를 기반으로 React 프로젝트 구조를 아래와 같이 구축해보자. Vue 도 마찬가지로 다를게 없다고 생각한다. 리액트 프로젝트 구조 구축하기기본적으로 요즘 유행하는 vite 기반의 react 프로젝트를 만들어서 프로젝트를 먼저 구조화 해보자.먼저 yarn create vite 를 이용해서 react 프로젝트를 생성해줍니다..

셋팅vite 기반으로 React 를 만든 다음에 경로를 쉽게 사용할 수 있도록 alias 로 셋팅합니다.1. new URL("./src", import.meta.url)- 이 코드는 현재 모듈을 기준으로 상대 경로 "./src"를 가리키는 URL 객체를 만듭니다. - import.meta.url은 현재 모듈의 URL을 나타냅니다.2. fileURLToPath(new URL("./src", import.meta.url)):- new URL("./src", import.meta.url)를 통해 생성된 URL 객체를 fileURLToPath 함수에 전달합니다. - fileURLToPath 함수는 파일 URL을 파일 경로 문자열로 변환합니다.3. fileURLToPath(new URL("./src", impor..

상용배포를 하게 되면 에러가 발생시에 상용서버에서 디버깅을 하기가 쉽지가 않다.보통 build 를 하게 될 때, 불필요한 주석, 디버거, 콘솔을 없애고 minify 하게 되는데, 상용에서 에러가 난 경우에 개발용으로 만들었던 로그가 찍히지 않다보니 에러 발생시 개발서버를 이용해서 확인해야 되는 이슈가 발생하였음.특히 프론트엔드에서는 직접 로그를 만들지 않으면, 로그 관리가 어렵다는 점이 발생함. 그래서! 상용서버에서 확인할 수 있도록, console.log 기반의 디버그 모드를 구현하기로 함.1. 디버그 모드 함수 모듈화const startDebugMode = () => { if (process.env.NODE_ENV === 'development') return window.setDebugMode ..

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