doeunn.log

🚀 Recoil ? → 간결한 코드로 전역 상태 관리가 가능한 라이브러리 Recoil은 페이스북이 2020년 5월에 소개한 React 전용 상태 관리 라이브러리입니다. 상태 관리 라이브러리에는 Redux도 있었는데요. Redux는 아래와 같은 문제점을 가지고 있습니다. React 전용 라이브러리가 아니다 복잡한 보일러 플레이트 (초기 세팅) 비동기 데이터에 대해서 추가 미들웨어 설치 필요 위와 같은 문제점을 개선하고자 Recoil이 등장하게 되었습니다. Recoil의 경우 context API와 달리 전역 상태에 대한 atom을 생성하고, 해당 atom을 구독하고 있는 구성요소만 리렌더링 됩니다. 따라서 불필요한 리렌더링도 방지할 수 있습니다. Atom Recoil에서 atom은 상태 관리의 최소 단위를..

🚀 일단 다시 Redux 라는 것을 쓰는 이유를 기억해보자 리덕스는 전역 상태 관리 라이브러리 중 하나입니다. 컴포넌트에서 컴포넌트로 props를 통해 전달을 한다고 하면 깊이가 깊어질 수록 불필요한 props 전달이 생길 수 있습니다. 이러한 구조는 유지보수 또는 props 추적을 힘들게 하는 Props drilling을 야기하게 됩니다. 위 그림은 기존의 props를 통한 상태 관리 방식입니다. 위 그림처럼 상태 변경이 한 번 일어났을 뿐인데 해당 데이터를 변경하기 위해 또 다른 상태 변경이 여러 번 일어나고 있습니다. 이러한 구조는 side effect를 야기할 수 있으며, 발생한 오류를 추척하기도 힘들어지게 됩니다. 대체 어디에서부터 에러가 났는지 계속 타고타고 올라가봐야 알 수 있을 것 입니다...

🚀 Prettier, Eslint, Husky ? Prettier와 Eslint는 일정한 규칙에 맞는 코드 퀄리티 및 스타일을 유지할 수 있게 검사해주는 도구이며, husky는 깃 커밋, 푸시 전에 알아서 Prettier와 Eslint 검사하는 명령어 자동으로 실행할 수 있게 하는 역할입니다. Prettier 깔끔한 코드와 협업을 위해선 일관성 있는 코드 스타일을 유지하는 것이 매우 중요합니다. Prettier는 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴입니다. 그래서 여러 설정이 존재하지만 주로 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해줍니다. 만약에 항상 singleQuote를 사용하겠다고 설정하면 doubleQuote를 사용해도 저장하는 순간 모두 singleQuote로 알아서..

🚀useNavigate ? useNavigate를 사용하면 새로고침 없이도 페이지를 이동할 수 있게 됩니다. Link 태그와는 달리 클릭을 통한 함수 호출로 페이지를 이동한다는 개념 보다는 특정 조건을 충족할 경우 페이지 이동을 하도록 할 수 있습니다. const navigate = useNavigate(); 🚀 useNavigate로 데이터 보내고, useLocation으로 데이터 받자 useNavigate는 단순히 특정 조건에 충족할 경우 페이지를 이동하는 기능 뿐만 아니라 이동할 때 데이터를 실어서 보낼 수 있습니다. 보내고 나면 useLocation을 통해 그 데이터를 받아서 사용하게 되는 것인데요. useNavigate('/submit', { state: { title, content, } })..

🚀 쿠키와 세션... 들어본 거는 같은데 언제 주로 사용 ? HTTP 통신은 요청(Request) → 응답(Response)이 종료되면 stateless(상태가 유지되지 않은)한 특징 때문에 연결을 끊는 처리 방식입니다. 로그인 이후에 , '누가' 의 상태를 기억하기 위해 쿠키, 세션, 토큰을 사용합니다. Connectionless 프로토콜(비연결 지향) 클라이언트가 서버에 요청을 했을 때, 요청에 맞는 응답을 보낸 후 연결을 끊는 처리방식이다. Stateless 프로토콜(상태정보 유지 안 함) 클라이언트의 상태 정보를 가지지 않는 서버 처리 방식이다. 클라이언트와 첫 번째 통신에 데이터를 주고 받았다 해도, 두번째 통신에 이전 데이터를 유지하지 않는다. 로그인 이후에 예를 들어 회원정보를 수정하는 요청..

🧑🏻‍💻 들어가기 전 리액트의 Context와 Redux를 둘 다 사용해 보았을 때 사용 순서가 조금씩 다르지만 둘 다 전역 상태 관리를 하게 해준다는 점에서 많이 비슷하다고 느껴졌던 것 같습니다. 이번 글에서는 둘의 차이점 및 사용해야 하는 경우에 대해 정리해 보고 앞으로 상황에 적절하게 사용하려고 합니다. 🚀 Redux? 리덕스는 상태의 중앙 관리를 위한 상태 관리 도구입니다. React뿐만 아니라, Angular, Vue에서도 사용할 수 있습니다. 한마디로 리덕스는 '전역 상태'를 생성하고 관리하기 위한 라이브러리라고 볼 수 있습니다. 리덕스는 크게 전역 상태를 보관하는 가장 큰 저장소, 저장소 안에 상태 관리를 위한 여러 리듀서, 리듀서에 행동을 지시하는 디스패치, 어떤 행동을 할 지를 작성하는 ..