[Digging] 이번주에 발견한 흥미로운 글 모음 (+ 간단 요약)

Nino_ 2023. 4. 10. 20:55

r/reactjs on Reddit: Zustand vs Jotai vs Recoil vs React-query

Posted by u/Caddy05 - 21 votes and 40 comments

www.reddit.com

React 프레임워크에서 상태 관리를 위해 주로 사용되는 라이브러리로는 Zustand, Jotai, Recoil, React Query가 있다. 각각의 라이브러리는 다양한 방식으로 상태를 관리하고 있다.
Zustand는 MobX와 Redux의 장점을 합친 것으로 볼 수 있는데, 작은 규모의 프로젝트에서는 간단하고 직관적인 사용이 가능하다. 하지만 큰 규모의 프로젝트에서는 유지보수성이 떨어지는 문제점이 있다.
Jotai는 React의 useContext와 useReducer 훅을 사용하여 상태를 관리하는 라이브러리이다. Zustand와 비슷한 점이 있지만, 코드량이 더 많아져 복잡해지는 문제점이 있다.
Recoil은 상태 관리에 특화된 라이브러리로, 많은 양의 상태 데이터를 다루는데 효과적이다. 또한, 상태의 변경에 따라 관련된 컴포넌트들을 자동으로 업데이트할 수 있는 기능이 있다. 하지만, 코드가 복잡해지는 문제점도 있다.
React Query는 서버 API 호출과 관련된 상태를 관리하는 라이브러리이다. 상태 업데이트를 자동으로 처리해주는 기능이 있어 개발자가 일일이 처리해주지 않아도 되는 장점이 있다.
따라서, 프로젝트의 규모와 요구사항에 따라 적절한 상태 관리 라이브러리를 선택하는 것이 중요하다.

How to migrate to Vite from Create React App (CRA) with environment variables, testing, SVG, ESLint, TypeScript ...

www.robinwieruch.de

Create React App(CRA)과 Vite.js는 둘 다 React 프로젝트를 시작할 때 사용되는 툴이다. CRA는 편리한 기능들과 많은 템플릿을 제공하지만, 초기 구동이 느리다는 문제점이 있다. 반면 Vite.js는 최신 자바스크립트와 타입스크립트를 지원하며, 개발 환경이 빠르고 가볍다는 장점이 있다.
두 툴을 비교해본 결과, Create React App은 몇몇 설정만 변경하여 사용이 가능하고 특히 개발자들이 익숙해질 가능성이 높다. Vite.js는 빠른 개발환경과 새로운 자바스크립트, 타입스크립트를 지원하여 최신 기술을 적용할 때 유용하다.
따라서 프로젝트의 크기와 목표, 사용 기술에 따라 두 툴 중 적합한 것을 선택하여 개발하는 것이 좋다.

그 많은 OTT 콘텐츠는 어떻게 웹에서 재생될 수 있을까? | 요즘IT

OTT 콘텐츠 많이들 보시나요? 지금 당장 생각나는 것만 해도 넷플릭스, 유튜브, 웨이브, 티빙, 왓챠 같은 많은 OTT 서비스들이 떠오르네요. 그런데 프론트엔드 개발을 조금이라도 해봤다면 웹 브라

yozm.wishket.com

OTT 콘텐츠란: 인터넷을 통해 제공되는 비디오, 음악, TV 프로그램 등을 말한다.
재생 방법: HTML5 비디오 태그를 이용하여 웹 브라우저에서 OTT 콘텐츠를 재생할 수 있다. 또한, DRM(Digital Rights Management) 기술을 이용하여 저작권 보호 및 사용자 인증 등을 수행할 수 있다.
웹에서 OTT 콘텐츠 재생 시 고려할 사항: OTT 콘텐츠는 대용량 데이터이기 때문에, 높은 대역폭이 필요하다. 또한, 여러 플랫폼에서 동일한 콘텐츠를 제공해야 하기 때문에, 멀티 플랫폼 호환성을 고려해야 한다.
재생 기술: HLS(Hypertext Live Streaming) 기술과 MPEG-DASH(Moving Picture Experts Group Dynamic Adaptive Streaming over HTTP) 기술을 이용하여 OTT 콘텐츠를 웹에서 재생할 수 있다. 이들 기술은 HTTP 프로토콜을 이용하여 동영상을 분할하고 스트리밍하는 방식으로 동작한다.

OTT 콘텐츠를 웹에서도 쉽게 재생할 수 있는 기술이 개발되어 가고 있는데, 이를 위해서는 높은 대역폭과 멀티 플랫폼 호환성을 고려하여 기술을 선택하고 적용해야 한다.

이펙트는 데이터 흐름의 한 부분입니다.

overreacted.io

"useEffect 완벽 가이드"는 React Hooks 중 하나인 useEffect에 대한 포괄적인 가이드로, 컴포넌트 렌더링 시 특정 작업을 수행하거나 컴포넌트 unmount 시 정리 작업을 수행할 수 있도록 하는 Hook이다. 사용할 때 의존성 배열을 명시하고, 여러 개 사용할 때 각각의 동작을 명확히 해야한다. 데이터 가져오기, 스크롤 위치 추적, 타이머 및 이벤트 핸들러 등록 및 해제 등에 활용할 수 있다. 주의사항으로는 상태 변경 시 의존성 배열에 해당 상태를 넣어야 한다는 것과, cleanup 함수를 사용하여 비동기 작업을 취소할 수 있다는 것이 있다.

GitHub - JaeSeoKim/react-kakao-maps-sdk: React components for using kakao map api

React components for using kakao map api. Contribute to JaeSeoKim/react-kakao-maps-sdk development by creating an account on GitHub.

github.com

React-Kakao-Maps-SDK는 React.js 기반의 웹 애플리케이션에서 카카오맵을 쉽게 사용할 수 있도록 해주는 라이브러리이다.
이 라이브러리를 이용하면, 일반적인 HTML 태그와 같이 간단한 구문으로 카카오맵을 적용할 수 있다.
또한 카카오맵 API의 다양한 기능들을 활용할 수 있으며, 리액트의 특징인 가상 돔(Virtual DOM)을 이용하여 성능도 우수하다.
이를 통해, 다양한 웹 애플리케이션에서 위치 기반 정보를 표시하거나, 경로 검색, 마커 추가, 지도 이동 및 확대/축소 등의 기능을 구현할 수 있다. 또한, 기본적으로 제공되는 예제 코드를 이용하면 더욱 쉽게 사용할 수 있다.

Nino's DevLog