Now or Never

간단한 전역 객체를 만들다가 들었던 생각을 공유해 봅니다.javascript에서 모듈안에 생성된 객체/배열은 다른 모듈에서 import할 때 새 인스턴스가 생기지 않는다.예를들어 module.js라는 공유되는 모듈이 있고module.jsexport const arr = []; A.js 모듈에서 arr를 import한 뒤 숫자 1을 push 하는 코드가 있다.import { arr } from "./module"; arr.push(1); B.js 모듈에서 arr를 콘솔에 찍어보면 push된 값이 반영된 걸 확인할 수 있다.// B.jsimport { arr } from "./module";console.log("B.js에서 arr:", arr); // [1] (A.js에서 변경한 값이 반영됨) 참조의 공유..

useScrollRestoration Hook을 구현하면서 발생한 문제를 기록 해봤습니다.useScrollRestoration훅은 특정 페이지에서 스크롤 이벤트가 발생할 때마다 scrollY값을 sessionStorage에 저장한다.무한스크롤로 구현된 목록 페이지에서 상세페이지로 이동한뒤 다시 목록에 돌아왔을 때 scrollY값을 유지함으로써 좋은 탐색 UX를 위해 자주 사용되는 기능이다. 이 훅을 구현하면서 발생한 이슈가 있었는데 useEffect vs useLayoutEffect 관점에서 기록해보려고 한다. useScrollRestoration훅 초기 버전import { useEffect, useLayoutEffect } from 'react'import { useRouter } from 'next/..

프론트엔드에서 렌더링은 범용적인 용어이다, 브라우저에서도 리액트에서도 렌더링이 발생한다. 리액트에서 렌더링은 무엇일까? TL;DR 렌더링이란?브라우저 DOM을 직접적으로 수정하는 비용을 줄이기 위해 React에서 수행하는 작업이며 브라우저 DOM을 업데이트할 범위를 결정하고 반영하는 과정. Trigger, Render, Commit리엑트는 "렌더링과정"을 통해 브라우저 DOM을 업데이트할 범위를 결정하고 반영한다. 여기서 렌더링과정은 "Trigger", "Render", "Commit" 단계로 나뉜다.  Trigger렌더링을 유발하는 단계로 두 가지 상황이 있다.1. 앱 시작 초기(initial render)initial render는 target DOM node(root)와 함께 createRoot를 ..

https://careerly.co.kr/qnas/1273?fa=qna-list react-query useQuery vs... 안녕하세요. react-query에서 useQuery와 useMutation을 쓰는 도중 의문이 생겨서 질문드립니다. 보통 Read 작업은 useQuery를 쓰고... careerly.co.kr 커리어리에 올라온 질문에 답변을 하다가 react-query를 이용하여 데이터를 특정 상황에서만 조회하고 싶을 때 어떤 hook을 사용해야 하는지 고민해보았다. 2가지 방법으로 특정 상황에서만 데이터를 조회할 수 있을 것 같다. 1. useQuery 사용 - useQuery를 기본적으로 enable: false 상태로 두고, refetch 함수를 통해 특정 상황에서 데이터를 가져온다 2..