thumbnail
react-testing-library 의 비동기작업을 위한 테스트 Thumbnail

react-testing-library 의 비동기작업을 위한 테스트

리액트 애플리케이션에서 비동기 작업이 있을 때는 이를 어떻게 테스팅 하는지, 그리고 API 요청을 해야 하는 경우 이를 어떻게 mock 할 수 있는지에 대해서 알아보겠습니다. 우리가 이전에 만들었던 rtl-tutorial 프로젝트 디렉터리를 다시 에디터로 열어주세요....

2019년 6월 4일1개의 댓글
react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 Thumbnail

react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기

이제 우리는 리액트에서 react-testing-library 를 통하여 테스트 코드를 작성하는 방법을 배웠습니다. 이제 우리가 배운 것들을 활용하여, TDD 흐름으로 투두 리스트를 만들어봅시다. 기존에는 코드를 먼저 구현하고 이를 위한 테스트 코드를 작성했는데요, 이...

2019년 6월 4일0개의 댓글
react-testing-library 를 사용한 리액트 컴포넌트 테스트 Thumbnail

react-testing-library 를 사용한 리액트 컴포넌트 테스트

react-testing-library 에서는 Enzyme 과 달리 모든 테스트를 DOM 위주로 진행합니다. 그리고, 컴포넌트의 props 나 state 를 조회하는 일은 없습니다. 컴포넌트를 리팩토링하게 될 때에는, 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 ...

2019년 6월 4일6개의 댓글
Enzyme 을 사용한 리액트 컴포넌트 테스트 Thumbnail

Enzyme 을 사용한 리액트 컴포넌트 테스트

우선, 우리가 테스팅을 연습할 리액트 프로젝트를 만들겠습니다. CRA 를 통하여 프로젝트를 생성해주세요. 정리 이번 섹션에서는 Enzyme 을 통한 컴포넌트 테스팅에 대해서 알아보았습니다. Enzyme 의 공식 문서를 보면, Enzyme 에 있는 더 많은 기능...

2019년 6월 4일0개의 댓글
리액트 테스트의 소개 Thumbnail

리액트 테스트의 소개

리액트 컴포넌트를 테스트 할 때에는 주로 어떠한 결과가 화면상에 잘 나타났는지, 그리고 어떠한 이벤트 혹은 함수가 호출 됐을 때 원하는 업데이트가 잘 반영이 되는지를 확인합니다. 이를 수행하는 가장 기본적인 방법은 react-dom/test-utils 안에 들어있는 ...

2019년 6월 4일0개의 댓글
TDD의 소개 Thumbnail

TDD의 소개

TDD (Test Driven Development · 테스트 주도 개발) 에 대해서 알아봅시다! TDD 는 테스트가 개발을 이끌어 나가는 형태의 개발론입니다. 가장 쉽게 설명하자면, 선 테스트 코드 작성, 후 구현 인데요, 이는 총 3가지 주요 절차로 이루어져있습니다...

2019년 6월 4일1개의 댓글
벨로퍼트와 함께하는 리액트 테스팅 Thumbnail

벨로퍼트와 함께하는 리액트 테스팅

이 튜토리얼에서는 리액트 프로젝트에서 TDD (Test Driven Development · 테스트 주도 개발)을 하는 방법에 대해서 알아보겠습니다. 소프트웨어 개발에서의 "테스트" 라는 개념에 대해서 1도 모르는 개발자도 이 튜토리얼을 마치고나면, "나는 리액트 테스...

2019년 6월 4일1개의 댓글
react-redux 에서 Hooks 사용하기 Thumbnail

react-redux 에서 Hooks 사용하기

리덕스 v7.1 에 Hooks 기능이 alpha 로 탑재되었습니다. 한번 실습을 통하여 사용 방법을 알아봅시다.

2019년 4월 27일9개의 댓글
리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기 Thumbnail

리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기

Portals 는 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다.

2018년 11월 2일3개의 댓글
리액트의 Hooks 완벽 정복하기 Thumbnail

리액트의 Hooks 완벽 정복하기

React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다. 이에 대하여 한번 자세히 알아봅시다.

2018년 10월 28일22개의 댓글
리액트 프로젝트에 ESLint 와 Prettier 끼얹기 Thumbnail

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

ESLint 와 Prettier 를 리액트 프로젝트에서 제대로 적용하여 코드를 깔-끔-하게 관리해보는 방법을 배워봅시다.

2018년 10월 25일21개의 댓글
다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components Thumbnail

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components

리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다. 저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는...

2018년 10월 21일17개의 댓글
Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까? Thumbnail

Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까?

리액트 개발자라면 애용하고 계실 도구인 create-react-app 의 v2 버전이 릴리즈되었습니다! 기존에 만든 자료들을 업데이트해야 한다는 점 (특히 책... 따흑... )은 조금 귀찮긴 하지만, 좋아하는 도구가 더 멋져졌으니까, 정말 듣기좋은 소식인데요! 이

2018년 10월 2일29개의 댓글
리액트 프로젝트 코드 스플리팅 정복하기 Thumbnail

리액트 프로젝트 코드 스플리팅 정복하기

코드 스플리팅, 뭐 별거있나요? 그냥 웹팩에서 하라는대로 하면 되는걸요. 하지만! 리액트에서 코드 스플리팅이랑 서버사이드 렌더링을 함께 해보신 경험이 있으시다면, 이 두가지 작업을 함께 하는 경우, 굉장히 번거로워질 수도 있다는 것을 아실 것 입니다. 이 포스트에서는,...

2018년 9월 28일15개의 댓글
MobX (3) 심화적인 사용 및 최적화 방법 Thumbnail

MobX (3) 심화적인 사용 및 최적화 방법

지난 포스트에서 MobX 의 기본적인 사용 방법과, 리액트에서는 어떻게 사용하는지 알아보았습니다. MobX 를 조금 더 복잡한 프로젝트에서 사용을 한다면 어떻게 해야 할까요? 추가적으로, 어떻게 해야 컴포넌트의 업데이트 성능을 최적화 하면서 프로젝트를 구성 할 수 있는

2018년 9월 8일7개의 댓글
MobX (2) 리액트 프로젝트에서 MobX 사용하기 Thumbnail

MobX (2) 리액트 프로젝트에서 MobX 사용하기

MobX 는 리액트 종속적이진 않지만, 리액트에서 쓰려고 만들어졌기 때문에 함께 사용하면 엄청난 시너지가 발생합니다. 더 쉬운 글로벌 상태 관리는 물론이고, setState 도 쓸 필요가 없게 됩니다. 2-1. MobX 가 리액트를 만나면 우리가 이전 섹션에서 d...

2018년 9월 8일7개의 댓글
Redux (4) Immutable.js 혹은 Immer.js 를 사용한 더 쉬운 불변성 관리 Thumbnail

Redux (4) Immutable.js 혹은 Immer.js 를 사용한 더 쉬운 불변성 관리

Immutable.js 사용하기 Immutable.js 는 불변성을 유지해줘야 하는 객체의 값을 더 쉽게 업데이트 할 수 있게 해줍니다. Immutable.js 의 사용법은 여기서 더 자세히 보실 수 있습니다. 우선, 설치를 해주겠습니다.

2018년 9월 8일5개의 댓글
Redux (3) 리덕스를 리액트와 함께 사용하기 Thumbnail

Redux (3) 리덕스를 리액트와 함께 사용하기

3-1. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다. 하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 여러개의 스토어를 사용하는것은 사...

2018년 9월 8일3개의 댓글
Redux (1) 소개 및 개념정리 Thumbnail

Redux (1) 소개 및 개념정리

리덕스 소개 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더

2018년 9월 8일1개의 댓글