[개발 상식] 선언적 프로그래밍과 명령적 프로그래밍, React.js와 선언적 프로그래밍

자바스크립트를 공부하다 명령적 프로그래밍의 단점에 대해 설명을 듣고, 선언적 프로그래밍의 필요성과 react, vue 등의 라이브러리 등장에 대해서 설명을 들었습니다. 그런데 선언적 프로그래밍이 무엇인지, 명령적 프로그래밍이 무엇인지 정확하게 알지 못해서 이번 시간에는 이 둘이 무엇인지와 차이점을 알아 보려고 합니다! 🤔선언적 프로그래밍? (Declarative Programming) 선언적 프로그래밍 (Declarative Programming)은 프로그램이 어떻게 동작해야 하는지를 명시하기 보다, 원하는 결과, 달성하기를 원하는 것을 설명하는 프로그래밍 형식입니다. 이를테면, 선언적 프로그래밍에서는 데이터와 데이터 사이의 관계, 규칙, 제약 조건등을 선언하여 문제를 해결하려 합니다. 함수형 프로그래밍..

• format_list_bulleted 개발 상식
• · 2023. 7. 27.
• textsms

[하루 30분 모던 자바스크립트 딥 다이브] 상속에 의한 클래스 확장

🤔클래스 상속과 생성자 함수 상속 이 개념은 프로토타입 체인과는 다른 개념이다. 기존 클래스를 상속받아 새로운 클래스를 확장하는 것! 생성자 함수는 의사 클래스 상속 패턴을 사용하여 확장을 흉내 낼 순 있지만, 문법이 있지는 않다. 클래스는 extends 키워드가 제공된다. 클래스의 등장으로 의사 클래스 상속 패턴(모딥다 451p)은 더 이상 사용하지 않는다. 🤨extends 키워드 extends 키워드를 사용하여 상속받을 클래스를 정의할 수 있다 class super {} class sub extends super{} //상속을 통한 확장 extends 키워드의 역할은 수퍼클래스와 서브클래스 간의 상속 관계를 설정하는 것이다 클래스도 프로토타입을 통해 상속 관계를 구현한다. 🤔동적 상속? extends..

• format_list_bulleted 하루 30분 모딥다
• · 2023. 7. 26.
• textsms

[하루 30분 모던 자바스크립트 딥 다이브] 클래스 2

🤔클래스의 인스턴스 생성과정 new 연산자와 함께 클래스를 호출하면 생성자 함수와 마찬가지로 [[Construct]]가 호출된다. 인스턴스 생성과 this 바인딩 constructor 코드가 실행되기 앞서 빈 객체가 생성된다. 이 객체가 인스턴스이다. 인스턴스의 프로토타입으로 클래스의 prototype이 설정된다. 인스턴스에 this가 바인딩된다. 인스턴스 초기화 constructor가 인수로 받은 초기화 값을 인스턴스 프로퍼티 값으로 초기화 한다. constructor가 생략되었다면, 이 과정 역시 생략된다. 인스턴스 반환 암묵적으로 this가 반환된다. 🤨클래스의 프로퍼티 인스턴스 프로퍼티 constructor 내부에서 정의한다 접근 제한자 없이는 항상 public값으로 가진다. 접근자 프로퍼티 자체..

• format_list_bulleted 하루 30분 모딥다
• · 2023. 7. 25.
• textsms

[하루 30분 모던 자바스크립트 딥 다이브] 클래스

🤔클래스와 생성자 함수 JS는 프로토타입기반 객체지향 언어. 클래스가 필요없는 객체지향 언어이다. JS는 클래스 말고 생성자 함수를 이용하여 객체를 생성하고, 프로토타입을 통해 상속 구현이 가능하다. 하지만 클래스 기반 언어에 익숙한 프로그래머들의 장벽으로 EX6클래스가 도입되었다. 클래스와 생성자함수가 모두 인스턴스를 제공하지만, 동일하게 작동하지는 않는다 생성자 함수와 다른 클래스의 특징? 클래스는 new연산자 없이 사용한다. 상속을 지원하는 extend, super 키워드를 제공한다. 클래스는 함수 객체이지만, 변수 호이스팅과 같이 클래스 정의 이전에는 참조할 수 없다. (TDZ에도 빠질 수 있다). 클래스는 암묵적으로 strict mode를 사용한다. 메서드 모두 [[Enumerable]]값이 f..

• format_list_bulleted 하루 30분 모딥다
• · 2023. 7. 24.
• textsms

백준 node.js 1197번 최소 스패닝 트리, 최소 신장 트리 크루스칼 JavaScript JS

1197번: 최소 스패닝 트리 첫째 줄에 정점의 개수 V(1 ≤ V ≤ 10,000)와 간선의 개수 E(1 ≤ E ≤ 100,000)가 주어진다. 다음 E개의 줄에는 각 간선에 대한 정보를 나타내는 세 정수 A, B, C가 주어진다. 이는 A번 정점과 B번 정점이 www.acmicpc.net 😉문제 설명 이 문제는 이름 그대로 최소 신장 트리 문제입니다. 최소 신장 트리는 모든 노드를 최소한의 가중치로 모든 간선을 연결 한 것을 말합니다. 문제를 풀기위해서 크루스칼 알고리즘을 사용합니다! 😎문제 풀이 const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n") const [V, E] =..

• format_list_bulleted 백준
• · 2023. 7. 23.
• textsms

[하루 30분 모던 자바스크립트 딥 다이브] 클로저의 캡슐화와 정보은닉

🤔캡슐화? 정보은닉? 캡슐화란 프로퍼티 메서드를 하나로 묵는 것이다. 특정 프로퍼티나 메서드를 은닉하기 위한 목적이다. 정보 은닉은 정보를 보호하고 결합도(coupling, 객체간의 상호 의존성)를 낮추는 효과가 있다. 대부분의 객체 지향 프로그램에선 public, private, protected 같은 접근 제한자를 선언하여 공개 범위를 설정할 수 있다. 자바스크립트에서의 프로퍼티와 메서드는 기본적으로 public상태이다. 🤨자바스크립트에서의 정보은닉 function Person(name, age){ this.name = name; let _age = age; this.sayHi = function () { console.log(`Hi! My name is ${this.name}. I am ${_age..

• format_list_bulleted 하루 30분 모딥다
• · 2023. 7. 22.
• textsms