본문 바로가기

📚/ㄴ JavaScript

(13)

[JavaScript] 프로토타입(prototype) 이란 클래스(class)는 객체지향언어에서 빠질 수 없는 개념이다. 자바스크립트도 객체지향언어이다. 하지만 자바스크립트에는 클래스가 없다. 대신 프로토타입이라는 것이 존재한다. 이것이 자바스크립트가 '프로토타입 기반 언어'라고 불리는 이유이다. 🔗 프로토타입(prototype) 프로토타입으로 클래스 구현이 가능하다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 기존의 코드를 재사용함으로써 불필요한 중복을 제거한다. 생성자를 이용하여 클래스처럼 사용할 수는 있지만 대부분의 경우 같은 호출을 반복한다던가의 불필요한 행동이 반복되어 효율적인 코드가 되지 못한다. 그래서 프로토타입이라는 빈 객체에 미리 값들을 담아두고 새로 생성한 객체는 그 프로토타입의 값을 가져오는 방식을 갖춰서 클래스의 활용처럼 재사용을 ..

[JavaScript] Axios 사용하여 웹서버와 통신하기 🔽 AJAX, HTTP에 대해서는 아래 포스트를 참고해주세요 🔽 [JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await 📌 동기(Synchronous) 프로그래밍 vs 비동기(Asynchronous) 프로그래밍 동기 프로그래밍은 코드가 반드시 작성된 순서대로 실행되는 방식이다. 비동기 프로그래밍은 코드의 처리가 완료될 때까 devjindev.tistory.com [HTTP] API란? REST(RESTful) API란? 🔗 API(Application Programing Interface)란? 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 의미한다. 🔗 REST(RESTful) A..

[JavaScript] AJAX / XMLHttpRequest, axios, fecth 🔗 AJAX란? 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다. XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. [JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await 📌 동기(Synchronous) 프로그래밍 vs 비동기(Asynchronous) 프로그래밍 동기 프로그래밍은 코드가 반드시 작성된 순서대로 실행되는 방식이다. 비동기 프로그래밍은 코드의 처리가 완료될 때까 devjindev.tistory.com 🔗 XMLHttpRequest AJAX는 다양한 라이브러리를 가지고 있는데, 이 라이브러리들은 모두 XMLHttpReques..

[JavaScript] this란? / call, apply, bind 차이점 🔗 this란? this는 함수 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다. (예외적으로, bind 함수는 호출과 무관에게 묶어서 고정시킬 수 있다.) 호출한 객체 === this 🔗 함수 호출 방식 1. 함수(일반함수, 전역함수, 외부함수, 내부함수(일반 내부함수, 메소드의 내부함수, 콜백함수 등)) 호출 this는 전역객체(window)를 가리킨다. 2. 메소드 호출 this는 해당 메소드의 객체를 가리킨다. 3. 생성자 함수 호출 this는 생성자로 인해 생성된 인스턴스를 가리킨다. 4. call, apply, bind 호출 this가 함수 호출식에 따라 객체를 가리킨다면 call, apply, bind는 함수가 직접 실행문맥을 결정한다. call은 함수를 호출해 실행한다. 함수..

[JavaScript] 클로저(Closure)란? 🔗 클로저(Closure)란? 일반적인 함수의 경우 함수 호출에 의해 함수 내부의 실행구문을 모두 실행하게 되면 함수 내부에서 만든 지역 변수가 자동으로 사라지지만, 어떤 경우에는 사라지지 않고 남는 경우가 있는데 이러한 현상을 클로저라고 한다. 클로저는 자바 스크립트에서 중첩 함수와 비동기 방식을 사용하여 가능한데, 호출된 함수 내에서 외부로 이동하는 변수가 있으면 클로저 함수가 동작한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 // 함수 선언 function createCount(){ var count = 0; // 변수 선언 // 3 ★변수가 사라지지 않고 남음 🧟‍♀️★ // 중첩 함수 // 4 다시 살아남 function addCount(){ count++; // 처리 return..

[JavaScript] 호이스팅(Hoisting) 이란? 🔗 호이스팅(Hoisting)이란? 변수 또는 함수 선언 부분이 최상단으로 끌어 올려지는 현상을 의미한다. 변수가 있으면 위치에 상관없이 최상단에서 undefined된 형태로 존재한다. ⭐ 주의 var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다. (let/const 변수 선언, 함수 표현식에서는 발생하지 않는다.) 12345console.log(a); // undefined 출력console.log(b); // error var a = 'hello';const b = 'hello2';cs 12345678910func1(); // hello 출력func2(); // error function func1() { // 함수선언문 console.log("hello");} var func2 = functi..

[JavaScript] 실행 컨텍스트(Execution Context)란? 🔗 실행 컨텍스트(Execution Context) 란? 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경이다. 🔗 실행 컨텍스트의 종류 📍 전역 컨텍스트 (Global Context) 전역 영역에 존재하는 코드의 실행 컨텍스트 실행 컨텍스트가 생성이 되면, 스택에 쌓인다. 어플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때) 소멸된다. window가 this로 할당된다. 📍 함수 컨텍스트 (Function Context) 함수 내에 존재하는 코드의 실행 컨텍스트 선언된 함수가 호출이 될 때 실행 컨텍스트가 생성이 되고, 스택에 쌓인다. 함수의 모든 동작(실행)이 완료되면, 함수 컨텍스트는 소멸된다. (클로저 사용하면 소멸X) 🔗 실행 컨텍스트의 객체 실행 컨텍스트는 실행 가..

[JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await 📌 동기(Synchronous) 프로그래밍 vs 비동기(Asynchronous) 프로그래밍 동기 프로그래밍은 코드가 반드시 작성된 순서대로 실행되는 방식이다. 비동기 프로그래밍은 코드의 처리가 완료될 때까지 기다리지 않고 다른 코드를 처리하는 방식이다. 🔗 비동기 처리 사례 > AJAX 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다. XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. 🔗 비동기 처리 방법 ① > 콜백(Callback) 함수 함수 실행 결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출하여 넘겨주는 방식이다. 🔗 콜백 함수 사용하는 이유 특정 로직이 끝났을 때 원하는 동작..

이전 1 2 다음

티스토리툴바