JavaScript 16

6. AJAX 프로그래밍 기법(Asynchronous JavaScript and XML)

1. 기존의 node와 client의 동작 방식 node로 구현된 서버와 localhost로 구성된 웹브라우저가 있다. 기본적인 동작 방식을 설명하면 client 측에서 url의 변경을 통해 node로 url을 전송하게 된다. 이때 전송 방식으로는 크게 get방식과 post 방식을 알면되는데 get 방식은 url에 쿼리로 데이터를 담아 서버로 전송하는 것이고 post 방식은 데이터(payload)를 일종의 바구니(?)에 담아 서버로 전송하는 방식이다. 서버와 클라이언트의 동작 방식을 도식도로 보면 url을 변경함으로써 해당 url을 서버에서 catch하고 그 처리 결과로 웹 파일을 다시 client로 전송하게 된다. 그럼 client 측에서는 전송 받은 웹 파일을 다시 랜더링하게 된다. 이러한 방식의 단..

JavaScript 2022.01.18

5. 디스럭처링 할당(구조 분해 할당)

1. 디스럭처링 할당(destructuring assignment) 이란 1) 디스럭처링 뜻 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three);// 1 2 3 배열은 구조화되었다고 한다. 디스럭처링 할당은 다른 말로 구조 분해 할당인데 구조화된 배열을 비구조화하여 각 요소를 변수에 개별적으로 할당하는 방법을 말한다. 아래 코드를 보면 var arr =[1, 2, 3] const [one, two, three] = arr; console.log(one, two, three) // 1 2 3 구조화된 배열을 구조 분해 할당 기법을 통해 개별 요소를 각 변수에 할당하는 비..

JavaScript 2021.11.13

4-1. 동기처리와 비동기 처리

1. 배경 지식 비동기 프로그램을 정리하기전에 base가 되는 개념은 js 코드의 '평가'와 '실행'과 실행 컨텍스트 스택의 개념을 알아야함.. 2. 동기 처리의 개념 VScode에서 .html 코드를 작성하고 이를 웹브라우저에서 실행하면 웹브라우저안에 있는 js 엔진이 .html 파일 안에 스크립트 태그로 작성된 js 코드를 실행하게 된다. 자바스크립트 엔진은 js의 소스코드를 '평가'와 '실행'을 수행한다. (실행 컨텍스트는 js엔진에 의해 시행되는 것임) 모든 js엔진은 하나의 실행 컨텍스트 스택을 가진다. 따라서 한 번에 하나의 테스크만 처리하는 싱글 스레드로 동작한다. sleep 메소드는 동기식으로 처리하는 메소드인데 sleep(func, 3000); Calc(); 위 코드는 3초 동안 기다렸다..

JavaScript 2021.10.31

2. 자바스크립트: 클래스

이 글은 이옹모님의 모던 자바스크립트 DEEP DIVE 교재를 참조하여 작성하였습니다. 더보기 목차 1. 개요 프로토타입 기반의 객체지향 언어는 클래스가 필요없는 객체지향 프로그래밍 언어이다. ES5에서는 클래스 없이 아래 코드와 같이 생성자 함수와 프로토타입을 통해 객체의 상속을 구현할 수 있다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; // 생성자 함수 반환 return Person; }()); /..

JavaScript 2021.10.05

1. 프로퍼티와 어트리뷰트

이 글은 이옹모님의 모던 자바스크립트 DEEP DIVE 교재를 보고 정리한 글입니다. 더보기 목차 내부 슬롯 , 내부 메소드 프로퍼티 어트리뷰트 프로퍼티 디스크립터 객체 데이터 프로퍼티 접근자 프로퍼티티 프로퍼티 정의 1. 내부 슬롯 , 내부 메소드 내부 슬롯과 내부 메소드는 JS 엔진의 구현 알고리즘을 설명하기 위해 ECMAScipt 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo property)이다. ECMAScipt 사양에서 등장하는 이중 대괄호 [[...]]로 감싼 이름들이 내부 슬롯과 내부 메소드이다. 내부 슬롯, 내부 메소드는 [[..]] 이렇게 생긴 개념은 실제로 없다. 이는 JS 엔진에서 실제로 동작하는 무엇(?)인가를 설명하기 위해 도입된 개념이..

JavaScript 2021.10.04