Query 사용 우선순위 이 전 글들에서는 getByTestId 쿼리를 사용해 테스트를 진행했지만 사실 getByTestId는 testing-library에서 우선순위가 가장 낮은 쿼리입니다. 때문에 testing-library에서 권장하는 Query들의 우선순위를 살펴보고 가겠습니다. 기본 원칙에 따라 테스트는 사용자가 코드(컴포넌트, 페이지 등)와 상호 작용하는 방식과 최대한 유사해야 합니다. 이를 염두에 두고 다음과 같은 우선순위를 권장합니다: 1. 모든 사용자가 접근할 수 있는 쿼리(Queries Accessible to Everyone) Query 사용 우선순위가 가장 높은 것은 시각/마우스 사용자뿐만 아니라 보조 기술을 사용하는 사용자의 경험을 반영하는 쿼리입니다. getByRole: 이 쿼리..
Test Driven Development 란 무엇인가요? 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성합니다. 테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성합니다 TDD를 하면 좋은 점 TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여됩니다. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어듭니다. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높습니다. TDD 방식으로 카운터 버튼 앱 만들어보기 1. 해야 할 일 - 카운터는 0 부터 시작해야 됩니다. 2. 테스트 코드 작성 import React from "react"; im..
해당 글은 John Ahn 님의 따라하는 리액트테스트 강의를 참고하여 작성했습니다. 왜 애플리케이션을 TEST 해야 할까요? 간단하게 더 안정적인 애플리케이션을 위해서는 여러 방법으로 테스트를 해줘야 더 안정적인 애플리케이션이 될 수 있습니다. 테스팅으로 얻는 이점은 무엇일까요? 디버깅 시간을 단축! 만약 데이터가 잘못 나왔다면 그것이 UI의 문제인지 DB의 문제인지등 전부 테스트를 해봐서 찾아야 하는데 테스팅 환경이 구축된 어있다면 자동화된 유닛 테스팅으로 특정 버그를 쉽게 찾아낼 수 있습니다. 더욱 안정적인 애플리케이션! 많은 테스트 코드와 함께 작성된 코드의 애플리케이션이 되기 때문에 훨씬 안정적인 애플리케이션이 됩니다. 이밖에도 재설계 시간의 단축과 추가로 무언가를 더 구현해야 할 때 더 용이하게..
라우터 핸들러를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 경로에 대한 custom request handler를 만들 수 있습니다. 라우트 핸들러는 app 디렉터리 내에서만 사용할 수 있습니다. 이는 pages 디렉터리 내의 API 라우트와 동일한 역할을 담당하기 때문에 API 라우트와 라우트 핸들러를 함께 사용할 필요가 없다는 것을 의미합니다. Convention 라우트 핸들러는 앱 디렉토리 내의 route.js|ts 파일에 정의됩니다. /* app/api/route.ts */ export async function GET(request: Request) {} 라우트 핸들러는 page.js 및 layout.js와 유사하게 앱 디렉터리 내에서 중첩될 수 있습니다. 그러나 page.js와 동일한..
라우트 가로채기는 현재 레이아웃 안에서 라우트를 로드하면서 현재 페이지의 컨텍스트를 유지할 수 있게 해줍니다. 이러한 라우팅 패러다임은 특정 경로를 "가로채서" 다른 경로를 표시하고 싶을 때 유용합니다. 예를 들어, feed 내부에서 사진을 클릭할 때 feed 위에 모달이 나타나야 합니다. 이 경우, Next.js는 /feed 경로를 가로채고 이 URL을 /photo/123 대신에 보여줍니다. 그러나 공유 가능한 URL을 클릭하거나 페이지를 새로고침하는 경우와 같이 사진에 직접 이동할 때는 모달 대신 전체 사진 페이지가 렌더링되어야 합니다. Convention 라우트 가로채기는 (..) 구문을 사용하여 정의할 수 있습니다. 이는 상대 경로 표기법인 ../과 유사하지만 세그먼트에 대해 적용됩니다. 다음을 ..
병렬 라우팅(Parallel Routing)은 동시에 또는 조건에 따라 동일한 레이아웃에서 하나 이상의 페이지를 렌더링할 수 있게 해줍니다. 대시보드나 소셜 사이트의 피드와 같은 매우 동적인 앱 섹션에서는 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있습니다. 예를 들어, @team 페이지와 @analytics 페이지를 동시에 렌더링할 수 있습니다. 병렬 라우팅을 사용하면 독립적으로 스트리밍되는 각 경로에 대해 독립적인 오류 및 로드 상태를 정의할 수 있습니다. 병렬 라우팅은 인증 상태와 같은 특정 조건에 따라 슬롯을 조건부로 렌더링할 수 있도록 해줍니다. 이를 통해 동일한 URL에서 완전히 분리된 코드를 사용할 수 있게 됩니다. Convention 병렬 라우트는 명명된 슬롯(named slo..
error.js 파일 규칙을 사용하면 중첩된 경로에서 런타임 오류를 우아하게 처리할 수 있습니다. React Error Boundary 내에 라우트 세그먼트와 해당 중첩된 하위 항목을 자동으로 래핑합니다. 파일 시스템 계층 구조를 사용하여 세분화를 조정하여 특정 세그먼트에 맞는 오류 UI를 생성합니다. 오류를 해당 세그먼트로 격리시키면서 나머지 앱은 정상적으로 동작합니다. 전체 페이지 새로고침 없이 오류로부터 복구를 시도하는 기능을 추가할 수 있습니다. route segment 내에 error.js 파일을 추가하고 React 컴포넌트를 내보내어 오류 UI를 생성합니다. /* app/dashboard/error.tsx */ 'use client' // 에러 컴포넌트는 클라이언트 컴포넌트로 만들어야합니다. ..
loading.js 파일은 React Suspense를 자동으로 래핑하여 스트리밍 형태의 로딩 UI를 생성하는 데 도움을 줍니다. 이 컨벤션을 사용하면 라우트 세그먼트의 내용을 로드하는 동안 서버에서 즉시 로딩 상태를 표시하고, 렌더링이 완료되면 자동으로 새로운 콘텐츠로 교체됩니다. Instant Loading States 인스턴트 로딩 상태는 탐색 시 즉시 표시되는 대체 UI입니다. 스켈레톤이나 스피너와 같은 로딩 표시기 또는 향후 화면의 작은 부분(커버 사진, 제목 등)과 같은 의미 있는 요소를 사전 렌더링하여 로딩 상태를 만들 수 있습니다. 이를 통해 사용자가 애플리케이션이 응답하고 있다는 것을 이해할 수 있으며, 더 나은 사용자 경험을 제공할 수 있습니다. 폴더 내에 loading.js 파일을 추..
