본문 바로가기

Web

 (104)
클로저(CLOSURE) Lexical environment 선언 당시의 환경에 대한 정보를 담는 객체(구성 환경) '이 함수는 이러이러한 것들로 구성되어 있다' 같은 정보 클로저(CLOSURE) 함수 내부에서 생성한 데이터와 그 유효범위로 인해 발생하는 특수한 현상 / 상태 외부에 정보를 제공할 수 있는 유일한 수단은 Return 함수내부에서 다시 함수를 return 한다고 해도 최초 선언시에 생성된 스코프와 환경정보는 변하지 않고 최초 선언시의 정보를 유지한다. 스코프(유효범위)는 정의될 때 결정된다. 그렇기 때문에 정의됐을 때 당시에 들고있던 정보를 그대로 유지할 수 있는 것이다. 클로저의 이점 접근 권한 제어 지역변수 보호 데이터 보존 및 활용 function a() { var x = 1; return function b..
CALL, APPLY, BIND 메소드 call, apply, bind 메소드 func.call(thisArg[, arg1[, arg2[, ...]]]) func.apply(thisArg, [argsArray]) func.bind(tihsArg[, arg1[, arg2[, ...]]]) 첫번째 인자는 this가 될 대상을 지정 두번째 인자부터는 매개변수가 된다. call 과 apply의 차이는 두번째부터 쭉 나열해서 매개변수를 받느냐 아니면 두번째 인자 하나에 배열로 합쳐서 하나의 인자로 받느냐의 차이일 뿐이다. call과 apply는 즉시 호출하는 명령이다. 반면 bind는 새로운 함수를 생성 할 뿐 호출을 하지는 않는다. function a(x, y, z) { console.log(this, x, y, z); } var b = { c: '..
THIS this 전역공간에서 : window / global함수 내부에서 : window / global ( 함수는 전역객체의 메소드 )메소드 호출시 : 메소드 호출 주체 ( 메소드명 앞 )callback에서 : 기본적으로는 함수내부에서와 동일제어권을 가진 함수가 callback의 this를 명시한 경우 그에 따른다개발자가 this를 바인딩한 채로 callback을 넘기면 그에 따른다.생성자함수에서 : 인스턴스
함수 호이스팅 끌어올린다. 변수 '선언' 함수 '선언' - 호이스팅 전 console.log( a() ); console.log( b() ); console.log( c() ); function a() { // 함수 선언문 return 'a'; } var b = function bb() { // 기명 함수표현식 return 'bb'; } var c = function() { // (익명) 함수표현식 return 'c'; } - 호이스팅 후 function a() { return 'a'; } var b; var c; console.log( a() ); console.log( b() ); console.log( c() ); b = function bb() { return 'bb'; } c = function() ..
DATA TYPES 자바스크립트의 데이터타입은 크게 두가지로 분류된다. 기본형(Primitive Type) : Number, String, Boolean, null, undefined 등 참조형(Reference Type) : Object (Array, Function, RegExp) 등 기본형은 값을 그대로 할당하고 참조형은 값이 저장된 주소값을 할당(참조)한다. - 기본형 var a; a = 10; var b = 'abc';변수명 a b ... ... 주소 @313 @314 주소 ... 313 314 ... 데이터 10 'abc' - 참조형 var obj = { a: 1, b: 'b' }; var obj2 = obj; obj2.a = 10; // 같은주소를 참조하고 있는 obj.a 의 값도 바뀌게된다 변수명 obj ob..
Redux Redux 리액트를 위한 state management 툴 global state container store : React 프로젝트에서 사용하는 모든 동적 데이터들을 담아두는 곳 action : 어떤 변화가 일어나야 할 지 나타내는 객체 reducer : action 객체를 받았을 때 데이터를 어떻게 바꿀지, 어떻게 처리할지 정의하는 객체 의존 모듈 redux react-redux npm install --save redux react-redux 앱은 많은 컴포넌트를 기반으로 지어졌는데 또한 동시에 global state를 갖고 있다 유저의 로그인 여부를 global state의 예시로 들면 global state는 모든 컴포넌트가 영향을 받는다 유저가 로그인을 했느냐, 안했느냐에 따라 앱이 어떻게 보..
Async Await - asynchronous function _getMovies = async () => { const movies = await this._callApi() this.setState({ movies } } await으로 하는 것은 _callAPi 기능이 '끝나는 것'을 기다리고(성공여부가 아님) setState는 _callApi 작업이 완료되기 전 까지는 실행되지 않음
AJAX (promise) fetch API 사용 fetch('url') .then(response => response.json()) .then(json => console.log(json)) .catch(err => console.log(err)) fetch('url', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }) promise = asynchronous 계속 다른 작업을 스케쥴해놓을 수 있음. 다른 작업이 끝나기를 기다릴 필요 없음 fetch, p..

티스토리툴바