전체 글

[Web] 프론트엔드 성능 최적화

웹은 무수히 많은 프로토콜과 많은 실행 환경 속에서 동작이 되고 있기 때문에 웹 성능 최적화를 위한 방법들을 단순히 정의하는게 쉽지는 않다. 성능 최적화는 단순히 각종 비용을 줄이는 측면에서 볼 수 있다. 왜냐? 프로그램은 컴퓨터의 리소스를 소모하면서 동작한다. 그러한 리소스에는 메모리 사용량, 처리 시간 등이 있다. 처리하는 작업이 복잡하고 클수록 리소스를 더 많이 소모하게 되기 때문에 성능 저하로 이어진다. 특히 웹 프론트엔드 환경에서는 각종 파일들을 주고 받으며 화면을 띄우고 업데이트하는 과정속에서 비용을 소모하기 때문에 웹 개발자는 최소한의 데이터로 가장 빠른 시간에 사용자가 불편함을 느끼지 않는 최적의 화면을 띄워야 한다. 이러한 성능 최적화를 통해 사용자 경험의 개선으로 이어지면서 기업의 실적..

[React] useEffect와 sideEffect

useEffect란? React에서 제공하는 useEffect()는 sideEffect를 처리하기 위해 사용한다고 한다. 리액트의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구라고 생각하면 된다. 즉, 렌더링 이외에 일으켜야하는 sideEffect를 일으킬 탈출구라고 보면 된다. sideEffect를 렌더링 이후에 발생하며 업데이트 된 정보가 있어 새롭게 화면에 그려야할 경우 새롭게 렌더링을 일으킨다. SideEffect란? sideEffect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 sideEffect라 한다. 즉, 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 예를들어 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에..

[Web] Authentication vs Authorization

인증 (Authentication) / 인가 (Authorization)은 항상 함께 등장하는 개념인 동시에 사용하기에 헷갈리는 용어이다. 그래서 서로 다른 개념이지만 이 둘의 차이를 두지 않고 종종 혼용되어 쓰이고 있다. 인증 (Authentication) 인증이란 어떤 개체 즉, 유저 혹은 디바이스에 대한 신원을 확인하는 절차 및 과정이다. 개체는 보통 어떤 인증 요소를 증거로 제시하여 자신을 인증한다. 예를 들어 은행에 가서 돈을 인출하려면 은행직원은 돈을 인출하는 사람이 누구인지 확인하기 위해 신분증을 제시해 달라고 요청할 수 있다. 더 간단히 말하면 어떤것을 검증할 수 있는 방법이다. 인가 (Authorization) 인가는 인증과 달리 어떤 개체 즉, 유저 혹은 디바이스에 대한 접근 권한이 있..

7장 일상적인 코드 속 빅 오

7장에서는 지금까지 배운 내용을 토대로 현실의 코드 기반에 있을 법한 실용적인 코드 예제의 효율성을 분석한다. 코드 효율성을 알아내는 것이 최적화의 첫 번째 단계다. 더욱이 코드가 빅 오 표기법 관점에서 어떤 카테고리에 해당하는지 알면 애초에 최적화가 정말 필요한지 판단할 수 있다. 예를 들어 O(N²)인 알고리즘은 일반적으로 느린 알고리즘이므로, 최적화할 방법이 있는지 고민해봐야 한다. 7.1 짝수의 평균 const averageOfEvenNumbers = (array) => { let sum = 0; let countOfEvenNumbers = 0; for (let i = 0; i < array.length; i++) { if (array[i] % 2 === 0) { sum += array[i]; c..

6장 긍정적인 시나리오 최적화

지금까지는 주로 최악의 시나리오에서 얼마나 많은 단계가 걸리는지에 초점을 맞췄다. 하지만 최악의 시나리오 외에도 고려할 가치가 있는 상황들이 있다. 6-1 삽입 정렬 삽입 정렬을 배우면서 최악의 경우가 아닌 다른 시나리오를 분석하는 것에 어던 장점이 있는지 알아보자. 첫 번재 패스스루에서 임시로 인덱스 1 (두 번째 셀)의 값을 삭제하고 이 값을 임시 변수에 저장한다. 값이 없어졌으므로 공백이 생긴다. 다음으로 공백 왼족에 있는 값을 가져와 임시 변수에 있는 값과 비교하는 시프트 단계를 시작한다. 공백 왼쪽에 있는 값이 임시 변수에 있는 값보다 크면 그 값을 오른쪽으로 시프트한다. 값을 오른쪽으로 시프트 했으므로 자연히 공백이 왼족으로 옮겨진다. 임시로 삭제한 값보다 작은 값을 만나거나 배열의 왼쪽 끝에..

[React, JS] 비동기 동기 처리

동기 (Syncronous)와 비동기 (Asynchronous)는 프로그래밍 언어에서 중요한 개념이다 동기 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식을 말한다. 즉, 요청과 결과가 동시에 일어나기 때문에 코드가 직관적이고 이해하기 쉽다. 코드가 짜여진 순서대로 실행된다. 비동기 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식이다. 즉, 결과가 나올 때 까지 기다리지 않고 다른 일을 처리할 수 있기 때문에 코드나 순서는 이해하기 어려워도 자원 사용을 좀 더 효율적으로 할 수 있다. 코드가 짜여진 순서대로 실행되지 않는다. 자바스크립트에서 동기와 비동기 자바스크립트는 단일 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일을 처리할 수 있다. 그러므로 자바스..