next-redux-wrappe 공식 문서에서 next js에서 store를 관리하는 방법 2가지를 소개합니다. 서버와 클라이언트 스토어를 분리하는 방법 클라이언트 쪽 스토어에 서버 쪽 스토어를 덮어씌우는 방법 그중 2번째 방법을 사용하고 있었는데 아마도 초기 리덕스 설정을 할 때 _app.tsx에 wrapper.getInitialAppProps를 사용하면 자동적으로 서버와 클라이언트 store를 관리해 주는 것으로 착각한 거 같습니다. 즉, 지금까지 의미 없는 서버 쪽 store를 호출해 hydrate를 계속 발생시키고 있었던 겁니다. 서버 쪽에서 의미 없는 hydrate를 계속 발생시키니 rootReducer코드를 보면 서버가 보내는 action.payload에 store의 초기값이 담겨 오므로 클라..
페이지 라우터는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터입니다. 파일이 페이지 디렉터리에 추가되면 자동으로 경로로 사용할 수 있습니다. Index routes 라우터는 index라는 이름의 파일을 디렉터리의 루트로 자동 라우팅합니다. pages/index.js → / pages/blog/index.js → /blog Nested routes 라우터는 중첩 파일을 지원합니다. 중첩된 폴더 구조를 만들면 파일은 여전히 동일한 방식으로 자동으로 라우팅 됩니다. pages/blog/first-post.js → /blog/first-post pages/dashboard/settings/username.js → /dashboard/settings/username Pages with Dynamic Ro..
노션에서 옵시디언으로 옮기는 이유 옵시디언의 장점과 옵시디언 vs노션을 비교하는 자료들은 찾아보면 많기 때문에 길게 풀어놓지는 않겠습니다. 노션과 옵시디언 비교 글, 옵시디언과 노션의 비교 유뷰트, 노매드 코더의 옵시디언 소개 유튜브 , 옵시디언 고수의 블로그 개인적으로 노션을 이용해 다양한 글 & 자료 & 일정을 관리하고 있지만 페이지의 용량이 늘어날수록 느려지는 속도, 정규화된 템플릿으로 커스텀에 제한이 많음, 슬슬 물리기 시작하는 노션의 UI 등으로 인해 지속적으로 노션을 대체할 만한 앱을 둘러보고 있었습니다. 많은 대체 앱들 중 옵시디언을 선택한 이유는 바로 아래와 같은 멋진 그래프 때문이죠 위 그래프는 내 개인 노션에 있는 글들을 옵시디언으로 옮겼을때 어떤 글들이 어떻게 관계를 갖고 있는지 그..
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..
Rust 컴파일러에서 Jest 설치 방법 Next.js 12 릴리스부터 Next.js에는 이제 Jest를 위한 구성이 기본으로 제공됩니다. Jest를 설정하려면 jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom을 설치하세요: yarn add jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom -D 내부적으로 next/jest는 다음을 포함하여 자동으로 Jest를 구성합니다: SWC를 사용한 트랜스폼 설정 스타일시트(. css,. module.css 및 해당 scss 변형), 이미지 import 및 next/font 자동 mock..
해당 글은 John Ahn 님의 따라하는 리액트테스트 강의를 참고하여 작성했습니다. 왜 애플리케이션을 TEST 해야 할까요? 간단하게 더 안정적인 애플리케이션을 위해서는 여러 방법으로 테스트를 해줘야 더 안정적인 애플리케이션이 될 수 있습니다. 테스팅으로 얻는 이점은 무엇일까요? 디버깅 시간을 단축! 만약 데이터가 잘못 나왔다면 그것이 UI의 문제인지 DB의 문제인지등 전부 테스트를 해봐서 찾아야 하는데 테스팅 환경이 구축된 어있다면 자동화된 유닛 테스팅으로 특정 버그를 쉽게 찾아낼 수 있습니다. 더욱 안정적인 애플리케이션! 많은 테스트 코드와 함께 작성된 코드의 애플리케이션이 되기 때문에 훨씬 안정적인 애플리케이션이 됩니다. 이밖에도 재설계 시간의 단축과 추가로 무언가를 더 구현해야 할 때 더 용이하게..
미들웨어는 요청이 완료되기 전에 코드를 실행할 수 있게 해줍니다. 그런 다음 들어오는 요청에 따라 응답을 수정할 수 있습니다. 응답을 다시 작성하거나 리다이렉트하거나 요청 또는 응답 헤더를 수정하거나 직접 응답하는 등의 작업을 수행할 수 있습니다. 미들웨어는 캐시된 콘텐츠와 라우트가 일치하기 전에 실행됩니다. 자세한 내용은 '매칭 경로(Matching Paths)'를 참조하십시오. Convention 프로젝트의 루트에 있는 'middleware.ts' (또는 .js) 파일을 사용하여 미들웨어를 정의하세요. 예를 들어, pages 디텍터리 또는 app디렉터리와 동일한 수준이거나 src 내부에 해당되는경우 위치시킬 수 있습니다. Example /* middleware.ts */ import { NextRes..
