프론트엔드 공부/자바스크립트
-
Promise - JavaScript | MDN Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. developer.mozilla.org 들어가기 전 (동기적 vs 비동기적, 콜백 지옥) 자바스크립트는 동기적(Synchrous)으로 코드를 실행한다. 동기적으로 처리가 된다는 것은 우리가 작성한 순서대로 처리가 되는 것이기 때문에 어떠한 작업이 끝나야 다음 작업을 진행할 수 있으므로 어떤 작업에 대해 특정 시간을 정해놓은 후 실행을 시키고 싶다면 비동기적으로 처리를 해야한다. 비동기(Asynchronous)처리를 할 때 대표적인 함수는 setTimeout()인데, 두 개의 인자를 받고 있다. 하나는 TimeHandler라는 콜백 함수와 시간을 지정해주는 time..
Promise의 기능과 필요한 이유Promise - JavaScript | MDN Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. developer.mozilla.org 들어가기 전 (동기적 vs 비동기적, 콜백 지옥) 자바스크립트는 동기적(Synchrous)으로 코드를 실행한다. 동기적으로 처리가 된다는 것은 우리가 작성한 순서대로 처리가 되는 것이기 때문에 어떠한 작업이 끝나야 다음 작업을 진행할 수 있으므로 어떤 작업에 대해 특정 시간을 정해놓은 후 실행을 시키고 싶다면 비동기적으로 처리를 해야한다. 비동기(Asynchronous)처리를 할 때 대표적인 함수는 setTimeout()인데, 두 개의 인자를 받고 있다. 하나는 TimeHandler라는 콜백 함수와 시간을 지정해주는 time..
2023.02.10 -
반딧불 Beesbeesbees과제 레퍼런스의 의사코드를 작성하여 블로깅하세요. 코드스테이츠 BeeBeeBee 과제. 아래 조건을 만족하게 js를 수정해야 한다. Class 구조 ├── Grub │ └── Bee │ ├── HoneyMakerBee │ └── ForagerBee 과제의 요구조건 Bee class functionality ✓ `age` 속성은 `5`이어야 합니다 ✓ `color` 속성은 `yellow`이어야 합니다 ✓ `food` 속성은 Grub으로부터 상속받습니다 ✓ `eat` 메소드는 Grub으로부터 상속받습니다 ✓ `job` 속성은 `Keep on growing`이어야 합니다 ForagerBee class functionality ✓ `age` 속성은 `10`이어야 합니다 ✓ `job`..
Beesbeesbees 과제반딧불 Beesbeesbees과제 레퍼런스의 의사코드를 작성하여 블로깅하세요. 코드스테이츠 BeeBeeBee 과제. 아래 조건을 만족하게 js를 수정해야 한다. Class 구조 ├── Grub │ └── Bee │ ├── HoneyMakerBee │ └── ForagerBee 과제의 요구조건 Bee class functionality ✓ `age` 속성은 `5`이어야 합니다 ✓ `color` 속성은 `yellow`이어야 합니다 ✓ `food` 속성은 Grub으로부터 상속받습니다 ✓ `eat` 메소드는 Grub으로부터 상속받습니다 ✓ `job` 속성은 `Keep on growing`이어야 합니다 ForagerBee class functionality ✓ `age` 속성은 `10`이어야 합니다 ✓ `job`..
2023.01.16 -
프로토타입(Prototype)이란? 프로토타입은 원형 객체를 의미합니다. 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. ECMA-262에서 prototype은 object that provides shared properties for other objects로, 다른 객체에 공유 프로퍼티(메서드 포함)를 제공하는 객체이다. 정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의..
프로토타입(Prototype), 클래스, 인스턴스, 프로토타입의 관계프로토타입(Prototype)이란? 프로토타입은 원형 객체를 의미합니다. 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. ECMA-262에서 prototype은 object that provides shared properties for other objects로, 다른 객체에 공유 프로퍼티(메서드 포함)를 제공하는 객체이다. 정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의..
2023.01.13 -
객체 지향 프로그래밍 패러다임이 등장하기 전 절차 지향 프로그래밍이 있었다. 이전에는 모든것을 절차적으로 생각해왔으며 기껏해야 함수로 이동하는것이 전부였다. 초기의 C, 포트란 같은 언어들은 객체 지향의 개념이 없는 절차적 언어였다. 객체지향 프로그램이 패러다임이 등장하며 단순히 별개의 변수와 함수로 순차적 작동하는 것을 넘어, 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어내는 방법을 고안해냈다. 따라서, 데이터와 기능이 별개로 취급되지 않고, 한번에 묶여서 처리할 수 있게 되었다. 자바스크립트는 엄밀히 말해 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성할 수 있다.객체 지향 언어 "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드 작성 현대의 언어들은 대부분 객체 지향의 특징을 ..
객체지향 프로그래밍 OOP (캡슐화, 상속, 추상화, 다형성)객체 지향 프로그래밍 패러다임이 등장하기 전 절차 지향 프로그래밍이 있었다. 이전에는 모든것을 절차적으로 생각해왔으며 기껏해야 함수로 이동하는것이 전부였다. 초기의 C, 포트란 같은 언어들은 객체 지향의 개념이 없는 절차적 언어였다. 객체지향 프로그램이 패러다임이 등장하며 단순히 별개의 변수와 함수로 순차적 작동하는 것을 넘어, 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어내는 방법을 고안해냈다. 따라서, 데이터와 기능이 별개로 취급되지 않고, 한번에 묶여서 처리할 수 있게 되었다. 자바스크립트는 엄밀히 말해 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성할 수 있다.객체 지향 언어 "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드 작성 현대의 언어들은 대부분 객체 지향의 특징을 ..
2023.01.13 -
클래스와 인스턴스 자바스크립트에서 클래스와 인스턴스? 이건 또 뭔.. 말이야? 객체(Object)란? 객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고 다른 것과 식별 가능한 것을 말한다. 예를 들어 물리적(유형)으로 존재하는 자동차, 컴퓨터, 사람과 추상적(무형)으로 존재하는 강의, 주문 등이 모두 객체가 될 수 있다. 사람이라는 객체는 이름, 나이, 성별 등과 같은 속성과 먹다, 걷다, 자다 등의 동작을 가진다. 이러한 속성들을 필드(field), 동작들을 메소드(method)라고 부른다. 클래스(class)란? 용도 : 객체를 생성하는 데 사용한다. 클래스(Class)란 객체를 생성하기 위한 일종의 설계도이다. 객체가 가지는 속성(필드)과 동..
클래스(class)와 인스턴스(instance) 그리고 객체(object)클래스와 인스턴스 자바스크립트에서 클래스와 인스턴스? 이건 또 뭔.. 말이야? 객체(Object)란? 객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고 다른 것과 식별 가능한 것을 말한다. 예를 들어 물리적(유형)으로 존재하는 자동차, 컴퓨터, 사람과 추상적(무형)으로 존재하는 강의, 주문 등이 모두 객체가 될 수 있다. 사람이라는 객체는 이름, 나이, 성별 등과 같은 속성과 먹다, 걷다, 자다 등의 동작을 가진다. 이러한 속성들을 필드(field), 동작들을 메소드(method)라고 부른다. 클래스(class)란? 용도 : 객체를 생성하는 데 사용한다. 클래스(Class)란 객체를 생성하기 위한 일종의 설계도이다. 객체가 가지는 속성(필드)과 동..
2023.01.13 -
반딧불 오늘 새롭게 시작된 섹션2의 고차함수는 내 멘탈을 탈탈 털어버렸다.. 일급객체 JavaScript에 여러 요소들이 있지만 특별한 대우를 받는 일급 객체(킹갓제네럴 퍼스트클래스)가 있으며 일급 객체 중 대표적으로 하나가 함수이다. (JavaScript의 함수는 다른 모든 객체처럼 속성과 메서드를 가질 수 있으므로 일급(first-class) 객체다. 다른 객체와 함수를 구별하는 것은, 함수는 호출할 수 있다는 점!) 일급객체로써 함수는 : 변수에 할당(assignment) 할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. const plusFive = function (num) { return num + num + num + num + ..
고차함수, 일급객체, 내장고차함수(filter, map, reduce)반딧불 오늘 새롭게 시작된 섹션2의 고차함수는 내 멘탈을 탈탈 털어버렸다.. 일급객체 JavaScript에 여러 요소들이 있지만 특별한 대우를 받는 일급 객체(킹갓제네럴 퍼스트클래스)가 있으며 일급 객체 중 대표적으로 하나가 함수이다. (JavaScript의 함수는 다른 모든 객체처럼 속성과 메서드를 가질 수 있으므로 일급(first-class) 객체다. 다른 객체와 함수를 구별하는 것은, 함수는 호출할 수 있다는 점!) 일급객체로써 함수는 : 변수에 할당(assignment) 할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. const plusFive = function (num) { return num + num + num + num + ..
2023.01.12 -
Q. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유? const 로 선언한 변수 는 상수로서 재할당이 불가능하지만 배열이나 객체는 참조자료형(Reference Date type)이기 때문 에 데이터를 heap이라는 다른 공간에 저장해두고 해당 주소값을 참조해 사용하는 것이지 배열이나 객체에 속성을 추가한다고 재할당이나 재선언하는 것이 아닙니다. Q. 참조자료형(Reference Data Type)은 무엇이며 힙(heap)에 저장된다는 것은 무슨 말 인가요? 데이터 값을 그대로 저장하는 기본 자료형(원시 타입)과는 다르게 참조 자료형은 메모리 상에서 데이터가 저장된 주소, 즉 참조값을 저장하기에 참조 자료형이라 불립니다. 원시 타입의 데이터는 stack 영역에 저장이 되지만 하나..
배열, 객체를 const로 선언후 요소나 속성을 추가할 수 있는 이유Q. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유? const 로 선언한 변수 는 상수로서 재할당이 불가능하지만 배열이나 객체는 참조자료형(Reference Date type)이기 때문 에 데이터를 heap이라는 다른 공간에 저장해두고 해당 주소값을 참조해 사용하는 것이지 배열이나 객체에 속성을 추가한다고 재할당이나 재선언하는 것이 아닙니다. Q. 참조자료형(Reference Data Type)은 무엇이며 힙(heap)에 저장된다는 것은 무슨 말 인가요? 데이터 값을 그대로 저장하는 기본 자료형(원시 타입)과는 다르게 참조 자료형은 메모리 상에서 데이터가 저장된 주소, 즉 참조값을 저장하기에 참조 자료형이라 불립니다. 원시 타입의 데이터는 stack 영역에 저장이 되지만 하나..
2023.01.11 -
Undefined? (null이랑 같은건가?) 자바스크립트에서는 (자바 같은 언어와 달리) 변수의 자료형을 별도로 표기하지 않고, 변수에 담기게 되는 값에 따라 자료형이 결정되게 됩니다. 이러한 특징때문에 undefined라는 상태를 다루게 되는데, 'undefined'라는 키워드는 해당 변수의 자료형이 정해지지 않았음을 나타냅니다. undefiend : 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태입니다. null : 변수는 존재하나, null 로 (값이) 할당된 상태. 즉 null은 자료형이 정해진(defined) 상태입니다. var var1; //undefined (어떤 값도 할당되지 않아서 자료형을 알 수 없음) var var2 = null; //..
javascript의 undefined는 정확히 무슨 뜻일까? (null vs undefined)Undefined? (null이랑 같은건가?) 자바스크립트에서는 (자바 같은 언어와 달리) 변수의 자료형을 별도로 표기하지 않고, 변수에 담기게 되는 값에 따라 자료형이 결정되게 됩니다. 이러한 특징때문에 undefined라는 상태를 다루게 되는데, 'undefined'라는 키워드는 해당 변수의 자료형이 정해지지 않았음을 나타냅니다. undefiend : 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태입니다. null : 변수는 존재하나, null 로 (값이) 할당된 상태. 즉 null은 자료형이 정해진(defined) 상태입니다. var var1; //undefined (어떤 값도 할당되지 않아서 자료형을 알 수 없음) var var2 = null; //..
2023.01.05