어제보다 더 나은 오늘

목록 페이지에 페이지네이션이 있을 때, 상세 페이지를 갔다가 뒤로 가기를 눌렀을 때 항상 1페이지로 돌아가는 것이 아니라 원래 있던 페이지를 기억해서 해당 페이지로 돌아오게 하는 기능을 구현하는 방법을 간략하게 정리해 본다. 위의 기능을 구현하기 위해서는 현재 페이지를 어딘가에 저장해두어야 하는데 이때 다음의 세 가지 방식을 생각해 볼 수 있을 것 같다. 1. 브라우저의 sessionStorage 세션 스토리지는 탭이 열려 있는 동안 정보를 저장할 수 있어, 사용자가 페이지를 떠났다가 돌아왔을 때 이전 페이지 정보를 유지하는 데 유용하다. 2. URL의 쿼리 스트링 URL로부터 페이지 정보를 읽어들일 수 있다. URL을 가지고 있으면 탭을 닫았다가 다시 열 때도 이전 페이지로 돌아갈 수 있고, 해당 UR..

1. React.Fragment () 추가 HTML 요소 없이 여러 요소를 함께 렌더링하려는 경우에 사용한다. react legacy docs의 JSX in Depth 파트를 보면 JSX는 React.createElement의 syntatic sugar임을 상기해 보면 왜 그루핑이 필요한 지 알 수 있다. import React from 'react'; import CustomButton from './CustomButton'; function WarningButton() { // return React.createElement(CustomButton, {color: 'red'}, null); return ; } // node_modules/@types/react/index.d.ts function cr..

앞의 포스팅에서 언급했던 것처럼 무한스크롤 관련 이슈를 해결하고 나니 성능 이슈가 부각되었다. 원문과 번역문을 두고 사용자가 편집할 수 있는 서비스인데 아이템이 500개 정도만 되어도 키보드 입력 이벤트가 발생하면 사용자가 키보드를 누르고 화면에 해당 글자가 뜨는 시간 사이에 지연이 체감되는 정도였다. list virtualization 또는 windowing 기법을 적용해서 뷰포트에 보이는 아이템만 DOM 노드에 가지게 하면 성능 면에서 큰 개선을 할 수 있을 거라고 생각했다. react-virtualized가 대표적인 windowing 라이브러리로 지금은 legacy가 된 이전 버전 react 공식 문서의 성능 최적화 파트에서도 추천하는 라이브러리를 먼저 고려했다. 프로젝트의 요구 사항 중 목록 가상..

windowing 기법 또는 list virtualization 기법을 적용해 무한 스크롤 성능을 최적화하기 위해 tanstack의 react-virtual 라이브러리를 사용하면서 위의 YouTube 클립의 도움을 많이 받았다. 위의 클립에서 faker-js로 랜덤한 길이를 가진 문장을 리스트로 만들어 virtualization을 통해 최적화하는 구현 방법을 코드로 옮겨 보았다. 랜덤한 길이를 가졌기 때문에 리스트 아이템의 height가 일정하지 않다. 즉 dynamic height를 가진 아이템을 구현하는 방법이다. 먼저 virtual을 적용하기 전 코드이다. 10만 개가 아니라 100만 개의 아이템을 렌더링한다면? 어지간히 성능 좋은 컴퓨터에서도 100만개를 렌더링하는 순간 브라우저가 죽어버릴 것이다..

들어가기에 앞서 https://www.patterns.dev/vanilla/command-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 명령을 처리하는 객체를 통해 메소드와 실행되는 동작의 결합도를 낮출 수 있다. 특정 작업을 실행하는 객체과 메소드를 호출하는 객체를 분리할 수 있다. 주요 세 가지 클래스: invoker, receiver, command invoker : command를 생성하고 실행하는 역할 나중에 실행할 수 있도록 명령을 대기열(queue)에 넣거나 이미 실행된 명령을 실행 취소하는 데 사용할 수도 있다. receiver : 특정 command를 수신하고 처리 애플리케이션의 다른 클래스나 메소드에 ..

들어가기에 앞서 https://www.patterns.dev/vanilla/mediator-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 컴포넌트들이 서로 직접 통신하는 대신 중재자 역할을 하는 객체를 통해 서로 통신하도록 한다. 중재자 객체가 요청을 받아 이를 필요로 하는 객체들에게 전달한다. 중재자는 보통 객체나 함수로 구현된다. 사용 예제) 채팅 앱 - 채팅 앱에서 사용자는 메시지를 서로 직접 주고 받지 않는다. - 채팅 서버에 메시지를 전송하고, 서버가 각 사용자에게 메시지를 전달한다. class ChatRoom { logMessage(user, message) { const time = new Date().to..

들어가기에 앞서 https://www.patterns.dev/vanilla/observer-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. Observer 패턴에서는 특정 객체를 구독할 수 있는데, 구독하는 주체를 Observer라고 하고, 구독 가능한 객체를 Observable이라고 한다. 이벤트가 발생할 때마다 Observable은 모든 Observer에게 이벤트를 전파한다. Observable 객체는 보통 3가지 주요 특징을 포함한다. observers : 이벤트가 발생할 때마다 전파할 Observer들의 배열 subscribe() : Observer를 observers 배열에 추가한다. unsubscribe() :..

들어가기에 앞서 https://www.patterns.dev/vanilla/module-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 장점 코드를 재사용 가능하면서도 작게 나눌 수 있게 해주어 유지보수하기 쉽다. 명시적으로 export한 값들만 외부에 노출되기 때문에 명시적으로 export하지 않은 변수들은 모듈 내에서만 사용함으로써 전역 스코프의 변수들과 이름이 충돌하는 문제를 줄일 수 있다. 모듈 패턴을 사용하면 코드의 일부분을 캡슐화할 수 있다. 이는 의도치 않은 전역 변수 할당을 예방할 수 있어 여러 의존 모듈을 사용하거나 네임스페이스를 사용할 때 안전하다. 필요 조건 모든 자바스크립트 런타임에서 ES2015의 ..

타입스크립트에서 type alias와 interface는 여러 차이가 있지만 코드 에디터에서 미리보기로 타입의 형태를 표기하는 방식에 있어 차이가 있다. type과 interface 각각을 살펴보자. 이때 VS Code에서 User 타입에 마우스를 올리면 다음과 같이 User 객체의 모든 프로퍼티를 볼 수 있다. 그렇다면 이번에는 똑같은 형태의 객체를 interface로 정의해 보자. interface로 정의한 객체에 마우스를 올리면 데이터의 형태를 보여주지 않고 interface의 명칭만 보여준다. 한 파일 안에 타입이 정의되어 있지 않은 경우에는 데이터의 구체적인 형태를 파악하기 위해 해당 파일로 이동해야 하는 경우가 많다. 따라서 변수에 연결된 타입이 구체적으로 어떤 모양인지 파악할 때는 타입 별칭..

들어가기에 앞서 https://www.patterns.dev/react/presentational-container-pattern 에 있는 내용을 바탕으로 정리한 포스팅임을 밝힙니다. 비지니스 로직과 뷰(view)를 분리하여 관심사 분리(SoC)를 강제한다. Presentational Componentpresentational 컴포넌트는 props를 통해 데이터를 받는다. 받은 데이터를 화면에 표현하는 것이 컴포넌트의 주요 기능이며, 이 목적을 위해 스타일시트를 포함한다. props를 통해 받은 데이터는 presentational 컴포넌트에 의해 수정되지 않는다. UI 변경을 위한 상태 외에는 상태를 갖지 않는다. presentational 컴포넌트에서는 html과 css, 다른 presentationa..