1. setState()에 async / await이 동작할까 ?? ✅ 결론은 setState()에서는 async / await을 사용해도 동작하지 않습니다. JS에서는 일반적으로 코드를 동기방식으로 처리합니다. (코드 순서대로 위에서 아래로 차례대로 실행) 예외적으로 callback 함수, ajax, setTimeout .. 등과 같은 함수들은 순차적으로 실행되지 않고 완료되면 실행됩니다. 이를 비동기적으로 처리한다고 정의합니다. (완료되는 순서대로 일을 처리하여 실행 순서가 확실하지 않음) 비동기 함수를 동기방식으로 처리하려면 async / await 키워드를 사용합니다. await 문은 Promise가 fulfilled(이행) 되거나 rejected(거부) 될 때까지 async함수의 실행을 일시 정..
1. 호이스팅 이란? 1-1. 호이스팅 정의 호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수의 유효 범위 최상단에 선언하는 것을 의미합니다. 이는 함수 정의보다 호출을 먼저 하더라도 문제없이 작동되는 유용한 특성입니다. 실제로 코드가 끌어올려지는 것은 아니고, JS parser 내부적으로 끌어올려 처리하는 것입니다. (=> 따라서 실제 메모리에서 변화는 없음) 유효한 블록 스코프내의 할당이 아닌 선언만으로도 최상위로 이끌어 올린 후 필요할 때마다 사용하는 것을 말합니다. 1-2. 호이스팅 사용 주의사항 코드의 가독성과 유지 보수를 위해 호이스팅이 일어나지 않도록 호이스팅이 일어나지 않도록 합니다. 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에 선언하면, 호이스팅으로 인한..
1. Lodash 란? 1-1. 정의 Lodash란 자바스크립트의 라이브러리로 개발을 할 때 일반적으로 많이 사용하는 기능들을 모아 제공해줍니다. 객체, 배열 등의 데이터 구조에서 데이터를 쉽게 찾거나 변환이 가능하여 자바스크립트 유틸 라이브러리로 가장 많이 쓰이고 있습니다. _ 기호를 사용하여 명칭이 Lodash입니다. 1-2. 사용 이유 Lodash는 외부 라이브러리를 사용하기 때문에 무겁고 ES6에 비해 속도가 느립니다. (단점) 그렇다면 왜 사용하는 것일까요? 그 이유는 크게 아래와 같습니다. 메서드에서 제공하는 다양한 기능으로 생산성이 높습니다. 다양한 데이터 타입을 지원하므로 처리가 용이합니다. 브라우저에서 지원하지 않는 성능이 보장되어있는 다양한 메서드가 있습니다. 1-3. ES6와 비교 E..
* async / await ? Promise의 불편한 점을 개선하기 위해 ES7에서 추가된 키워드로, 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있습니다. 일반 비동기 처리처럼 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 수 있을 때까지 기다립니다. 따라서 일반적인 동기 코드처리와 똑같은 흐름으로 코드를 작성 할 수 있습니다. * promise.all 여러 개의 프로미스를 동시에 실행시키고 모든 프로미스가 처리될 때까지 기다리는 경우 유용하게 사용할 수 있습니다. 일반적으로 다음 코드를 계속 실행하기 전에 서로 연관된 비동기 작업 여러 개가 모두 이행되어야 하는 경우에 사용합니다. 즉 프로미스들을 하나로 묶어 하나의 프로미스처럼 관리 할 수 있게 해 줍니다. 단 내부에서 프로미스들..
1. Redux - devtools ? * 설치 링크 Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com 크롬 확장 프로그램 중 하나로 리덕스의 상태 변경 디버깅을 위한 툴입니다. 상태 관리를 Redux로 하셨던 분들은 Redex-devtools 가 익숙하실 겁니다. 그렇다면 zustand에서 해당 툴을 포스팅하는 이유는 바로 zustand는 미들웨어를 통해 Redux-devtools를 사용할 수 있기 때문입니다! 2. 사용법 먼저 위 설치 링크에서 Redux DevTools 확장 프로그램을 설치합니다. store로 사용하는 파일에 'zustand/middleware'에서 devtools를 임포..
- Total
- Today
- Yesterday
- 1급 함수
- vue
- next.js에 .gitignore가 적용되지 않을 때
- 자바스크립트 동작원리
- 매겨변수와 인자
- react
- React로 쓰로틀링 디바운싱 구현
- javascript
- 1급 객체
- redux
- 시맨틱 웹
- 가상스크롤
- redirects
- next.js 환경변수
- 타입스크립트
- zustand
- array
- 자바스크립트 비동기 동작원리
- 목표 일기
- debouncing
- 호이스팅
- 함수형 컴포넌트
- useRef
- Virtual Scroll
- Next.js
- 1급 시민
- programmers
- 렌더링 속도 개선
- rewrites
- typescript
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |