분류 전체보기215 Redux와 RTK로 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법은 다양합니다. React가 공식적으로 제공하는 Context API부터, 얼마전에 소개했던 Zustand 등 수많은 라이브러리들이 있습니다. 오늘은 그중에서도, 꽤 오랜 시간 사용되어 온 Redux와 RTK에 대해 알아보겠습니다. Redux Redux는 Flux 패턴을 따라가는 상태 컨테이너입니다. Dispatcher의 Action를 통해 Store의 상태를 변화시키고, 이 상태가 다시 View에 차례대로 반영되는 단방향 구조가 Flux 패턴의 핵심입니다. 이러한 구조로 만들어진 컨테이너를 활용하여 쉽게 데이터를 집약하고, 일관성 있게 관리할 수 있다는 것이 바로 Redux의 장점입니다. 예시를 통해 React에서 Redux를 사용하는 방법에 대해 알아보.. 2024. 3. 3. 2024년도 신입의 취업 후기 들어가며 23년도 회고를 작성한지 얼마 되지 않았는데 좋은 일이 생겨 후기를 작성하게 되었다. 겨울동안 줄기차게 진행했던 취업 준비를 마무리하고, 2월부터 프론트엔드 개발자로 커리어를 시작하게 되었다. (이 글을 쓰는 지금이 출근 3일차의 따끈따끈한 신입인 상태다!) 사진에는 모두 담지 못했지만, 취업까지의 과정이 쉽지만은 않았다. 우테코를 수료하고 학업을 마무리하러 돌아오긴 했지만, 동시에 간간히 개인 프로젝트를 진행하고 이력서를 넣으며 취업의 문을 두드리곤 했었다. 그 결과, 지금까지 47번의 지원 중 2곳의 합격을 받아 최종적으로는 현재 캐치테이블에 신입 프론트엔드 개발자로 합류하게 되었다. 그동안 취업을 위해 어떻게 준비했었는지 잊어버리기전에 이 자리를 빌려 간단히 기록해두려고 한다. 나의 장점은.. 2024. 2. 8. Cookie와 Web Storage (Local Storage와 Session Storage) 서버에서 유저를 기억하고, 유저의 데이터를 저장하는 방법은 대표적으로 쿠키(Cookie)가 있습니다. 쿠키는 이전부터 전통적으로 사용되어 왔던 방법이고, 현재까지도 많은 웹 서비스에서 쿠키를 이용해 사용자의 데이터를 다루고 있습니다. 현재는 비단 쿠키 뿐 아니라, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)를 비롯한 브라우저의 웹 스토리지 API를 통해 사용자의 데이터를 저장하고, 다루고 있습니다. 오늘은 쿠키와 웹 스토리지들에 대해서 간단히 알아보겠습니다. 쿠키 쿠키는 가장 대중적으로 사용되어온 데이터를 다루는 방법으로, 서버와 웹 브라우저 간의 통신에 포함되어 전송되는 작은 데이터 조각을 의미합니다. 사용자의 정보를 쿠키에 저장하고, 통신시 쿠키를 함께 전송.. 2024. 1. 24. good bye, 2023! 2023년이 시작한게 엊그제 같은데 벌써 끝이라니... 아직 달리 한 것도 없는 것 같은데 오늘이 2023년의 마지막 날이라는게 믿기지가 않는다. 분명 이것저것 했을텐데, 막상 적어보려하니 기억이 흐릿해지는게 적어두지 않았다면 큰일날 뻔 했겠구나 싶다. 올 한 해를 후회없이 매조지기 위해 했던 것들을 정리해보자. 블로그 기록하지 않는 지식은 휘발된다. 무엇인가를 배우면 개인 노션에 적고, 적고, 또 적었다. 그 중에 어느정도 내용이 되는 것들은 블로그에 옮겼는데, 그 비율이 절반정도 된 것 같다. 올해는 블로그에 총 53개의 글을 남겼다. (현재 회고글까지 포함해서) 이 회고가 올라간 티스토리 블로그에 50개, 직접 만들어서 운영중인 회고 블로그에 3개. 블로그에는 말로 표현하기 어려운 애착이 가서 계속.. 2023. 12. 31. 주소창에 google.com을 입력하면 들어가며 "브라우저 주소창에 google.com을 입력하면 어떤 일이 일어날까요?" 위 질문은 기술 면접에 종종 나오는 단골 주제로 굉장히 유명합니다. "개발자 신입 기술 면접 대비" 와 같은 주제의 글에서는 빠지지 않고 등장하는 편인데, 브라우저 렌더링에 대해서만 정리되어 있거나, 해당 서버에 접근하는 과정만 있는 글이 많길래 이번 포스트에서는 두 내용을 한 번에 담아보았습니다. 과연 브라우저에 페이지 주소를 입력하면 어떤 일이 일어나는지 시간 순서에 따라 알아보겠습니다. 데이터 받아오기 브라우저에 특정 사이트의 주소를 입력하게 되면 잠깐의 시간 뒤에 해당 사이트가 나타납니다. 우리는 이 과정을 두 가지로 분리해 볼 수 있습니다. 데이터를 받아오는 과정 받아온 데이터를 띄워주는 과정 먼저 데이터를 받아.. 2023. 12. 30. Zustand로 전역 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법에는 대표적으로 Context API가 있습니다. 단방향의 데이터 흐름을 해치지 않으면서도, Provider를 통해 각 컴포넌트에서 상태를 사용할 수 있게 해주는 기능입니다. React에서 공식적으로 지원하는 기능이기에 공식 문서에서도 이 방법을 추천하고 있습니다. 아직 Context API에 대해 잘 모른다면 아래 포스트를 참고해주세요. Context API 개념 잡기 그러나 Context API를 직접 사용하지 않고 서드 파티 라이브러리를 이용해 전역 상태를 관리하는 방법도 있습니다. 대표적으로 Zustand, Recoil, Jotai 등이 있는데요, 오늘은 Zustand를 사용하는 방법과 주의할 점들을 알아보도록 하겠습니다. 구성 먼저 사용하는 패키지.. 2023. 12. 20. 이전 1 2 3 4 5 ··· 36 다음
