React 1️⃣ What is React? 리액트는 선언형, 컴포넌트 기반의 JavaScript 라이브러리로 UI를 만들기 위해 사용된다. JSX라는 문법을 사용해 SPA를 개발할 수 있고, CSR로 작동한다. Declarative vs Imperative 리액트는 선언형 프로그래밍이다. 그래서 선언형이 뭔데..?! 🤔 선언형은 무엇을 할 것인지에 포커스를 둔 프로그래밍 방법이다. 반면에 선언형의 반대인 명령형은 어떻게 할 것인지에 중점을 두고 있다. 선언형의 무엇을과 명령형의 어떻게를 실생활에서 빗대어 이야기 해보자면, 맛있는 라면 🍜을 먹는다고 가정할 때 아래와 같은 차이를 보인다고 할 수 있겠다.. 선언형 (무엇을 🤔) 컵라면을 먹을래! 명령형 (어떻게 🙄) 뚜껑 형태의 용기를 가진 라면의 뚜껑을..

프로토타입 체인 프로토타입 체인이란? 자바스크립트는 객체의 속성과 메소드에 접근할 때 해당 객체에 접근하고자 하는 속성과 메소드가 없을 경우 부모 역할을 하는 프로토타입의 속성과 메소드를 순차적으로 검색한다. 이것을 프로토타입 체인이라고 한다. class Person { constructor(name, favorite) { this.name = name; this.favorite = favorite; } like() { console.log(`${this.name}은 ${this.favorite}을 좋아합니다.`); } } const subin = new Person('수빈', '어피치'); subin은 Person에 의해 생성된 인스턴스이기 때문에 Person.prototype의 메소드인 like()를..

프로토타입 프로토타입이란? 프로토타입은 원형 객체로, 어떤 객체의 부모 객체 역할을 하는 객체이다. ✏️ .prototype와 __proto__ prototype 속성은 함수 객체만이 소유하는 속성으로 생성자가 생성할 인스턴스의 프로토타입을, __proto__ 접근자 속성은 자신의 프로토타입에 간접적으로 접근할 수 있는 속성을 가리킨다. prototype은 생성자 함수가, __proto__는 모든 객체가 사용 주체이다. 구분 소유 값 사용 주체 사용 목적 prototype constructor 프로토타입의 참조 생성자 생성자 함수가 생성할 인스턴스의 프로토타입을 할당 __proto__ 모든 객체 프로토타입의 참조 모든 객체 객체가 자신의 프로토타입에 접근 class Person { constructor(..

객체 지향 프로그래밍 객체 지향 프로그래밍(Object Oriented Programming, OOP)이란? 하나의 청사진을 만들고 그 청사진을 바탕으로, 즉 자바스크립트에서는 class를 바탕으로 하는 하나의 객체, 즉 instance를 만드는 프로그래밍 패턴을 의미한다. 조금 더 덧붙이자면, 객체 지향 프로그래밍은 모든 것을 "객체"로 받아들이고 기존에 만들어 둔 객체를 재사용할 수 있다. ✏️ OOP의 4가지 특징 캡슐화(Encapsulation) : 객체의 속성과 메소드를 하나로 묶는 것을 말한다. 특정 속성이나 메소드를 감출 수 있기 때문에 정보 은닉으로 사용할 수 있다. 대부분의 객체 지향 프로그래밍 언어는 클래스를 정의하고 그 클래스를 구성하는 속성과 메소드에 대해 public, privat..

클래스와 인스턴스 ✏️ 클래스 클래스란? 클래스는 속성과 메소드를 정의하는 공간이다. 속성은 클래스에 포함되는 변수를 의미하고, 메소드는 클래스에 포함되는 함수를 의미한다. 클래스를 정의하는 데에는 2가지 방법이 있다. 함수로 정의 (ES5 문법) function Introduce(name, age, favorite) { // 인스턴스 만들어질 때 실행되는 코드 } class 키워드로 정의 (ES6 문법) class Introduce { constructor(name, age, favorite) { // 인스턴스가 만들어질 때 실행되는 코드 } } 여기서 constructor는 클래스가 인스턴스 객체를 생성할 때 객체를 초기화하는 메소드이다. constructor 메소드를 다음과 같이 사용한다면, cla..

원시 자료형과 참조 자료형 ✏️ 원시 자료형 원시 자료형이란? 객체가 아니면서 method를 가지지 않는 자료형으로 변수에 하나의 데이터만 저장할 수 있고 해당 데이터는 값 자체이다. 원시 자료형 종류 6가지 string, number, bigint, boolean, undefined, symbol, (null) "hello world!" "hello september!" // "hello world"와 "hello september!"은 모두 변경할 수 없는 고정된 값이다. let word = "hello world!" word = "hello september!" // word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경하는 것은 가능하다. ✏️ 참조 자료형 참조 자료형이란? 원시 자료형이 아닌..

타입 타입이란? 저장된 값의 종류에 따라 달라지는 것으로, 모든 변수는 타입을 갖고 있다. ✏️ 타입의 종류 원시값 - Boolean 타입 : true와 false 2가지 값을 가진다. - Null 타입 - Undefined 타입 - Number 타입 : 숫자 값을 가진다. - BigInt 타입 - String 타입 : 문자 값을 가진다. - Symbol 타입 객체 : 원시값을 제외한 것들 ✏️ typeof 연산자 특정값의 타입을 알고 싶을 때 사용하는 연산자이다. console.log(typeof 20220822); // expected output: number console.log(typeof '20220822'); // expected output: string console.log(typeof ..

객체 지향 객체 지향 프로그래밍이란? 하나의 청사진을 만들고 그 청사진을 바탕으로, 즉 자바스크립트에서는 class를 바탕으로 하는 하나의 객체, 즉 instance를 만드는 프로그래밍 패턴을 의미한다. ✏️ 클래스와 인스턴스 클래스는 속성과 메소드를 정의하는 공간이고 인스턴스는 클래스에서 정의된 정보드를 가져와 이용하는 객체이다. 속성은 클래스에 포함되는 변수를 의미하고, 메소드는 클래스에 포함되는 함수를 의미한다. 클래스를 정의하는 데에는 2가지 방법이 있다. 함수로 정의 (ES5 문법) function Introduce(name, age, favorite) { // 인스턴스 만들어질 때 실행되는 코드 } class 키워드로 정의 (ES6 문법) class Introduce { constructor(..

고차 함수 고차 함수란? 고차 함수는 1. 함수를 arguments로 받을 수 있거나 2. 함수를 return할 수 있거나 3. 또는 위 두 가지 사항에 모두 해당하는 함수를 의미한다. // 다른 함수를 arguments로 받는 경우 function double(num) { return num * 2; } function doubleNum(func, num) { return func(num); } let output = doubleNum(double, 4); // return값이 함수인 경우 function adder(added) { return function (num) { return num + added; }; } let output = adder(5)(3); // 또는 위 두 가지에 모두 해당하는..

JavaScript Koans 과제를 수행하면서 제대로 정리되지 않았던 개념들을 다시 정리해본다. 참조 자료형은 주소값이 저장된다. 원시 자료형과의 차이에 관한 문제를 풀면서 개념이 상충되어 이해가 가지 않았던 부분. 참조 자료형은 같은 주소값을 갖고 있는 경우 원본 또는 복제 배열이나 객체의 값이 달라졌을 때 값이 함께 달라진다!! ✏️ 원본 참조 자료형과 복제 참조 자료형에 동일한 주소값을 주는 경우 참조 자료형 선언 후 새로운 변수에 참조 자료형을 선언했던 변수를 할당한다 /* 06 Types part2 */ const overTwenty = ['hongsik', 'minchul', 'hoyong']; let allowedToDrink = overTwenty; overTwenty.push('san'..

원시 자료형과 참조 자료형 ✏️ 원시 자료형 원시 자료형이란? 객체가 아니면서 method를 가지지 않는 자료형으로 변수에 하나의 데이터만 저장할 수 있고 해당 데이터는 값 자체이다. 원시 자료형 종류 6가지 string, number, bigint, boolean, undefined, symbol, (null) "hello world!" "hello september!" // "hello world"와 "hello september!"은 모두 변경할 수 없는 고정된 값이다. let word = "hello world!" word = "hello september!" // word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경하는 것은 가능하다. ✏️ 참조 자료형 참조 자료형이란? 원시 자료형이 아닌..

배열 배열이란? 순서가 있는 값으로 이때 순서는 인덱스(index), 값은 요소(element)라고 부른다. 인덱스는 0부터 시작한다. 배열을 선언할 때, 대괄호로 배열을 만들고 각 요소는 쉼표로 구분한다. let myEmoji = ['🐰', '🍓', '🍰', '💜', '🍑']; // myEmoji의 3번 인덱스를 조회할 경우 myEmoji[3]; // '💜' // myEmoji의 3번 인덱스를 변경할 경우 myEmoji[3] = '💖'; console.log(myEmoji); // ['🐰', '🍓', '🍰', '💖', '🍑'] 배열은 배열 내부에 배열을 만들어 2차원, 3차원의 배열 선언도 가능하다. ✏️ 배열의 기초 속성과 메소드 속성 length: 배열의 길이를 알 수 있다. myEmoji.leng..