삼바의 성장 블로그

Dominik의 트위터에 useQuery의 변경점에 대한 내용이 올라왔습니다. 이미 우리는 콜백(onSuccess, onError, onSettled)을 많이 사용하고 있습니다. 따라서 콜백을 제거하는 것에 대해 부정적으로 생각할 수 있지만, 기존의 콜백은 예상대로 동작하지 않을 수 있기에 변경이 필요했습니다. API에서 중요한 요소중 하나는 일관성입니다. 사람들은 추상화되어있는 API에서 일관된 응답을 받기를 원합니다. 하지만 useQuery의 콜백들은 그렇지 않습니다. Callback 들여다보기 useQuery에는 성공했을 때, 실패했을 때, 그리고 둘과 관계없이 실행되는 onSuccess, onError, onSettled 콜백이 있습니다. onError를 사용하는 예시를 보면, onError 콜백..

의식의 흐름에 따라 보는 preload 전면팝업 Braze HTML의 이미지가 늦게 그려지는 현상이 발생하였습니다. Nextjs에서 봤던 preload를 듣고 적용하여 팝업에 필요한 리소스 불러오는 시간을 네트워크 slow 3G 기준 8초 줄일 수 있었습니다. Next.js Next.js docs의 컴포넌트 API로 가보았습니다. priority 속성 설명에서 preload관련한 설명을 발견할 수 있었습니다. priority={false} // {false} | {true} When true, the image will be considered high priority and preload. You should use the priority property on any image detected as t..

들어가기 오픈소스 스터디에서 setTimeout을 들여다보며 알게된 것을 공유합니다. Event Loop http://latentflip.com/loupe/ 이벤트루프를 설명하기 위한 서비스입니다. Call Stack, Web Apis, Task Queue(Callback Queue) 세 영역으로 나누어 좌측의 코드가 실행되는 동안 어떠한 영역에서 작업이 이루어지고 이동하는지 설명하고 있습니다. setTimeout 과 같이 비동기적으로 실행되는 함수는 콜백이 실행되기 전까지 Web Apis에서 대기하고 실행되기 전에 Task Queue에 담겼다가 Call Stack이 비면 실행됩니다. V8, Blink Chromium은 우리가 작성한 Javascript 코드를 실행하기 위해 V8이라는 엔진을 사용합니다...

기존 React 어플리케이션은 번들된 js를 가져와 DOM을 렌더링하는 CSR(Client Side Rendering) 방식으로 렌더링을 하였습니다. 이러한 방식은 번들된 js 코드를 사용하므로 서버구성을 간단하게 가져갈 수 있었고 초기에 번들된 js를 가져오므로 사용자에게 마치 네이티브 어플리케이션처럼 동작하는 경험을 제공해줄 수 있었습니다. 하지만 CSR은 번들된 js로 어플리케이션의 콘텐츠를 화면에 렌더링(FCP)하고 상호작용 까지 걸리는 시간(TTI)이 증가하는 단점을 가지고 있습니다. 따라서 이와 같은 단점을 해결하고자 상황에 따라 SSR을 선택합니다. SSR은 서버에서 정적 페이지를 렌더링하고 JS파일들도 번들링한 후에 Client Side로 전달해주는데, 이 경우 서버에서는 DOM을 조작할 ..

BFCache(Back-Foward Cache)는 브라우저의 뒤로, 앞으로 버튼을 사용할 때 페이지를 즉시 로드할 수 있도록 도와주는 역할을 합니다. 이는 느린 네트워크, 장치를 사용하는 사용자의 경험을 향상시켜줍니다. 따라서 사용자의 경험을 위해 bfcache 최적화에 대해 이해하는 것이 중요합니다. bfcache란? bfcache는 사용자가 다른 곳으로 이동할 때 JS의 힙 메모리 영역을 포함한 전체 스냅샷을 저장하는 캐시입니다. 이를 통해 사용자가 이전페이지로 돌아가고자 했을 때 빠르게 전체 페이지를 보여줄 수 있습니다. 말 그대로 스냅샷이기 때문에, 리소스를 다시 다운로드 할 필요가 없습니다. 네트워크 요청이 일어나지 않고 스크롤 위치 또한 복원해줍니다. Task Queue에 대기 중이었던 작업 ..

처음 HTML에서 Javascript를 사용하여 프로그래밍을 할때는 대부분의 스크립트가 독립적인 작업을 수행하여 일반적으로 큰 스크립트가 필요하지 않았습니다. 하지만 프로젝트의 규모가 커지고 기능이 복잡해지면서 자바스크립트 커뮤니티에서 라이브러리를 공유하여 이를 프로젝트에 적용할 수 있는 형태로 발전했습니다. 자바스크립트 프로그램을 필요에 따라 가져올 수 있게 하기 위해서 코드를 모듈 단위로 구성해주는 다양한 시도를 하게 됩니다. 그리고 그 시도는 다음과 같은 모듈 시스템으로 이어졌습니다. CJS(CommonJS) JS 생태계를 브라우저뿐만 아니라 범용 언어로 사용할 수 있도록 만든 모듈시스템입니다. AMD(Asynchronous Module Definition) 가장 오래된 모듈 시스템 중 하나로 re..

현재 가게에서 사용하는 메뉴(ex. 떡볶이, 돈까스 등)가 페이지네이션이 안되어있어 6000개가 넘는 가게들의 경우 메뉴와 연관있는 서비스들이 느리게 동작한다는 것을 확인하였습니다. Image CDN을 통한 처리, 코드 스플리팅을 통해서도 한계가 있어 서비스내에서 메뉴들을 페이지네이션하려고 합니다. 페이지네이션의 대표적인 두 방법으로 Offset Pagination, Cursor Pagination이 있습니다. 이 둘을 비교해보고 어떤 것을 도입해볼지 생각해봅니다. Offset Pagination GET /items?offset=10&limit=20 offset과 limit 라는 예약어를 사용해서 데이터를 일정한 크기로 분할하고, 페이지당 항목 수와 페이지 수를 결정하는데 사용합니다. offset은 앞에..

React 어플리케이션을 만들 때 서버로부터 데이터를 가져오고 사용하는 것을 구현하는 것은 상당히 어려운 일입니다. 따라서 이를 돕기 위해 리액트에서 데이터를 가져오고, 캐싱하며 이를 관리할 수 있는 효과적인 방법을 제공하는 라이브러리들이 생겨났습니다. 이러한 라이브러리들을 데이터 페칭(data-fetching) 라이브러리라고 부르는데 근래 가장 잘 알려진 라이브러리로는 React Query와 SWR이 있습니다. 이 두 라이브러리가 어떤 특징을 가지고 있는지 그리고 어떤 차이점이 있는지 이 글을 통해 소개해보려합니다. React Query React Query는 React앱이 숨쉴 수 있도록(Breeze) 데이터를 가져오고, 캐싱하고 서버의 상태와 동기화(Synchronizing)을 쉽게 합니다. Rea..

리액트를 사용하며 ReactElement와 JSX.Element는 같은 의미로 사용되곤 합니다. 하지만 이 두 개념에는 개발자가 이해해야하는 중요한 차이점이 있습니다. ReactElement ReactElement는 리액트 라이브러리에서 저수준의 UI 컴포넌트를 가리키는데 사용합니다. ReactElement는 컴포넌트의 props , 그리고 자식들(children)을 의미하는 객체입니다. ReactElement는 React.creatElement 메소드를 통해 만들 수 있으며, React.creatElement는 컴포넌트의 타입, props , 그리고 그의 자식들을 인수로 받습니다. JSX.Element 반면에 JSX.Element 는 JSX 문법으로 생성된 element를 의미하는 타입입니다. JSX ..

올해 많은 변화들이 있었고 그 변화들 속에서도 꾸준히 공부하고 멘탈을 관리하며 성장하는 한 해였습니다. 회사에서 조금 더 책임을 느끼며 일을 하였고 팀원, 외주분들과 함께 일하기 좋은 방법들을 찾고 개선해나갔습니다. 올해 목표했던 업무들도 해내고 회사에서 인정도 받았지만 나에게 그리고 우리 서비스들에 부족한 점들을 알게되었습니다. 2022년 동안 진행했던 일들에 대해 회고를 진행해보려합니다. 업무 올해는 리액트(React) 생태계 속에서 많은 기능들을 구현하는데 시간을 보낸 한해였습니다. 장고 템플릿(Django Template)에서 구현되어 있는 기능들을 리액트로 리뉴얼하며 디자이너, 기획자와 이야기하며 사용자에게 더 나은 UI/UX를 제공하기 위해 고민하고 직접 구현하여 사용자의 불편을 줄여나갔습니다..