본문 바로가기

전체 글

(90)
Chrome 브라우저에서의 transition 속도 저하 이슈 issue safari 웹과 모바일에서는 속도 저하 문제가 나타나지 않았다. 처음에는 react-spring 라이브러리의 고질적인 문제인 줄 알았는데 해당 라이브러리 공식 문서와 깃헙 이슈 탭에서 같은 문제가 있는 사람이 있는지 찾아보았는데 전혀 없었다.. 결국 알게 된 사실은 단순히 chrome에서만 발생하는 이슈였다. - chrome에서만 속도 저하 문제(버벅거리는 현상)가 발생 transition 시간을 줄였을 때, 해당 타겟에서 버벅거리는 현상이 생겼다. transition: '0ms ease-out' - 하단 스타일 코드 추가시 버벅거리는 현상이 생기지 않고 부드러운 애니매이션을 구현할 수 있었다. backfaceVisibility: 'hidden', perspective: 1000, * 참고자..
yarn berry 기존 프로젝트에서 사용하던 npm과 yarn1의 단점 npm 비효율적인 의존성 탐색 lock 파일이 없어서 생기는 의존성 이슈 문제 (npm도 추후에 npm5 버전 업데이트 이후로 package-lock.json을 생성하여 패키지 잠금을 지원하게 되었다.) (해당 이슈에 대해 알아보던 중 초기 기사문을 읽어볼 수 있었다.)[https://www.bloter.net/newsView/blt201604040002] 보안이슈 패키지가 늘어날수록 성능저하 발생 위 문제 해결을 위해 facebook을 중심으로 google 등 회사들이 npm의 문제를 해결하기 위해 새로운 패키지 매니저인 yarn을 발표하였다. yarn 왼쪽이 npm, 오른쪽이 yarn 방식이다. 다운받은 패키지 데이터를 cache에 저장하여 중복된..
git stash 명령어 git stash - 현재 상태 임시 저장하기 - git pull을 당겨와야하는데 commit이 안된 상태라면? / 현재 수정한 코드가 있는 상태에서 git pull을 한다면 그대로 날라가기 때문에 잠시 저장할 때 사용한다. = 워킹 디렉토리에서 수정한 파일들(Modified, Tracked 상태, Staged 상태의 파일들)을 커밋하지 않고도 따로 stash stack에 보관할 수 있는 기능 1. 변경사항 stash stack에 담기 git stash - 마지막 commit 이후의 변경사항들이 stash stack에 담긴다. +) 동시에 해당 디렉토리에 있는 변경사항들이 없어진다. - Modified && Tracked 상태, Staged 상태의 파일들이 담긴다. (untracked files, ign..
Redux Toolkit redux-toolkit (RTK) - redux 개발팀에서 2020년에 release한 라이브러리이고, 비동기통신에 필요한 thunk 미들웨어를 내장하고 있다. - redux 작업을 단순화하고, 실수를 방지하며 redux앱을 만들기 쉽게 해줌 - immer library를 내장 - redux devtools extension을 기본으로 제공 주요 기능 - configureStore - createAction - createReducer - createSlice - createAsyncThunk configureStore - cerateStore 함수를 wrapping 한 함수로 configureStore를 제공한다. - 기존에 reducer 함수를 합치는 과정을 진행하고, redux-thunk 및 re..
JavaScript 일급 객체 (first class citizen) 일급객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. (출처 : 위키) 쉽게 말해 특정 언어에서 객체를 값으로 취급하는 것을 말한다. ✅ 자바스크립트에서는 함수가 일급객체이다. 아래와 같은 조건을 만족하는 객체는 일급객체를 의미한다. 1. 변수나 상수에 저장 및 할당할 수 있어야 한다. let fruits = function(){ return "apple"; } console.log(fruits); 2. 파라미터(객체의 인자)로 전달할 수 있어야 한다. let fruits = function(){ let apple = 10; return apple; } let bo..
디바운스(Debounce)와 스로틀(Throttle) 알아보기 기술면접을 준비하면서 디바운스와, 스로틀을 알게 되었다. 아직 프로젝트에 직접 적용해보지 않았지만 미리 어떤 건지 익혀두기 위해 정리해두려 한다. 디바운스, 스로틀은? - DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트를 제어하는 방법이다. 디바운스와 스로틀을 비교해보자면, 디바운스는 아무리 많은 이벤트가 발생해도 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때, 마지막 한 번만 해당 이벤트를 발생시킨다. 스로틀은 일정한 시간이 지날 때마다 해당 이벤트를 발생시키고, 아래 링크에서 디바운스와 스로틀의 차이를 확인할 수 있다. The Difference Between Throttling, Debouncing, and Neither ... code..
자바스크립트의 원시값(Primitive Type)과 참조값(Reference Type) 자바스크립트는 원시타입과 참조타입 두가지의 자료형이 제공된다. 원시 타입 - null, undefined, string, number, boolean, symbol 참조 타입 - Array, Object, Function 원시 타입 데이터는? - 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터의 값을 보관한다. - 원시 타입 자료형은 모두 변수 선언, 초기화, 할당시 값이 저장된 메모리 영역에 직접적으로 접근한다, 즉 변수에 새 값이 할당 될 때 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경한다는 뜻이다. - 변수에 새로운 값을 할당하면 변수가 참조하는 메모리 공간의 주소가 바뀌게된다. - 값을 복사 참조 타입 데이터는? - 자바스크립트는 객체의 메모리를 직접 조작하지..
배열에서 최솟값 찾기 | JS - Math.min() let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { return Math.min(...arr); //spread연산자 사용 } //1 - func.apply(thisArg, [argsArray]) - Math.min.apply() let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { return Math.min.apply(null, arr); } //1 - arr[0]을 기준으로 for문 돌리기 let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { let min=arr[0]; for(let i=0; i