2024/03/09 22

React - PWA 세팅해서 앱으로 발행하기

PWA 란 PC 는 바탕화면에, 모바일은 앱을 설치한 것과 같이 메뉴에 웹사이트 바로가기 아이콘이 생성되서 웹사이트를 앱처럼 설치해서 사용할 수 있도록 해주는 기술입니다. 장점 설치 마케팅 비용이 적습니다. 아날로그 유저들( 나이가 많으신 분들 ) 이 url 로 접속하고 이용하려면 어려울 수 있는데 PWA 를 이용해서 그 점을 해소해줄 수 있습니다. html, css, js 만으로 앱까지 대응할 수 있습니다. 푸시알림, 센서 등도 웹브라우저로 처리할 수 있어서 일반 앱에 비해서 기능적 하자가 적습니다. 단점 설치과정이 조금 이질적입니다. ( 앱스토어에 방문하지 않고 설치하기 때문 ) HTTPS 사이트여야만 합니다. PWA 사용법 먼저 PWA 가 세팅된 react 프로젝트를 생성해야합니다. create-r..

JS/React 2024.03.09

React - useTransition & useDeferredValue

이번에 사용해 볼 기능들은 리액트가 업데이트되고나서 나온 신기능들 입니다. batch 기능 업데이트 사항 원래 batch 기능이란 state 변경 함수가 여러개 모여있을 경우에 state 변경함수마다 재랜더링이 되는게 아니라 맨 마지막 state 변경함수가 실행되고나서 한번만 재랜더링되는 기능을 말합니다. 이 batch 기능이 리액트 18버전 전까지는 ajax, setTimeout 같이 조금 늦게 동작하는 기능들의 내부라면 batch 기능이 작동을 안해서 모든 state 변경함수가 실행될 때마다 재랜더링 되었던게 18버전부터는 state 변경함수가 어디에 있던간에 상관없이 batch 기능이 잘 작동되도록 수정되었습니다. 즉, 이제는 어디에 state 변경함수가 있어도 맨 마지막 state 변경함수가 실행..

JS/React 2024.03.09