하루 기록

JSX: Javascript를 확장시켜 만든 새로운 문법으로, 트랜스파일러(ex. babel)를 필수로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS 코드로 변환된다. xml 스타일의 트리 구문으로  JSX 구성 예시function HelloWorld () {  return (hello world);} babel로 컴파일 할 경우 JSX는 React.createElement로 요소를 만든다. // 리팩토링 전function HelloWorld ({ isHead, children }) {  return isHead       ? ({children})       :  ({children})}// 리팩토링 후function HelloWorld ({ isHead, children }) {  return R..

필수 자바스크립트구조분해할당배열 구조 분해 할당const array = [1, 2, 3, 4]; const [a, , , b] = array;                     // a=1, b=4const [c, ...rest] = array;                  // c=1, rest=[2, 3, 4] const [d, e=10, , , f =20] = array;    // d=1, e=2, f=20 객체 구조 분해 할당const obj = { a: 1, b: 2, c: 3 };const {a, rest} = obj;                       // a=1, rest={b:2, c:3}const {a: first, b : num} = obj;         // first=..

소스 코드 : 실행가능한 코드 ; executable code)종류전역 코드함수 코드eval 코드모듈 코드 자바스크립트 엔진은 소스코드를 평가와 실행으로 나누어 처리한다. 소스코드의 평가1) 선언문 실행2) 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록소스코드의 실행 = 런타임 시작1) 실행 컨텍스트가 관리하는 스코프에서, 실행에 필요한 정보를 검색해서 취득한다.2) 실행 컨텍스트가 관리하는 스코프에, 실행 결과를 등록한다.  실행 컨텍스트: 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 스택(stack) 구조로 관리한다. 역할1. 전역 코드 평가: 전역 코드의 선언문 실행 후, 결과를 컨텍스트의 전역 스코프에 등록한다. 2. 전역 코드 실행: 전역..

: 자기 참조 변수 (자신이 속한 객체를 가리키는 식별자) 함수 호출 방식에 의해 동적으로 결정된다. OO에서 this는ㅁㅁ 이다.전역에서 전역 객체 window일반 함수 내부에서전역 객체 window메서드 내부에서매서드 호출한 객체생성자 함수 내부에서생성자 함수가 생성할 인스턴스apply/call/bind 메서드에 의한 간접 호출메서드에 첫번째 인수로 전달한 객체 console.log(this); //window   [전역]function foo() {   console.log(this); // window [일반 함수 내부]}foo();const person = {   name : '떼굴펜',   getName() {        console.log(this); // {name : '떼굴펜', ge..

자바스크립트 객체 분류1. 표준 빌트인 객체 : ECMAScript 사양에 정의된 객체2. 호스트 객체 : 실행환경 (브라우저, node.js)에서 제공 (ex. DOM, fecth 등)3. 사용자 정의 객체 래퍼 객체 : 객체처럼 접근하면 생성되는 임시 객체 원시값을 객체처럼 사용하면, 자바스크립트 엔진은 암묵적으로 연관 객체를 생성하여 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시 값으로 되돌린다.const str = 'hello';str.name = 'Lee';            // 여기에서 str은 암묵적으로 생성된 래퍼 객체이다.console.log(str.name);   // undefinedconsole.log(typeof str, str); // string hello 전역 객체: ..

자바스크립트는 멀티 패러다임 프로그래밍 언어이다. 객체지향 프로그래밍 프로그램을 객체의 집합으로 표현하려는 패러다임이다.  실세계의 실체(사물이나 개념)는 특징이나 성질을 나타내는 속성(attribute/property)를 갖고 있고, 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합 자료구조를 객체라고 한다. 꼭 필요한 속성만 간추려 표현하는 것을 추상화라고 한다. 객체 지향 프로그래밍은 객체의 상태(state)를 나타내는 데이터, 그리고 상태를 조작할 수 있는 동작(behavior)을 하나의 논리 단위로 묶어서 생각하는 것이다. 이때 객체의 상태 데이터를 프로퍼티(property), 동작을 메서드(method)라고 부른다. const Person = {      name : '떼굴펜',     ..