concept/React, Redux, RN
-
Tanstack-Query (a.k.a React-Query) 입문자들을 위한 간단 설명concept/React, Redux, RN 2024. 4. 14. 19:30
이름 변경 2023년 9월에 React Query는 TanStack Query로 이름이 변경 React Query는 Facebook에서 유지보수하는 React 공식 라이브러리가 아니라는 점에서 상표권 문제가 있을 수 있었기 때문 새로운 이름은 React에 종속되지 않으며, React 외의 다른 프레임워크나 라이브러리와도 함께 사용될 수 있음 TanStack Query 란? 공식 문서의 정의에 따르면.. TanStack Query(FKA React Query)는 종종 웹 애플리케이션용 누락된 데이터 가져오기 라이브러리로 설명되지만 좀 더 기술적인 용어로 말하면 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다. 웹 앱에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이..
-
모던 리액트 딥 다이브concept/React, Redux, RN 2024. 3. 3. 22:25
작년 11월에 모던 리액트 딥 다이브 책이 출시 되고, 바로 스터디를 시작했다. 일주일에 한 장씩 읽고 만나서 정리한 부분들 이야기 하는 시간을 가졌는데 책이 900페이지이다보니 은근히 빡셌지만 끝나니까 아주 후련했던 스터디.. 그 때 정리했던 내용들 중에서 알짜배기만 골라서 메모를 하기 위한 포스팅 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트 1.1 자바스크립트의 동등 비교 1.1.1 자바스크립트의 데이터 타입 원시 타입 boolean null undefined number string symbol 중복되지 않는 어떤 고유한 값을 나타내기 위해 만들어진 타입. Symbol() 을 사용해서 제작 가능. ex. const key = Symbol('key') bigint number가 다룰 수 있는..
-
[Udemy] 클린코드 리액트 - 소개, Stateconcept/React, Redux, RN 2024. 2. 4. 16:38
요즘은 클린코드 리액트 강의를 유데미에서 듣고 있다. 이 강의는 리액트에 이미 익숙하게 잘 쓰고 있는 사람들이 하는 고민들을 싹싹 긁어주는 강의 인듯!! 아주 만족도 100%.. 리액트로 코드를 작성하다보면 useEffect를 너무 많이 쓰는 것은 사이드 이펙트를 초래하기 때문에 좋지 않다. useState도 너무 많이 쓰면 리렌더링을 많이 유발해서 좋지 않다. 등등.. 여러가지 하지말라는 것들이 많은데 그래서 그럼 어떻게 해야하는데! 에 대해서 속시원히 답을 내려주는 곳은 별로 없었다.. 특히나 지금 모던 리액트 딥다이브 책을 읽으면서 스터디를 하고 있는데 책에서는 리액트의 작동 원리를 속속들이 뜯어보지만 그래서 어떻게 해야하는데!!! 에 대한 답은 속시원하지 않아서 불만이 있던 도중에 만난 강의 강의..
-
채팅 기능 구현을 위한 web socket과 sse 방식 POCconcept/React, Redux, RN 2023. 11. 6. 15:29
HTTP 프로토콜의 주요 특징은 비연결성 이다. 위 특징으로 인해 Server가 전송하고 싶어도 해당 Client와 지속적으로 연결이 되어있지 않기 때문에 보낼 수 없는 상황이 발생하게 된다. 이를 해결하는 방식으로 Polling, Long Polling, Web Socket, SSE 총 네 가지가 있다. Web socket RFC 6455 명세서에 정의된 프로토콜. 서버와 브라우저 간 연결을 유지한 상태로 데이터 교환이 가능하다. 전송은 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 이루어진다. Web socket을 구현하는 방법 Web socket → 기본으로 HTML5에서 제공하는 기능 socket.io → 웹 소켓 서버를 쉽게 구현할 수 있게 도와주는 모듈이며 서버는 node.js sock.j..
-
이미지 최적화를 위한 방법들과 Next/Imageconcept/React, Redux, RN 2023. 11. 5. 00:25
배경 Web Vital 이란 웹에서 우수한 사용자 경험을 제공하는데 필수적인 품질 신호에 대한 통합 지침을 제공하기 위한 Google의 이니셔티브이다. Web Vital 의 하위 집합으로 Core Web Vitals가 있는데 20년 기준으로는 UX 기준의 세 가지 측면인 1. Loading (로딩) 2. Interactivity (상호 작용) 3. Visual Stability (시각적 안정성) 에 중점을 두고 있다. LCP (최대 콘텐츠풀 페인트) - 로딩 성능을 측정. 2.5초 이내에 LCP가 발생해야 우수하다고 평가한다. FID (최초 입력 지연) - 상호 작용 측정. 100 ms 이내에 상호 작용이 가능해야 우수하다고 평가한다. CLS (누적 레이아웃 시프트) - 시각적 안정성 측정. 레이아웃이 ..
-
React에서 DOM에 직접 접근보다 useRef 쓰는 이유concept/React, Redux, RN 2022. 9. 9. 22:55
React에서 DOM에 직접 접근하는 것은 React way가 아니라고 한다. 그 이유가 뭔지 궁금해서 조금 찾아봤다. 직접적인 let 변수나, 객체를 선언해서 컴포넌트 내부 변수를 사용하는 것이 아니고 useRef를 사용하는 이유는, 직접적인 내부 변수를 선언할 경우 리렌더링 시에 변수 값이 초기화되기 때문이다. 반면, useRef의 경우 일반적인 자바스크립트 객체로서 메모리 heap에 저장되므로, 항상 같은 메모리 주소를 참조하여 컴포넌트가 아무리 리렌더링 되더라도 이미 저장된 값 자체는 삭제되지 않고 전역변수처럼 남아있게 된다. 참고자료 https://dev-note-97.tistory.com/314 https://dev.to/dylanju/useref-3j37?fbclid=IwAR0fl7xMjn_..
-
redux-persist로 로그인 유지 구현concept/React, Redux, RN 2022. 9. 9. 12:13
새로고침 했을 시 로그인이 풀리는 현상을 방지하기 위해서 Localstorage에 로그인 정보를 저장할 필요성이 생겼다. 마침 상태 관리를 위해서 redux를 사용하고 있는 중이었고 redux-persist를 이용하면 로컬스토리지를 활용한 로그인 유지를 간편하게 구현할 수 있다는 사실을 알게 되었으니 바로 도입! 하기 전에, Web Storage에 대한 개념부터 이해하고 도입을 해야 겠쥬? Web Storage는 키/값의 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴으로, 영구저장소 LocalStorage와 임시저장소 SessionStorage를 가지고 있다. 쿠키와 비슷하지만 개수와 용량의 제한이 없고,쿠키처럼 매번 서버로 전송하지 않아 네트워크 트래픽 비용을 줄여준다. 조금 더 상세하..
-
React로 만든 앱에 PWA 적용하기concept/React, Redux, RN 2022. 9. 6. 12:04
PWA란? 프로그레시브 웹 앱 (Progressive Web App)의 약자. HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱 네이티브 앱을 개발하는 것보다 훨씬 빠르게 개발할 수 있고, 푸시 알림, 오프라인 지원같은 네이티브 앱의 특징도 제공 PWA로 만든 앱 트위터 스타벅스 핀터레스트 우버 React with PWA 만드는 방법 npx create-react-app my-app --template cra-template-pwa 이렇게 리액트 앱을 제작하기 앞서서 PWA를 함께 적용하는 create app 명령을 내릴 수 있다. 하지만 나는 이미 다 만들어진 react 앱을 PWA로 만들고 싶었기 때문에 수동으로 설정을 해 주었다. manifest.json React 프로젝트의 pu..