thumbnail

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

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

2019년 11월 24일0개의 댓글
Rollup을 사용하여 디자인 시스템 번들 후, npm 라이브러리로 배포하기 Thumbnail

Rollup을 사용하여 디자인 시스템 번들 후, npm 라이브러리로 배포하기

우리가 만든 컴포넌트들을 다른 프로젝트에서도 사용 할 수 있게 해주려면 패키지를 만들어서 npm에 퍼블리시를 해주어야 합니다. (또는, 로컬 패키지로 설정해서 사용하거나 git 레포로 설치하는 방법도 존재합니다.) 라이브러리를 배포하려면, 우리가 보통 웹 애플리케이션...

2019년 11월 24일0개의 댓글
Storybook을 활용하여 본격적으로 디자인 시스템 구축하기 Thumbnail

Storybook을 활용하여 본격적으로 디자인 시스템 구축하기

스토리북을 쓰는 방법을 어느정도 배웠으니, 이제 Hello 컴포넌트 말고 정말 디자인 시스템에 있어서 유의미한 컴포넌트들을 만들어봅시다. 그런데, 어떤 컴포넌트를 만들어야 할까요? 사실 가장 이상적인것은 프로젝트를 만드는 과정에서 처음부터 디자인 시스템을 구축하고 ...

2019년 11월 24일1개의 댓글

Storybook 프로젝트에서 TypeScript로 컴포넌트의 props 문서화 편하게 하기

TypeScript 를 사용하면 JavaScript의 불편함을 해결해줄 수 있고, IDE를 더욱 적극적으로 활용 할 수 있게 해줍니다. 특히, 리액트 컴포넌트를 TypeScript 로 작성하면, PropTypes 를 완전히 대체 할 수 있고 훨씬 유용하고 편합니다. ...

2019년 11월 23일0개의 댓글
Storybook을 다양한 Addon과 함께 활용해보면서 사용법 정복하기 Thumbnail

Storybook을 다양한 Addon과 함께 활용해보면서 사용법 정복하기

Storybook의 기본적인 사용법을 알아보고, 또 다양한 Addons 들을 활용하는 방법을 알아봅시다.

2019년 11월 23일3개의 댓글
TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기  Thumbnail

TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기

TypeScript와 Storybook을 사용하여 나만의 디자인 시스템을 구축해봅시다! 우선, 디자인 시스템이 무엇인지부터 알아보도록 합시다.

2019년 11월 23일1개의 댓글
TypeScript 환경에서 Redux를 프로처럼 사용하기 Thumbnail

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

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

2019년 10월 3일22개의 댓글
TypeScript 환경에서 리액트 Context API 제대로 활용하기 Thumbnail

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

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

2019년 9월 29일4개의 댓글
타입스크립트로 리액트 Hooks 사용하기 (useState, useReducer, useRef) Thumbnail

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

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

2019년 9월 27일5개의 댓글
리액트 컴포넌트 타입스크립트로 작성하기 Thumbnail

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

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

2019년 9월 27일6개의 댓글
타입스크립트 기초 연습 Thumbnail

타입스크립트 기초 연습

이 포스트에서는 여러분들이 타입스크립트를 리액트 프로젝트에서 사용해보기 전에, 알아두면 유용한 타입스크립트의 기초 핵심을 다뤄보게 됩니다. 추후 리액트를 사용할 것이 아니더라 하더라도, 이 튜토리얼에 나와있는 연습을 진행해보시면 타입스크립트를 통해 어떤 도움을 얻을 수...

2019년 9월 27일2개의 댓글
리액트 프로젝트에서 타입스크립트 사용하기 Thumbnail

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

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

2019년 9월 27일4개의 댓글
리액트를 다루는 기술 개정판 출간 - 무엇이 달라졌을까? Thumbnail

리액트를 다루는 기술 개정판 출간 - 무엇이 달라졌을까?

안녕하세요! 리액트를 다루는 기술의 개정판이 출간되었습니다. 초판은 한동안 절판이 되어서 구매가 불가능했는데요..! 이제 드디어 개정판을 읽어보실 수 있게 되었습니다. 현재 yes24 에서 예약판매중 입니다 (링크) 이 포스트에서는 개정판에서 어떤 내용이 바뀌었...

2019년 8월 26일15개의 댓글
GDG FRONT-ENDGAME  컨퍼런스 참가 및 발표 후기 Thumbnail

GDG FRONT-ENDGAME 컨퍼런스 참가 및 발표 후기

2019년 6월 22일, 난생처음 컨퍼런스에서 세션 발표를 하게 됐었다. 전반적인 후기 사실 기존에 1.5시간, 4시간 정도의, 세미나 및 강의 형태의 발표는 자주 해왔었는데, 30분 세션 발표는 처음이었다. 일단 참여를 할 계획은 따로 없었는데, GDG 행사 오거...

2019년 6월 23일11개의 댓글
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일4개의 댓글
react-testing-library 를 사용한 리액트 컴포넌트 테스트 Thumbnail

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

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

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

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

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

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

리액트 테스트의 소개

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

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

TDD의 소개

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

2019년 6월 4일4개의 댓글