WANZARGEN

실행 컨텍스트 정의 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 = 실행 가능한 코드가 실행되기 위해 필요한 환경 자바스크립트 엔진은 실행 가능한 코드를 실행하기 위해 필요한 정보를 형상화하고 구분하기 위해 실행 컨텍스트를 물리적 객체의 형태로 관리한다. 실행 가능한 코드 전역 코드 : 전역 영역에 존재하는 코드 함수 코드 : 함수 내에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 Eval 함수? 문자로 표현 된 JavaScript 코드를 실행하는 함수. 인자로 받은 코드를 caller의 권한으로 수행하므로, 제 3자 코드가 eval()이 호출된 위치의 스코프를 볼 수 있으며, 비슷한 함수인 Function으로는 실현할 수 없는 공격이 가능하여 절대 쓰지 않는 것이 좋다. 실행..

프로토타입(Prototype) 뽀개버리기!! 함수도 객체다 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다. function add(x, y) { return x+y; } add.status = 'OK'; console.log(add.status) add( ) 함수를 생성할 때 함수 코드는 함수 객체의 [[Code]] 내부 프로퍼티에 자동으로 저장된다(이것은 ECMAScript 명세서를 참조한 것이다* ). add() 함수에 마치 일반 객체처럼 status 프로퍼티를 생성하고 저장한 것을 확인할 수 있다. status 프로퍼티도 일반 객체에서의 접근 방식처럼 add.status를 이용해 접근 가능하다. 이처럼 자바스크립트에서 함수는 특정 기능의 코드를 수행..

전역 수준 컴포넌트의 문제점 빌드 단계가 없음 ECMAScript 2015 이상, Typescript와 같은 최신 문법을 사용할 수 없음 CSS 빌드 & 모듈화 기능이 없음 template이 모두 고유한 id를 가지도록 개발자가 관리해야 함 그래서 생겨난게... ↓ ↓ ↓ 단일 파일 컴포넌트(Single File Component) 단일파일 컴포넌트: , 위 코드는 아래의 HTML로 생성된다. CSS Module을 적용한 버튼 Hello World hand, box, border과 같이 코드에 주어진 스타일명이 아닌, 충돌하지 않도록 생성된 다른 이름이 클래스명으로 사용된다. 슬롯 부모 컴포넌트에서 자식 컴포넌트로 전달할 정보가 HTML 태그를 포함하고 있다면, props를 사용해 전달하기 쉽지 않다. ..

뷰 최신 버전인 2.5.17 버전에서 트랜지션을 사용해보았다. 참고로 그 사용 방법은 Vue.js 공식 페이지에 기가막히게 잘 나와있다. 뷰 트랜지션을 써보다가 마주친 문제를 설명하기에 앞서, 그놈을 어떤식으로 사용하는지 알아보자아~. 뷰(Vue) 트랜지션 사용하기 뷰 트랜지션을 이용하여, 로고 3개를 차례로 뿅뿅뿅 나타나게하는 효과를 적용해보려고 한다. 뷰 템플릿(template) 작성 먼저 template 부분인데, 아주아주 간단하다. 그냥 "transition-group" 이라는 태그를 사용해주면 되고, 효과 이름을 정해서 name="내가 정한 트랜지션 이름" 의 형태로 속성을 넣어주고, 자식 엘리먼트들에다가 'key'를 부여해주자. 그리고, 이 효과가 나타나게 해주는 switch 역할을 하는 v-..

자바스크립트를 공부하다보면 클로저 함수라는 놈을 만나게 된다. 그런데 요놈, 한마디로 설명하기엔 내 머릿속에 정리가 잘 안되어 있어서, 이 참에 제대로 짚고 넘어가련다. 그래서 이번 포스트는 요놈, 클로저와 스코프 체인을 다뤄보려 한다. 스코프 체인(Scope chain)?스코프 체인이 무엇인가 설명하기 전에, 먼저 글로벌 객체와 콜 객체를 알아야 한다. 글로벌 객체 & 콜 객체?자바스크립트가 실행되면 내부적으로 글로벌 객체를 만든다.요 글로벌 객체에는 글로벌 변수나 글로벌 함수가 담겨있다. 같은 맥락으로,자바스크립트의 어떤 함수가 있는데, 요 함수가 실행되면 내부적으로 Call 객체를 만든다.콜 객체에는 그럼 뭐가 있겠느냐구. 함수 내에서 정의된 로컬 변수와 내부 함수가 있을 것이다. 콜 객체? 듣보인..