1.5~ 1.7 까지의 정리
✨1-5 이벤트 루프와 비동기 통신의 이해
자바스크립트는 싱글스레드 방식.
즉, 동기방식으로만 처리할 수 있다.
그러나 싱글 스레드 기반의 자바스크립트에서도 많은 양의 비동기 작업이 이루어짐.
이게 어떻게 가능한지 알기 위한 파트.
🔻싱글 스레드 자바스크립트
스레드란?
스레드는 프로세스 내에서 실행되는 작은 단위의 작업. 하나의 프로세스는 여러 스레드를 포함할 수 있으며, 각 스레드는 독립적으로 작업을 수행할 수 있음.
스레드끼리 메모리를 공유할 수 있어 여러 가지 작업을 동시에 수행할 수 있다.
왜 싱글 스레드로 설계되었을까?
멀티 스레드는 내부적으로 처리가 복잡하다는 단점 있음.
최초의 자바스클핍트는 브라우저에서 HTML을 그리는 데 한정적인 도움을 주는 보조적 역할.
설계 당시 현재처럼 웹페이지에서 벌어지는 다양한 일을 처리해야할 것으로 생각하지 못했을 것.
🔻이벤트 루프란?
이벤트루프란?
자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기위해 만들어진 장치.
호출 스택이란?
자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택.
이벤트 루프는 단순히 이벤트 루프만의 단일 스레드 내부에서 이 호출 스택 내부에 수행해야 할 작업이 있는지 확인하고, 수행해야 할 코드가 있다면 자바스크립트 엔진을 이용해 실행한다.
태스크 큐란?
실행해야 할 테스크의 집합을 의미
실행해야 할 테스크라는 것은 비동기 함수의 콜백 함수나 이벤트 핸들러 등을 의미함.
🔻태스크 큐와 마이크로 태스크 큐
마이크로 테스크 큐란?
이벤트 루프는 하나의 마이크로 태스크 큐를 갖고 있는데, 기존의 테스크 큐와는 다른 태스크를 처리한다. 여기에 들어가는 마이크로 태스크에는 대표적으로 Promise가 있다.
마이크로 태스크 큐는 기존 태스크 큐보다 우선권을 갖는다. 즉 setInterval은 Promise보다 늦게 실행됨. 마이크로 테스크 큐가 빌 때 까지는 기존 태스트 큐의 실행은 뒤로 미뤄짐.
렌더링은 언제 실행될까?
각 마이크로 태스크 큐 작업이 끝날 때 마다 한 번씩 렌더링 기회를 얻게 됨.
결론적으로
동기 코드는 물론이고 마이크로 테스크 또한 렌더링에 영양을 미칠 수 있기 때문에 이를 어떤 식으로 분리해서 사용자에게 좋은 애플리케이션 경험을 제공해 줄지 고민해 보아야 한다.
✨1-6 리엑트에서 자주 사용하는 자바스크립트 문법
일반적인 js 혹은 Node.js 기반의 코드와 비교했을 때 리엑트의 코드가 상대적으로 독특한 모습을 띄고있다. 리엑트의 독특한 특징을 이해하려면 리엑트에서 자주 사용되는 자바스크립트 문법을 이해해야 한다.
🔻구조 분해 할당
구조분해할당(Destructuring)
배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당하는 것을 의미.
주로 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용.
🔻전개 구문
전개구문(Spread Syntax)이란?
배열이나 객체, 문자열과 같이 순회할 수 있는 값에 대해 전개해 간결하게 사용할 수 있는 구문.
🔻객체 초기자
객체 초기자란?
객체 초기자는 ECMAScript 2015에 도입된 기능으로, 객체를 선언할 때 객체에 넣고자 하는 키와 값을 가지고 있는 변수가 이미 존재한다면 해당 값을 간결하게 넣어줄 수 있는 방식
🔻Array 프로토타입의 메서드
map
인수로 전달받은 배열과 똑같은 길이의 새로운 배열을 반환하는 메서드.
filter
콜백 함수를 인수로 받는데, 이 콜백 함수에서 truthy 조건을 만족하는 경우에만 해당 원소를 반환하는 메서드.
reduce
콜백 함수와 함께 초깃값을 추가로 인수를 받는데, 이 초깃값에 따라 배열이나 객체, 또는 그 외의 다른 무언가를 반환할 수 있는 메서드.
forEach
콜백함수를 받아 배열을 순회하면서 단순히 그 콜백함수를 실행시키기만 하는 메서드.
🔻삼항 조건 연산자
삼항 조건 연산자란?
자바스크립트에서 유일하게 3개의 피연산자를 취할 수 있는 문법.
특히 조건부로 렌더링하기 위해서 가장 널리 쓰이는 방법.
✨1-7 선택이 아닌 필수, 타입스크립트
🔻타입스크립트란?
타입스크립트?
기존 자바스크립트 문법에 타입을 가미한 것.
자바스크립트는 동적 타입의 언어이기 떄문에 규모가 커질수록 발목을 잡는 경우도 있다. 이러한 것을 해결하기 위해 타입을 정적으로 선언해놓을 수 있게 하는 것이 타입스크립트이다.
🔻리액트 코드를 효과적으로 작성하기 위한 타입스크립트 활용법
🔻타입스크립트 전환 가이드
