DEVELOPANG

자바스크립트 = 프로토타입 언어. 프로토타입에 기반하여 객체지향 언어 프로그래밍을 지원. ES6에서 class가 추가되었으나 wrapping된 문법이 추가된 것이지 여전히 프로토타입 언어임. 프로토타입 (= 객체의 원형) 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어있음. 이 부모 객체를 프로토타입 객체 또는 프로토타입이라 함. ※ 프로토타입 기반 프로그래밍 : 프로토타입을 이용하여 새로운 객체 생성하는 프로그래밍 기법 배열 자료형을 담은 변수에 sort 메소드 사용할 수 있는 이유 내부적으로 배열 자료형에는 sort 메소드를 쓸 수 있게 처리해둔 것 ( → 상속) 위에서 arr 라는 변수를 배열 리터럴로 생성했지만 내부적으로는 new Array() 같이 생성자 함수로 선언한 것. ..

클로저(closure) 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수 스코프 체인(scope chain)으로 표현되기도 함 클로저 자신에 대한 접근(자신의 블럭내에 정의된 변수), 외부 함수의 변수에 대한 접근, 그리고 전역 변수에 대한 접근. 이렇게 3단계로 구분 func outerFunc() { var x = 10; // 내부 함수는 외부 함수의 변수뿐만 아니라 피라미터까지 사용 가능 var innerFunc = function () { console.log(x);}; return innerFunc; } // 함수 outerFunc 호출 시 내부 함수 innerFunc 반환. // 함수 outerFunc 실행 컨텍스트 소멸 var inner = outerFunc(); inner();//..

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다. this는 코드 어디서든 참조할 수 있다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this..

자바 스크립트는 싱글 스레드 언어이다! 싱글 스레드 하나의 프로세스에서 오직 하나의 스레드로만 실행 ( = Call stack이 하나) 1분 이상 걸리는 작업이 있다면, 브라우저는 그동안 어떤 동작도 하지 못 하게됨. (비동기 콜백 사용) JS Engine 자바스크립트 코드 이해, 실행을 도와줌. V8엔진(Chrome, Node.js에서 사용), 브라우저 별 여러 엔진 존재 ● Memory Heap 데이터 임시 저장 장소. 변수 저장, 함수 저장, 호출 등의 작업이 발생하는 공간 ● Call Stack 코드 실행시 코드 내부 실행 순서 기록, 하나씩 순차적으로 작업을 수행할 수 있도록 도와줌. ( = 자료구조) 특정 함수를 실행하면, 해당 함수는 콜 스택의 가장 상단에 위치하게 된다. 그리고 함수 실행이..

HTML 반복문● 일반적태그 v-for="작명 in 몇 회" :key="작명"> 내용  - 반복문 쓸 떄 :key="작명" 안쓰면 에러- 반복문 돌린 요소를 컴퓨터가 구분하기 위해 사용한다 생 ● array/object 집어넣기 가능태그 v-for="작명 in 데이터이름" :key="작명"> {{ 작명 }} - data()란에 필요한 데이터를 저장해두고 사용- 그럼 자료안의 데이터 갯수만큼 반복- 그럼 작명한 변수는 데이터안의 자료가 됨 {{ 작명 }} ● 변수 작명 2개까지 가능태그 v-for="(a, i) in 데이터이름" :key="i"> {{a}} - 왼쪽 변수는 array내의 데이터- 오른쪽 변수는 1씩 증가하는 정수 ( 우리가 자주하는 i in 1 .. 10 요런거 사..

데이터 바인딩 하는 이유1. HTML에 하드코딩 해놓으면 나중에 변경이 어려움- 변경해야 하거나 자주 값이 변하는 데이터들 data에 보관하고 HTML에 {{데이터 이름}} 꽂아넣으면 됨!2. Vue의 실시간 자동 렌더링을 쓰기 위해- data를 변경하면 data와 관련된 HTML에도 실시간 반영 → 웹앱 제작 가능 데이터 바인딩 하는 법●  일반적 →  {{ 데이터 바인딩}}●  속성 데이터 바인딩 시 →  :속성 : "데이터이름" ●  데이터는 object 자료로 저장{ 자료 이름 : 자료 내용 } XX 원룸 {{ price1 }} 만원 XX 원룸 {{ price2 }} 만원 export default { name: 'App', data() { ..

브라우저 객체 모델(Browser Object Model, BOM)- 모든 서비스는 웹 브라우저를 바탕으로 실행되기 때문에, 웹 서비스 개발은 브라우저와 밀접한 관련이 있음 - 이 브라우저와 관련된 객체 집합 (브라우저 자체 제어) - DOM은 BOM 중 하나 - BOM의 최상위 객체는 window객체 ex. window.location - window.navigator - window.screen - window.history - … 다른 웹페이지 이동, 화면 관련 정보 습득, 브라우저의 알림창 띄우는 등등 기능 존재 - DOM은 window 객체의 하위 객체 ( window.document 객체를 DOM이라고 분류한다. ) 문서 객체 모델 (Document Object Model, DOM)- W3C(..

호이스팅(Hoisting)인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것으로,변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것console.log(a); // undefinedvar a = "A"; // var 변수/* 호이스팅 된 코드 */var a; console.log(a);a = "A";호이스팅 대상var과 E26에서 도입된 let, const을 포함한 변수와 함수 선언문에만 호이스팅이 된다. ○  변수/함수 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다. 변수변수 선언 단계1. 선언 단계변수를 변수 객에 등록하게 되는데, 이 변수 객체는 scope가 참조하는 대상이 됨2. 초기화 단계변수 객체에 등록된 변를 위한 공간을 메모리 확보하는 단계,..