분류 전체보기
[react-testing-library] react-testing-library란?
[react-testing-library] react-testing-library란?
2022.01.17🎯 react-testing-library 테스트가 소프트웨어가 사용되는 모습을 닮을수록, 테스트를 더욱 신뢰할 수 있게 된다. The more your tests resemble the way your software is used, the more confidence they can give you. 사용되는 모습이란? 사용자가 직접 앱을 사용하는 모습이다. React 컴포넌트의 특정 메서드나 상태를 테스트하는 게 아니라, 실제 유저가 사용하는 방식대로 테스트하는 접근하는 것이다. 유저가 페이지에서 어떤 DOM 요소에 접근하는 방법을 흉내 낸다. 이 방식으로 테스트 코드를 작성하면, 내부 구현이 바뀌어도 테스트가 깨지지 않는다. React 컴포넌트가 렌더링 한 결과에 대한 접근만 가능하다. 결과 중심..
[Jest] Async assertion
[Jest] Async assertion
2022.01.17🎯 Async assertion callback 패턴의 경우 test() 함수가 제공하는 done() 함수를 활용하여 콜백이 끝나고 done()을 호출이 된다. 에러가 발생하면 done()의 인자로 에러를 넘긴다. Promise 패턴의 경우 async/await을 활용하거나 Promise를 리턴한다. function isPythagoreanAsync(a, b, c) { return new Promise(resolve => { setTimeout(() => { const result = isPythagorean(a, b, c) if (result) return resolve(result) reject(new Error("Not pythagorean")) }, 500) }) } test('Should 3, ..
[Jest] Assertion Matchers 활용
[Jest] Assertion Matchers 활용
2022.01.17🎯 Assertion Matchers 활용 toBe() : 객체의 내용을 비교 toEqual() : 객체 자체를 비교할 toContain() toMatch() toThrow() function isPythagorean(a, b, c) { return a * a + b * b === c * c } function createTodo(id, title, content) { return { id, title, content } } function transformUser(user) { const { name, age, address } = user return [name, age, address] } 📝 toBe() test('Should 3, 4, 5 pythagorean', () => { expect(is..
[jest] jest란?
[jest] jest란?
2022.01.17🎯 jest facebook에서 오픈소스화한 테스팅 프레임워크 assertion 함수들, test runner, mock 라이브러리 등을 모두 제공한다. create-react-app에서 기본적으로 사용된다. (npm test) 사용성이 좋고, 가장 인기 있는 프로젝트다. 📝 jest의 핵심 기능들 assertion matchers (.toBe, .toEqual) async assertion mock functions testing lifecycle functions grouping snapshot testing 📝 Assertion matchers jest는 풍부한 matcher를 제공하여, 여러 상황에서 match를 체크할 수 있다. expect()는 expectation object를 리턴한다. 이..
[React] React 테스팅
[React] React 테스팅
2022.01.17🎯 React 테스팅 📝 코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 코드를 리팩토링 하면, 원래대로 동작하는지 테스트를 한다. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다. → 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. 📝 테스팅 코드 작성의 이점 테스팅 코드를 작성하여, 미연의 에러를 방지할 수 있다. TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상할 수 있다. 리팩토링 할 때 용이하다. 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다. 테스트가 용이하게 코드를 작성하여, 코드..
[TIL] 엘리스 SW 엔지니어 트랙 Day 060
[TIL] 엘리스 SW 엔지니어 트랙 Day 060
2022.01.17📖 오늘 배운 내용 - 2022.01.14 Redux React Redux redux-toolkit 📝 Redux 데이터 흐름 [Redux] 리덕스 데이터 흐름 🎯 Redux 데이터 흐름 📝 Redux 데이터 흐름 애플리케이션의 상태를 바꾸는 유일한 방법은 스토어를 통해 액션을 디스패치 하는 것뿐이다. 스토어에는 액션을 인자로 받는 디스패치라는 메서드가 lakelouise.tistory.com 📝 Redux 소개 [Redux] 리덕스란? 🎯 리덕스 앱 전체 상태를 쉽게 관리하기 위한 라이브러리 Redux의 많은 개념들이 Flux pattern에서 차용되었다, 주로 React 앱과 같이 사용한다. redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 lakelouise.tistory.com 📝..
[Redux] redux-toolkit
[Redux] redux-toolkit
2022.01.17🎯 redux-toolkit 활용 redux에서 공식적으로 추천하는 helper 라이브러리 기존에 만들어야 하는 수많은 보일러 플레이트를 제거하고 유용한 라이브러리를 포함하여 redux 코드를 쉽게 작성하게 한다. redux-devtools, immerjs, redux-thunk, reselect 등의 라이브러리가 미리 포함되어 있다. redux - unopinionated redux-toolkit - opinionated(의견이 반영된) 📝 configureStore const store = configureStore({ reducer: { posts: postsReducer, users: usersReducer } }) redux의 createStore 함수를 래핑 한다. named parameter..
[Redux] Redux의 구조
[Redux] Redux의 구조
2022.01.17🎯 Redux의 구조 redux는 자유롭게 확장하여 사용할 수 있다. 내부적으로 action과 데이터가 어떻게 흐르는지 이해하고, middleware, enhancer 등을 이용하여 redux를 확장할 수 있다. 📝 middleware action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달한다. redux-thunk, redux-logger 등의 라이브러리를 적용할 수 있다. 📝 enhancer action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달 redux devtools 등의 라이브러리를 적용할 수 있다.
[Redux] 리덕스란?
[Redux] 리덕스란?
2022.01.17🎯 리덕스 앱 전체 상태를 쉽게 관리하기 위한 라이브러리 Redux의 많은 개념들이 Flux pattern에서 차용되었다, 주로 React 앱과 같이 사용한다. redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 Redux를 활용한 앱 구축 사례가 많다. 📝 언제 Redux를 써야 하는가 앱 전체의 상태 관리가 필요할 때 useState, useReducer, useContext는 정해진 규약이 딱히 없다. 하지만 Redux는 정해진 규약이 있어서 협업하기 좋다. ⇒ 패턴이 정해져 있다. 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 redux-thunk redux-saga 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을..
[React Redux] React Redux란?
[React Redux] React Redux란?
2022.01.17🎯 React Redux란? React Redux는 컨텍스트를 통해 스토어를 전달하는 과정의 복잡함을 덜어주는 도구를 제공하는 라이브러리다. 라이브러리를 사용하면 Redux 스토어를 컨텍스트에 추가하고 컨테이너 컴포넌트를 만드는 일을 더 쉽게 할 수 있다. redux에서 관리하는 상태, dispatch 함수 등을 가져올 수 있다. 클래스 컴포넌트, 함수형 컴포넌트에 모두 연결할 수 있다. 📝 Provider React Redux는 컨텍스트에 스토어를 설정할 때 편리하게 사용할 수 있는 컴포넌트인 Provider를 제공한다. React는 엘리먼트를 Provider로 감싸기만 하면 해당 엘리먼트의 모든 자식은 자동으로 컨텍스트를 통해 스토어에 접근할 수 있다. const store = configureSto..
[Redux] 리덕스 데이터 흐름
[Redux] 리덕스 데이터 흐름
2022.01.17🎯 Redux 데이터 흐름 📝 Redux 데이터 흐름 애플리케이션의 상태를 바꾸는 유일한 방법은 스토어를 통해 액션을 디스패치 하는 것뿐이다. 스토어에는 액션을 인자로 받는 디스패치라는 메서드가 있다. 스토어를 통해 액션을 디스패치 하면 모든 리듀서에 액션이 전달되고 상태가 갱신된다. Redux는 모든 state를 스토어에 저장한다. 컴포넌트끼리 데이터 교류를 하지 않고, 스토어를 통해 데이터 교류가 이루어진다. 디스패치로 state를 업데이트하고 subscribe로 state 변동 시 view를 업데이트시켜준다. 1. store.dispatch(action)을 호출 2. Redux store가 리듀서 함수를 호출 3. 루트 리듀서는 여러 개의 리듀서 결과를 combineReducers()로 하나의 st..
[TIL] 엘리스 SW 엔지니어 트랙 Day 059
[TIL] 엘리스 SW 엔지니어 트랙 Day 059
2022.01.17📖 오늘 배운 내용 - 2022.01.13 react-redux 테스트 📝 리덕스 없이 리액트 구현 :: props drilling import {useState} from 'react'; import './App.css'; function App() { const [value, setValue] = useState(0); return ( Root {value} { setValue(value+1) }}> ); } function Left1(props){ return Left1 : {props.number} } function Left2(props){ return Left2 : {props.number} } function Left3(props){ return Left3 : {props.number} } ..