해당 글은 SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code 영상을 보고 정리한 글 입니다. 안일한 코드 추가의 함정 유지보수할 때 안일한 코드 추가의 함정에 대해 알아보자 상황 기능 추가 요청이 들어왔다 추가 요구사항은 다음과 같다 보험에 대한 질문을 입력하는 페이지가 있는데...

크롬 개발자 도구의 lighthouse를 실행시켜 보면 아래와 같이 Serve static assets with an efficient cache policy라는 항목을 만날 수 있다 이 의미는 정적 파일들에 대해 캐시처리가 안되어 있을 경우 나타나는 것인데 이를 해결하기 위해 Cache-Control이라는 것을 사용해야 한다 Cach...

웹 폰트의 문제점 웹 폰트를 사용할 경우 두 가지의 문제점이 있다 FOUT(Flash of Unstyled Text) 폰트가 다운로드 되기 전에는 기본 폰트로 보인다 폰트가 다운로드가 완료 되어야 폰트가 적용 된다 IE, Edge FOIT(Flash of Invisible Text) ...

타입스크립트는 런타임에서 타입체크가 불가능 하다 interface Square { width: number; } interface Rectangle extends Square { height: number; } type Shape = Square | Rectangle; function calculate(shape: Shape) { i...

이미지 사이즈 최적화는 너무 당연한 얘기지만 간단히 말하면 이미지의 크기를 줄이고 이미지 용량을 낮추는 작업이라고 할 수 있다. 이미지 포맷 PNG : 무손실 이미지 압축으로써 이미지 용량이 상대적으로 크다 JPG : 압축을 하기 때문에 PNG에 비해서 용량이 작다. 하지만 약간의 화질 저하가 있을 수 있다 (이미지 최적화를 위해 P...

Intersection Observer를 사용한 이미지 Lazy 로딩은 해당 이미지가 뷰포트에 보여졌을 때 로딩을 하는 방법이다. 예를 들어 어떤 홈페이지의 메인 컨텐츠로 보여야할 동영상이 하나 있고, 그 아래쪽에는 여러 이미지들이 있는 페이지라고 가정해보자 메인 컨텐츠가 동영상 이기 때문에 사용자가 가장 먼저 봐야 할 컨텐츠는 동영상이어...

슬라이딩 윈도우는 배열이나 문자열에서 데이터의 연속성 구조를 찾을 때 유용하다 문제 정수로된 배열과 n이 주어졌을 때 배열에서 n개의 연속된 요소들 중 최대 합을 구해라 예시) maxSum([1, 2, 5, 2, 8, 1, 5], 2); // 10 maxSum([], 4); // null 풀이 const maxSum = (arr,...

다중 포인터 패턴의 핵심은 배열이 있고, 인덱스에 맞게 2개이상의 포인터를 지정하고 조건에 따라 그 포인터의 위치를 하나씩 옮겨가며 문제를 해결하는 방법이다 문제 1 정수로 구성되어 있고 정렬된 배열이 주어질 때 두 수의 합이 0인 첫 번째 쌍의 정수를 구해야 한다. 예시) sumZero([-3, -2, -1, 0, 1, 2, 3]) // ...

빈도수 세기 패턴은 여러개의 데이터와 입력값이 있고 이 데이터들이 비슷한 값을 갖거나 anagram인지 확인할 때, 서로 비슷한 값을 가졌는지 확인할 때 등등 데이터와 빈도를 비교할 때 사용하면 좋은 패턴이다. 이 패턴을 사용하면 O(n)의 시간 복잡도를 가질 수 있다. 문제 2개의 배열이 있고 두 번째 배열에는 첫 번째 배열의 각 요소에 제...

preloading이란 말 그대로 미리 로딩을 해놓는 것이다. 컴포넌트와 이미지에 대해 preloading을 할 수 있는데 하나씩 알아보도록 하겠다. 컴포넌트 preloading 가령, 아래와 같이 최적화를 위해 어떤 컴포넌트를 lazy 로딩 처리 했다고 가정해보자 import { useState, Suspense, lazy } from '...