웹 어플리케이션의 성능을 진단할 때, UI의 평균 응답시간을 측정하는 일은 매우 중요합니다. 특히 백엔드 API가 수없이 많은 경우, 전체가 아닌 사용자 인터페이스에서 호출되는 요청만 집계하는 방식이 필요합니다. 본 글에서는 UI 평균 응답시간을 측정하는 여러 가지 방법을 단계별로 정리합니다.1. 평균 응답시간 기본 개념평균 응답시간은 총 응답시간 / 총 요청 수로 계산됩니다.실무에서는 API마다 속도가 다르므로 API별 평균 응답시간을 따로 구하는 것이 일반적입니다.UI 요청만 별도로 필터링하여 평균을 구해야 정확한 사용자 체감 속도를 반영할 수 있습니다.2. 백엔드 로그를 활용한 방법2-1. UI 요청만 필터링하기로그 데이터에서 UI 요청을 식별하는 대표적인 방법은 다음과 같습니다.endpoint 기..

웹 개발에서, 사용자 경험을 향상시키기 위해 비동기 처리는 중요한 개념입니다. 자바스크립트에서는 비동기 처리를 위해 Promise 객체를 사용합니다. 이 글에서는 자바스크립트의 비동기 처리 방식과 Promise 객체에 대해 알아보겠습니다.1. 비동기 처리의 필요성웹 애플리케이션은 사용자와의 상호작용에 맞춰 동적으로 데이터를 업데이트하고, 외부 서버와 통신하여 데이터를 가져와야 합니다. 이러한 작업은 시간이 오래 걸리는 경우가 많아, 이를 동기적으로 처리하면 사용자 경험이 저하될 수 있습니다. 따라서 비동기적으로 처리하여 웹 페이지의 응답성을 향상시키는 것이 중요합니다.2. 비동기 처리의 구현자바스크립트에서 비동기 처리는 주로 콜백 함수를 통해 이루어집니다. 예를 들어, Ajax 요청이나 타이머 함수 등을..

배열 요소의 총 합을 구하기 위해서 reduce 함수를 사용한다. 자바스크립트의 reduce 함수는 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환한다.1. 합계 구하기const arr = [1, 2, 3];const result = arr.reduce(function add(sum, currValue) { return sum + currValue;}, 0);console.log(result); // 6위 예시 처럼 합계를 구할 수 있다.[출처]https://cocobi.tistory.com/134 [JS] 자바스크립트 배열의 합계, 평균 구하기📌 배열의 합계, 평균 구하기 자바스크립트에서 배열의 합계와 평균을 구하는 방법으로 reduce( )를 사용하면 된..

Set 객체를 사용하여 배열 중복 요소 제거1. Setconst dupArr = [1, 2, 3, 1, 2];const set = new Set(dupArr);const uniqueArr = [...set];document.writeln(Array.isArray(uniqueArr)); // truedocument.writeln(uniqueArr); // 1, 2, 3위와 같이 배열 내부 중복을 제거할 수 있다.[출처]https://hianna.tistory.com/422 [Javascript] 배열 중복 제거하는 3가지 방법Javascript의 배열에서 중복 되는 값을 제거하는 3가지 방법을 알아보도록 하겠습니다. 1. Set 2. indexOf(), filter() 3. forEach(), includ..

Visual Studio Code 터미널에서 create-react-app 을 사용하여 새로운 프로젝트를 만든다.npm 버전이 맞지 않을 경우 재설치를 하거나 nvm list에서 nvm 버전을 바꾼다.create-react-app 에러 발생 시 지우고 재설치 해본다.$ npx create-react-app mashup-todolist 해당 디렉토리 이동 후 react-icons와 styled-component 라이브러리를 설치한다.$ cd mashup-todolist$ yarn add react-icons styled-components그리고 터미널에서 해당 디렉토리를 열고 yarn start 를 입력하여 개발 서버를 실행한다.만들어야 할 컴포넌트 목록TodoTemplate우리가 만들 TodoList..