bright jazz music

안녕 //바보 안녕

자바스크립트는 싱글 스레드에서 작동한다, 즉, 기본적으로 자바스크립트는 한 번에 하나의 작업만 동기 방식으로만 처리할 수 있다. 동기(synchronous)에 대해 간단히 설명하자면, 직렬 방식으로 작업을 처리하는 것을 의미하며, 이 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 비로소 다른 작업을 처리할 수 있다. 그 동안 다른 모든 작업은 대기한다. 이러한 방식은 개발자에게 매우 직관적으로 다가오지만 한 번에 다양한 많은 작업을 처리할 수 없다. 반대로 비동기(asyncrhous)란 직렬 방식이 아니라 병렬 방식으로 작업을 처리하는 것을 의미한다. 요청을 시작한 후 이 응답이 오든 말든 상관없이 다음 작업이 이루어지며 따라서 한 번에 여러 작업이 실행될 수 있다. 자바스크립트는 분명히 싱글 스레..

리액트의 클래스형 컴포넌트에 대한 이해가 JS의 클래스, 프로토타입, this에 달려있다면, 함수형 컴포넌트에 대한 이해는 클로저에 달려 잇다. 함수형 컴포넌트의 구조와 작동 방식, 훅의 원리, 의존성 배열 등 함수형 컴포넌트의 대부분의 기술이 모두 클로저에 의존하고 있다. 1. 클로저의 정의 MDN에서는 '클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합"이라고 돼 있다. function add() { const a = 10 function innerAdd() { const b = 20 console.log(a + b) } innerAdd() // 30 } 위 예제코드에서는 add 함수 내부에 innerAdd가 있다. innerAdd 함수는 내부에서 b 변수를 선언한 뒤 자신..

자바스크립트의 클래스 1. 클래스 예시 //Car class 선언 class Car { // constructor는 생성자. 최초에 받을 인수를 결정 가능하며, 객체 초기화 용도로 사용된다. constructor(name) { this.name = name } // 메서드 honk() { console.log(`${this.name}이 경적을 울립니다.`) } // 정적 메서드 static hello() { console.log('저는 자동차입니다.') } // setter set setAge(value) { this.carAge = value } // getter get getAge() { return this.age } } // Car 클래스를 이용해 car 객체 만들기 const myCar = ne..

1. 함수를 정의하는 방법 JS에서 함수를 정의하는 방법은 크게 네 가지이다. - 함수 선언문 - 함수 표현식 - function 생성자 - 화살표 함수 1.1. 함수 선언문 JS에서 함수를 선언할 때 가장 일반적으로 사용하는 방식 function add(a, b) { //이름이 있다 return a + b } 함수 선언문은 표현식이 아닌 일반 문(statement)로 분류된다. 표현식이란 무언가 값을 산출하는 구문을 의미한다. 즉, 함수 선언으로는 어떠한 값도 표현되지 않았으므로 표현식이 아닌 문으로 분류된다. 그러나 JS엔진이 코드의 문맥에 따라 동일한 함수를 문이 아닌 표현식으로 해석하는 경우가 있다. const sum = function sum(a, b) { //함수에 이름이 있다 return a..

리액트에서의 의존성 배열이 작동하는 방식. 왜 의존성배열에 특정한 변수들을 채워야 하는가? 리엑트 컴포넌트의 렌더링이 일어나는 이유증 하나는 props의 동등비교에 따른 결과이다. props의 동등비교는 객체의 얕은 비교를 기반으로 이루어진다. 이 얕은 비교가 리액트에서 어떻게 작동하는지 이해하지 못하면 렌더링 최적화에 어려움을 겪을 수 있다. 리액트의 가상 DOM과 실제 DOM의 비교, 리액트 컴포넌트가 렌더링할지를 판단하는 방법, 변수하 함수의 메모이제이션 등 모든 작업은 자바스크립트의 동등비교를 기반으로 한다. 1. 자바스크립트의 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 이 데이터 타입은 원시 타입과 객체 타입으로 나눌 수 있다. 1.1.원시타입(primitive type)..