전체 글 (37) 썸네일형 리스트형 멘토링 3일차 내용정리 일반적으로 사용하는 클래스 VS 자바스크립트에서의 클래스 차이자바스크립트는 문법적 설탕이라고해서 프로토타입 기반으로 상속을 구현하게 해줍니다.프로토타입 기반으로 상속을 좀 더 쉽게 구현할 수 있게 클래스를 도입한 걸로 알고있습니다. 클래스에서 Constructor의 역할초기상태를 선언하는 구간입니다. 클래스에서 Extends, super가 뭔가요?익스텐즈는 부모클래스를 받아서 확장시키는 거고, 수퍼는 부모의 메서드를 상속받아 사용하는 것입니다. 클래스 Staticstatic으로 선언된 메서드나 필드는 인스턴스가 아닌 클래스 자체에 귀속됩니다.class A { static hello() { return 'hi'; }}A.hello(); // OKnew A().hello(); // ❌ 오류 :content.. [JS] 클래스 자바스크립트 클래스(class) JavaScript는 원래 객체지향 언어처럼 생겼지만, 클래스(class) 개념이 없었지만 ES6(2015) 이후로 클래스 문법이 추가됨 클래스란?클래스는 객체를 만들기 위한 설계도 또는 템플릿 (붕어빵 틀에 비유)예를 들어, 사람이란 개념을 객체로 표현한다고 해보면,모든 사람은 이름, 나이 같은 속성과 말하기, 걷기 같은 행동을 가질 수 있음이 공통 속성과 행동을 정의하는 것이 바로 클래스붕어빵에 비유한다면, 붕어빵 틀에 재료들을 다르게 넣어서 특성이 다른 붕어빵 여러개를 만들 수 있음기본 클래스 선언class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() .. 멘토링 2일차 내용정리 이벤트루프에 대해 설명해주세요코드가 한줄씩 실행되면서 콜스택에 쌓입니다.프로미스가 우선순위가 더 높아서 setTimeOut 보다 먼저 콜스택으로 넘어가고, 콜스택이 비워지면 setTimeOut도 콜스택으로 넘어가서 실행이 됩니다. 이벤트루프가 하는 역할은 뭔가요?백그라운드에서 시간이 오래 걸리는 작업들을 따로 빼줌으로서 비동기적으로 실행하게 하는 역할을 합니다. 프로미스, 셋타임아웃, 셋인터벌은 어떻게 동작을 하나요?셋타임아웃, 셋인터벌이 태스크큐에 먼저 들어가고그다음 콜스택이 비면 셋타임아웃, 인터벌을 넣어줍니다. 다음으로 마이크로태스크큐에 있는 프로미스를 콜스택으로 옮깁니다=> 순서 바꿔서 말한 것 같은데 멘토님도 모르신듯..?Promise.then, catch, finallyMicrotask Que.. 리액트 면접질문 & 답변 모음 1. React란 무엇인가요?리액트는 현 메타(구 Facebook)에서 만든 사용자 UI 라이브러리로,컴포넌트 기반으로 재사용 가능한 UI를 만들 수 있습니다.State 변화에 따라 효율적으로 DOM을 갱신해주는 Virtual DOM을 사용합니다. 2. Virtual DOM이란?React에서 Virtual DOM은 실제 DOM의 성능 문제를 해결하기 위해 도입된 개념입니다. Virtual DOM은 실제 DOM의 복사본이고, 상태가 변경되면 가상돔트리를 새로 만들어 이전에 생성된 가상돔과 비교한 뒤 변경된 부분만 실제 DOM에 반영합니다. 이로인해 성능이 최적화됩니다. + 왜 변경된 부분만 실제돔에 반영해야 성능이 최적화되나요?DOM 조작은 스타일 계산, 레이아웃 재계산, 페인팅 등 많은 리소스를 요구하는.. [JS] 프로토타입 1. 프로토타입이란?JavaScript에서 객체는 다른 객체를 상속받을 수 있습니다.이 상속 구조를 가능하게 하는 것이 바로 프로토타입입니다.const animal = { eats: true};const rabbit = { jumps: true};rabbit.__proto__ = animal;console.log(rabbit.eats); // true (animal로부터 상속됨)위 코드에서 rabbit은 animal을 프로토타입으로 설정했기 때문에, rabbit.eats를 조회할 수 있습니다.이처럼 객체 간에 연결되어 있는 구조를 프로토타입 체인이라고 합니다.2. __proto__와 prototype의 차이__proto__모든 객체가 내부적으로 가지고 있는 숨겨진 링크로, 자신의 부모 객체(프로토타입.. 멘토링 1일차 내용정리 일반 함수 vs 화살표 함수구분일반 함수화살표 함수this 바인딩호출하는 객체가 this가 됨한단계 위 스코프의 this가 this가 됨호이스팅함수 선언문은 호이스팅됨변수에 할당된 함수로, 호이스팅 안 됨콜백함수에서의 this호출하는애가 콜백이기 때문에 window한단계 위 스코프의 thisconst obj = { value: 100, regularCallback: function () { setTimeout(function () { console.log('일반:', this.value); // undefined (window or global) }, 100); }, arrowCallback: function () { setTimeout(() => { consol.. [JS] 이벤트루프 자바스크립트 이벤트 루프(Event Loop) 완전 정복이벤트루프는 자바스크립트의 비동기 처리 메커니즘을 이해하는 데 핵심이 되는 개념이다.1. 자바스크립트는 왜 이벤트 루프가 필요할까?자바스크립트는 싱글 스레드(single-thread) 언어즉, 한 번에 하나의 작업만 실행할 수 있다.그렇다면 다음과 같은 상황에서는 어떻게 될까?while (true) { // 무한 루프}console.log('이 코드는 절대 실행되지 않아요.');이처럼 하나의 작업이 블로킹(blocking)되면 다른 코드가 실행되지 않는 문제가 생김이를 해결하기 위해 자바스크립트는 비동기 처리를 도입했고, 그 핵심이 바로 이벤트 루프2. 이벤트 루프의 구조자바스크립트의 실행 환경(예: 브라우저, Node.js)은 다음과 같은 구조를.. [JS] 클로저 자바스크립트 클로저(Closure), 제대로 이해해보자클로저는 처음 접하면 좀 헷갈릴 수도 있지만, 개념만 제대로 잡으면 생각보다 간단한 개념이다.1. 클로저 정의내부 함수가 외부 함수의 변수에 접근할 수 있는 현상외부 함수의 렉시컬환경이 가비지 컬렉팅되지 않는 현상어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상클로저를 함수라고 표현하는 문장도 많은데, 사실 클로저는 함수라기보다는 현상에 가까움 2. 예제로 보기function outer() { const name = '길동'; function inner() { console.log(`안녕, ${name}`); } return inner;}con.. 이전 1 2 3 4 5 다음
