맨 땅에 프론트엔드 개발자 되기

요즘 우리나라 개발 커뮤니티를 보면 recoil + react-query 조합을 사용하는 것이 최신 트렌드로 자리 잡고 있는 듯하다. (요즘이 아니라 1~2년 된 트렌드 같다. 2023년 기준) 그러나 남들이 사용한다고 다 따라서 사용하면 면접에서 질문을 받을 때 당황할 수 있기 때문에(?)가 아니라 사용하는 라이브러리의 스펙을 정확히 알고 만드는 제품의 성능을 향상시키기 위해 차이점을 알고 사용하면 좋을 것 같아서 한번 정리해보려고 한다. (이 글은 개발 지식이 매우 미천한 자의 미숙한 글이므로 참고만 부탁드리며, 사실이 아닐 경우 정정을 해주시면 매우 감사하겠습니다.) @reduxjs/toolkit vs recoil vs zustand 대표적인 리액트 상태관리 툴인 redux는 이미 너무 많은 사람들..

나는 어떤 일을 할 때, 그 일을 왜 하는지가 이해가 되어야 한다. Redux-Saga를 처음 배울 때 비동기를 처리하기 위해 왜 Redux-Saga를 사용할까 이해가 되지 않았다. 컴포넌트 내부에서 비동기 로직을 실행하고 난 뒤에 디스패치를 하면 되는 거 아닌가? 라고 생각했었다. 왜 Redux-Saga를 사용하는가? 디자인 패턴이라고 들어보았는가? 진짜 잘하는 개발자는 소프트웨어 설계부터 비즈니스 로직이 안정적으로 구현되고 가독성 좋은 코드를 짜기 위해 고민한다고 한다. Redux-Saga는 갑자기 어디서 뿅하고 튀어나온 게 아니라 이 디자인 패턴을 고민하다가 나온 결과물이라고 할 수 있다. - Saga 패턴 Saga 패턴에 대한 설명을 찾아보면, "saga 패턴은 분산 애플리케이션의 일관성을 유지하..

Redux 미들웨어(Middleware) 회사에서 처음으로 Redux 미들웨어를 이용해서 프로젝트를 만들 일이 생겨 기존에 미들웨어로 작성된 프로젝트를 보는데 아무리 봐도 코드 구조가 이해가 안 돼서 한참을 눈이 빠지게 들여다봤다. Redux 미들웨어가 무엇인지, 왜 사용하는지에 대한 개념은 전혀 어렵지가 않은데, 실제로 코드를 구성하려고 보면, 코드가 다 Split 되어 있고, 여러 파일들이 구조적으로 분할되어 엮여있다보니 아예 모르는 상태에서 처음 파악하기에는 이해가 되지 않았다. Redux를 사용할 줄 안다는 기본 가정 하에, Redux는 store, action, reducer의 구조로 이루어져 있고, 단일 store에 전역 상태를 관리하고, action 에 담겨진 명령어로 reducer에 원하는..

Redux 기본 개념과 작동 방식 Redux 란? 상태 관리 라이브러리로 리액트를 사용할 때 상태를 관리하는 것을 도와주는 라이브러리다. 상태 관리를 왜 해야되는가? 에 대해 생각해보면, 리액트에서는 컴포넌트끼리 상태값을 주고 받을 때 props를 통해 주고 받는데, 자식관계가 딥해질 수록 중간 컴포넌트들에 의미없는 props 내려주기가 반복되고, 자식 컴포넌트들끼리 상태값을 직접 주고 받는 것이 불가능하다. (무조건 부모 컴포넌트를 거쳐야만 가능) 그리하여 상태 관리를 쉽게 도와주는 라이브러리들이 생겨났고, 그중에 가장 많이 쓰이는 상태 관리 라이브러리가 Redux 다. Redux는 공통으로 쓰이는 상태 값을 한 곳에 모아 필요한 곳에 뿌려주는 클라우드 개념이랄까? props로 내려주지 않고, 필요한 ..