profile
Frontend Engineer@RIDI. 개발을 재미있게 이것 저것 하는 개발자입니다.
post-thumbnail

Redux 어떻게 써야 잘 썼다고 소문이 날까?

40% 이상의 개발자들이 리액트 프로젝트에서 사용하고 있는 리덕스(Redux), 더 잘 쓰는 방법을 알려드립니다. 리덕스 말고 다른 선택지, 그리고 리덕스를 사용 할 떄 알고있으면 유용한 팁들을 다룹니다.

2021년 1월 28일
·
15개의 댓글

CRA로 만든 프로젝트에 Storybook 적용 / 유용한 팁 / 강의를 마치면서..

6. CRA로 만든 프로젝트에 storybook 적용 우리가 디자인 시스템을 만들때만 스토리북을 사용 할 수 있는건 아닙니다. 꼭 디자인 시스템이 아니여도, 기존에 존재하던 웹 프런트엔드 프로젝트에 스토리북을 적용하면 컴포넌트 문서화를 할 때 편하므로 매우 유용합니다. 디자인 시스템을 만들기 위하여 프로젝트를 아예 분리하는것이 번거로운 상황이라면, 기존...

2019년 11월 24일
·
4개의 댓글
post-thumbnail

TypeScript 환경에서 Redux를 프로처럼 사용하기

이번에 준비한 튜토리얼에서는 TypeScript 환경에서 Redux를 프로처럼 사용하는 방법을 다뤄보도록 하겠습니다. 왜 제목이 "프로처럼"이냐! 사실은 조금 주관적입니다. 이 튜토리얼에서는 지금까지 제가 다양한 TypeScript/Redux 관련 코드를 읽고, 작성해오면서 그 중에서 제가 맘에 들었던 구조를 소개시켜드리겠습니다. 그런데 프로처럼 사용해...

2019년 10월 3일
·
45개의 댓글
post-thumbnail

TypeScript 환경에서 리액트 Context API 제대로 활용하기

이번 튜토리얼에서는 타입스크립트 환경에서 Context API를 제대로 활용하는 방법에 대해서 다뤄보도록 하겠습니다. Context API를 사용함에 있어서, 코드의 구조를 어떻게 가져갈 지에 대해서는 딱 정해진 방법이 존재하지 않습니다. Context 를 준비하는 과정에서 클래스형 컴포넌트를 사용 할 수도 있고, 함수형 컴포넌트를 사용 할 수도 있죠. 함...

2019년 9월 29일
·
13개의 댓글
post-thumbnail

타입스크립트로 리액트 Hooks 사용하기 (useState, useReducer, useRef)

이번 섹션에서는 타입스크립트를 사용하는 리액트 컴포넌트에서 `useState` 및 `useReducer` 를 사용하여 컴포넌트의 상태를 관리하는 방법과 `useRef` 를 사용하여 컴포넌트 내부에서 관리하는 변수 및 DOM 을 이용하는 방법에 대해서 알아보겠습니다.

2019년 9월 27일
·
10개의 댓글
post-thumbnail

리액트 컴포넌트 타입스크립트로 작성하기

이 튜토리얼에서는 타입스크립트가 적용된 리액트 프로젝트를 만드는 방법을 알아보고, 리액트 컴포넌트를 타입스크립트로 작성하는 방법에 대하여 다뤄보게 됩니다. 프로젝트 생성 우선, 타입스크립트를 사용하는 리액트 프로젝트를 만들어볼까요? 타입스크립트를 사용하는 리액트

2019년 9월 27일
·
12개의 댓글
post-thumbnail

리액트 프로젝트에서 타입스크립트 사용하기

이번에 올리게 될 개발 튜토리얼 시리즈에서는 리액트 프로젝트에서 타입스크립트를 사용하는 방법에 대하여 알아보겠습니다. JavaScript 는 Weakly-typed 된 언어이기 때문에 특정 숫자 변수를 선언 한 다음에 그 안에 다른 타입의 값을 담을 수 있어요. 예를 들자면, 숫자로 선언한 변수에 문자열을 넣을 수도 있고, null을 넣을 수도 있고 배열...

2019년 9월 27일
·
9개의 댓글
post-thumbnail

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

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

2019년 6월 4일
·
6개의 댓글
post-thumbnail

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

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

2019년 6월 4일
·
9개의 댓글
post-thumbnail

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

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

2019년 6월 4일
·
18개의 댓글
post-thumbnail

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

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

2019년 6월 4일
·
3개의 댓글
post-thumbnail

리액트 테스트의 소개

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

2019년 6월 4일
·
0개의 댓글
post-thumbnail

TDD의 소개

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

2019년 6월 4일
·
8개의 댓글
post-thumbnail

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

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

2019년 6월 4일
·
3개의 댓글
post-thumbnail

react-redux 에서 Hooks 사용하기

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

2019년 4월 27일
·
16개의 댓글
post-thumbnail

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

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

2018년 11월 2일
·
7개의 댓글
post-thumbnail

리액트의 Hooks 완벽 정복하기

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

2018년 10월 28일
·
35개의 댓글
post-thumbnail

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

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

2018년 10월 25일
·
23개의 댓글
post-thumbnail

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

리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다. 저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는 프로젝트에서는 styled-components 를 사용하기도 합니다 :) CSS Module 은 작년에 자주 사용했었는데 사용하기가 요즘은 조금 불편하다고 느껴져서 잘 사용하고 있지 않고 있습니다.

2018년 10월 21일
·
27개의 댓글
post-thumbnail

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

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

2018년 10월 2일
·
29개의 댓글