ALL

[JavaScript] 프로토타입 체인

프로토타입 상속과 프로토타입 체인 생성자 함수(클래스)의 프로토타입 속성은, 그로부터 생성된 인스턴스의 프로토타입이 된다. 인스턴스의 constructor 속성은 해당 클래스를 가리키고, 클래스의 prototype 속성은 인스턴스를 가리키고 있다. 한 인스턴스의 (.__proto__로 확인할 수 있는) prototype 즉 클래스의 prototype 속성도 "객체"이다. 자바스크립트에서 모든 객체는 프로토타입을 가지고 있다. 예시를 들자면, hyejung.calcAge()라는 메서드를 사용할 때 자바스크립트는 먼저 인스턴스 객체인 hyejung 객체 안에 calcAge 프로퍼티가 존재하는지 조회한다. 없을 경우 그 상위 프로토타입 객체를 조회하고, 거기서도 없을 경우 그 프로토타입의 프로토타입을 참조하게..

[Day 22] 2022-0722 : 객체지향과 프로토타입 블로깅 데이

오늘 배운 것 선택 정렬 알고리즘 개념 정리 [알고리즘 JS] 선택 정렬 알고리즘 : Selection Sort Algorithm 유데미 쉽게 배우는 JavaScript 알고리즘 입문 강의의 내용을 정리한 글입니다. 정렬 알고리즘이란? 일단 정렬 알고리즘이란, 말그대로 주어진 범위 내의 불규칙적으로 나열된 데이터들의 순서를 friedegg556.tistory.com 객체 지향 프로그래밍 패러다임, 클래스와 인스턴스 개념 [JavaScript] 객체지향 프로그래밍 : OOP란 무엇인가? 객체 지향 프로그래밍 : Object Oriented Programming 말 그대로 객체의 개념에 기반을 둔 프로그래밍 패러다임이다. (여기서 패러다임이란 우리가 작성하는 코드의 스타일, 코드를 어떻게 작성하고 조 fri..

[JavaScript] 프로토타입

자바스크립트는 프로토타입 기반 언어이다 생성자 함수(클래스)의 prototype 프로퍼티 여기서 프로토타입이란 모든 객체들이 상위 객체의 속성과 메서드를 상속받기 위한 프로토타입 객체를 가진다는 의미이다. 생성자 함수를 포함한 모든 자바스크립트의 함수(객체)는 prototype이라는 속성을 갖는다. 이 prototype 속성/프로퍼티에 인스턴스 객체들에게 상속시켜줄 수 있는 혹은, 인스턴스 객체가 접근할 수 있는 모든 프로퍼티와 메서드들이 저장된다. 생성자 함수로 만들어진 인스턴스는 이 프로토타입을 상속받는다. class Person { constructor(firstName, birthYear) { this.firstName = firstName; this.birthYear = birthYear; } ..

[JavaScript] OOP in JavaScript : 생성자 함수, 클래스 문법

프로토타입 기반 객체 지향 자바스크립트는 엄밀히 따지면 클래스와 인스턴스를 기반으로 한 전통적인(?) 방식의 객체 지향 언어는 아니다. 다만 프로토타입이라는 것을 활용해 마치 클래스를 사용하는 것 처럼 보일 뿐이다. 프로토 타입을 간단하게 정의하면, 모델의 청사진/ 설계도를 만들 때 쓰는 원형 객체이다. 우리가 생성하는 모든 자바스크립트 객체가 이 프로토타입과 연관되어 있다. 자바스크립트에서는 이 프로토타입 객체를 복제하여 마치 클래스로부터 인스턴스가 생성되는 것 처럼 활용한다. 말하자면 프로토타입 객체는 부모 객체가 되는 것이다. 프로토타입이 가진 메서드를 모든 인스턴스 객체가 접근하여 사용할 수 있는데. 이를 프로토타입 상속이라고 하며, 클래스 상속과는 약간 다른 개념이다. 일반 클래스에서 인스턴스 ..

[JavaScript] 객체지향 프로그래밍 : OOP란 무엇인가?

객체 지향 프로그래밍 : Object Oriented Programming 말 그대로 객체의 개념에 기반을 둔 프로그래밍 패러다임이다. (여기서 패러다임이란 우리가 작성하는 코드의 스타일, 코드를 어떻게 작성하고 조직화 할 것인가에 대한 체계, 개념같은 것이다.) 객체를 현실 세계의 개념이나 요소를 표현하기 위해 - 모델링 하기 위해서 사용한다. 사람이 현실 세계를 이해하는 방식을 모방한 방식이라고 생각하면 된다. 객체는 데이터(프로퍼티)와 그에 상응하는 행동(메서드)를 포함한다. 객체 하나가 하나의 개념을 표현한다면, 이 개념과 연관되어있는 데이터와 행동들을 따로 분리하는 것이 아니라, 객체라는 구조 안에 모아두어 활용성을 높인다. 이런 객체들이 여럿 모여 애플리케이션을 구성하고, 다른 객체들과 상호작..

[알고리즘 JS] 선택 정렬 알고리즘 : Selection Sort Algorithm

유데미 쉽게 배우는 JavaScript 알고리즘 입문 강의의 내용을 정리한 글입니다. 정렬 알고리즘이란? 일단 정렬 알고리즘이란, 말그대로 주어진 범위 내의 불규칙적으로 나열된 데이터들의 순서를 일정 기준으로 정렬해주는 알고리즘이다. 정렬 알고리즘에는 여러 종류가 있는데, 크게 선택 정렬, 버블 정렬, 퀵 정렬, 삽입 정렬, 병합 정렬 등이 있다. 그 중 가장 첫 번째로 다룰 선택 정렬 알고리즘은, 다른 정렬 알고리즘을 배우기 전에 간단하게 정렬 알고리즘을 경험해 볼 수 있는 알고리즘인 것 같다. (다른 정렬 알고리즘은 아직 몰라서...) 선택 정렬 알고리즘이란? 말 그대로 데이터 하나를 선택해서 해당 데이터를 기준으로 작거나(오름차순), 큰(내림차순) 데이터가 있는지 비교해 선택된 데이터와 계속해서 자..

[Day 21] 2022-0721 : 고차함수!

오늘 배운 것 자바스크립트 일급 객체와 고차 함수 내장 고차 함수 (배열 메서드 : filter, map, reduce 학습) + 코플릿 문제풀이 고차함수의 중요성 : 추상화 클로저와 커링의 차이? 초간단 정리 [JavaScript] 클로저와 커링 초간단 정리 클로저와 커링의 차이가 무엇일까? 클로저 함수 Closure 외부 함수의 변수에 접근 가능한 내부 함수. 내부함수를 리턴하는 외부함수가 존재할 때, 내부 함수에서 외부함수에 있는 변수를 조회하고 friedegg556.tistory.com 새롭게 알게 된 것 일급 객체란? 다른 객체들에게 적용 가능한 연산을 모두 지원하는 객체이다. 아래의 세가지 특징을 가지면 일급 객체라고 할 수 있다. 1. 변수에 할당할 수 있다. 2. 다른 함수의 전달인자로 전..

[JavaScript] 클로저와 커링 초간단 정리

클로저와 커링의 차이가 무엇일까? 클로저 함수 Closure 외부 함수의 변수에 접근 가능한 내부 함수. 내부함수를 리턴하는 외부함수가 존재할 때, 내부 함수에서 외부함수에 있는 변수를 조회하고 있으면 이런 현상을 클로저, 이런 함수를 클로저 함수라고 한다. function outerFunc(num1, num2, num3) { return function (num2) { return function (num3) { return num1 * num2 * num3; }; }; } console.log(outerFunc(3)(5)(2)); // 30 커링 함수 Currying 함수 인자를 여러개 받는 대신에, 인자를 하나씩 분리하여 한 번에 한 인자를 받는 여러개의 함수로 만드는 것! // 인자를 여러개 받는..

[Day 20] 2022-0720 : 섹션 1 마무리✨

오늘 배운 것 기술 면접 준비 : css 태그는 왜 태그 안에 위치하고, javaScript 태그 안에 위치시키는가? 섹션 1 회고 진행 [회고] 코드스테이츠 FE 섹션 1 회고 목표가 무엇이었는지? 기본기 있는 개발자 되기. 코스를 처음 시작하며 정했던 목표이다. 지금도 이 목표는 그대로이다. 다만 구체적인 기간을 추가하자면 내년 상반기에는 개발자로써 첫 커리 friedegg556.tistory.com 내일 있을 스터디 발표자료 준비 : 자바스크립트의 동작 원리 리액트 강의 듣기 : 리액트는 무엇이며 왜 사용해야함? [React] 리액트는 무엇이고, 왜 리액트를 사용해야 하는가? 본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다. 리액트란 무엇인가 node.js 기반의..

[React] 리액트는 무엇이고, 왜 리액트를 사용해야 하는가?

본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다. 리액트란 무엇인가 node.js 기반의 자바스크립트 ui 라이브러리이다. 바닐라 자바스크립트로 구현하기 복잡한 여러 UI를 보다 쉽게 개발할 수 있도록 돕는 컴포넌트 기반의 라이브러리이다. 리액트를 사용해야하는 3가지 이유 1. 컴포넌트 기반의 UI 라이브러리 만약 엄청나게 많은 html 페이지가 존재하고, 공통적으로 들어가는 부분이 있다면 중복되는 코드가 엄청 많을 것이다. 여기에 한가지 변경사항이라도 생기게 된다면, 그 수 많은 html들을 일일이 수정해주어야 하는 문제점이 발생하고, 이렇게 하나씩 변경해주는 것을 산탄총 수술이라고 부른다. 산탄총이 엄청나게 많은 총알로 군데군데 박살내는 것에서 영감을 얻은 비유인 ..