프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다. 리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다. 따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다. 상태관리(State Management)란 무엇일까? 상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다. 조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다. 프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다. 만약 쇼핑몰에 들어간다..

2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 1편에서는 무슨 일이 있었을까? 일찍 학교에 와서 아침을 먹으며 여러 생각을 했다. 맛있는 샐러드와 주먹밥을 먹으며 "동적 컴포넌트를 만들면 잠이 깰까?"라는 의문이 떠올랐다. 그래서 동적 컴포넌트와 정적 컴포넌트의 차이에 대해 생각해 보았고, 리액트에서도 동적인 사이트와 정적인 사이트가 있다는 것을 알게 되었다. 내가 이것에 대해 깊이 생각하게 된..

프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..

2023 Series [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBootcamp] 0~1주차 회고 개발자가 time-map-installer.tistory.com 학교에 일찍 와서 아침을 먹으며 여러 생각을 하던 날이었다. 아침으로 맛있는 샐러드와 주먹밥을 먹으며 갑자기 떠오른 의문, "동적 컴포넌트를 만들면 잠이 깰까?" 사람들 중에 밥을 먹고 식곤증이 와서 많이 졸려하는 사람들이 있다 나도 그 사람들 중 한 사람이지만 동적인 활동을 하면 잠이 깨는 편이었다 "어? 그러고 보니 리액트에도 동적인 사이트와 정..

React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..

React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..