이번엔 기존의 프로젝트에 Redux를 추가하고, Reducer를 생성해보겠습니다. 일단은 추가만 하는 것이므로 크게 복잡하지 않습니다 :)
지난번 글에 이어서 PropTypes를 추가해보겠습니다. 이번엔 짧고 간단합니다!
요즘 한창 TDD에 관심이 늘었습니다 🤔 저도 몸소 체감하고 싶은데, 쉽지 않지만 재밌네요 ㅎㅎㅎ 천천히 따라해봅시다 :)
한참 TDD를 공부할 때 A가 물었다. A: TDD가 뭐에요? 왜 써야 하죠? 나: TDD는 테스트 코드를 먼저 작성하고 프로덕션 코드를 작성하는…. (중략)설계 기법이고요. 한 장점이 있습니다. A: 어? 그거 테스트 코드 작성했을 때의 장점 아니에요? 먼저 프로덕션 코드 작성하고 테스트 코드 작성하면 되지 않아요? 저는 테스트 코드 작성은 필수...
안녕하세요. 크몽에서 iOS앱을 개발중인 gwangyonglee(harry)입니다. 크몽 기술 블로그에서 포스팅했었는데, 개인 블로그에서도 포스팅하려고 합니다! 이 글은 TDD를 설명하는 글이 아닌 iOS 앱 TDD 적용기에 대해 작성해보려고 합니다. 1,2로 나누어서 작성할 예정이고, 1에서는 TDD를 적용하게 된 계기와 어떤 식으로 적용하였는지...
테스트 주도 개발로 배우는 객체 지향 설계와 실천 스터디에 3주차 부터 합류하게 되었다. 뭐가 뭔지 모르게 1시간이 지나갔다. 스터디 방법은 다음과 같다. - 한 챕터를 3분간 읽는다. - 한명씩 돌아가며 어떤 부분이 인상적이었는지 이야기를 나눈다. 주로 의문점이 드는 부분에 대해 이야기하신다. - 모두 이야기했으면 다시 3분간 읽는다. 이때는 어...
이제 우리는 리액트에서 react-testing-library 를 통하여 테스트 코드를 작성하는 방법을 배웠습니다. 이제 우리가 배운 것들을 활용하여, TDD 흐름으로 투두 리스트를 만들어봅시다. 기존에는 코드를 먼저 구현하고 이를 위한 테스트 코드를 작성했는데요, 이번에는 반대로 테스트 코드를 먼저 작성하고 기능을 구현해보겠습니다. 우리는 앞으로 이런 ...
react-testing-library 에서는 Enzyme 과 달리 모든 테스트를 DOM 위주로 진행합니다. 그리고, 컴포넌트의 props 나 state 를 조회하는 일은 없습니다. 컴포넌트를 리팩토링하게 될 때에는, 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 실제 작동 방식은 크게 바뀌지 않습니다. react-testing-library는 이 점을...
우선, 우리가 테스팅을 연습할 리액트 프로젝트를 만들겠습니다. CRA 를 통하여 프로젝트를 생성해주세요. 정리 이번 섹션에서는 Enzyme 을 통한 컴포넌트 테스팅에 대해서 알아보았습니다. Enzyme 의 공식 문서를 보면, Enzyme 에 있는 더 많은 기능들을 볼 수 있습니다....
리액트 컴포넌트를 테스트 할 때에는 주로 어떠한 결과가 화면상에 잘 나타났는지, 그리고 어떠한 이벤트 혹은 함수가 호출 됐을 때 원하는 업데이트가 잘 반영이 되는지를 확인합니다. 이를 수행하는 가장 기본적인 방법은 react-dom/test-utils 안에 들어있는 유틸 함수를 사용하는 것 입니다. 그런데, 위 유틸 함수들을 직접 사용해서 테스트 코드를...
이 튜토리얼에서는 리액트 프로젝트에서 TDD (Test Driven Development · 테스트 주도 개발)을 하는 방법에 대해서 알아보겠습니다. 소프트웨어 개발에서의 "테스트" 라는 개념에 대해서 1도 모르는 개발자도 이 튜토리얼을 마치고나면, "나는 리액트 테스팅을 잘 할 수 있다!" 라고 말 할 수 있습니다. 이 튜토리얼을 진행하기 전에는 No...
