메로그

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

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 폴더 구조를 가지고 있..