프로젝트를 진행하면서 나는 지금까지 View Logic과 Business Logic이 각각 JSX 영역은 View Logic이야! 그외 모든 함수 및 상태는 Business Logic이야! 라고 생각했었다. 그래서 Business Logic을 나누기 위해서 Custom Hook을 사용하겠어! 라는 생각을 하게 되었다. 그리고 멘토님께 해당 부분에 대한 피드백을 받았는데, Custom Hook을 사용하는 것은 중복된 Logic을 해결하기 위해서 사용한 것으로 보인다. 하지만 " 이것이 Business Logic은 아닌 것 같다. " 라는 이야기를 들었다. 많이 당황했다. 내가 너무 쉽게 생각한걸까? 하지만 이 역시 오히려 좋은게 내가 실무에 들어갔다면 잘못 생각하고 있었다는 사실을 알고 있어도 바로바로 공..

들어가며 지난번 React-Query에 대한 필요성을 간략하게 알아봤다. 이번에는 React-Query 자체에 대해서 정리를 해보려고 한다. React-Query ? 서버에서 값을 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 사용할 때 도움을 준다. 기존 Redux, Mobx, Recoil 같은 상태 관리 라이브러리가 있지만, 서버 데이터와 클라이언트 데이터를 분리시킬 수 있다는 장점이 있다. React-Query의 장점 ▶ 서버의 상태 업데이트, 데이터 패칭, 캐싱 등을 쉽게 할 수 있도록 도와준다. ▶ Redux 등, 전역 상태 관리를 통해서 서버의 데이터를 비동기로 가져오기 위해서는 추가적으로 작성해야하는 코드 많지만 React-Query는 간단하게 처리해준다. ▶ 코드가 간단해..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 작업환경 설정 간단한 자바스크립트 환경에서 함수 테스트 코드를 작성하기 위해서 테스트 환경을 만들어보자! 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/..

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

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

들어가며 이번에는 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. 어렵다! 사실 위 " 거대하다! " 와 이어지..