본문 바로가기

전체 글

 (123)
바인딩(Binding) 바인딩 - 구조적으로 결속된 상태로 만드는 것 - 대상 : 오브젝트와 프로퍼티 이름 get = { qty: value, price: value } 바인딩 목적 - 스코프 결정 - 오브젝트에서 이름 식별 바인딩 시점 정적 바인딩(Lexical Binding) - 초기화 단계에서 바인딩 - 변수, 함수 표현식에 초기값 설정 : undefined - 함수선언문 : Function 오브젝트 생성 - 대부분의 함수가 정적 바인딩 동적 바인딩(Dynamic Binding) : 사용 권장하지 않음(보안문제,엔진부하 등) - 실행 단계에서 바인딩 - eval 함수, with 문(for-in문으로 대체하여 사용 권장) 바인딩 시점이 중요한 이유 - 바인딩할 때 스코프가 결정되기 때문 - 정적 바인딩은 [[Scope]]
글로벌 오브젝트 글로벌 오브젝트- 빌트인 오브젝트 중에 하나- 전체 프로그램을 통해 하나만 존재 - 전체 프로그램 : 모든 에 작성한 코드- 첫번째 에서 한 번만 생성- new 연산자 사용 불가 글로벌 스코프- 전체를 통해 하나만 존재하므로 - 스코프도 하나 - 글로벌 스코프이므로 모든 프로그램에서 사용 가능 - 최상위 스코프 - 검색한 프로퍼티가 없으면 undefiend 반환 - 스코프 설정 - Function 오브젝트의 [[Scope]]에 설정 글로벌 함수함수 구분- 글로벌 함수 : 전역 함수- 로컬(Local) 함수 : 지역 함수 글로벌 함수- 글로벌 오브젝트에 작성한 함수'use strict'; 사용 권장strict 모드일때 : var를 사용하지 않고 함수를 선언하면 에러- 글로벌, 지역에 관계없이 var 키워드..
스코프(Scope) 스코프(Scope)- 함수가 실행될 때 영향을 받는 범위 split()의 스코프- split()은 String 오브젝트의 scope- Number 오브젝트에서 split()은 스코프가 달라 사용불가 사용목적- 범위제한, 신속한 검색/접근- 같은 프로퍼티 이름 사용 가능- String의 indexOf(), Array의 indexOf() 스코프 설정 시점- Function 오브젝트를 생성할 때- 함수를 호출할 때 설정하지 않음- 따라서 function 안의 코드에 대해서는 구조를 만들지 않음- 밖에서 안으로 들어가면서 스코프 구조 형성 스코프 체인- 스코프가 상하 구조로 연결된 개념/구조- ES3에서 채용ES5에서 scope chain 용어 폐지- 렉시컬 환경 사용
Arguments 오브젝트 parameter 수가 고정일때- parameter 사용 parameter 수가 유동적일때- arguments[] 사용 length 프로퍼티- Array-like : 0부터 인덱스를 key로 사용하고 length를 가짐{0:1, 1:2, 2:3, length:3} 해석단계1. 함수 호출2. 파라미터 할당3. arguments 오브젝트 생성
함수 정의 함수 정의 - 함수 선언문 function a(){} - 함수 표현식 var a = function(){} -new function - 문자열로 작성 엔진 해석 -함수 선언문 먼저 해석 -함수 표현식 해석 function sports(){ debugger; var player = 11; function soccer(){ return player; }; var swim = function(){}; soccer(); } sports(); 해석단계 1. 함수 선언문 해석 2. 변수 초기화 -undefined 값 할당 3. 자바스크립트 코드 실행 function sports(){ baseball(); function baseball(){} } 이런 개념을 호이스팅 함수 선언문 오버라이딩 function test..
타입스크립트 소개 - 타입스크립트는 자바스크립트를 확장한 언어- 자바스크립트 언어의 특성을 침범하지 않고 최신 ECMA 표준을 지원- 타입 기반 언어 (타입스크립트 = 자바스크립트 + 타입)- 자바스크립트의 타입 검사 남발 방지- 변환 도구를 이용해 다른 언어로 변환이 가능
Angular CLI 소개 Angular CLI (Command Line Interface) ?- 개발자가 Angular 개발에만 집중할 수 있도록 개발에 필요한 Angular 프로젝트의 설정이나 프로젝트의 전반적인 관리를 명령어 기반으로 수행할 수 있게 지원 제공하는 기능- Angular 프로젝트 생성- Angular의 중요 구성요소 추가(컴포넌트, 지시자, 파이프, 서비스)- 코드 변경 시 빌드를 수행하고 애플리케이션을 재시작- 브라우저 동기화- 단위 테스트, 종단 테스트와 같은 테스트 환경 제공- 프로젝트 배포를 위한 패키징 공식 홈페이지 : https://cli.angular.io깃허브 프로젝트 : https://github.com/angular/angular-cli
개발 준비 1. Node.js 설치 (https://nodejs.org/ko)- npm 업데이트 $ npm install -g npm@latest 2. NPM을 이용한 개발서버 실행- package.json 파일 생성 $ npm init 3. 타입스크립트 설치 $ npm install -g typescript $ tsc -v 4. Angular 프로젝트 구성- Angular CLI 설치 $ npm install -g @angular/cli - Angular CLI 프로젝트 만들기 $ ng new my-app $ cd my-app - 개발 서버 실행 $ ng serve --open - 접속http://localhost:4200/ 5. ng 명령어 활용- 포트 변경 $ ng serve --port 4202 - 빌드/s..

티스토리툴바