본문 바로가기

HTML&CSS&Javascript 📚53

[JS Deep Dive] 22장 this 1.this 키워드 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)를 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티나 메소드를 참조하고 변경할 수 있어야 한다. 이때 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 하는데, 이때 this를 사용한다. function Circle(radius) { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ????.radius = radius; } Circle.prototype.getDiameter = function () { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. r.. 2023. 11. 24.
[JS Deep Dive] 19장 프로토타입 1. 객체지향 프로그래밍 자바스크립트는 명령형imperative, 함수형functional, 프로토타입 기반prototype-based 객체지향 프로그래밍OOP Obejct Oriented Programming을 지원하는 멀티 패러다임 프로그래밍 언어다. C++과 Java와 같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스, 상속, 캡슐화를 위한 키워드인 public / private / protected 등이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우가 있다. 하지만 자바스크립트는 클래스 기반 객체지향 프로그래밍보다 효율적이며 더 강력한 객체지향 능력을 가지고 있는 프로토타입 기반의 객체지향 프로그래밍 언어이다. ⭐️ 클래스(Class) : ES6에서 클래스가 도입되었지만 사.. 2023. 11. 23.
[Clean Code] JS 클린코드 예시 - 1 1. 직관적인 함수명을 사용하고, 불필요한 변수는 최소화한다. 2. 임시변수 사용을 최소화한다. 3. 함수의 '명령'과 '조회'는 확실히 구분한다. 함수명이 ‘get(Getter, fetch, localStorage, getItem)’ 과 ‘generator(new Date(), createElement) ’의 역할은 명백하게 다르다. 이 차이를 구분해서 함수를 만드는 것이 좋다. 4. var 사용을 지양한다 / use strict를 사용한다 / 선언을 최상단으로 모은다 5. 매개변수의 순서와 경계를 사용자의 입장에서 설정한다. 매개변수의 순서와 경계(left/right, prev/next, min/max, start/end, before/after, lat/lon, req/res, res/rej, fr.. 2023. 11. 20.
[JS Deep Dive] 16장 프로퍼티 어트리뷰트 1) 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)다. const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // -> Object.prototype ECAMScript 사양에 등장하는 이중 대괄호 [[...]]로 감싼 이름들이 내부 슬롯과 내부.. 2023. 9. 29.
[JS Deep Dive] 7장 연산자 연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 또한 피연산자는(operand) 값으로 평가될 수 있는 표현식 이어야 한다. // 산술 연산자 5 * 4 // -> 20 // 문자열 연결 연산자 'My name is ' + 'Lee' // -> 'My name is Lee' // 할당 연산자 color = 'red' // -> 'red' // 비교 연산자 3 > 5 // -> false // 논리 연산자 true && false // -> false // 타입 연산자 typeof 'Hi' // -> string 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. 7.1 산술.. 2023. 8. 24.
[Node.js] Pug란 ? javascript를 사용하여, HTML을 렌더링해주는 템플릿 엔진 Pug 사용이유 HTML을 간단하게 표현해서 가독성이 좋다. 마크업 문법보다 코드량이 적어 생산성이 좋아진다. JS 연산 결과를 쉽게 보여줄 수 있다. 정적인 부분과 동적인 부분을 따로 할 수 있다. Pug 작성법 html에서 기호가 제외된다. 요소와 같은 줄에 있는 것을 태그로 감싼다. 태그에 속성을 넣을때 괄호()를 사용한다. - 태그(속성=값) 태그뒤에 .을 붙혀 클래스를 추가할 수 있다 - 태그 .class 태그뒤에 #을 붙혀 id를 추가할 수 있다 - 태그 #id 들여쓰기로 부모요소와 자식요소를 나눈다. Pug의 3가지 장점 상속(block & extends) 파일 분할(include) 블럭 재사용(Mixins) 2023. 8. 22.

티스토리툴바