Recoil에는 크게 두 가지 핵심 콘셉트가 있습니다. 바로 Atom과 Selector입니다. Atom은 Recoil에서 데이터를 보관하는 기본 단위입니다. 컴포넌트에서 Atom을 구독하고 업데이트할 수 있습니다.

이번 포스팅에서는 제가 Intersection Observer API를 활용해 React에서 무한 스크롤을 구현한 방법을 소개해 드리려 합니다. Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.

tailwind css는 자신들을 utility-first 프레임워크라고 소개하고 있습니다. tailwind에서 제공하는 미리 세팅된 수많은 utility 클래스 명을 활용해 html 코드 내에서 인라인 방식으로 스타일링할 수 있다는 뜻입니다. Bootstrap이나 Ant Design 등의 css 프레임워크가 자신들만의 스타일이 적용된 구성요소들을 제공하는 반면에, tailwind는 정해진 스타일이 없습니다. 제공되는 utility 클래스들은 모두 저수준의 클래스들이기 때문이죠. 따라서 이를 원하는 대로 조합해서 자신이 원하는 스타일을 만들어 낼 수 있습니다.

우리에게 익숙한 React는 Single Page Application (이하 SPA) 구현을 위한 Javascript 프레임워크입니다. 여기에서 Page는 HTML / CSS / JS로 이뤄진 문서입니다. 이런 페이지가 하나라면 SPA, 여러 개라면 MPA (Multiple Page Application) 라고 할 수 있습니다.

간단하게는 실제 DOM의 복사본 정도라고 말할 수 있을 것 같습니다. Virtual DOM은 실제 DOM 노드를 복사해 그것을 자바스크립트 객체로 관리합니다. 실제 DOM이 렌더링 되면 그 DOM 트리를 복사합니다..

클로저란 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 통해 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 말합니다.어휘적 환경은 특정 코드가 작성되고 정의된 환경을 뜻합니다. 클로저를 이해하기 위해 필수적인 개념이죠.

쓰로틀링은 설정한 타이머 시간 동안은 요청을 무시하지만 타이머 시간이 지나면 주기적으로 다시 요청을 허용하는 방식입니다. 디바운싱과는 근본적으로 차이가 있죠. 위 사진을 참고하시면 차이점이 직관적으로 보일 겁니다.

디바운싱은 연이어 발생한 이벤트를 그룹화하여 한 번에 처리하는 방식입니다. <br />일반적으로 연이어 호출되는 함수들 중에서 처음이나 마지막의 함수만 호출되도록 하죠. 쓰로틀링

React에서 제공하는 Portals는 이런 경우 좋은 해결법이 될 수 있습니다. Portals는 기본적으로 상하 관계 구조를 가지고 있는 DOM에서 자식 컴포넌트를 부모 컴포넌트 밖에 있는 다른 컴포넌트로 전달할 수 있습니다. 사용법은 아주 간단합니다.

1. Layout 이 시점에서는 이미 construction 파트에서 만들어진 Rendering Tree에 최종적으로 계산된 CSS 스타일이 포함되어 있습니다. 그 정보들을 기반으로 요소들이 어디에 얼마나 크게 배치되어야 할지(레이아웃에 대한 정보) 등을 계산합니다. 2. Paint 여기서는 앞에서 계산된 요소들을 실제로 브라우저에 바로 그리는 것이 아니라, 각각의 부분들을 작은 단위로 나누어 레이어를 구성합니다. 포토샵에서 사진 편집 시 사용하는 레이어의 개념과 유사하다고 볼 수 있습니다. 이 작은 단위로 나누는 기준은 브라우저마다 다르고 스타일 등의 다양한 속성값들에 따라 달라집니다.

이벤트 캡처링과 이벤트 버블링에 대해 알아보겠습니다. 이벤트는 브라우저에서 발생할 수 있는 일련의 모든 사건들을 뜻합니다. 그 사건은 유저의 클릭이 될 수도 있고, 스크롤이 될 수도 있고, 웹 페이지의 성공적인 로드, 심지어 에러가 발생한 것이 될 수도 있습니다. 이처럼 종류가 아주 다양하죠. event, capturing, bubbling.

이때 async와 await라는 특별한 문법을 사용하면 Promise를 조금 더 깔끔하게 사용할 수 있습니다. 마치 동기식으로 코드를 작성하는 것처럼 간편하게 코드를 작성할 수 있도록 도와줍니다.

Promise는 특정 기능을 수행시켰을 때, '이게 성공하면 이렇게 해줘' '이게 실패하면 이렇게 해줘' 등의 기능을 심어놓을 수 있는 성공 실패 처리(판독)기라고 생각하면 이해하기 쉽습니다. 아직은 직관적인 이해가 힘들 것 같습니다. 자세히 보기 전에, Promise는 그저 Callback을 조금 더 세련되게 표현할 수 있는 코드 디자인 패턴 중 하나라고 생각하고 차근차근 접근해 보면 좋을 것 같습니다. 프라미스. Promise

바로 이것이 콜백의 콘셉트입니다. 다른 함수에 인자(파라미터)로 넘겨주고, 때가 되면 나중에 호출(callback) 받는 다는 것이죠. 즉, 여러번의 비동기 호출이 이루어지는데 각 처리는 비동기로 이루어지나, 각 비동기 호출간의 실행 순서는 동기적으로 제어 가능합니다.

자바스크립트의 비동기적(asynchronous) 처리에는 대표적으로 callback 함수, promise, async가 있습니다. 이 각각의 문법 자체도 중요하겠지만 그것보다도 왜 이런것들을 사용해야하는지? 에 대한 배경이 중요하다는 걸 느꼈습니다. 그 배경에는 바로 오늘 정리해볼 Event Loop가 있습니다.