기록창고

1. 상황 한 번 배포 환경에서는 어떻게 보일지 확인해보고 싶어서 vercel을 이용해서 배포하려 했다. 우선 project setting에서 Framework preset에는 React Router가 선택되어 있길래 그대로 둔 후, Environment Variables에 구글 ai studio에서 발급받은 키 값을 추가했다. 그랬더니 이런 에러가 발생했다. 2. 문제 상황2-1. SSR 모드 뭔가 이상해서 npm run build 후 확인을 해보니 index.html이 생성되지 않았었다. index.html은 브라우저가 읽을 수 있는 단일 진입점인데 이게 없었다. 근데 React Router v7은 기본 설정(SSR 모드)에서는 빌드 후 index.html 파일이 생성되지 않는다고 한다. 왜냐하면..

1. 개요 사이드 프로젝트를 진행하면서 라우팅 설정을 해야했다. 그래서 이왕 하는 거 노마드코더 강의를 들으면서 이용해보았던 react router v7로 적용해보았다. 그런데 막상 적용한 후 생각을 해보니 어떤 원리로 라우팅이 자동으로 연결되는지 잘 모르고 있었다. 그래서 이에 대해 찾아본 후, React Router v7을 프레임워크 모드로 사용할 때, 현재 프로젝트를 기준으로 간단하게 정리하기로 했다. 2. 단계별 흐름2-1. 서버가 올라가면 Vite가 vite.config.ts를 읽는다. import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import tsconfigPaths from "vi..

1. 개요 오늘은 react-router를 이용해서 로딩 관련하여 개선할 수 있는 방법들을 배웠는데 개인적으로는 정말 괜찮다고 생각했다. 그래서 이를 기록하려고 한다. 이 글에서 기록하려고 하는 것은 Await과 prefetch이다. 2. Await react-router를 이용할 때, loader라는 함수를 이용해서 서버에서 데이터를 받아오고 컴포넌트로 넘겨줄 수 있는데, 여기서 시간이 오래 걸릴 수도 있다. 우선 테스트겸 /community에서 요청하는 두 api가 시간이 오래 걸린다고 가정을 해보자. export const getTopics = async () => { await new Promise((resolve) => setTimeout(resolve, 4000)); // 시간이 오래 걸리..

1. 개요 노마드코더의 Maker 마스터클래스 강의 중, 특정 product의 overview와 review를 보여주는 페이지를 만드는 영상을 본 후, layout이라는 꽤나 괜찮은 기능이 있어서 기록하려 한다. // app/routes.ts...prefix("/:productId", [ index("features/products/pages/product-redirect-page.tsx"), route("/overview", "features/products/pages/product-overview-page.tsx"), ...prefix("/reviews", [ index("features/products/pages/product-reviews-page.tsx")..

1. 개요 Explore all products →; // routes.tsimport { type RouteConfig, index, prefix, route,} from "@react-router/dev/routes";export default [ index("common/pages/home-page.tsx"), ...prefix("products", [ index("features/products/pages/products-page.tsx"), ...prefix("leaderboards", [ index("features/products/pages/leaderboard-page.tsx"), route( "/daily/:year/:mont..

1. SPA (Single Page Application) 기존에는 웹사이트 내에서 다른 페이지로 이동하면, 페이지를 보여주기 위해 전체 페이지를 불러와야 했다. 그렇기 때문에 반응이 느렸으며 서버에 불필요한 트래픽을 발생시켰다. 그리고 시간이 지나며 전체가 아니라 업데이트가 필요한 데이터만 서버에서 받아 동적으로 보여주는 방식이 보편화 되었는데, 이를 SPA라 한다. SPA의 장점은 다음과 같다. 필요한 부분만 업데이트 하기 때문에 사용자의 행동에 빠르게 반응한다. 이로 인해 보다 나은 사용자 경험을 제공할 수 있다. 서버 입장에서는 요청받은 데이터만 넘겨 주면 되기 때문에 과부하 문제가 줄어든다. 그리고 SPA의 단점은 다음과 같다. 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고 대부분은 ..