들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이번에는 TDD 방식으로 Todo List를 만들어본다. 전체적인 시나리오는 벨로퍼트님을 따라가지만 컴포넌트 자체는 스스로 만들어볼 생각이다. 컴포넌트 계획 Todo List를 만들기 위해서 필요한 컴포넌트는 무엇일까? ▶ Todo Form : Input과 Button으로 이루어진 Form 컴포넌트이다. Todo App으로부터 Submit을 전달받아 새로운 항목을 추가할 수 있어야 한다. ▶ Todo Item : 각 Todo 항목을 보여주는 컴포넌트이다. 텍스트를 클릭하면 텍스트에 삭제선이 그어져야 하고, 우측 삭제 버튼을 누르면 항목이 사라져야 한다. ▶ Todo List : Todo 배열을 받아와서 여러 개의 TodoItem 컴..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이 전에 Test Coverage를 공부할 때 한번 정리했지만 사용의 전반적인 흐름이 더 좋다고 느껴서 다시 정리한다. react-testing-library 모든 테스트를 DOM 위주로 진행하는 방식이다. 컴포넌트를 리팩토링할 때, 내부 구조 및 네이밍은 많이 바뀔 수 있지만 작동 방법은 크게 바뀌지 않는다. react-testing-library는 이러한 특징을 중요하게 생각해서 컴포넌트의 기능이 똑같이 작동한다면, 컴포넌트의 내부 구현 방식이 변해도 테스트가 실패하지 않도록 설계되어있다. 테스트 코드 const Profile = ({ username, name }) => { return ( {username} ({name}) ..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. TDD ? TDD는 테스트를 통해서 개발을 이끌어나가는 형태의 개발론이다. 먼저 테스트 코드를 작성하고, 구현을 하는 방식이라고 보면 된다. TDD에는 3가지 절차가 있다. 실패 첫 번째 절차로 실패이다. 말 그대로 실패하는 테스트 케이스를 먼저 만드는 것이다. 상황에 따라 다르지만, 먼저 구현할 기능부터 하나씩 테스트 케이스를 작성한다. 성공 두 번째 절차로 성공이다. 앞서 작성한 실패하는 테스트 케이스를 통과시키기 위해서 코드를 작성하는 것을 말한다. 리팩토링 구현한 코드가 테스트를 통과한다면, 중복되는 코드 또는 개선시킬 방법이 있는 코드를 리팩토링 시킨다. 리팩토링을 했을 때 테스트 케이스가 성공하면 다른 기능을 다시 첫 번..

알고리즘 공부를 하다보면 재귀함수를 사용하는 경우도 있고, 반복문을 사용하는 경우도 있다. 사용하는 것에는 문제가 없지만 그 둘의 차이가 무엇일까? 재귀함수 vs 반복문 재귀함수는 자기 자신을 호출해는 함수이고, 반복문은 특정 수만큼 반복한다. 일반적으로 반복문이 실행 속도는 더 빠르다. 그 이유는 재귀함수의 경우 매개변수, 리턴값, 리턴 시 돌아가야 하는 위치 등의 정보가 스택에 저장되지만 반복문의 경우 그러한 오버헤드가 없다. 그렇다면 굳이 재귀함수를 사용하는 이유가 무엇일까? 재귀함수는 반복문에 비해서 속도가 느리다는 단점이 있으니, 전부 반복문을 사용해서 해결해도 된다. 하지만 그래도 재귀함수를 사용하는 사람이 있다. 그 이유는 뭘까? 그 이유는 알고리즘을 해결할 때 재귀 함수로 표현하면 더 자연..

실생활에서 자주 접할 수 있는데, 비밀번호, 아이디, .... (자주..? 는 아닐지도)에서 패턴 반복을 막기 위해서 사용할 경우가 있다. 정규식을 사용하면 간단하게 해결할 수 있는 문제일 수 있지만, 만약 0 ~ 9까지만 숫자가 있는게 아닌 0 ~ 100000000000 이라면? ( 과장을 보탰다. 실제로 저기서 뽑는다면 엉청 오래걸릴지도...) 정규식으로 어썸하게 해결하는 정규식 굇수분들이 있을 수 있지만 본인은 못하기 때문에 반복문을 사용해서 해결하였다. function func(array, goal) { for(let i = 0; i < array.length; i ++) { let cnt = 1; let num = array[i]; while(true) if(array.includes(++num..

문제 설명 숫자나라 기사단의 각 기사에게는 1번부터 number까지 번호가 지정되어 있습니다. 기사들은 무기점에서 무기를 구매하려고 합니다. 각 기사는 자신의 기사 번호의 약수 개수에 해당하는 공격력을 가진 무기를 구매하려 합니다. 단, 이웃나라와의 협약에 의해 공격력의 제한수치를 정하고, 제한수치보다 큰 공격력을 가진 무기를 구매해야 하는 기사는 협약기관에서 정한 공격력을 가지는 무기를 구매해야 합니다. 예를 들어, 15번으로 지정된 기사단원은 15의 약수가 1, 3, 5, 15로 4개 이므로, 공격력이 4인 무기를 구매합니다. 만약, 이웃나라와의 협약으로 정해진 공격력의 제한수치가 3이고 제한수치를 초과한 기사가 사용할 무기의 공격력이 2라면, 15번으로 지정된 기사단원은 무기점에서 공격력이 2인 무..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 작업환경 설정 간단한 자바스크립트 환경에서 함수 테스트 코드를 작성하기 위해서 테스트 환경을 만들어보자! npm init -y npm install --save jest @types/jest npm init -y 명령어를 통해서 자바스크립트 프로젝트를 만들고 jest를 설치해준다. 테스트 작성하기 // javascript/sum/sum.js function sum(a, b) { return a + b; } export default sum; // 본인은 귀찮아서 그냥 react 환경에서 작성 ㅎㅎ... 아주 간단한 sum 함수이다. 테스트 코드를 작성하기 위해서 sum.test.js 파일을 작성하자 // javascript/sum/..

들어가며 함수형 프로그래밍에 대해서는 많이 알고있다. 일급 함수, 불변성, 순수 함수 ... 등등 하지만 막상 이것들을 사용하려고 하니 과연 실제로 적용은 어떻게 해야할까? 아니 내가 제대로 이해하고 적용할 수 있는가? 적용이 가능한가? 라는 생각들이 들었다. 결국 내가 함수형 프로그래밍을 정확하게 이해를 한 것이 맞는가? 에 대한 의문으로 이어졌다. 이론은 아는데 그것을 사용하지 못한다면 정말 공부한 것이 맞을까? 마침 인프런에 자바스크립트로 알아보는 함수형 프로그래밍이라는 무료 강의가 있어 이번에 공부해보려고 한다. 함수형 프로그래밍 정의 함수형 프로그래밍은 부수적인 효과를 배제하고, 조합성을 강조하는 프로그래밍이다. 부수 효과를 배제한다 => 순수 함수를 만든다. 조합성을 강조한다. => 모듈화 수..