본문 바로가기

React40

Github-Actions Playwright Test Report 결과 PR Commnet로 남기기 📒 Github-Actions Playwright Test Report 결과 PR Commnet로 남기기Github Actions 파이프라인에서 Playwright로 E2E 테스트를 진행하고, 테스트 결과 및 소요 시간을 Pull Request Comment로 남기는 방법을 소개합니다. 📌 Playwright Report output 설정playwright.config.ts 파일에서 테스트 결과 report를 다음과 같이 설정해 주었습니다.export default defineConfig({ ... reporter: process.env.CI ? [["json", { outputFile: "results.json" }]] : "line", ...});Github Action 환경에서 돌아갈 때는.. 2024. 12. 1.

[NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기검색 엔진 최적화(SEO)에서 중요한 요소로 사용되는 사이트맵은, 웹사이트의 페이지와 콘텐츠를 구조적으로 나열한 파일로, 검색 엔진과 사용자에게 웹사이트의 구조와 페이지 간 관계를 명확히 전달하는 역할을 합니다. 이번 프로젝트에서 각 프렌차이즈 브랜드마다 사이트맵을 생성하여 검색 결과에 걸리게 하기 위해 사용해봤습니다. 이번엔 NextJS AppRouter에서 사이트맵을 동적으로 생성하는 방법에 대해 소개합니다. 📌 sitemap.xml Route Handler 폴더 구조 잡기app ㄴ sitemap.xml ㄴ route.ts위와 같이 폴더 구조를 잡아주어 https://xxx.com/sitemap.xml로.. 2024. 11. 22.

[NextJS, SEO] AppRouter Dynamic Metadata 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Metadata 생성하기동적인 메타데이터를 사용하면 페이지마다 맞춤화된 메타 정보를 제공할 수 있습니다. 이를 통해 검색 엔진이 페이지의 목적과 내용을 더 정확히 이해할 수 있어 SEO를 향상시킬 수 있고,example.com/post/123와 example.com/post/456처럼 같은 페이지여도 독립적으로 색인될 가능성이 증가합니다. 📌 정적 메타데이터 생성NextJS에서 정적 메타데이터를 생성하는 방법은 다음과 같습니다.import type { Metadata } from 'next' export const metadata: Metadata = { title: '...', description: '...',} export defa.. 2024. 11. 21.

Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 📒 Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 이번에 사이드 프로젝트를 Vercel에 배포하고 방문자 수를 확인하고 싶어 찾아보니Velcel에서 자체적으로 제공하는 좋은 툴이 있어서 소개드립니다. 📌 Vercel Web AnalyticsVercel Web Analytics을 이용하기 위한 방법은 정말 간단합니다.🔎 패키지 설치$ npm i @vercel/analytics🔎 컴포넌트 추가하기import { Analytics } from '@vercel/analytics/react'; export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( .. 2024. 10. 10.

[Nextjs] react-query를 이용한 서버 데이터 Prefetch 방법 📒 react-query를 이용한 서버 데이터 Prefetch 방법Nextjs는 서버사이드 렌더링을 통해 사용자에게 완성된 HTML 페이지를 건네줄 수 있습니다.그와 더불어 데이터 fetching을 클라이언트가 아닌 서버에서 미리 한 뒤, 그 결과물을 HTML에 포함시킬 수도 있습니다.이렇게 prefetching이 이루어질 경우 거치는 네트워크 단계가 적어져 더 빠르고, 서버 안에서 호출-응답이 이루어지기 때문에 더 안전하다는 이점을 누릴 수 있습니다.그럼 Nextjs에서 react-query를 이용한 prefetch 방법을 소개하겠습니다.📌 QueryProvider 세팅react query를 사용하기 위해 QueryClientProvider를 위한 클라이언트 사이드 컴포넌트를 만들어준 뒤, layo.. 2024. 9. 12.

[Nextjs] searchParams로 URL 쿼리 스트링 파싱하기 📒 searchParam으로 쿼리스트링 파싱하기모든 값들을 굳이 상태로 관리할 필요가 없습니다. 간단한 값을 저장하거나, 값을 유지시키며 URL을 공유할 때 주로 쿼리스트링을 사용하는데,이를 사용하기 위해선 다음과 같이 URL 마지막에 “?”를 추가한 후 데이터를 key=value 형태로 나열하면 됩니다.https://abcd.com?키=값&키2=값2그럼 nextjs에서 어떻게 쿼리스트링을 파싱할 수 있는지 소개합니다. 📌 Server Componenttype SearchParamProps = { searchParams: { page: number; title: string; };};export default function ServerSearchParam(props: SearchPar.. 2024. 9. 9.

[Nextjs] Dynamic Route, 동적 라우팅 📒 Dynamic Route, 동적 라우팅URL 경로의 특정 부분을 변수로 설정해, 다양한 값에 따라 페이지를 동적으로 생성하는 기능인 동적 라우팅에 대한 3가지 방법을 소개합니다. 📌 기본 규칙폴더 구조로 경로를 표현하는 Nextjs는 대괄호를 통해 동적 라우팅이 가능합니다.예를 들면 다음과 같습니다.ex 1구조 : app/post/[pageNum]/page.tsxURL : /post/1params : { pageNum: 1 }ex 2구조 : app/post/[title]/page.tsxURL : /post/제목1params : { title : 제목1 } 📌 단일 세그먼트단일 세그먼트로 동적 라우팅을 하려면 위의 예시와 동일한 방법을 사용합니다.🔎 규칙[params_이름] → params : .. 2024. 8. 3.

[React] ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드 📒 ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드잘 만든 Errorboundary백개의 try-catch 안 부럽다.프론트 개발을 계속하다 보니 다양한 상황을 마주치게 되었고, 그에 따른 적절한 화면 표현의 중요성을 점차 느껴갔습니다.대표적으로 서버 데이터에 대한 로딩과 에러 처리가 있죠.끊임없이 사용해 보고 개선해 보니 1년이 지난 지금에서야 어느 정도 감이 잡히는 거 같아 그 방법을 공유해보려 합니다.이 글은 실제 서비스에서의 적용 방법에 대해 설명하는 글이기 때문에 ErrorBoundary와 Suspense에 대한 개념은 아래 글을 참조해 주세요.ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법Suspense을 사용해 선.. 2024. 6. 4.

Electron + React 프로세스 간 IPC 통신과 preload 사용 방법 📒 Electron + React 프로세스 간 IPC 통신과 preload 사용 방법Electron 애플리케이션은 주로 메인 프로세스와 렌더러 프로세스로 구성됩니다.Main Process는 단 하나만 실행되며 앱의 본체이고, Renderer Process는 화면에 그려지는 n개의 웹뷰 프로세스입니다.이 두 프로세스 간에는 Electron IPC (Inter-Process Communication)를 사용하여 통신합니다.그럼 IPC를 사용하여 두 프로세스 간에 데이터를 전송하고 명령을 보내는 방법을 소개합니다.📌 IPC로 Main - Renderer 프로세스 간 데이터 주고받기실제로 두 프로세스 간 데이터를 주고받기 위해서는 정말 간단한 절차만 거치면 됩니다.특정 채널명을 정한 뒤 ipcMain or .. 2024. 5. 13.

이전 1 2 3 4 5 다음

티스토리툴바