Frontend/React (3) 썸네일형 리스트형 [React] React 18 + Vite에 React 컴파일러 적용하기 개요2025년 10월 7일, 공식적으로 등장한 React 컴파일러 1.0을 현재 진행 중인 프로젝트에 도입해 보기로 했다. 마침 두 달전쯤? 팀 내에서 useMemo와 useCallback을 언제 쓸 것인가에 대한 논의를 했었는데, React 컴파일러가 이런 고민을 덜어줄 것이라고 기대했기 때문이다. React 컴파일러란?React 컴파일러는 애플리케이션을 최적화하기 위해 코드를 자동으로 메모이제이션한다.컴파일러는 Javascript와 React의 규칙에 대한 지식을 활용하여 자동으로 컴포넌트와 Hook 내부의 값 또는 값 그룹을 메모이제이션한다. (규칙을 위반한 컴포넌트와 Hook은 패스)(참고) 규칙 위반은 eslint-plugin-react-hooks, eslint-plugin-react-compi.. [React] useState 업데이트 값이 즉시 반영되지 않는 문제 (useState와 useRef) 1. 개요(문제) 사용자의 현재 위치를 받아와 지도에 표시하고자 했다. 초기 로직 위치 값 useState로 초기화하기 navigator.geolocation.getCurrentPosition API를 통해 현재 위치 가져오기 받아온 값으로 state 업데이트하기 하지만 useState 업데이트 값이 즉시 반영되지 않는 문제가 발생했다. const Map = () => { const [curLoc, setCurLoc] = useState({lat: 0, lng: 0}); const handleGeoSuccess = (pos) => { const lat = pos.coords.latitude; const lng = pos.coords.longitude; const coordsObj = { lat, lng,.. [React] CRA 프로젝트에 serviceWorker 적용하기 개요 create-react-app으로 만든 프로젝트 진행하다가 푸시 알림때문에 serviceWorker를 적용할 일이 생겼다. 찾아보니 cra로 프로젝트 생성하면 기본적으로 serviceWorker.js가 있다고 하는데 현재 프로젝트(2021.08기준)에는 그런 파일이 없다. cra의 버전이 업데이트 되면서 serviceWorker가 사라지고 reportWebVitals가 생겼다고 한다. 그럼 serviceWorker를 적용하려면 어떻게 해야 하나?? 방법 1. 템플릿 사용 프로젝트 시작 전 애초에 serviceWorker를 사용할 생각이 있었다면, create-react-app을 할 때 service worker template으로 프로젝트를 생성하면 된다. npx create-react-app [a.. 이전 1 다음
