전체 글
웹페이지에서는 데이터 요청 상태에 따라 UI는 다른 상태를 보여주어야 한다.데이터가 패칭 중 일 때 로딩 UI, 에러가 났을 때 에러 UI 등이 있다.위 상황을 처리하기 위해 다양한 방법을 사용할 수 있다.프로젝트에 적용하면서 유지보수성 및 가독성이 좋은 방법이 뭐가 있을까 고민하던 중Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭 처리 방법을 채택하게 되었고, 블로그로 정리하고자 한다.전통적인 데이터 패칭 처리@tanstack/react-query에서는 useQuery 값 내 isLoading, isError 상태값을 제공해 준다.아래는 useQuery를 사용해 standard 한 방법으로 비동기 요청으로 데이터를 받아와 사용자에게 전달하는 OrderList 페이지다.import..
기존 사내 프로젝트는 session방식으로 인증 구현을 해왔다.현재 유지보수하고 있는 프로젝트에서 추후 확장성을 이유로 session에서 JWT으로 인증 방식을 바꾸게 되었다.session과 JWT 구현 방식이 무엇이고 어떤 차이가 있는지 정리하고, 발생했던 동시성 이슈와 해결 방법에 대해 정리해보고자 한다.Session세션 방식이 인증되는 방식은 아래와 같다.클라이언트가 인증정보(email, password)를 서버에 전송서버는 메모리에 사용자를 저장하고 Session Id를 클라이언트에 쿠키로 전달 클라이언트는 쿠키에 저장된 Session Id를 사용해 요청 서버는 일치하는 Session Id를 메모리에서 검색한 후 있다면 권한 부여Session 방식의 장점Session Id를 서버에서 관리하기 때문..
React.lazy와 SuspenceReact.lazy & Suspence는 React 16.6에서 소개된 기능으로, 성능 최적화와 사용자 경험 개선을 목적으로 반영되었다. lazy – ReactThe library for web and native user interfacesreact.dev이전 웹 애플리케이션은 사용자가 아직 필요로 하지 않는 코드까지도 전부 불러와야 했다(SPA의 특징).이는 애플리케이션의 초기 로딩 속도를 증가시키고 성능 저하로 이어질 수 있다.React.Lazy&Suspence는 이 문제를 해결하기 위해 등장했는데, 개발자가 동적으로 컴포넌트를 로드할 수 있게 하여 애플리케이션의 번들 크기를 줄이고, 초기 로딩 성능을 개선할 수 있게 해준다.React.lazy컴포넌트를 동적으로 ..
19장을 읽으며 얻은 인사이트를 추가로 공부하면서 정리해 보자. 19장: 프로토타입 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 클래스 class ES6에서 class가 도입되었다. 클래스도 함수이고, 기존 프로토 타입 기반 패턴의 문법적 설탕으로 도입되었지만, 새로운 객체 생성 메커니즘으로 보는 것이 낫다. 객체지향 프로그래밍(OOP) 객체지향 프로그래밍 vs 절차지향 프로그래밍 먼저 절차지향이란 물이 위에서 아래로 흐르는 것과 같이 코드가 순서대로 동작하는 것을 말한다. 이는 컴퓨터의 작업 처리 방식과 유사해, 객체지향 언어를 사용하는 것보다 더 빨리 처리된다(ex. C) 옛날에는 하드웨어와 소프트웨어의 개발 속도 차이가 크지 않았는..
16~17장을 읽으며 얻은 인사이트를 추가로 공부하면서 정리해 보자. 16장: 프로퍼티 어트리뷰트 17장: 생성자 함수에 의한 객체 생성 18장: 함수와 일급 객체 데이터 프로퍼티와 접근자 프로퍼티 객체의 프로퍼티는 2종류로 나뉜다. 데이터 프로퍼티: 키와 값으로 구성된 일반적인 프로퍼티를 의미 접근자 프로퍼티: 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티 프로퍼티 어트리뷰트: JS엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본 값으로 자동 정의 프로퍼티 디스크립터: 프로퍼티 어트리뷰트 정보를 제공 데이터 프로퍼티 데이터 프로퍼티는 아래와 같은 프로퍼티 어트리뷰트를 갖는데 아래 값들은 JS엔진이 프로퍼..
13~15장을 읽으며 얻은 인사이트를 추가로 공부하면서 정리해 보자. 13장: 스코프 14장: 전역 변수의 문제점 15장: let, const 키워드와 볼록레벨 스코프 1. 스코프 스코프 : 식별자가 유효한 범위 식별자는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위를 결정한다. 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 var x = 'global' function foo() { var x = 'local' console.log(x) // 'local' } foo(); console.log(x); // 'global' 두 개의 x변수는 식별자 이름이 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수다. 네임스페이스 만약 스코프의..
10~12장을 읽으며 얻은 인사이트를 추가로 공부하면서 정리해 보자. 10장: 객체 리터럴 11장: 원시값과 객체의 비교 12장: 함수 1. 메서드 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다. 즉, 메서드는 객체에 묶여있는 함수를 의미한다. var circle = { radius : 5, // 프로퍼티 getDiameter : function () { // 메서드 return 2 * this.radius; } } 2. 원시 타입과 객체 타입의 차이 2-1. 원시 값은 변경 불가능한 값이지만, 객체(참조) 타입의 값은 객체는 변경가능한 값이다. 원시값은 변경 불가능한 값, 즉 읽기 전용값이다. let foo = 12 foo = 14 console.log(foo) // 14 변수는..
페이지네이션 웹에서 리스트 페이지를 구현할 때 빠지지 않는 게 페이지네이션이다. 서버에서 데이터를 가져올 때 모든 데이터를 한 번에 가져올 수는 없다. 대규모 데이터를 한 번에 가져오게 되면, 서버와 클라이언트 리소스에 부담이 가게 된다. 또한, 수백 수천 개의 행을 한 번에 표시해서 보여주는 것은 좋은 사용자 경험이 아니다. 따라서 정해진 개수만큼 나눠 데이터를 가져오는 것이 필요하다. offset-based-pagination vs cursor-based-pagination 서버 측에서 페이지네이션을 구현할 때, 구현방식에는 2가지 유형이 있다. offset-based-pagination: DB의 offset쿼리를 사용하여 ‘페이지’ 단위로 구분하여 요청/응답 cursor-based-paginatio..