All

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

[React] 상태관리 (Local State, Global State, Cross Component State)

https://dev.to/oahehc/redux-data-flow-and-react-component-life-cycle-11n Redux Data Flow and React Component Life Cycle Almost everyone who wants to learn Redux had seen this image before. It's pretty straight forward fo... dev.to 현대 웹 개발의 흐름은 단순한 웹 페이지를 넘어 웹 애플리케이션을 구축하는 방향으로 나아가고 있다. 이제 브라우저는 단순히 정적인 페이지를 렌더링하는 도구가 아니라. 하나의 애플리케이션의 운영을 돕는 작은 규모의 OS라고 볼 수 있다. 웹 프론트엔드는 앱 여러 부분에서 각 요소의 상태를 관리해야 한..

5장 빅 오를 사용하거나 사용하지 않는 코드 최적화

빅 오는 훌륭한 도구이지만 유일한 도구는 아니다. 빅 오 표기법에서는 한 알고리즘이 다른 알고리즘보다 훨씬 빠른 경우에도 두 경쟁 알고리즘을 정확히 똑같은 방식으로 표현하기도 한다. 5-1 선택정렬 선택 정렬은 다음과 같은 단계를 따른다 배열의 각 셀을 왼쪽부터 오른쪽 방향으로 확인하면서 어떤 값이 최솟값인지 결정하고 한 셀씩 이동하면서 현재까지 가장 작은 값을 기록한다. 최솟값에 어느 인덱스에 들어 있는지 알았으므로 그 인덱스의 값과 패스스루를 처음 시작했을 때의 값을 교환한다. 첫 번째 패스스루의 시작 인덱스는 0이고, 두 번째 패스스루의 시작 인덱스는 1일 것이다. 매 패스스루는 1, 2 단계로 이뤄진다. 배열 끝에서 시작하는 패스스루에 도달할 때까지 패스스루를 반복한다. 5-2 선택 정렬 실제로 ..

4장 빅 오로 코드 속도 올리기

빅 오를 사용하면 내가 만든 알고리즘과 세상에 존재하는 범용 알고리즘을 비교할 기회가 생긴다. 4-1 버블정렬 정렬 알고리즘 ?: 컴퓨터 과학 분야에서 폭넓게 연구된 주제이며, 수년간 수십개의 정렬 알고리즘이 개발돼 있다. 정렬되지 않은 배열이 주어졌을 대, 어떻게 오름차순으로 정렬할 수 있을까?에 대한 문제를 해결한다. 배열 정렬의 단계 배열 내에서 연속된 두 항목을 가르킨다. 처음에는 배열의 첫 번째 원소부터 시작해서 처음 두 항목을 가르킨다. 첫 번째 항목과 두 번째 항목을 비교한다. 두 항목의 순서가 뒤바뀌어 있으면 두 항목을 교환한다. 순서가 올바르다면 2단계에서는 아무것도 하지 않는다. 포 배열의 끝까지 또는 이미 정렬된 값까지 1단계부터 3단계를 반복한다. 이것을 배열의 첫 패스스루라 끝났다..

3장 빅 오 표기법

컴퓨터 과학자는 서로 간에 시간 복잡도를 쉽게 소통할 목적으로 자료 구조와 알고리즘의 효율성을 간결하고 일관된 언어로 설명하기 위해 수학적 개념을 차용했다. 이러한 개념을 형식화한 표현을 빅 오 표기법이라고 부른다. 빅 오 표기법을 사용해 주어진 알고리즘의 효율성을 쉽게 분류하고 이해시킬 수 있다. 3-1 빅 오 : 원소가 N개일 때 몇 단계가 필요할까? 빅 오는 특정 방식으로 알고리즘에 필요한 단계 수를 고려함으로써 일관성을 유지한다. 최악의 경우 선형 검색에는 배열의 원소 수만큼의 단계가 필요하다. 빅 오 표기법으로는 O(N)이라 표기한다. O(N)은 데이터 원소가 N개일 때 알고리즘에 N단계가 필요하다. 배열에 원소가 N개일 때 선형 검색에 몇 단계가 필요할까? 선형 검색에는 N단계가 필요하므로 O..