모래블로그

자바스크립트는 프로토타입 기반 언어라고 불린다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 하는데 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 부른다. Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. Prototype vs Class 자바스크립트에는 클래스라는 개념이 없지만, 프로토타입(prototype) 이라는 것이 존재한다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이다. 클래스가 없기 때문에 기본적으로 상속 기능도 없다. 그래서 ..

1. 컴포넌트(Component) 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다. 선언체란 컴포넌트를 생성하고 보이고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이것을 React가 화면에서 그려주는데, 이를 통해 리액트 컴포넌트가 선언체라는 것을 알 수 있다. 2. 컴포넌트 종류 1) 함수형 컴포넌트 (function component) function 으로 정의하고, return 문에 jsx 코드를 반환한다. import React from "react"; import "./App.css"; function Test() { const name = "test"; return {name}; } e..

Life Cycle 리액트 컴포넌트에는 라이프 사이클(생명 주기)이 존재한다. 라이프 사이클이란 컴포넌트가 생성되고, 사용되고, 소멸되는 일련의 과정을 뜻하고, 생명 주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다. 분류 1. Mount (마운트) 컴포넌트가 처음 실행이 될 때, 그것을 Mount 라고 표현을 한다. DOM이 생성되고 웹 브라우저 상에 나타나는 것을 말한다. 마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있다. 1) constructor 컴포넌트 생성자 메서드로, 컴포넌트가 만들어지면 제일 먼저 실행이 되는 메서드 이다. state와 props 를 접근하여 값을 할당할 수 있다. constructor(props) { super(pr..

ECMA International 정보와 통신 시스템을 위한 국제적 표준화 기구이다. - 위키백과 - ECMA-262 ECMA-262는 Ecma International에 의해 제정된 하나의 기술 규격의 이름으로, 범용 목적의 스크립트 언어에 대한 명세를 담고 있다. 스크립트 언어에 대한 표준을 정의한 규칙이라고 생각할 수 있다. ECMAScript ECMAScript는 Ecma International에 의해 ECMA-262 라는 기술 규격에 의해 정의 된 범용 스크립트 언어이다. ECMAScript specification 이라고도 불리며, 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다. 비유해보자면, Ecma Internation은 국립국어원, ECMA-262 는 표준어 ECM..

1. Generator(제너레이터) Generator는 일반적인 함수가 끝까지 실행되고 return 되는 것과는 달리, 중간에 실행을 멈췄다가 다시 접근할 수 있는 특이한 형태의 함수이다. Generator 함수는 나중에 다시 접근하기 위해 context(즉 변수값)를 저장된 상태로 남겨둔다. Generator는 주로 Promise 와 결합하여 사용되며, 콜백 지옥 같은 비동기 프로그래밍의 문제점들을 많이 완화시켜준다. 2. Generator 함수 사용 Generator 함수는 function* 키워드를 사용한다. function* generator1() { ... } const generator2 = function* () { ... } Generator함수는 화살표 함수를 사용할 수 없다. 별표 * ..

1. 자바스크립트의 동기(Synchronous) 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 즉, 이전 작업이 완료되어야 다음 작업을 수행하는 순차적인 방식으로 진행이 되는데, 이러한 방식을 동기(Synchronous) 라고 부른다. 예를 들어, 이렇게 입력했을 때 결과가 "one", "two", "three" 가 차례대로 출력되는 것을 확인할 수 있다. 그렇다면 왜 이렇게 나올까 ? 2. 자바스크립트 엔진의 동작 원리 자바스크립트는 콜 스택(Call Stack)과 메모리 힙(Memory Heap)이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 💡엔진의 주요 구성 요소 1) Memory Heap : 메모리 할당이 일어나는 곳 객체, 배열, 함수 등 참조..

구조 분해 할당(Destructuring Assignment) 구조 분해 할당 문법은 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 즉, 객체나 배열을 변수로 '분해'할 수 있게 해준다. 1. 기본 문법 // 이름과 성을 요소로 가진 배열 let arr = ["Soojin", "Park"] // 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // lastName arr[1]을 할당 let [firstName, lastName] = arr; alert(firstName); // Soojin alert(lastName); // Park 위와 같이 인덱스를 이용해 배열에 접근하지 않아도 변수로 이름과 성을 사용할 수 있다. 1. 배열(arr..

Spread Operator(스프레드 연산자) ES6에는 Spread Operator 라는 새로운 기능이 추가되었다. 이 스프레드 연산자는 배열, 문자열 등 반복 가능한(iterable) 객체의 요소를 전개하거나 펼친다. 기본 문법 const arr1 = [1, 2, 3, 4, 5]; console.log(...arr1); // [ 1, 2, 3, 4, 5 ] 위 코드처럼 arr1 배열 앞 (...) 처럼 3개의 점을 이용한 문법이며, 이런 스프레드 연산자를 쓰면 arr1 배열의 원소를 풀어쓸 수 있다. 1. Spread Operator의 배열 복사 자바스크립트에서 배열을 새로운 변수에 할당하는 경우, 새로운 배열은 기존 배열을 참조한다. 따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경된다. /..

화살표 함수 (Arrow Function) ES6 문법인 화살표 함수(Arrow Function)는 function 키워드 대신 화살표(=>)를 사용하여 간단하게 함수를 표현할 수 있다. 그렇다고 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 1. 화살표 함수 기본 문법 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 a => { ... } // 매개변수가 한 개인 경우, 소괄호 생략 가능 (a,b) => { ... } // 매개변수가 여러 개인 경우, 소괄호 생략 x // 객체 반환 시 () => ({ a : 1, b : 2 }) // 객체를 반환할 때는 소괄호를 사용 2. 화살표 함수의 호출 화살표함수는 익명함수로만 사용할 수 있다. 따라서 함수를 호출하기 위해서..

일급 객체(First Class Object) 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. (위키백과) 여기서 일급 은 사용할 때 다른 요소들과 아무런 차별이 없다는 것을 뜻한다. 일급 객체 조건 1. 변수나 데이터에 담을 수 있어야 한다. 2. 함수의 파라미터로 전달할 수 있어야 한다. 3. 함수의 리턴값으로 사용할 수 있어야 한다. 일급 객체는 어떤 특정 언어에만 국한되는 문법 단어가 아니고, 프로그래밍 언어론의 개념으로서 자바나 자바스크립트 외 다양한 언어가 일급 객체 개념을 가지고 있다. Javascript, Python이 일급객체 언어이고, c, pascal,..