본문 바로가기

WEB/JavaScript

 (25)
[JS]실행 컨텍스트(Execution Context) 실행 컨텍스트(Execution Context)란 자바스크립트 코드가 scope, hoisting, this, function, closure 등의 동작원리를 담고 실행되는 환경을 말한다. 자바스크립트 코드가 실행되는 순간 전역 컨텍스트가 Stack에 쌓이게 되고 다른 함수가 호출될때마다 쌓이게 되는 구조라고 생각하면된다. 컨텍스트의 원칙 4가지가 있다. 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생긴다. 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성된다. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다. 함수 실행이 마무리되면 해..
[JS] Promises & async & await asnyc/await 는 비동기 코드를 작성하는 새로운 방법이다. 이전에는 비동기코드를 작성하기 위해 callback이나 promise를 사용해야 했다. asnyc/await 는 실제로는 최상위에 위치한 promise에 대해서 사용하게 된다. Asnyc/await는 plain callback 이나 node callback과 함께 사용할 수 없다. async/await는 promise처럼 non-blocking 이다. async/await는 비동기 코드의 겉모습과 동작을 좀 더 동기 코드와 유사하게 만들어준다. 이것이 async/await의 가장 큰 장점이다. 문법 getJSON함수를 예로 들어보자. 이 함수는 promise를 반환하고, JSON 오브젝트로 resolve된다. 우리는 간단하게 이 함수를 호..
[JS] 리덕스(redux)가 무엇인가? 리덕스란? 리덕스는 프론트엔드 상태관리 라이브러리이다. 상태관리는 상태를 영어로 직역하면 state이다 즉, 리액트에서 사용하는 state를 관리하는 라이브러리이다. 하지만 꼭 리액트에만 치우쳐져 있지않고 순수한 자바스크립트에서도 사용할 수 있다는 점은 유의하자. 탄생계기 웹에 담는 데이터들이 방대해지고 관리해야할 상태(state)들이 방대해지면서 복잡하고 관리가 어려워 관리할 라이브러리가 자연스럽게 생겨났다. 기존에 컴포넌트 A 컴포넌트 D에 접근하려면 A -> B -> C -> D 접근해야했다. 하지만 리덕스를 사용하면 A -> Store -> D 로 접근할 수 있게 되어 좀 더 효율적이게 변하였다 즉, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 ..
[AJAX] AJAX가 무엇인가 & 사용방법 AJAX(Asynchronous Javascript And XML) AJAX는 자바스크립트 라이브러리 중 하나이며 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML, Json 데이터들을 주고받는 기술이다. 다시말해 비동기 방식으로 새로고침없이 서버와 클라이언트가 통신할 수 있도록 도와주는 라이브러리다. AJAX 사용 방법 jQuery Ajax를 사용한다. Axios 라이브러리를 사용한다. 자바스크립트 기본 함수인 fetch()를 사용한다. 최근에는 jQuery를 사용하지않고 Axios나 fetch()를 사용한다.따라서 React에서 사용하려는 나에게는 호환성도 관련문서가 많은 Axios를 사용하는 것이 ..
[JS ES6+] spread 연산자 spread 연산자라고하는 ES6 문법이다. array나 object 자료형에 사용할 수 있으며 의미는 중괄호나 대괄호를 벗겨주세요~ 라는 뜻이다. 다시말해 …[1,2,3] 이런식으로 쓰면 그 자리에 1,2,3 이 남는다. 괄호 벗기기용 연산자이다. 그런데 이걸 이용하는 두번째 용도도 있는데 array나 object 자료형을 shallow/deep copy할 때 많이 사용한다. React state를 수정할 때 많이 쓰인다. deep copy를 해야지만 원본 상태에 영향을 전혀 미치지않기 때문이다. let data1 = [1,2,3]; let data2 = ...data1; // 1,2,3 let data3 = [...data1]; // [1,2,3] data1에 있던 자료들을 괄호 벗긴 다음에 다시 a..
[JS ES6+] destructuring(구조 분해 할당) array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶을때 사용하는 문법이다. [‘Kim’, 20] 이라는 array Kim이랑 20이라는 값을 각각 변수에 저장하고 싶으면 어떻게 하는가? let array = ['Kim', 20]; let name = array[0]; // 'Kim' let age = array[1]; // 20 이런 반복적인 할당 방법이다. 물론 문제는 없다. 이런 반복적인 작업을 개선시켜준 문법이 구조 분해 할당이다. let [name, age] = ['Kim', 20] console.log(name); // 'Kim' console.log(age); // '20' 각각 name = ‘Kim’, age = 20 이라는 변수가 생성된다. 왼쪽 오른쪽 형식을 똑같이 맞춰주시면 자동으..
[JS ES6+] 화살표 함수 (=>) 사용법 화살표 함수 바로 코드부터 보자. let func = (arg1, arg2, ...argN) => expression 이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다. 아래 함수의 축약 버전이라고 할 수 있다. let func = function(arg1, arg2, ...argN) { return expression; }; 좀더 예를 들어보면 let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3..
[JS] this란 무엇일까 1. 단독으로 this를 호출하였을때 let x = this; console.log(x); // Window 전역 실행 문맥(global execution context) 에서는 묻지도 따지지도 않고 전역 객체를 반환한다. 즉, Window 객체를 반환한다. 2. 함수에서 this를 호출하였을때 함수 안에서 this는 함수의 주인에게 바인딩된다. 함수의 주인은? window객체이다! function myFunction() { return this; } console.log(myFunction()); //Window var num = 0; function addNum() { this.num = 100; num++; console.log(num); // 101 console.log(window.num); /..

티스토리툴바