Next.js에서 Jest로 유닛테스트 만들기
Unit-Test 유닛 테스트, Unit Test, 란 “단위” 별 테스트를 뜻한다. 백엔드에서 단위 는 한 클래스의 매서드를 의미할 수 있고, 프론트엔드에선 하나의 컴포넌트를 가리킨다. 유닛 테스트의 목적은 코드의 특정 단위 (메서드나 모듈)가 기대한대로 작동하는지 확인
Tag
- Next.js 5
- Unit-Test 3
- Jest 3
- Server-Side-Rendering 2
- Redux-Saga 2
- Nestjs 1
- GraphQL 1
- JUnit 1
- Client 1
- Client Component 1
- Form-Component 1
- Redux 1
- Generator-Function 1
- Version-Control 1
- rebase 1
- merge 1
- Saga 1
Next.js
새로운 Next.js 아키텍쳐에서 Redux 사용
Introduction 리액트 (React) 라이브러리하고 리덕스 (Redux)만 사용했던 기존의 어떤 프로젝트를 Next.js와 Redux-Saga를 사용하여 새롭게 리뉴얼을 하고 있다. 기존 프로젝트때 했던 대로 리덕스 세팅을 하니 여러가지 에러가 발생했고, 그 에러들을 조사하...
Server Side Rendering with Next.js
Server-Side-Rendering (서버 사이드 렌더링) 렌더링은 간단하게 데이터와 UI 컴포넌트를 결합하여 사용자에게 시각적으로 표시하는 과정 이렇게 정의될 수 있다. 이 과정은 다음과 같이 두 가지 주요 형태로 나눌 수 있다.
Code Review (RegisterForm.tsx)
Code Review
Client Component (클라이언트 컴포넌트)
Client Component (클라이언트 컴포넌트) Next.js 버전 13 부터 모든 컴포넌트는 기본적으로 서버 컴포넌트로 간주되게 되었다. 따라서 클라이언트와 상호작용이 필요한 컴포넌트, 예를 들어 로그인 폼 컴포넌트나 회원가입 폼 컴포넌트 같은 컴포넌트들은 컴포넌트 파일 최...
Unit-Test
Jest로 Saga 테스트하기
Introduction Next.js에서 Jest로 유닛테스트 만들기에서 다음과 같은 내용을 다뤘다. 컴포넌트에 HTML 요소들이 렌더링이 되는가? 사용자 이벤트들이 제대로 동작하는가? 액션 요청이 디스패치가 잘 되는가?
Next.js에서 Jest로 유닛테스트 만들기
Unit-Test 유닛 테스트, Unit Test, 란 “단위” 별 테스트를 뜻한다. 백엔드에서 단위 는 한 클래스의 매서드를 의미할 수 있고, 프론트엔드에선 하나의 컴포넌트를 가리킨다. 유닛 테스트의 목적은 코드의 특정 단위 (메서드나 모듈)가 기대한대로 작동하는지 확인
Unit Test
Unit Test
Jest
Jest로 Saga 테스트하기
Introduction Next.js에서 Jest로 유닛테스트 만들기에서 다음과 같은 내용을 다뤘다. 컴포넌트에 HTML 요소들이 렌더링이 되는가? 사용자 이벤트들이 제대로 동작하는가? 액션 요청이 디스패치가 잘 되는가?
Next.js에서 Jest로 유닛테스트 만들기
Unit-Test 유닛 테스트, Unit Test, 란 “단위” 별 테스트를 뜻한다. 백엔드에서 단위 는 한 클래스의 매서드를 의미할 수 있고, 프론트엔드에선 하나의 컴포넌트를 가리킨다. 유닛 테스트의 목적은 코드의 특정 단위 (메서드나 모듈)가 기대한대로 작동하는지 확인
Unit Test
Unit Test
Server-Side-Rendering
새로운 Next.js 아키텍쳐에서 Redux 사용
Introduction 리액트 (React) 라이브러리하고 리덕스 (Redux)만 사용했던 기존의 어떤 프로젝트를 Next.js와 Redux-Saga를 사용하여 새롭게 리뉴얼을 하고 있다. 기존 프로젝트때 했던 대로 리덕스 세팅을 하니 여러가지 에러가 발생했고, 그 에러들을 조사하...
Server Side Rendering with Next.js
Server-Side-Rendering (서버 사이드 렌더링) 렌더링은 간단하게 데이터와 UI 컴포넌트를 결합하여 사용자에게 시각적으로 표시하는 과정 이렇게 정의될 수 있다. 이 과정은 다음과 같이 두 가지 주요 형태로 나눌 수 있다.
Redux-Saga
Jest로 Saga 테스트하기
Introduction Next.js에서 Jest로 유닛테스트 만들기에서 다음과 같은 내용을 다뤘다. 컴포넌트에 HTML 요소들이 렌더링이 되는가? 사용자 이벤트들이 제대로 동작하는가? 액션 요청이 디스패치가 잘 되는가?
Redux Saga의 Effects 와 generator function에 대해 알아보자
Introduction Redux-Saga는 Redux 애플리케이션에서 비동기 작업을 더 쉽게 관리할 수 있도록 도와주는 라이브러리다. Redux-Saga는 Saga라는 개념을 사용하여 비동기 흐름을 관리하며, 이를 통해 복잡한 비동기 작업의 흐름을 단순화하고 제어할 수 있다. R...
Nestjs
Mapped Types
Mapped Types
GraphQL
Mapped Types
Mapped Types
JUnit
Unit Test
Unit Test
Client
Client Component (클라이언트 컴포넌트)
Client Component (클라이언트 컴포넌트) Next.js 버전 13 부터 모든 컴포넌트는 기본적으로 서버 컴포넌트로 간주되게 되었다. 따라서 클라이언트와 상호작용이 필요한 컴포넌트, 예를 들어 로그인 폼 컴포넌트나 회원가입 폼 컴포넌트 같은 컴포넌트들은 컴포넌트 파일 최...
Client Component
Client Component (클라이언트 컴포넌트)
Client Component (클라이언트 컴포넌트) Next.js 버전 13 부터 모든 컴포넌트는 기본적으로 서버 컴포넌트로 간주되게 되었다. 따라서 클라이언트와 상호작용이 필요한 컴포넌트, 예를 들어 로그인 폼 컴포넌트나 회원가입 폼 컴포넌트 같은 컴포넌트들은 컴포넌트 파일 최...
Form-Component
Code Review (RegisterForm.tsx)
Code Review
Redux
새로운 Next.js 아키텍쳐에서 Redux 사용
Introduction 리액트 (React) 라이브러리하고 리덕스 (Redux)만 사용했던 기존의 어떤 프로젝트를 Next.js와 Redux-Saga를 사용하여 새롭게 리뉴얼을 하고 있다. 기존 프로젝트때 했던 대로 리덕스 세팅을 하니 여러가지 에러가 발생했고, 그 에러들을 조사하...
Generator-Function
Redux Saga의 Effects 와 generator function에 대해 알아보자
Introduction Redux-Saga는 Redux 애플리케이션에서 비동기 작업을 더 쉽게 관리할 수 있도록 도와주는 라이브러리다. Redux-Saga는 Saga라는 개념을 사용하여 비동기 흐름을 관리하며, 이를 통해 복잡한 비동기 작업의 흐름을 단순화하고 제어할 수 있다. R...
Version-Control
Git Rebase & Git Merge
Introduction 개발자들은 개발 프로세스에서 브랜치를 체계적으로 관리하기 위해 특정한 워크플로우 (work flow) 를 정의하는데, 이 플로우가 바로 깃 플로우 (git flow) 이다. Git Flow 는 다음과 같은 주요 브랜치와 그들 간의 관계를 중심으로 운영된다. ...
rebase
Git Rebase & Git Merge
Introduction 개발자들은 개발 프로세스에서 브랜치를 체계적으로 관리하기 위해 특정한 워크플로우 (work flow) 를 정의하는데, 이 플로우가 바로 깃 플로우 (git flow) 이다. Git Flow 는 다음과 같은 주요 브랜치와 그들 간의 관계를 중심으로 운영된다. ...
merge
Git Rebase & Git Merge
Introduction 개발자들은 개발 프로세스에서 브랜치를 체계적으로 관리하기 위해 특정한 워크플로우 (work flow) 를 정의하는데, 이 플로우가 바로 깃 플로우 (git flow) 이다. Git Flow 는 다음과 같은 주요 브랜치와 그들 간의 관계를 중심으로 운영된다. ...
Saga
Jest로 Saga 테스트하기
Introduction Next.js에서 Jest로 유닛테스트 만들기에서 다음과 같은 내용을 다뤘다. 컴포넌트에 HTML 요소들이 렌더링이 되는가? 사용자 이벤트들이 제대로 동작하는가? 액션 요청이 디스패치가 잘 되는가?