개발/react,next(50)
-
next 잘못된 값 캐싱 방지 방법
공통 요청부분에서 다음과 같이 변경 const res = await fetch(fullUrl, { method, // ISR 기본 캐시 적용: 60초 캐싱 next: { revalidate: 60 }, ...config, headers: { ...this.headers, ...(form ? {} : { 'Content-Type': 'application/json' }), ...(bearerToken ? { Authorization: bearerToken } : null), ...config?.headers } }); // ❗ 응답 상태 확인 (200대가 아니면 캐시 금지) if (!res.ok) { // 다시 요청하도록 하기..
2025.06.05 -
⚠ "next start" does not work with "output: standalone" configuration. Use "node .next/standalone/server.js" instead.
"build": "next build && cp -r ./public ./.next/standalone/", "start": "node .next/standalone/server.js",로 변경
2025.05.26 -
한 프로젝트에 2개의 react 띠우기
css 를 완전 다르게 적용, store 도 따로 쓰고 싶을 경우 즉 기존 사이트와 비슷하지만 완전 다른디자인의 사이트 유지보수가 들어왔을경우 가장 좋은방법은 proxy 를 사용 nginx 에서 분기 처리 해주는 방법이지만 여의치 않을경우 src 를 하나 더 만들어서 url 에 따라 분기 처리 해 줄 수도 있다.
2025.04.22 -
react-helmet 사용이유 안쓰는 이
그냥 index.html 에 적으면 된다고 생각했지만 앱 전체에서 동일한 , 등을 쓸 경우단일 페이지 앱에서 SEO가 중요하지 않거나, CSR(Client-Side Rendering)만 사용하는 경우에는 상관이 없었지만 동적인 페이지 제목이나 메타 정보가 필요할 경우 {post.title} | My App 이런식으로 작성 가능 19부터는 필요 없음https://github.com/staylor/react-helmet-async/issues/244 react 19 · Issue #244 · staylor/react-helmet-asyncPLEASE UPDATE TO SUPPORT REACT 19 IM BEGGING U 👍github.com 하지만
2025.04.10 -
파일 기반 라우팅과 일반적인 라우팅 + 간단하게 구현해보기
📂 파일 기반 라우팅설명: pages 폴더 구조를 기반으로 자동으로 경로를 설정하는 방식예시: 🔧 일반적인(수동) 라우팅설명: 개발자가 직접 react-router-dom 등을 사용해 Routes 컴포넌트를 정의하는 방식예시: 장단점 ✅ 간단한 프로젝트 (빠른 개발)파일 기반 라우팅✅ Next.js 같은 풀스택 환경파일 기반 라우팅✅ 대규모 프로젝트일반적인 라우팅✅ 복잡한 라우팅 & 사용자 정의가 필요일반적인 라우팅 직접 구현해 보기 >> 권한 설정을 각 페이지 안에서 해줘야 함 import { BrowserRouter, Route, Routes } from "react-router";// Modules 타입 정의type Modules = { [key: string]: { ..
2025.03.21 -
리엑트 text 에디터 모음
https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025?utm_source=substack&utm_medium=email Which rich text editor framework should you choose in 2025? | Liveblocks BlogLooking to integrate a WYSIWYG editor into your JavaScript app? This comparison dives into the best frameworks available, including Tiptap, Lexical, BlockNote, and Slate.liveblocks.io
2025.03.10 -
최신 리액트 라이브러리 추천 모음
https://www.robinwieruch.de/react-libraries/?utm_source=substack&utm_medium=email React Libraries for 2025Discover the essential React libraries for 2025! Navigate the vast ecosystem effortlessly with this curated list. Empower your React projects with these powerful tools for seamless development of large-scale applications ...www.robinwieruch.de
2025.03.10 -
OuterLayout 지양 근거
function OuterLayout({ children }) { return ( {children} );}function HomePage() { return ( Home Page Content );}function AboutPage() { return ( About Page Content );}// Header, Sidebar, Footer가 모든 페이지에서 항상 렌더링function OuterLayout({ children, showSidebar }) { return ( {showSidebar && } {children} );}fun..
2025.01.13 -
24년도 최신 리액트 설문 분석 결과
드디어! 가장 기다리던 설문이 나왔다 로고도 간지난다 면접 프리패스 티셔츠도 팔고 세계 리액트 연봉 년차 대비 연봉 사람들 연봉 리액트는 남자가 압도적으로 많다 외국 한정이긴함 이제 기술 관련 상위 훅 모르면 개발자 하지 마라 갈수록 줄긴한다 살짝 고인 정도 하지만 중요도는 별개입니다 유스이펙트 어렵나? next js 가 눈에 띤다 캐시 1등 라이브러리 사용량 만족도 많이 쓰면서 만족스러운건 확실히 대새 잴 오른쪽은 유스스테이트다 그대가 사용해본 컴포넌트는 몇가지? 추천 radix차크라headlessshadcn 그외 애니메이션은 거의 독점이네..
2024.07.23 -
컴파일러 관련 좋은글
https://junghan92.medium.com/%EC%98%A4%EB%8A%98-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%B4%A4%EB%8A%94%EB%8D%B0-%EC%96%B4%EB%95%A0%EC%9D%84-%EA%B2%83-%EA%B0%99%EB%82%98%EC%9A%94-ece57f076b02 오늘 리액트 컴파일러를 사용해 봤는데, 어땠을 것 같나요? 😉오픈소스화된 리액트 컴파일러를 사용해 이제 리액트에서 메모이제이션을 사용할 필요가 없는지 살펴봅니다.junghan92.medium.com
2024.06.24