들어가며 바로 어제 테스팅 게시글을 하나 작성했는데, 이번에 또 좋은 글을 하나 더 발견해서 추가로 작성하려고 한다. 테스트란? 테스트 개발에서 테스트는 우리가 작성한 코드가 잘 동작하는지 검증하는 것을 의미한다. 솔직히 프론트엔드에서의 테스트는 어제 글을 작성했지만서도 실행해서 직접 확인하면 되는 거니 필요성을 못느꼇다. 하지만 테스트를 수동으로 하나하나하는 것은 번거로운 일이다. 이것을 자동화한다면 편하게 검증이 가능하다. 테스트 자동화의 이점 협업을 하다보면 내가 작성한 코드를 다른 사람이 수정해야하는 경우가 있고, 내가 다른사람의 코드를 수정하는 경우가 있다. 규모가 점차 커지면 커질수록 수동으로 확인하는 일에 많은 시간을 사용하거나 특정 상황을 고려하지 못한 경우 기능의 일부가 고장날 수 있다...

들어가며 프론트엔드 코드를 많이 작성하지만 내가 작성한 코드를 직접 테스트하는 경우는 있지만 아직까지 Jest 등을 활용해서 테스트를 해본적은 없다. 그래서 이번에 테스트를 어떤 방법으로 해야할지 공부하다가 좋은 글을 발견해서 나만의 글로 정리해보려고 한다. 테스트의 종류 소프트웨어 개발에서 이야기하는 테스트는 일반적으로 unit test, integration test, e2e test이다. unit test unit test는 말그대로 유닛 테스트, 단위 테스트라고 이야기하는데, 함수, 클래스 단위의 모듈을 테스트하고 프론트엔드에서 컴포넌트에 해당하는 파일의 테스트를 말한다. 특정 컴포넌트를 렌더링해서 깨지지 않는지 확인하는 것도 유닛 테스트가 될 수 있다. integration test integr..

들어가며 이번에 토이 프로젝트를 6주동안 하게 되었다. 꽤나 본격적으로 프로젝트를 해서 느낀점을 적어보려고 한다. 이번주에는 토이 프로젝트 기획에 대해서 토의하는 시간을 가졌다. 회고 방법은 KPT 방식으로 진행하려고 한다. Keep 기획 진행 ▶ 프로젝트에 대한 아이디어가 전반적으로 나와서 구체화를 쉽게 시켰다. ▶ 각자 프로젝트에서 담당할 역할이 정해져 있어서 소통이 쉬웠다. ▶ 논쟁이 있을만한 의견을 피하지 않고 이야기 했다. ▶ 아무거나 괜찮다가 아닌 각자의 의견이 있었다. 성실함 ▶ 참석 못하는 경우, 말없이 지각 또는 결석하는 인원이 없어서 좋았다. Problem 도전에 대한 걱정 ▶ 이번 프로젝트에서 기술적인 도전(?)을 한다는 느낌의 도전(?)이 부족하다고 느껴짐 기술 결정 ▶ 사용하는 스..

이번에는 명령형 코드를 함수형 코드로 전환하는 작업을 할 계획이다. 명령형 코드 작성 전환하기 전 명령형 코드를 먼저 작성하려고 한다. const user = [ { id: 1, name: "ID", age: 36 }, { id: 2, name: "BC", age: 48 }, { id: 3, name: "QW", age: 25 }, { id: 4, name: "RE", age: 32 }, { id: 5, name: "WD", age: 12 }, { id: 6, name: "AS", age: 10 }, { id: 7, name: "DD", age: 50 }, { id: 8, name: "SV", age: 23 }, ] 30세 이상인 user를 거른다. const temp_users = [] for(let ..

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

들어가며 이번에는 Todo 리스트 애플리케이션을 만드려고 한다. 만들 기능으로는 ▶ Todo 아이템 추가 ▶ Todo 아이템 수정 ▶ Todo 아이템 삭제 ▶ Todo 아이템 필터링 ▶ 통계 표시 Todo를 만들면서 Recoil의 atoms와 selectors, atom families와 Hook 그리고 최적화를 다루게 될 것이다. Atoms TodoList 컴포넌트 import { atom, useRecoilValue } from "recoil"; export const todoListState = atom({ key: "todoListState", default: [], }); const TodoList = () => { const todoList = useRecoilValue(todoListStat..

들어가며 앞서 시작하기를 통해서 Recoil에 대해서 알아봤다. 이번에는 실제 React에서 어떤 방식으로 Recoil을 사용하는지 알아보려고 한다. 환경 세팅 npx create-react-app recoil 먼저 React 프로젝트가 필요하기 때문에 간단하게 CRA를 사용해서 환경을 만들었다. yarn add recoil 당연히 recoil 패키지가 필요하기 때문에 최신 버전을 설치했다. RecoilRoot // App.jsx import { RecoilRoot } from "recoil"; function App() { return ( Recoil Study ); } export default App; Redux에서 Provider를 사용해서 Redux를 사용할 컴포넌트를 나타냈는데, Recoil도..

들어가며 요즘 Recoil이라는 친구가 핫하길래 이번에 공부를 하려고 한다. 먼저 공식 사이트에서 Recoil에 대해서 알아보고 시작하기를 통해서 환경을 세팅해볼 계획이다. Why Recoil ? 전역 상태 관리에서 가장 유명한 라이브러리는 Redux일 것이다. 그런데 왜 Recoil을 요즘 이곳 저곳에서 도입하려고 할까? 그러려면 Redux를 사용했을 때의 단점을 한번 생각해봐야 할 것이다. 1. 거대하다! Redux으로 상태 관리를 하려고 할 때 작성자가 느끼는 가장 큰 부담감은 너무 크다는 것이다. 상태를 관리하기 위해서 Store를 만들고, 그거에 맞춰서 Action, Reducer , .... 사용하기 위해서 준비해야하는 것이 많다고 느껴진다. 2. 어렵다! 사실 위 " 거대하다! " 와 이어지..