Front-end/모던자바스크립트

1. Ajax(Asynchronous JavaScript and XML) 란? 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. 브라우저가 제공하는 web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 전통적인 방식의 단점 Ajax 등장 이전의 웹페이지는 여러 단점들이 있었다. 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로인해 화..

1. 동기와 비동기 1.1 동기(Synchronous)란? 하나의 작업이 실행되고 완료될 때까지 다음 작업이 실행되지 않고 대기하는 것을 말한다. 즉, 한번에 하나의 작업만 실행하는 것이다. 동기 처리는 순서대로 처리하기 때문에 실행 순서가 보장된다는 장점이 있지만, 앞선 작업이 종료될 때 까지 이후 작업들이 블로킹 되는 단점이 있다. console.log(1); console.log(2); console.log(3); // 1 // 2 // 3 1.2 비동기(Asynchronous)란? 하나의 작업 완료와 상관없이 다음 작업이 실행될 수 있는 것을 말한다. 즉, 한번에 여러가지 작업을 실행하는 것이다. console.log(1); setTimeout(() => console.log(2),1000); c..

1. 생성자 함수와 클래스 생성자 함수와 클래스는 모두 프로토타입 기반의 인스턴스를 생성하지만 똑같이 동작하지는 않는다. 클래스는 생성자 함수 보다 엄격하고 새로운 기능도 제공한다. 생성자 함수와 클래스의 차이점 생성자 함수 클래스 new 연산자 없이 호출하면 일반 함수로서 호출 됨 new 연산자 없이 호출하면 에러가 발생 함 extends와 super 키워드를 지원하지 않음 상속을 지원하는 extends와 super 키워드를 지원 함 함수 호이스팅, 변수 호이스팅 호이스팅이 발생하지 않는 것처럼 동작 암묵적으로 strict mode 지정 안됨 클래스 내 모든 코드에 암묵적으로 strict mode가 지정 됨 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[..

📍 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. 그러니까 자바스크립트를 이루고 있는 거의 모든것이 객체다. 처음에 말했듯 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. 원시 값을 제외하고 나머지 값은 모두 객체다. 객체 지향 프로그래밍은 객체의 상태를 나타내는 데이터(프로퍼티)와 상태 데이터를 조작할 수 있는 동작(메서드)을 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 1. 상속과 프로토타입 프로토타입이란 객체의 원형을 뜻한다. 즉, 모든 객체는 프로토타입이라는 객체를 가지고 각각의 프로토타입으로 부터 프로퍼티와 메서드를 상속받는다. 상속은 객체지향 프로그래밍의 핵심 개념으로 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다..

📍 객체 생성 방식에는 어떤 것들이 있을까? 1. 객체 리터럴 2. Object 생성자 함수 3. 생성자 함수 4. object.create 메서드 5. 클래스 이 중 생성자 함수에 대해 알아보려고 한다. 📌 들어가기 전 간단하게 기억하고 있어야 할 용어 프로퍼티 : 객체의 상태를 나타내는 값 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작 / 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기위해 메서드(method)라고 부름 인스턴스 : 생성자 함수에 의해 생성된 객체 1. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. 자바스크립트는 Obj..

1. this 란? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 자바스크립트 엔진에 의해 암묵적으로 생성되며 코드 어디서든 참조할 수 있다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. strict mode(엄격 모드)는 this 바인딩에 영향을 준다. 💡 this 바인딩 바인딩이란 식별자와 값을 연결하는 과정을 말한다. 예를들어, 변수 선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩 하는 것이다. 즉, this 바인딩은 this와 this가 가리킬 객체를 연결하는 것이다. 2. 함수 호출 방식 2.1 일반 함수 호출 function fo..