전체태그 보기

#react (162개의 포스트)

nibble
이 글은 벨로퍼트님의 Redux (3) 리덕스를 리액트와 함께 사용하기 를 보고 작성한 글입니다. 이 글을 보시기 전에 리액트 기초을 보고오세요. 0. 배경...
towozy
ie11에서 진행 중인 그림판 프로젝트가 수행이 안돼서 다음 포스팅을 참고해서 다음과 같이 해결했다. https://velog.io/@velopert/create-react-app-v2 아래 npm을 설치하고, $ yarn add react-app-polyfill 다음 둘중에 하나를 index.js 에서 import import 'react-a...
Redux #1
geonhwi

Redux #1

2019년 7월 11일0개의 댓글
Redux / Action / Middleware
REACT #5
geonhwi

REACT #5

2019년 7월 10일0개의 댓글
useContext / useRef / useMemo / useCallback
오늘 할일...
kjs100184

오늘 할일...

2019년 7월 6일0개의 댓글
무조건 끝낸다..... 썸네일은 먹고 싶은 탕수육으로.. React Hooks 문서 몇개 읽고 반해버려서.... 간단하겠지..(?) 1. 기존에 작성했던 코드 = react hooks로 변경(+ mobx-react-lite 사용) 2. mongodb 데이터 모델링하기
REACT #4
geonhwi

REACT #4

2019년 7월 5일0개의 댓글
hooks / useState / useEffect / handleEvent
REACT #3
geonhwi

REACT #3

2019년 7월 5일0개의 댓글
contextAPI / ref
REACT #1
geonhwi

REACT #1

2019년 7월 5일0개의 댓글
UI Data / state / props / Purecomponent / setState
jeonghoheo
React hooks image Hook은 React 버전 16.8에 새로 추가되었습니다. Hook를 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 우리가 리액트에서 state에 라이프 사이클을 다루기위해서 Clsss를 사용한는것은 필연적이 였습니다. 이제 우리는 Hook을 사용해 Class없이 함수만으...
[주니어탈출기] Next.js with react-apollo
zansol
✨ 왜 nextjs + React + apollo-client 조합으로 SSR 구현을 하게되었다. 물론 98% 짜여진 코드에 2% 치명적인 코드를 수정해야하는 작업이었지만, 클라이언트에도, 서버에도 매우 치명적인 오류였기때문에 반드시 고쳐야만했다. 🔧🔨react-apollo는 이 프로젝트를 통해 처음 접하는 라이브러리였고, 아직 레퍼런스도 부족해서 영알...
리액트 컴포넌트 만들기 - 캘린더
zynkn
썸네일 어그로에 끌리셨다면...ㅋ 1. 프로젝트 생성 https://github.com/zynkn/component-calendar 에서 프로젝트를 fork 하거나 clone 해주세요. 그리고 init branch로 이동 합니다. 스텝4.PNG 캘린더가 잘 작동하는지 확인해주세요. 아직 기능 하나가 남았습니다. 캘린더 헤더에 있...
geonhwi
Recursion 과제는 어려워서 좀 미루고...;;; 이전에 공부하던 리액트 복습 겸 동빈나님의 강의를 정리해본다. 다른 강의를 많이 보고 와서 그런지 이해가 쉬운 편 :) 꼼꼼하지 않게, 적.당.히 꼼꼼하게 블로깅하려고 한다...! - - - 1. GitHub 연동 자신의 Git Repo에 'React-Management'를 생성한다. c...
Styling? with Linaria!
asdhugh1

Styling? with Linaria!

2019년 6월 4일3개의 댓글
styled-components에 질렸다면 linaria는 어떤가요!
react-testing-library 의 비동기작업을 위한 테스트
velopert
리액트 애플리케이션에서 비동기 작업이 있을 때는 이를 어떻게 테스팅 하는지, 그리고 API 요청을 해야 하는 경우 이를 어떻게 mock 할 수 있는지에 대해서 알아보겠습니다. 우리가 이전에 만들었던 rtl-tutorial 프로젝트 디렉터리를 다시 에디터로 열어주세요. 비동기적으로 바뀌는 컴포넌트 UI 테스트 DelayedToggle 라는 컴포넌트...
react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기
velopert
이제 우리는 리액트에서 react-testing-library 를 통하여 테스트 코드를 작성하는 방법을 배웠습니다. 이제 우리가 배운 것들을 활용하여, TDD 흐름으로 투두 리스트를 만들어봅시다. 기존에는 코드를 먼저 구현하고 이를 위한 테스트 코드를 작성했는데요, 이번에는 반대로 테스트 코드를 먼저 작성하고 기능을 구현해보겠습니다. 우리는 앞으로 이런 ...
react-testing-library 를 사용한 리액트 컴포넌트 테스트
velopert
react-testing-library 에서는 Enzyme 과 달리 모든 테스트를 DOM 위주로 진행합니다. 그리고, 컴포넌트의 props 나 state 를 조회하는 일은 없습니다. 컴포넌트를 리팩토링하게 될 때에는, 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 실제 작동 방식은 크게 바뀌지 않습니다. react-testing-library는 이 점을...
Enzyme 을 사용한 리액트 컴포넌트 테스트
velopert
우선, 우리가 테스팅을 연습할 리액트 프로젝트를 만들겠습니다. CRA 를 통하여 프로젝트를 생성해주세요. 정리 이번 섹션에서는 Enzyme 을 통한 컴포넌트 테스팅에 대해서 알아보았습니다. Enzyme 의 공식 문서를 보면, Enzyme 에 있는 더 많은 기능들을 볼 수 있습니다....
리액트 테스트의 소개
velopert

리액트 테스트의 소개

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

TDD의 소개

2019년 6월 4일1개의 댓글
TDD (Test Driven Development · 테스트 주도 개발) 에 대해서 알아봅시다! TDD 는 테스트가 개발을 이끌어 나가는 형태의 개발론입니다. 가장 쉽게 설명하자면, 선 테스트 코드 작성, 후 구현 인데요, 이는 총 3가지 주요 절차로 이루어져있습니다. TDD 의 3가지 절차 실패 첫번째 절차는 실패입니다. 이는, 실...
벨로퍼트와 함께하는 리액트 테스팅
velopert
이 튜토리얼에서는 리액트 프로젝트에서 TDD (Test Driven Development · 테스트 주도 개발)을 하는 방법에 대해서 알아보겠습니다. 소프트웨어 개발에서의 "테스트" 라는 개념에 대해서 1도 모르는 개발자도 이 튜토리얼을 마치고나면, "나는 리액트 테스팅을 잘 할 수 있다!" 라고 말 할 수 있습니다. 이 튜토리얼을 진행하기 전에는 No...