concept
-
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도 너무 많이 쓰면 리렌더링을 많이 유발해서 좋지 않다. 등등.. 여러가지 하지말라는 것들이 많은데 그래서 그럼 어떻게 해야하는데! 에 대해서 속시원히 답을 내려주는 곳은 별로 없었다.. 특히나 지금 모던 리액트 딥다이브 책을 읽으면서 스터디를 하고 있는데 책에서는 리액트의 작동 원리를 속속들이 뜯어보지만 그래서 어떻게 해야하는데!!! 에 대한 답은 속시원하지 않아서 불만이 있던 도중에 만난 강의 강의..
-
emotion 100% 활용하기concept/HTML, CSS, DOM 2023. 12. 13. 16:27
이 전 포스팅에서 emotion과 styled-components의 차이점을 알아보았다. 결론은 근소한 차이로 emotion의 승리! https://o-yeon.tistory.com/222 styled-components VS emotion 과연 어떤 차이가 있을까? 목차 emotion 라이브러리의 종류 알아보기 @emotion/react @emotion/css @emotion/styled emotion 과 styled-component 비교하기 다운로드 순위 비교 번들 사이즈 비교 패키지 의존성 비교 속도 비교 결론은 emotion의 승 o-yeon.tistory.com 그래서 이번 포스팅에서는 emotion을 100% 활용하는 방법에 대해서 알아보고자 한다. 설치하기 # with npm npm i @..
-
styled-components VS emotion 과연 어떤 차이가 있을까?concept/HTML, CSS, DOM 2023. 12. 7. 00:56
목차 emotion 라이브러리의 종류 알아보기 @emotion/react @emotion/css @emotion/styled emotion 과 styled-component 비교하기 다운로드 순위 비교 번들 사이즈 비교 패키지 의존성 비교 속도 비교 결론은 emotion의 승리 CSS-in-JS로 처음 입문하게 된 Styled components. 그런데 현업과 사이드 프로젝트에서는 emotion을 더 많이 사용하고 있었다. 그런데 쓰는 방법만 보면 스타일드 컴포넌트와 차이가 없어보이는 것..? styled-components는 7년 전, emotion은 6년 전에 등장한 라이브러리로서 emotion이 더 최근에 등장해 점점 사용성이 높아지고 있다고 하는데 정확한 차이는 모르고 그저 사용하고 있던 나....
-
채팅 기능 구현을 위한 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 (누적 레이아웃 시프트) - 시각적 안정성 측정. 레이아웃이 ..
-
scrollHeight, clientHeight, offsetHeightconcept/HTML, CSS, DOM 2022. 11. 10. 23:45
웹페이지와 요소의 높이값을 얻는 속성은 대표적으로 scrollHeight, clientHeight, offsetHeight 가 있다. 각 속성의 의미는 scrollHeight는 요소에 들어있는 컨텐츠 자체의 전체 높이이다. 패딩과 보더 포함, 마진 제외 clientHeight는 요소의 내부 높이이다. 패딩 포함, 스크롤바, 보더, 마진 제외 offsetHeight는 요소의 높이이다. 패딩, 스크롤바, 보더 포함. 마진 제외