Don’t worry about failures

push와 splice의 실행 시간 비교에 대해 글을 써보려한다. 처음에는 당연히 push가 더 빠른 결과값을 나올 것이라 판단하였다. 하지만 그렇지는 않았다. 먼저 테스트 한 것부터 확인해보자. TEST 1. 결과 push가 더 긴 시간이 도출됐다. 바로 다음 테스트 케이스를 봐보자 TEST2 결과 이번에는 push와 splice 단순히 위치만 변경만 한 결과값이다. 이번에는 splice가 더 큰 결과값이 나왔다. 단순하게 push는 O(1) splice O(n)이라 생각했었다. 하지만 위와 같은 결과값에 띠용했다. 왜 그럴까? array에 대한 특성을 조금 더 살펴 본 결과 동적배열에 관련된 이슈였다. array1과 같이 정해진 크기로 할당을 하고 이후에 push를 하게 되면 공간이 없어 자바스크립트..

Issue Infinity scroll을 구현하면서, 해당 row에 체크하는 기능을 추가. 리스트의 양이 적을 때는 문제 없이 빠르게 체크 영역이 표시가 되었다. But, 리스트의 양이 많아지면서 문제가 생겼다. 2000줄 정도 스크롤을 내리고 선택을 했을 떄 선택 영역의 반응이 매우 느린 이슈가 생겨버렸다. 원인 파악. 1. 클릭한 리스트에 대해 push, slice 같은 함수에서의 시간 복잡도 문제? 2. 렌더링 문제? 원인 1. console.time을 찍어 보았을 때 현 문제되는 이슈의 원인이 되지 않음. ( 물론 slice 부분에서 O(n)에 따라 선택한 리스트가 많아졌을 때 이슈가 존재할 수 있음. 이 부분은 별도록 처리 ) 원인 2. console.log를 찍어 보았을 때, 클릭한 row에 ..

useCallback과 useMemo는 최적화하는데 많은 도움을 주는 역할을 한다. 최적화를 해줄 수 있는 이유는 무엇일까? 리액트는 리렌더링 과정을 통해 화면의 상태 변화를 준다. 이러한 리렌더링의 조건은 다음과 같다. 1. state 변경 2. props 변경 위와 같은 일이 일어났을 때 리렌더링이 발생된다. 하지만, 이러한 코드를 짜다보면, 굳이 리렌더링할 필요가 없는데 리렌더링이 될 때가 왕왕 존재한다. 컴포넌트는 여러 상태와 부모, 자식과의 관계가 많이 존재하기 때문이다. 이렇기 때문에 불필요한 리렌더링은 발생하고 이로인해 불필요한 연산이 이루어지게 되어 성능에 있어 악영향을 주게되는 것이다. 이를 억제해주고자 하는 방법이 useCallback, useMemo, memo 와 같은 훅이다. 렌더링..

회사에서 진행하는 프로젝트 특성상 영상을 많이 다룬다. 이에 따라 영상을 최적화하는 작업이 많이 필요하다. 처음에는 단순히 size, bitrate 값만 조절하며 보여줄 때 괜찮아 보이는 수준으로만 맞추도록 하고, 최소한의 용량을 가지도록 시도했다. 실제로 서비스에 올려서 강력한 테스트를 하지않아. 이정도면 되겠지? 라는 생각을 가졌지만, 다른 개발자분과 이야기를 나누면서 그거 뿐만 아니라 ffmpeg를 통해서 영상을 다뤄봐라. 라는 미션 아닌 미션을 듣고 스터디를 시작했고, 이를 기반으로 글을 남겨본다. 영상 업로드 관련에서부터 시작해보자. 영상 업로드 시 여러가지 방법이 있지만, base64와 multi-part에 대해 찾아봤다. base64같은 경우 8비트 이진 데이터를 문자 코드에 영향을 받지 않..

자바스크립트는 동적타입이기 때문에 타입 검사에 어려움이 있다. 단순히 타입 체크를 할 경우 오류를 범할 수 있다. 먼저 자바스크립트 변수에는 원시변수와 참조 변수가 존재한다. 원시변수는 string, number, boolean, undefined 등이 있다. 참조 변수는 array, Date, String, Obect, function 등이 있다. 일반적으로 typeof를 통해 타입을 체크할 경우 원시변수의 경우 별 이상없이 체크가 가능할 것이다. 하지만 참조 변수의 경우 typeof를 찍어보면 모두 object로 나올 것이다. 이는 instanceof로 구분하여 사용할 수 있다. Const arr = []; Const func = function() {}; Const date = new Date();..

호이스팅이란? 선언과 할당이 런타임 때 분리가 되는 것 런타임 시 선언을 최상단으로 끌어 올림. 호이스팅으로 인한 문제 코드를 작성 시 예측하지 못한 실행을 할 수 있다. 해결 var를 사용하지 않는다. 함수 또한 호이스팅이 되기 때문에 함수 표현식을 사용한다. const a = () => {} 호이스팅 예제를 봐보자. var global = 0; fuction outer() { console.log(global) // undefined var global = 5; function inner() { var global = 10; console.log(global); // 10 } inner(); global = 1; console.log(global); // 1 } outer(); 예시는 위와 같다. 이..

이번에는 Clean code에 대한 강의를 들으면서, 복습 및 생각 정리 겸 글을 남긴다. 임시 변수 제거하기 함수 내에서 let을 선언하고, 이후에 할당하는 경우를 많이 경험해 보았을 것이다. 이러한 행위를 최대한 줄이며, 코드를 작성해보자. 즉, 최대한 const로 변수를 다뤄보자. why? 1. 변수 crud를 최대한 줄임으로써 사이드 이펙트에 대한 가능성을 줄이기 위함. 2. 임시변수를 지지고 볶고 하는 유혹을 벗어나기 위함 3. 하나의 함수에서 하나의 역할만을 하기 위함 4. 위와 같은 경우 명령형으로 가득한 로직이 발생할 가능성이 높음 5. 어디서 어떻게에 대한 디버깅이 어려워질 수 있음. ( 내부에서 지지고 볶다 보면 기능이 많아지고 이에 대한 디버깅이 어려워 질 수 있음 ) 6. 나중에 유..

개념 layout shit는 뒤늦게 로드가 되는 소스로 인하여 화면에서 봤을 때 밀리는 현상을 의미한다. 예 ) 버튼과 이미지가 있을 때 이미지 로드가 늦어 처음에는 버튼만 보이게 된다. 이미지가 로드가 되면서 버튼은 아래로 밀리게 된다. 이와 같은 현상이 layout shift 이다. 이렇게 되면 무엇이 안좋을까 일단 가장 큰 단점은 UX 부분이다. 유저가 처음에 페이지에 접속하면, 버튼이 보여서 누르려고 했는데 이미지가 갑자기 로드가 되면서 버튼이 아래로 밀리고 유저는 이미지를 클릭하게 되는 현상이 발생한다. 또 하나의 문제는 레이아웃을 다시 그려지게 된다는 것이다. 버튼이 밀리고 이미지가 그려지는 것 자체가 처음 잡혀있던 레이아웃이 아닌 변경된 라이아웃이기 떄문에 브라우저에서는 다시 그리는 작업이고..