개발자의 낙원

공부동기 지난주부터 자바스크립트를통해 DOM등을 이용해 HTML요소를 조작하는방법을 공부하고 있다. 이중에 자바스크립트가 querySelector를 통해 HTML에 접근할때, 인자를 CSS 선택자로 받아들이는것을 보고 한번쯤은 CSS 선택자를 정리할 필요를 느껴 포스팅을 작성한다. 이 글의 목차 1. CSS개념: HTML요소 스타일링하기 2. 기본 CSS 선택자 3. CSS 선택자 우선순위 4. CSS 선택자 결합하기 1. CSS개념: HTML요소 스타일링하기 목차로 돌아가기 CSS (Cascading Style Sheets)란? CSS는 HTML과 같은 웹페이지 문서의 디자인에 사용되는 언어이다. Cascading은 상하식, 계단식이란 뜻이다. CSS를 사용하여 디자인을 지정하는 HTML, XML, X..

abstract? 타입스크립트의 abstract 제어자: 클래스 및 메서드선언에 사용된다. 선언한 요소의 직접적인 사용을 막는 제어자이다. abstract로 선언된 객체들은 기존 기능의 직접사용이 불가능해지고, 그것들을 상속받는 객체들을 위한 청사진 역할만 수행할 수 있게 된다. 객체지향의 핵심 특징 중 "추상화"와 "상속"을 구현하는 역할을 한다. 사전적 의미: 구체적인 형태나 성질을 갖고 있지 않은, 일반적인, 포괄적인 abstract 제어자로 선언된 클래스는 인스턴스 생성이 불가능하며, abstract 메서드는 다른 클래스에 상속 전에는 사용은커녕 기능의 정의조차 불가능하다. 즉, 상속받는 여러 클래스들의 일반적인 특징(메서드의 이름, 호출 시그니처등) 만 갖고 있으며, 상속 전에는 구체적으로 구현..

static? 타입스크립트의 static 제어자: 클래스의 구성요소에 선언에 사용되는 제어자이다. static으로 선언된 property(특성)이나 behavior(메서드)는 클래스에 직접 속하게 되며, 인스턴스가 아닌 클래스를 통해 호출된다. 사전적 의미: 정적인, 움직임이 없는 일반적인 클래스의 구성요소는 인스턴스가 생성될 때 전부 초기화되며 복제된다. 하지만 static 요소는 클래스가 메모리에 로드되는 시점에 단 한 번의 생성 및 초기화가 이루어진다. 즉 직접 호출하여 값을 바꾸지 않는 이상, 코드를 한번 실행하면 고정되어 새롭게 초기화되거나 복제되지 않는다. static 요소 호출하기 className.호출되는객체 타입스크립트예제 1. static으로 선언된 특성과 메서드는 클래스를 통해 호출이..

WebRTC의 개념 및 용어에 대한 간단한 설명글입니다. WebRTC란? Web Real-Time Communication (웹 실시간 커뮤니케이션)의 약어이다. 이름 그대로 웹을 통해 실시간으로 정보교환을 가능케 하는 코드가 공개된 무료 (오픈소스) 기술이다. 웹 브라우저끼리, 혹은 웹 브라우저와 서버 간 플러그인 없이 통신할 수 있게 해주는 peer-to peer 앱 프로그래밍 인터페이스(API)를 제공한다. *데이터는 오디오, 비디오 및 기타 데이터를 포함하며 webRTC는 통화나 데이터 공유에 사용된다. Peer - to -Peer (P2P) 통신이란? peer: 동료, 혹은 비슷한 개체들을 뜻하는 단어이다. WebRTC의 peer는 "브라우저"를 의미한다. Peer to Peer 통신: 서버등의..

Modifier(제어자)? Modify의 사전적 의미: 바꾸다, 완하 하다, 한정하다. 프로그래밍 언어의 Modifier: 클래스구성요소의 기능 및 접근범위를 설정하는 문법 요소. Access Modifier(접근제어자) 클래스 구성요소에 대한 접근범위를 한정하는 데 사용되는 제어자이다. 타입스크립트는 public, private, protected 이렇게 세 개의 접근제어자를 제공한다. 이 접근제어자들은 타입스크립트의 고유 구성요소로, 자바스크립트에는 포함되지 않는다. public: 어디에서나 접근 가능하다. protected: 선언된 클래스와 그 클래스를 상속받는 클래스내부에서만 접근할 수 있다. private: 선언된 클래스 내부에서만 접근이 가능하다 접근 제어자/ 접근위치 클래스 내부 서브 클래스..

Type(타입 키워드)? 프로그래머의 개별적 의도에 맞는 타입을 선언하는 기능을 제공하는 문법이다. type typeName = 타입형태 왜 필요한가? 타입스크립트의 "타입체크"는 "프로그래머의 의도"에 맞는 타입의 값만을 집어넣게 해 주는 강력한 기능이다. 타입스크립트의 존재 이유 그 자체라고 할 수 있다. 하지만 타입스크립트가 boolean, number, string 등등의 "기본타입"만을 체크해 준다면 자바스크립트의 실행과정에 발생하는 괴상한 오작동은 막을 수 있지만, 개발자에게 자료의 구조 및 요구사항에 대한 힌트를 주어 실질적으로 개발을 돕기엔 부족하다. 그래서 타입스크립트는 임의의 "타입"을 직접 정의할 수 있게 해 주고, 그러한 커스텀 타입에 대한 타입체크 기능도 제공하고 있다. Type키..

4줄 요약) 1. 다형성은 "객체지향"의 특성 중 하나로, 한 가지 형태로 여러 가지 기능을 수행하는 특성을 뜻한다. 2. 호출 시그니쳐는 함수가 받아들이는 인자의 타입 및 형태이다. 3. 함수 오버로딩은 한개의 함수가 여러 개의 호출 시그니쳐 및 그에 대응되는 실행기능을 갖는 것을 말한다. 4. 하나의 이름을 갖는 함수가 여러 호출시그니처를 가짐으로써 "다형성" 특성이 구현된다. prototype(프로토타입)과 객체지향 프로그래밍: Typescript Decorator를 위한 Javascript(자바스크립트) 사전 Prototype?(프로토타입)의 의미 사전적 의미: proto: 원래의, 원시적인 + type: 형태, 유형, 카테고리 prototype: 원래의 형태, 원형, 임시 모델 Prototype..

ES6 시리즈 1. const와 let의 등장: "var 쓰지 마세요" https://batcave.tistory.com/39 Javascript 변수선언 키워드 "var"를 사용하지 않는 이유 var? variable(변수)의 준말. JavaScript(자바스크립트 이하 JS)에서 변수를 선언할 때 사용하는 keyword이다. 왜 사용하지 않는가? var은 다음과 같은 3가지 이유 때문에 현재 사용되지 않고있다. 1. function-s batcave.tistory.com 2. arrow function: 화살표 함수 arrow function(fat arrow): 개념 화살표 함수는 "function": 함수지정 키워드를 사용하지 않고 변수에 함수를 저장할 수 있는 "익명함수" 기능을 제공하는 독특한..

Decorator(데코레이터?) 동사 Decorate의 사전적 정의: 장식하다, 모양내다, 꾸미다 데코레이터: 장식, 장식하는 사람 타입스크립트의 데코레이터: 클래스와 클래스 멤버들의 기능을 추가 및 번경하는 "함수". 데코레이터의 특징 1. class를 수정하거나 subclass를 생성하지 않고도 기능을 변형할 수 있다. 2. 메타프로그래밍적 요소이다. 3. run-time에 실행된다. 사실 위의 특징 세 개는 모두 "메타프로그래밍"으로 요약된다. 메타프로그래밍: 사람이 직접 코드를 번경하는 것이 아니라 프로그램이 자기 자신 혹은 다른 컴퓨터 프로그램을 데이터로 취급하며 프로그램을 작성·수정하는 것을 말한다 데코레이터에 의해 클래스기능이 변형되는 시점은 run-time이다. 프로그램이 실행되는 동안에 ..

Prototype?(프로토타입)의 의미 사전적 의미: proto: 원래의, 원시적인 + type: 형태, 유형, 카테고리 prototype: 원래의 형태, 원형, 임시 모델 Prototype in javascript(자바스크립트, 이하 JS): 객체의 특징, 행동에 대한 정보를 포함하고 있는 Object(오브젝트)이다. class를 이용하여 객체지향을 구현하는 다른 프로그래밍 언어와는 차별화되는 JS만의 독특한 요소이다. 원시타입(number, string, boolean, undefined, null)을 제외한 모든 JS의 요소들은 프로토타입을 가지고 있다. array(배열), object(오브젝트), fuction(함수) 같은 컴포넌트들은 이미 정의되어 있는 프로토타입을 청사진으로 삼아 생성된다. 내..