1. 브라우저 이벤트 루프(Event Loop)이벤트 루프가 처리하는 작업은 Task와 Microtask로 나뉘는데 이 Task가 일반적으로 Macrotask라 불리는 작업이다. WHATWG 명세에는 Macrotask라는 용어가 존재하지 않음에 유의하자.Event Loop Processing Model #1. Task Queue에서 작업 `oldestTask`을 하나 꺼낸다.2. `oldestTask`을 Event Loop의 currentlyRunningTask로 설정하고 처리한다. (Microtask는 여기에서 처리되는 task가 아니다!)3. currentlyRunningTask를 `null`로 되돌린다.4. Microtask 체크포인트 실행한다. i. Event Loop의 microta..
1. Renderer와 Reconciler #처음 React는 오직 DOM을 위해서만 개발되었지만 React Native와 같은 네이티브 플랫폼을 지원하게 되면서 Renderer와 Reconciler라는 개념이 생겨났다. 상태가 업데이트되어 UI가 업데이트되어야 한다고 했을 때, DOM과 Native에서 UI를 변경하는 방법은 다르다. 하지만 UI가 아닌 React 트리 구조가 어떻게 업데이트되어야 하는지는 두 플랫폼에서 동일한데 이것은 Reconciler의 역할이다. 정리하자면 Renderer는 React 컴포넌트 트리를 어떻게 각각의 플랫폼에 맞는 호출로 변환해 처리할 것인지를 결정한다면, Reconciler는 플랫폼에 상관없는 React의 컴포넌트, 상태, 생애주기 메서드 등이 일관되게 동작할 수 ..
Figma의 코멘트 요소처럼 캔버스 노드 바로 위에 DOM 요소를 렌더링해야 하는 요구사항이 생기다 보니 react-konva-utils의 ``을 이용해 DOM 요소를 렌더링할 수 있도록 했다. 처음에는 간단한 UI 요소에만 ``을 사용했는데 점점 노드 설정 팝업 등 스타일링이 들어간 요소가 필요하게 되어 styled-components를 사용하게 됐는데 그 과정에서 styled-components의 theme을 제대로 가져오지 못하는 문제에 직면하게 됐다. 이 글은 react-konva-utils의 ``와 styled-components를 사용하면서 theme 설정을 제대로 가져오지 못하는 문제를 해결해나가는, 다소 허무한 여정을 정리한 것이다. 1. styled-components의 테마를 사용할..
React에서 컴포넌트에 컴포넌트를 전달할 때 보통 children 속성을 이용하지만, 별도로 정의한 Props로 컴포넌트를 넘길 때에는 상황에 맞게 Props를 다른 방법으로 전달해야 함. 전달하려는 컴포넌트를 ① 함수형 컴포넌트로 정의, ② JSX 형태를 직접 변수로 정의하는 두 가지 방법이 있고, // 방법1 const ChildComponent = () => { return 자식 컴포넌트 } // 방법2 const childComponent = 자식 컴포넌트 컴포넌트를 Props로 전달하는 방법에는 ① 컴포넌트 자체를 전달, ② JSX 형태로 전달, ③ (props) => JSX.Element 형태로 화살표 함수로 래핑해서 전달하는 방법이 있음. } /> } /> 마지막으로 Props로 전달받은 ..
1. React Query, React Suspense 활용 2022.10.01 - [React] - React Suspense 사용하기(with. React-Query) React Suspense와 함께 활용해 image 주소로 직접 fetch 요청을 보내 blob 객체로 이미지를 불러오는 방법도 있음. 하지만, 이 방법을 이용하면 CORS 오류를 해결해야 하고, 캐시된 이미지를 불러올 때는 스켈레톤 화면이 보이지 않는 문제도 있는 한계가 있음. 2. Image onLoad 이벤트 활용 요소의 onLoad 이벤트를 활용해 아직 로드되지 않았을 때는 스켈레톤을 보여주고, 로드가 완료되었을 때 State를 변경해 원래 이미지를 보여주는 방식을 이용할 수 있음. 한편, 이미지를 불러올 때 오류가 발생할 수 ..
1. React Suspense React에서 데이터를 받아올 때, 데이터가 완전히 불러와졌는지 나타내기 위해 로딩 컴포넌트를 추가해주는 게 일반적. 하지만, 아래의 경우처럼 앱의 규모가 커져 네트워크 요청 로직이 복잡해지면 각각의 컴포넌트에 로딩 컴포넌트를 넣어주기가 어려울 수 있음. 1. 부모, 자식 컴포넌트 모두 각각의 로딩 상태를 갖고 있을 때 2. 모든 자식 컴포넌트가 데이터를 불러오고 난 후에 부모 컴포넌트를 화면에 보여주고 싶을 때 이러한 경우에 React Suspense를 사용해 의 하위 컴포넌트가 데이터를 모두 받아왔을 때까지 렌더링을 유예할 수 있음. fetch-on-render: fetching doesn’t start until the component has been rendere..
사용자가 웹 페이지에서 사진을 선택한 후에 이미지를 미리 볼 수 있도록 하는 기능을 구현했으나, DOM에 이미지가 렌더링될 때 텍스트 입력이 지연되는 문제가 발생함. 처리해주는 작업 1. 이미지를 Base64로 인코딩 한 후, MD5로 이미지 해시 2. Blob 객체로 클라이언트에서 요소에 넣을 URL 생성 총 22개(27MB)의 이미지를 업로드한 후에 바로 에디터에 포커스가 되도록 했지만, 이미지가 화면에 나타나고 텍스트가 입력되기까지 사용자가 체감할 정도로 프레임이 저하됨. 1. React useTransition() 사용하기 에디터에 텍스트를 입력하는 작업과 이미지를 화면에 나타내주는 작업 중 후자의 작업은 후순위로 미뤄도 상관없기 때문에 이미지 State를 업데이트하는 함수를 startTransi..
1. Data URIs #파일을 인라인으로 임베드할 수 있도록 Base64로 인코딩된 문자열."data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAADICAYAAAGrGBoLAAAABGd"Data URI는 ① data 접두사, ② MIME 타입, ③ Base64임을 알려주는 문자, ④ 실제 데이터까지 네 부분으로 이루어져 있다. 2. Base64 인코딩이진 데이터(binary data)를 문자 코드에 영향을 받지 않는 ASCII 코드로만 이루어진 문자열로 변환하는 인코딩 방식. CPU에서는 0과 1로만 이루어진 데이터를 읽고 쓰는데 왜 이진 데이터를 ASCII 문자로 불필요하게 인코딩하는 것일까? 이메일 SMTP 프로토콜, URL, JSON, XML 등 텍스트 기..
1. 서버 State와 상태 관리 라이브러리 서버의 데이터를 클라이언트에서 State로 관리하게 되면 어색한 느낌을 받게 되는 상황이 옴. 게시글 작성: POST 요청으로 데이터 보냄 게시글 목록: GET 요청으로 데이터 받아 옴 게시글 추천, 좋아요 등의 State를 클라이언트에 저장해두면 Optimistic Update를 구현할 수 있는 장점이 있지만, 게시글 작성 후 본문 내용을 클라이언트 State에 저장하는 상황에서는 어차피 게시글 페이지로 리다이렉트해 서버에서 데이터를 받아오기 때문에 그러한 작업이 무척 어색하고 무의미하게 됨. 서버 State와 클라이언트 State의 성격이 다르기 때문에 이러한 상황이 발생하는데, 서버 State의 성격에 맞는 상태 관리 라이브러리에는 대표적으로 React-..
1. 이벤트 위임(Event Delegation) 이벤트 위임에는 이벤트 버블링(Bubbling), 이벤트 캡처링(Capturing)이 있음. React에서는 Javascript에서와 동일하게 이벤트 버블링(Bubbling)이 이벤트 위임의 기본값. function Node5() { return ( console.log("5번")}>5번 노드 ); } function App() { return ( console.log("1번")}> ); } App 컴포넌트의 가장 바깥 div 요소와 그 안의 Node5 컴포넌트에 클릭 이벤트 핸들러를 부착했을 때, Node5 컴포넌트 내부를 클릭하면 Node5 → App의 순서로 이벤트 핸들러가 실행됨을 알 수 있음. A. 컴포넌트에서 이벤트 캡처링 사용하기 # Reac..
JavaScript/React 2025. 6. 13. 09:09
1. 브라우저 이벤트 루프(Event Loop)이벤트 루프가 처리하는 작업은 Task와 Microtask로 나뉘는데 이 Task가 일반적으로 Macrotask라 불리는 작업이다. WHATWG 명세에는 Macrotask라는 용어가 존재하지 않음에 유의하자.Event Loop Processing Model #1. Task Queue에서 작업 `oldestTask`을 하나 꺼낸다.2. `oldestTask`을 Event Loop의 currentlyRunningTask로 설정하고 처리한다. (Microtask는 여기에서 처리되는 task가 아니다!)3. currentlyRunningTask를 `null`로 되돌린다.4. Microtask 체크포인트 실행한다. i. Event Loop의 microta..
JavaScript/React 2025. 5. 17. 16:55
1. Renderer와 Reconciler #처음 React는 오직 DOM을 위해서만 개발되었지만 React Native와 같은 네이티브 플랫폼을 지원하게 되면서 Renderer와 Reconciler라는 개념이 생겨났다. 상태가 업데이트되어 UI가 업데이트되어야 한다고 했을 때, DOM과 Native에서 UI를 변경하는 방법은 다르다. 하지만 UI가 아닌 React 트리 구조가 어떻게 업데이트되어야 하는지는 두 플랫폼에서 동일한데 이것은 Reconciler의 역할이다. 정리하자면 Renderer는 React 컴포넌트 트리를 어떻게 각각의 플랫폼에 맞는 호출로 변환해 처리할 것인지를 결정한다면, Reconciler는 플랫폼에 상관없는 React의 컴포넌트, 상태, 생애주기 메서드 등이 일관되게 동작할 수 ..
JavaScript/React 2024. 8. 29. 16:48
Figma의 코멘트 요소처럼 캔버스 노드 바로 위에 DOM 요소를 렌더링해야 하는 요구사항이 생기다 보니 react-konva-utils의 ``을 이용해 DOM 요소를 렌더링할 수 있도록 했다. 처음에는 간단한 UI 요소에만 ``을 사용했는데 점점 노드 설정 팝업 등 스타일링이 들어간 요소가 필요하게 되어 styled-components를 사용하게 됐는데 그 과정에서 styled-components의 theme을 제대로 가져오지 못하는 문제에 직면하게 됐다. 이 글은 react-konva-utils의 ``와 styled-components를 사용하면서 theme 설정을 제대로 가져오지 못하는 문제를 해결해나가는, 다소 허무한 여정을 정리한 것이다. 1. styled-components의 테마를 사용할..
JavaScript/React 2023. 1. 18. 17:54
React에서 컴포넌트에 컴포넌트를 전달할 때 보통 children 속성을 이용하지만, 별도로 정의한 Props로 컴포넌트를 넘길 때에는 상황에 맞게 Props를 다른 방법으로 전달해야 함. 전달하려는 컴포넌트를 ① 함수형 컴포넌트로 정의, ② JSX 형태를 직접 변수로 정의하는 두 가지 방법이 있고, // 방법1 const ChildComponent = () => { return 자식 컴포넌트 } // 방법2 const childComponent = 자식 컴포넌트 컴포넌트를 Props로 전달하는 방법에는 ① 컴포넌트 자체를 전달, ② JSX 형태로 전달, ③ (props) => JSX.Element 형태로 화살표 함수로 래핑해서 전달하는 방법이 있음. } /> } /> 마지막으로 Props로 전달받은 ..
JavaScript/React 2022. 11. 28. 14:31
1. React Query, React Suspense 활용 2022.10.01 - [React] - React Suspense 사용하기(with. React-Query) React Suspense와 함께 활용해 image 주소로 직접 fetch 요청을 보내 blob 객체로 이미지를 불러오는 방법도 있음. 하지만, 이 방법을 이용하면 CORS 오류를 해결해야 하고, 캐시된 이미지를 불러올 때는 스켈레톤 화면이 보이지 않는 문제도 있는 한계가 있음. 2. Image onLoad 이벤트 활용 요소의 onLoad 이벤트를 활용해 아직 로드되지 않았을 때는 스켈레톤을 보여주고, 로드가 완료되었을 때 State를 변경해 원래 이미지를 보여주는 방식을 이용할 수 있음. 한편, 이미지를 불러올 때 오류가 발생할 수 ..
JavaScript/React 2022. 10. 1. 17:52
1. React Suspense React에서 데이터를 받아올 때, 데이터가 완전히 불러와졌는지 나타내기 위해 로딩 컴포넌트를 추가해주는 게 일반적. 하지만, 아래의 경우처럼 앱의 규모가 커져 네트워크 요청 로직이 복잡해지면 각각의 컴포넌트에 로딩 컴포넌트를 넣어주기가 어려울 수 있음. 1. 부모, 자식 컴포넌트 모두 각각의 로딩 상태를 갖고 있을 때 2. 모든 자식 컴포넌트가 데이터를 불러오고 난 후에 부모 컴포넌트를 화면에 보여주고 싶을 때 이러한 경우에 React Suspense를 사용해 의 하위 컴포넌트가 데이터를 모두 받아왔을 때까지 렌더링을 유예할 수 있음. fetch-on-render: fetching doesn’t start until the component has been rendere..
JavaScript/React 2022. 9. 21. 13:46
사용자가 웹 페이지에서 사진을 선택한 후에 이미지를 미리 볼 수 있도록 하는 기능을 구현했으나, DOM에 이미지가 렌더링될 때 텍스트 입력이 지연되는 문제가 발생함. 처리해주는 작업 1. 이미지를 Base64로 인코딩 한 후, MD5로 이미지 해시 2. Blob 객체로 클라이언트에서 요소에 넣을 URL 생성 총 22개(27MB)의 이미지를 업로드한 후에 바로 에디터에 포커스가 되도록 했지만, 이미지가 화면에 나타나고 텍스트가 입력되기까지 사용자가 체감할 정도로 프레임이 저하됨. 1. React useTransition() 사용하기 에디터에 텍스트를 입력하는 작업과 이미지를 화면에 나타내주는 작업 중 후자의 작업은 후순위로 미뤄도 상관없기 때문에 이미지 State를 업데이트하는 함수를 startTransi..
JavaScript/React 2022. 9. 19. 18:05
1. Data URIs #파일을 인라인으로 임베드할 수 있도록 Base64로 인코딩된 문자열."data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAADICAYAAAGrGBoLAAAABGd"Data URI는 ① data 접두사, ② MIME 타입, ③ Base64임을 알려주는 문자, ④ 실제 데이터까지 네 부분으로 이루어져 있다. 2. Base64 인코딩이진 데이터(binary data)를 문자 코드에 영향을 받지 않는 ASCII 코드로만 이루어진 문자열로 변환하는 인코딩 방식. CPU에서는 0과 1로만 이루어진 데이터를 읽고 쓰는데 왜 이진 데이터를 ASCII 문자로 불필요하게 인코딩하는 것일까? 이메일 SMTP 프로토콜, URL, JSON, XML 등 텍스트 기..
JavaScript/React 2022. 9. 7. 21:33
1. 서버 State와 상태 관리 라이브러리 서버의 데이터를 클라이언트에서 State로 관리하게 되면 어색한 느낌을 받게 되는 상황이 옴. 게시글 작성: POST 요청으로 데이터 보냄 게시글 목록: GET 요청으로 데이터 받아 옴 게시글 추천, 좋아요 등의 State를 클라이언트에 저장해두면 Optimistic Update를 구현할 수 있는 장점이 있지만, 게시글 작성 후 본문 내용을 클라이언트 State에 저장하는 상황에서는 어차피 게시글 페이지로 리다이렉트해 서버에서 데이터를 받아오기 때문에 그러한 작업이 무척 어색하고 무의미하게 됨. 서버 State와 클라이언트 State의 성격이 다르기 때문에 이러한 상황이 발생하는데, 서버 State의 성격에 맞는 상태 관리 라이브러리에는 대표적으로 React-..
JavaScript/React 2022. 9. 2. 16:08
1. 이벤트 위임(Event Delegation) 이벤트 위임에는 이벤트 버블링(Bubbling), 이벤트 캡처링(Capturing)이 있음. React에서는 Javascript에서와 동일하게 이벤트 버블링(Bubbling)이 이벤트 위임의 기본값. function Node5() { return ( console.log("5번")}>5번 노드 ); } function App() { return ( console.log("1번")}> ); } App 컴포넌트의 가장 바깥 div 요소와 그 안의 Node5 컴포넌트에 클릭 이벤트 핸들러를 부착했을 때, Node5 컴포넌트 내부를 클릭하면 Node5 → App의 순서로 이벤트 핸들러가 실행됨을 알 수 있음. A. 컴포넌트에서 이벤트 캡처링 사용하기 # Reac..