저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다. Lighthouse를 통한 분석 해당 서비스를 Lighthouse를 사용하여 분석을 해보면 다음과 같이 결과가 나옵니다. Diagnostics 섹션의 ‘Serve static assets with an efficient…
이번 글에서는 우리가 자주 사용하는 async, await 관련해서 살펴보겠습니다. async, await에 대한 사용하는 방법에 대한 부분은 다루지 않고 어떻게 구현되어있는지에 대하여 알아보겠습니다. async-await async-await은 ECMAScript 2017에서 표준으로 정의되었습니다. 비동기 프로그래밍을 동기 방식처럼 직관적으로 표현할 …
저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다. 폰트 분석하기 브라우저 개발자도구에서 Network 패널에서 throttle 설정을 ‘Fast 3G’로 설정 후 폰트가 적용된 부분을 확인하면 아래와 같습니다. 폰트 적용 전 폰트 적용 후 이러한 현상은 텍스트가 보이…
저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다. 느린 이미지 로딩 분석 개발자 도구에서 Network 패널을 통해 분석할 이미지를 살펴보면, 파일 크기가 매우 큰 것을 볼 수 있습니다. 이미지 사이즈가 크면 다운로드에 많은 시간이 걸리고 그만큼 다른 작업에 영향을 줍니…
저는 해당 도서에서 제공해주는 샘플코드를 이용하고 있으므로 샘플코드가 없으신분들은 최적화하는 과정에 대해서만 알고계서도 좋을것같습니다. 네트워크 분석 네트워크를 확인할 때는 명확한 흐름을 파악할 수 있도록 네트워크에 throttling을 적용합니다. 물론 기본으로 제공되는 ‘Fast 3G’ 나 ‘Slow 3G’ 설정을 적용 할 수 있으나 이번에는 기본 설…
문제 설명 정수 배열 nums가 주어졌을 때, 이 되도록 모든 삼중 항 을 반환합니다. 솔루션 집합에 중복된 삼중항이 포함되어서는 안됩니다. 예시 1 예시 2 예시 3 제약 조건: 문제 접근 입력받은 배열을 오름차순으로 정렬 후 세 개의 포인터를 이용히여 합이 0인지 비교해 나갑니다. 입력받은 배열을 복사하고 오름차순으로 정렬한다. 인덱스 i 부터 n…
모듈이 어떠한 문제를 해결하는가?! javascript로 코드를 작성할때 변수를 선언하거나 변수를 가지고 어떠한 코드를 작성하거나 변수에 값을 할당하거나 즉, 변수 관리를 해본적이 있으실겁니다. 잘 생각해보면 코드를 작성하는 과정 대부분은 변수를 변경하는 것입니다. 그러므로 이러한 변수를 어떻게 구성하는지가 코드를 작성하는 능력이나 코드 유지 관리 능력에…
문제 설명 정수 배열의 숫자가 주어지면, 엄격하게 증가하는 가장 긴 길이의 서브 시퀀스. 예시 1 예시 2 예시 3 제약 조건: 문제 접근 동적 계획법을 이용하여 접근합니다. 배열의 두번째 자료부터 시작하여 이전 요소와 비교합니다. nums 배열의 길이만큰 빈 배열을 생성아여 모든 요소를 1로 채웁니다. 기준을 두번째 자료부터 시작하여 이전 요소까지 …
문제 설명 감소하지 않는 순서로 정렬된 정수 배열이 주어졌을 때, 주어진 목표 값의 시작과 끝 위치를 구합니다. 배열에서 목표값을 찾을 수 없으면 -1, -1을 반환합니다. 런타임 복잡도가 O(log n)인 알고리즘을 작성해야 합니다. 예시 1 예시 2 예시 3 제약 조건: is a non-decreasing array. 문제 접근 투 포인터를 사…
퀵 정렬이란 퀵 정렬은 분할 및 정복 기반 알고리즘이며, 요소를 피벗으로 선택하고 정렬된 배열의 올바른 위치에 피벗을 배치하여 선택된 피벗을 중심으로 주어진 배열을 분할합니다. 퀵 정렬하는 과정을 간단히 정리하면 다음과 같습니다. 분할: 입력 배열을 피벗을 기준을 비균등하게 2개의 부분 배열(피벗보다 작은 요소들, 피벗보다 큰 요소들)로 분할합니다. 정복…