본 내용은 책 모던 자바스크립트 Deep Dive 의 내용을 참조했습니다.

배열 이란 여러 개의 값을 순차적으로 나열한 자료구조다.

배열 과 객체 🎈

배열도 사실 객체다. 객체는 키와 값으로 이루어져 있다.

배열은 값만 가지고 있지만, 엄밀히 말하면 인덱스라는 키가 자동적으로 부여된다. 즉 배열은 순서를 가지고 있는 객체다.

자바스크립트의 배열🎈

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다.

이러한 배열을 밀집 배열(dense array) 이라고 부른다.

자바스크립트의 배열은 연속적이지 않을수 있다. 이러한 배열을 희소 배열(sparse array) 이라고 부른다.

length 프로퍼티🎈

length 를 임의로 설정할때 벌어지는 일이다.

length 를 임의로 줄일때

const arr = [1, 2, 3, 4, 5];

// 현재 length 프로퍼티 값인 5보다 작은 숫자 값 3을 length 프로퍼티에 할당
arr.length = 3;

// 배열의 길이가 5에서 3으로 줄어든다.
console.log(arr); // [1, 2, 3]

length 를 임의로 늘릴때

const arr = [1];

// 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당
arr.length = 3;

// length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
console.log(arr.length); // 3
console.log(arr); // [1, empty × 2]

실질적으로 값은 1개지만 length 는 3개로 표시된다. 즉 희소 배열 의 length 는 배열의 값보다 무조건 크다.

희소 배열🎈

일반적인 배열은 자바스크립트 엔진이 최적화를 한다. 하지만 희소 배열은 성능 적으로도 좋지 않고 배열의 이념과도 멀기 때문에 (연속적인 값의 나열) 희소 배열의 사용은 지양 해야 한다.

생성자 함수

Array.from🎈

Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

// 유사 배열 객체를 변환하여 배열을 생성한다.
Array.from({ length: 2, 0: 'a', 1: 'b' }); // -> ['a', 'b']

// 이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
Array.from('Hello'); // -> ['H', 'e', 'l', 'l', 'o']

배열의 추가🎈

존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다. 이때 length 보다 큰값을 할당하면 중간은 비게 되고 그 즉시 희소 배열이 된다.

const arr = [0];

// 배열 요소의 추가
arr[1] = 1;

console.log(arr); // [0, 1]
console.log(arr.length); // 2

arr[100] = 100; 

console.log(arr); // [0, 1, empty × 98, 100] <- 희소 배열
console.log(arr.length); // 101 

인덱스는 요소의 위치를 나타내기 때문에 반드시 0이상의 정수를 사용해야 한다. 그렇지 않으면 요소가 아니라 프로퍼티가 생성된다.

const arr = [];

// 배열 요소의 추가
arr[0] = 1;
arr['1'] = 2;

// 프로퍼티 추가
arr['foo'] = 3;
arr.bar = 4;
arr[1.1] = 5;
arr[-1] = 6;

console.log(arr); // [1, 2, foo: 3, bar: 4, '1.1': 5, '-1': 6]

// 프로퍼티는 length에 영향을 주지 않는다.
console.log(arr.length); // 2

메서드 🎁

배열에는 원본에 영향을 주는 메서드와 새롭게 반환하는 메서드가 존재한다.

Array.prototype.indexOf ✔

• 인수로 전달한 값을 처음 발견된 요소의 인덱스를 반환한다.
• 만약 없으면 -1을 반환한다.

비슷한 메서드로는 array.prototype.includes 가 있다. indexOf 는 -1 을 조건으로 비교 해야 하지만 includes 는 존재 자체를 비교 할수 있어서 가독성에 유리하다.

pop push , unshift shift ✔

LiFo (last in First out) 마지막으로 들어온게 첫번째로 나간다. push 로 집어넣고 pop 으로 빼낸다

FiFo (First In First Out) 처음 들어온게 첫번째로 나간다. push 로 집어넣고 shift 로 빼낸다.

Array.prototype.concat ✔

배열을 합쳐서 새로운 배열로 반환한다. 즉 원본에 영향을 주지 않는다.

... spread ✔

let result = [1, 2].concat([3, 4]);
console.log(result); // [1, 2, 3, 4]

// concat 메서드는 ES6의 스프레드 문법으로 대체할 수 있다.
result = [...[1, 2], ...[3, 4]];
console.log(result); // [1, 2, 3, 4]

spread 문법은 원본에 영향을 주지 않으면서 일관성 있게 사용하기 좋다.

Array.prototype.splice ✔

splice(start,deletecount,itmes) 어디서부터 , 몇개를 지우고 , 무엇을 추가 할지 인자를 받는다. 이때 원본을 직접 변경하며 지운 요소들을 따로 반환 한다.

const arr = [1, 2, 3, 4];

// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 20, 30);

// 제거한 요소가 배열로 반환된다.
console.log(result); // [2, 3]
// splice 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 20, 30, 4]

Array.prototype.slice ✔

slice(start , end) 어디서부터 , ~전까지 복사후 새로운 배열로 반환한다. 원본 배열을 변경하지 않는다.

Array.prototype.join ✔

배열의 모든 요소들을 연결한다. 기본값은 콤마다. 예를들어

const elements = ['Fire', 'Air', 'Water']

이것을 인자 없이 사용하면 요소마다 콤마가 있는 한가지 문자열이 된다. 만약 콤마 없이 한가지 문자열로 붙이려면 ('') 인자를 넣어준다.

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

Array.prototype.fill ✔

전달 받은 인자를 사용하고자 하는 배열의 요소로 전부 채운다. Array 생성자 함수랑 조합이 좋다 const a = Array(50).fill(0) // 0 50개

Array.prototype.flat ✔

중첩배열의 평탄화를 몇번 할지 정한다. 기본값은 1이고 1번 배열을 벗긴다는 뜻이다.

고차함수 메서드 🎁

Array.prototype.sort ✔

원본을 직접 변경하며 오름차순으로 정렬한다.

Array.prototype.forEach ✔

for문 과 거의 동일하지만 forEach는 콜백함수를 받아서 수행한다. for문 과의 차이점은 3가지가 있다.

• 반환값이 없다. 반환값은 항상 undefined 다.
• break continue 를 사용할수 없다. 즉 모든 요소를 빠짐없이 순회한다.
• 성능이 좋지않다. 하지만 가독성이 좋기때문에 퍼포먼스 가 필요한게 아니면 forEach 사용을 권장한다

Array.prototype.map ✔

forEach 와 거의 동일하다. 배열의 모든 요소를 순회 하면서 인수로 전달받은 콜백함수를 반복 호출한다. 차이점은 1대1로 콜백함수로 매핑한뒤 새로운 배열을 반환한다.

Array.prototype.filter ✔

콜백 함수의 반환값이 true 인 요소로만 구성된 새로운 배열을 반환한다.

Array.prototype.reduce ✔

모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 나서 하나의 결과값을 만들어 반환한다.

Array.prototype.some ✔

콜백 함수의 반환값이 단 하나라도 참이면 true 모두 거짓이면 false 를 반환한다.

Array.prototype.every ✔

콜백 함수의 반환값이 모두 참이면 true, 단 한 번이라도 거짓이면 false 를 반환한다.

Array.prototype.find ✔

콜백 함수의 반환값이 true인 첫번째 요소를 반환한다. 만약 요소가 없으면 undefined 를 반환한다.

Array.prototype.findIndex ✔

콜백 함수의 반환값이 true인 첫번째 요소의 인덱스 를 반환한다. 만약 요소가 없으면 -1 를 반환한다.

https://flexboxfroggy.com/#ko

24단계 까지 패스하면 합격

개구리가 춤을 춘다.

1~24 단계 까지 있으며 난이도는 쉬운편

1번정도 가볍게 연습하기 좋은것 같다.

본 내용은 책 모던 자바스크립트 Deep Dive 의 내용을 참조했습니다.

프로토타입

자바스크립트에서 객체는 부모 역할을 하는 객체의 프로퍼티나 메서드를 상속받는다 이렇게 상속해주는 부모 객체를 프로토타입객체 혹은 프로토타입 이라고 한다.

필요성

프로토타입이 필요한 이유를 알아보자.

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
  this.getArea = function () {
    // Math.PI는 원주율을 나타내는 상수다.
    return Math.PI * this.radius ** 2;
  };
}

// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
// 반지름이 2인 인스턴스 생성
const circle2 = new Circle(2);

// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea === circle2.getArea); // false

console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172

생성자 함수는 쉽게 객체를 찍어낼수 있다.

문제는 객체안에 메서드가 동일함에도 불구하고 각각의 객체를 생성한다.

중복된 코드를 따로 생성하면 메모리가 낭비되고 유지보수도 어려워진다.

이때 프로토타입을 기반으로 상속하면 불필요한 중복을 없앨수 있다.

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
};

// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);

// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea); // true

console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172

프로토타입 체인

프로토타입은 서로를 순환참조 하는걸 방지하기 위해 단방향 링크드 리스트로 구성되있다.

A 라는 객체에 프로퍼티를 접근할때 만약 존재하지 않으면 A 에서 먼저 검색한뒤 B --> C 순으로 올라간다. 그렇게 쭉 올라가다 보면 Object.prototype 이 나온다.

즉 Object.prototype 은 모든 프로토타입의 종점역 이다.

프로토타입 객체

모든객체는 [[prototype]] 이라는 내부객체를 가지는데 이것은 null 혹은 객체를 참조한다. 여기서 참조대상이 프로토타입 이다.

그렇다면 [[prototype]] 에 접근하려면 어떻게 해야할까? [[prototype]] 은 숨김프로퍼티 라서 직접 참조는 불가능하다. 따라서 _proto_ 를 사용해서 간접적으로 접근한다.

_proto_ 접근자 프로퍼티

const obj = {};
const parent = { x: 1 };

// getter 함수인 get __proto__가 호출되어 obj 객체의 프로토타입을 취득
obj.__proto__;
// setter함수인 set __proto__가 호출되어 obj 객체의 프로토타입을 교체
obj.__proto__ = parent;

console.log(obj.x); // 1

_proto_ 접근자는 프로토타입을 get 하거나 set 할수있다.

_proto_ 접근자는 Object.prototype 로부터 상속 받은 프로퍼티다. 즉 모든객체는 _proto_ 를 거의 모든객체에서 사용할수있다.
🧨 Object.create() 함수는 객체를 만드는 함수다. 인자 안에 계승할 프로토타입을 넣어줄수 있는데 일반적인 객체를 넣어주면 프로토타입의 종점인 Object.prototype 를 상속 받는다. 하지만 null 을 넣어주면 자기 자신이 프로토타입의 종점인 객체가 생성된다. 즉 _proto_ 접근자 포함 Object.prototype 의 모든 프로퍼티를 상속받지 않는 객체가 생성된다.

즉 _proto_ 는 [[Prototype]] 의 getter setter 함수라고 할수있다.

현재 모던한 자바스크립트에서는 어떨까? _proto_ 접근자는 사실 ES5까지는 비표준 접근자였다.

ES6 부터 공식으로 호환성을 위해 표준화를 했지만 추천하지도 권장하지도 않는다. 따라서 프로토타입을 불러오거나 설정 하려면 다음과 같은 메서드를 사용한다

• Object.getPrototypeOf(obj) – obj의 [[Prototype]]을 반환합니다.
• Object.setPrototypeOf(obj, proto) – obj의 [[Prototype]]이 proto가 되도록 설정합니다.
• Object.create(proto, [descriptors]) – [[Prototype]]이 proto를 참조하는 빈 객체를 만듭니다. 이때 프로퍼티 설명자를 추가로 넘길 수 있습니다.

본 내용은 책 모던 자바스크립트 Deep Dive 의 내용을 참조했습니다.

프로퍼티

자바스크립트 엔진은 프로퍼티를 만들때 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.

데이터 프로퍼티

데이터 프로퍼티는 키와 값으로 이루어진 흔히 아는 프로퍼티다. 프로퍼티 안에는 다음과 같은 속성이 있다.

만약 프로퍼티의 속성을 확인하려면 ? Object.getOwnPropertyDescriptor(오브젝트,프로퍼티 키) 를 사용

const person = {
  name: 'Lee'
};

// 프로퍼티 디스크립터 객체를 반환함
console.log(Object.getOwnPropertyDescriptor(person,'name'));
// {value: "Lee", writable: true, enumerable: true, configurable: true}

프로퍼티를 처음 생성할때 writable, enumerable, configurable 모두 true로 설정된다.

접근자 프로퍼티

Object.getOwnPropertyDescriptor(오브젝트,프로퍼티 키)에서 get 과 set 이면 접근자 프로퍼티 , value 와 writable 이면 데이터 프로퍼티

프로퍼티 정의

그럼 프로퍼티는 어떻게 정의할까?

Object.defineProperty 를 사용한다. 인수 (객체,프로퍼티 키 , 디스크립터 객체) 를 받고 정의를 하면된다.

const person = {
  name: 'kim'
}
console.log(Object.getOwnPropertyDescriptor(person,'name'));
//{ value: 'kim', writable: true, enumerable: true, configurable: true }

Object.defineProperty(person,'name',{
  value: 'kim',
   writable: false,
    enumerable: false,
     configurable: true 
})

console.log(Object.getOwnPropertyDescriptor(person,'name'));
//{value: 'kim',writable: false,enumerable: false,configurable: true}

한번에 정의하려면 Object.defineProperties

객체 변경 방지

위와 같이 데이터프로퍼티 직접 정의할수 있지만.

객체안의 모든 프로퍼티값을, 또 재정의 자체를 막아버리는 메서드도 존재한다.

프리벤트 익스텐션을 사용하면 프로퍼티 동적추가 , Object.defineProperty 가 금지된다.

아래로 내려갈수록 강도가 세지며 freeze 까지 내려가면 읽기만 가능한 객체가 된다.

객체에 위의 메서드가 사용 됬는지 확인하려면 isExtensible isSealed isFrozen 를 사용한다.

🧨객체 변경 방지는 얕은 변경만 된다. 객체 안의 객체까지 효과를 줄 수 없기 때문에 재귀적 함수 호출로 깊은 변경을 이용해야 한다.

생성자 함수

객체를 만드는 방법은 2가지가 있다.

객체리터럴 - const a = { } 생성자 함수 - csont b = new Object();

리터럴 방식은 간단하지만 프로퍼티 값과 메서드를 계속 적어줘야 한다.

동일한 코드는 항상 배제해야 하이 때문에 쉽게 만들수 있는 생성자함수(템플릿)를 사용한다.

// 생성자 함수
function Circle(radius) {
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

// 인스턴스의 생성
const circle1 = new Circle(5);  // 반지름이 5인 Circle 객체를 생성
const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

🔨여기서 this 란? 자기 참조 변수를 뜻한다. 또 호출 방식에 따라 바인딩 되는 값이 다르다.

생성자 함수를 사용하면 다음과 같은 일이 벌어진다.

1. 인스턴스 생성과 this 바인딩

   • 빈 객체(인스턴스)를 만들고 this 값을 바인딩한다.

2. 인스턴스 초기화

   • 인수로 받은 값과 프로퍼티를 인스턴스에 할당한다.

3. 인스턴스 반환

   • 인스턴스를 반환한다.

🧨생성자 함수는 자동으로 return이 되기때문에 return 문을 생략 해야된다. 리턴문 뒤에 원시값을 넣으면 무시가 되지만 리턴뒤에 새로운 객체를 명시하면 명시한 객체가 리턴된다.

[[call]] 과 [[construct]]

함수 와 객체의 차이점은 뭘까? 함수는 호출 가능한 객체 이고 객체는 호출 불가능한 객체다.

따라서 모든 함수는 내부 메서드로 call을 가지고있다. 그렇다면 construct 는 뭐지?

함수앞에 new 를 붙이면 생성자 함수가 되곤 했다. 하지만 정확히 구분하자면 다음과 같다.

constructor - 함수 선언문 , 함수 표현식 , 클래스 *non-constructor *- 축약형 메서드 , 화살표 함수

콜론과 펑션을 생략한 축약형 메서드 나 화살표 함수를 생성자함수로 호출하게 되면 오류가 발생한다.

// 일반 함수 정의: 함수 선언문, 함수 표현식
function foo() {}
const bar = function () {};
// 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수다. 이는 메서드로 인정하지 않는다.
const baz = {
  x: function () {}
};

// 일반 함수로 정의된 함수만이 constructor이다.
new foo();   // -> foo {}
new bar();   // -> bar {}
new baz.x(); // -> x {}

// 화살표 함수 정의
const arrow = () => {};

new arrow(); // TypeError: arrow is not a constructor

// 메서드 정의: ES6의 메서드 축약 표현만을 메서드로 인정한다.
const obj = {
  x() {}
};

new obj.x(); // TypeError: obj.x is not a constructor

new 를 붙이느냐 마느냐에 따라 생성자가 되기도 일반함수가 되기도 한다. 그렇다면 정의된 함수만 보고 ** 생성자함수**로 사용될 예정인지 아닌지를 어떻게 구분할수있을까?

개발자들은 생성자 함수에는 파스칼케이스 컨벤션을 사용하기로 한다. 대문자로 시작하는 함수들은 생성자 함수라고 약속 한것

그럼에도 실수가 발생한다면? 이때 new.target 을 사용하면 new 연산자로 호출됬는지 아닌지를 감지할수 있다.

// 생성자 함수
function Circle(radius) {
  // 이 함수가 new 연산자와 함께 호출되지 않았다면 new.target은 undefined다.
  if (!new.target) {
    // new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환한다.
    return new Circle(radius);
  }

  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

// new 연산자 없이 생성자 함수를 호출하여도 new.target을 통해 생성자 함수로서 호출된다.
const circle = Circle(5);
console.log(circle.getDiameter());

본 내용은 책 모던 자바스크립트 Deep Dive 의 내용을 참조했습니다.

원시 값과 객체

자바스크립트에는 7개의 데이터 타입이 있다.

• 원시타입 - 문자,숫자,불리언,null,undefined,심볼
• 객체 - 객체,배열,함수 등등

데이터 타입을 왜 나눈것일까?

이유를 알기 위해서는 먼저 두 타입의 차이점을 확인해야한다.

immutabel

원시값은 변경이 불가능한 값이다.

변경이 불가능하다는 것은 읽기전용 값이란 뜻이고 데이터의 신뢰성을 보장한다는 뜻이다.

그렇다면 흔히 변수에 값을 바꾼다는것 무슨뜻일까?

let x = 5 ;
x = 8 ;
console.log(x) // 8

변수는 데이터를 담는 그릇이다.

5 라는 숫자 자체는 원시값이기 때문에 변경할수 없다 따라서 8 이라는 값을 메모리에 새로 하나 만들고 주소값만 바꿔서 연결한다.

값에 의한 전달

let x = 5 ;
let y = x ;
console.log(x,y);  // 5 5

y = 7 ;
console.log(x,y);  // 5 7

메모리 x 를 만들고 5를 담는다. 메모리 y 를 만들고 x의 값 5를 담는다.

x 와 y 는 서로다른 메모리기 때문에 한쪽값을 변경해도 다른쪽은 변화가 없다.

이것을 값의 의한 전달 영어로는 passed by value 라고 부른다.

참조에 의한 전달

원시값은 메모리가 매우 적은편에 비해 객체는 그크기가 매우 클수있고 일정하지도 않다. 따라서 객체를 변경하고 관리할때마다 새로 만들지 않고 변경이 가능하게끔 설계가 됬다.

문제는 새롭게 만들지 않고 메모리 자체의 값을 만지기 때문에 부작용이 있다는 것이다.

let user1 = {
  age : 20
};

let x = user1;
console.log(x);     //20

x.age = 5;
console.log(x);     // 5
console.log(user1); // 5

원시값을 할당한 변수는 메모리주소를 따라가서 원시값 자체를 가져오지만. 객체를 할당한 변수는 메모리주소를 따라가서 참조값을 가져온다.

즉 객체 하나를 여럿이서 나눠쓰고 한쪽을 바꾸면 모두가 바뀐다 😦

본 내용은 책 모던 자바스크립트 Deep Dive 의 내용을 참조했습니다.

데이터 타입

자바스크립트의 모든 값은 데이터 타입을 가진다.

원시타입 - 숫자 문자 불리언 undefined null 심벌 객체타입 - 객체(객체,함수,배열)

숫자 타입

자바스크립트는 배정밀도 64비트 부동소수점 형식 을 따르며 모든 수를 실수로 처리한다. 정수 로 표현된숫자도 사실 실수다.

1 = 1.0 //true

특별한 값으로는 +Infinity , -Infinity , NaN 이 있다.

문자열 타입

자바스크립트의 문자열 특징은 원시 타입이고 불변하다. (자세한 내용은 다음 포스트에)

템플릿

일반적인 문자열에서는 줄바꿈이 되지 않는다. 따라서 공백 이나 줄바꿈을 위해선 (백슬래쉬) 로 시작하는 이스케이프 시퀀스 를 사용해야한다.

라인피드와 캐리지리턴

캐리지리턴(\r)은 커서를 맨앞으로 라인피드 (\n)는 그상태 그대로 종이만 올리기

이걸 합치면 CRLF 엔터 + 커서를 맨앞으로 라는 뜻이다

이것이 현대의 운영체제 로 넘어온뒤 각기 다른 개행 방식을 쓰며 자바스크립트에서는 캐리지리턴, 라인피드 동일하게 개행을 의미한다. 일반적으로는 (\n) 라인피드 를 사용한다.

undefined 타입

자바스크립트 에서는 변수를 선언하면 undefined 가 할당된다. 메모리에는 보통 쓰레기값이 존재하는데 undefined 로 초기화 하고 공간을 확보한다.

선언 과 정의

보통의 프로그래밍 언어는 선언 과 정의를 따로 둔다.

C언어 에서는 식별자에게 존재를 알리는게 선언 이고 메모리에 연결시키는걸 정의라 한다.

하지만 자바스크립트는 선언과 동시에 undefined 가 자동으로 할당되기 때문에 구분이 모호하다. ECMAScript 에서는 변수를 선언한다. 함수를 정의한다 라고 표시한다.

심볼 타입

ES6 에 등장한 타입 이며 변경 불가능한 원시 타입의 값이다. Symbol 함수로 생성하며 외부에 노출되지 않고 중복되지도 않는다.

데이터 타입의 필요성

데이터 타입이 필요한 이유는 여러가지가 있다.

• 데이터를 얼마나 확보할지를 정해야한다. 데이터를 생성할때 얼만큼 생성해서 할당할지 효율적인 판단이 필요하다.
• 값을 읽어야 한다. 변수에는 메모리값의 주소가 있는데 가장 최상단 메모리 셀의 주소만 들어있다. 이때 데이터 타입을 참고해서 얼마만큼 읽을지를 판단한다. 만약 8바이트 데이터를 7셀 만큼 읽었다면 값은 훼손된다.
• 값을 사용할때 필요하다. 예를들어 0100 0001 을 숫자로 해석하면 65고 문자로 해석하면 'A' 다.
  즉 값을 사용할때도 데이터 타입을 참고한다.

연산자

피연산자 : 연산의 대상(값으로 평가될수 있어야함)

부수효과

부수효과 란 피연산자의 값이 바뀌는것을 의미한다. 이항 산술 연산자 처럼 +, - , * , / , % 를 해도 할당없이 계산만 하면 부수효과가 없다고 말한다.

무언가를 할당 하면 변수의 값이 변하므로 부수효과가 있다 라고 한다.

그럼 비교연산자는 ? 무언가를 비교하고 불린값을 리턴하기 때문에 부수효과가 없다 라고 한다.

즉 부수 효과가 있는것은 값이 바뀌는것을 의미하고 부수 효과가 없는것은 새로운 값을 리턴한다. (할당연산자 증++ 감-- 연산자 delete 연산자)

쉼표 연산자

왼쪽부터 차례로 평가하고 마지막 피연산자 를 평가하면 해당 값을 반환한다.

var x ,y ,z;
x=1 , y=2 , z =5   //5

typeof 연산자

데이터 타입을 알아내는 연산자다.

함수는 function 을 반환하고 나머지 객체는 object를 반환한다.

문제는 null 을 typeof 연산자 로 평가하게 되면 null 이 아니라 object 가 나온다. 이것은 자바스크립트의 첫번째 버그이고 호환성을 위해 고치고 있지 않다. null 인지를 체크하려면 ===연산자를 사용한다.

본 내용은 책 모던 자바스크립트 Deep Dive 의 내용을 참조했습니다.

변수

변수가 필요한 이유

변수는 하나의 값을 저장하기 위해 메모리 를 초기화 하고 식별할수 있는 역할을 한다.

식별자

변수를 식별자(identifier) 라고도 부르며 무언가를 식별할수 있는 고유의 이름을 뜻한다

식별자는 어떠한 메모리의 값 을 기억하는게 아니라 주소를 기억한다

식별자 -> 메모리주소 -> 메모리값

자바스크립트에서는 함수도 값이기 때문에 변수 함수 클래스 모두 식별자라고 부른다.

선언

변수를 선언하면 실행컨텍스트에 등록이 된다.

1. 변수 이름을 엔진에 알린다.
2. 메모리 공간을 확보하고 undefined 를 할당한다.

호이스팅

변수 함수 클래스 같은 모든 식별자들은 런타임 전에 실행된다. 가장 상단으로 올려서 실행하는 행위를 호이스팅(hoisting) 이라고 한다.

값의 할당

var score = 80; 선언과 할당을 동시에 하는 코드는 사실 아래와 같은 코드다

var score;
score = 80;

즉 런타임 전에 score 에 undefined 가 할당이 되고 런타임 때 위에서부터 한줄씩, 차례가 되었을때 80이할당 된다.

값의 재할당

var score = 80;
score = 90 ;

위와같은 코드가 선언되었을때 undefined , 80 , 90 총 3번이 할당이 되는데.. 메모리에선 하나의 메모리를 지우고 다시 쓰는게 아니라 할당이 될때마다 새 메모리에 값을 할당하고 연결한다.

연결이 끊겨버린 값들은 자바스크립트 자체 엔진 가비지 콜렉터 에서 자동으로 삭제한다.

C언어 에서는 malloc() , free() 같은 함수로 개발자가 직접 메모리 직접 관리할수 있지만 자바스크립트는 자동으로 한다.

이렇게 스스로 컨트롤 하는 언어를 매니지드 언어, 아닌 언어를 언매니지드 언어 라고 한다.

식별자 네이밍 규칙

식별자에서는 다음과 같은 규칙이 있다.

• $(달러사인), _(언더바), 특수문자를 제외한 문자 ,숫자를 쓸수 있으며
• 시작시 에는 위에서 숫자뺀 나머지를 사용할수 있다.
• 예약어는 사용 불가

네이밍 컨벤션

변수 함수 에는 카멜케이스 생성자 함수 클래스 에는 파스칼케이스를 사용한다.

표현식과 문

값 이란 식이 평가되어 생성된 결과를 말한다.

var sum;
sum = 10 + 20; 

10 + 20(식) 이 평가 되어서 30이란 값이 나온다.

리터럴

사람이 이해할수 있는 문자 또는 약속된 기호를 사용해 값을 만드는 표기법이다.

예를들어 'hello' 는 문자 리터럴이다. 숫자 5 는 정수리터럴이다.

자바스크립트에는 많은 리터럴들이 있고 리터럴은 런타임때 값으로 평가되어 반환된다.

표현식

값으로 평가될수 있는 문 이다.

개발자 도구에서 값을 반환하는것은 표현식인 문이고 undefined 를 반환하는것은 표현식이 아닌 문이다.

React.createElement

React.createElement() 는 리액트에서 제공하는 함수다. JSX 라는 쉬운 문법이 존재하지만 그 원리는 React.createElement 에 있으므로

이 함수를 배울 필요가 있다.

React.createElement 에는 3가지 인자가 들어간다 Type / props / ...children

Type 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment

props 리액트 컴포넌트에 넣어주는 데이터 객체

...children 내용 혹은 자식 요소

type에 html 태그를 문자열로 넣어주고 자식요소가 있으면 ...children 에 넣어준다.

React.createElement('div',null,'안녕하세요')

다만 내용이 조금만 복잡해져도 React.createElement() 안에 또 React.createElement() 를 써야 되기 때문에 JSX 로 쉽게 표현을 해준다.

state

state - 컴포넌트 내부에 존재하는 데이터로 상태를 의미한다.

선언방법

• state 는 constructor 함수 안에다 this.state 를 선언 하는 방법이 있고,
• 컴포넌트 내용에 바로 선언하는 방법이 있다. state ={}

state 는 직접 변경하지 않고 setState() 함수를 사용한다. 이유는 직접 변경을 하면 리액트에서 인식하지 못하고 render가 동작하지 않기때문에 화면이 바뀌지 않는다. setState를 사용 하고 자동으로 최적화 까지 하는 리액트의 방식에 어긋난다.

제어방법

• 새로운 객체로 할당

  click = (() => {
  this.setState({
    count : this.state.count +1
  })
  })

• 변수에 넣고 리턴

 click = (()=>{
  this.setState((pre)=>{
    const newState = {count:pre.count +1}
    return newState
  })
})

props

props - 컴포넌트 외부에서 컴포넌트에게 전달해주는 데이터.

추가방법

• 컴포넌트 옆에 추가
  • 인라인 방식으로 직접 삽입 하거나
  • 위에 함수로 빼서 불러온다.
    
• 기본값 프롭스
  • 컴포넌트.defaultProps={} 를 사용한다 (클래스,함수)
    • static defaultProps={} 를 사용한다 (클래스)

EventHandling

• 카멜케이스로만 사용한다.
• 이벤트에 연결된 자바스크립트 코드는 함수다.
• 실제 DOM 요소에만 사용 가능하다
  • 컴포넌트에 사용하면 프롭스로 전달된다.

보통 인라인 요소에 직접 작성하기보다는 따로 빼서 작성하는데 2가지 방법이 있다.

• 메서드로 함수를 만든다음, 생성자 함수를 만들고 바인드 함수로 연결하는 방법

  this.click =this.click.bind(this)

• 생성자 함수 없이 메서드를 화살표 함수로 사용 하는 방법

라이프사이클

라이프 사이클은 컴포넌트가 생성된후 소멸할때까지의 삶을 의미한다.

16.3 이전까지는 아래와 같은 형태를 띤다.

초기화 - 마운팅 - (if props | states 가 업데이트될경우) 업데이트 - 언마운팅

16.3 이후의 라이프 사이클

• 생성자 ComponentWillMount -> getDerivedstateFromProps

• 업데이트 componentWillReceiveProps -> getDerivedStateFromProps componentWillUpdate -> getSnapshotBeforeUpdate

제곱근을 구하는 함수는 보통 for문을 사용한다.

function pow(x,n) {
  let result = 1;
  for (let i = 0; i < n; i++) {
    result *= x
  }
return result;
}

console.log(pow(2,3));   // 8 

하지만 재귀함수를 사용하면 다음과 같이 구현할수 있다.

function pow(x,n){
  if (n==1) {
    return x;
  }
  else {
    return x*pow(x,n-1)
  }
}
console.log(pow(2,3));   //8

삼항 연산자를 사용하면 더 간결하게 가능

function pow(x,n){
 return (n==1) ? x : x * pow(x,n-1)
}
console.log(pow(2,3));

장점

그럼 재귀함수는 왜 사용하는걸까?

우선 코드가 짧다.

코드가 짧기때문에 유지보수가 좋아진다.

또 재귀적 순회가 가능한데 하위의 깊은 구간에도 쉽게 접근할수 있다. for문으로도 접근할순 있지만 매우 지저분해지기때문에 권장하지 않는다.

단점

재귀 함수에도 단점이 있다.

재귀함수를 실행할때마다 실행컨텍스트에 저장되기때문에 메모리에 부담이 간다.. 자바스크립트 엔진은 1만개 부터 10만개 이하 까지 엔진에 따라 제한을 둔다

tail calls optimization 라는 최적화를 하기도 하지만 간단한 경우에만 지원한다

구조

              if n==1  = x
             /
pow(x, n) =
             \
              else     = x * pow(x, n - 1)

재귀의 베이스

재귀함수에서 가장 안쪽인 if n==1 부분을 재귀의 베이스라고 부른다. 여기서부터 중첩됬던 실행컨텍스트를 하나씩 지우면서 외부로 리턴한다

재귀 깊이

중첩호출의 갯수를 재귀 깊이라고 한다. 여기서는 재귀 깊이는 n이다

재귀 단계

x * pow(x, n - 1) 자기 자신을 호출할때를재귀 단계 라고 부른다.

출처 https://ko.javascript.info/recursion#ref-1035

API URI 를 설계하기 위해서 가장 중요한것은 자원 그 자체에 초점을 둬야합니다.

• 회원 목록 조회
• 회원 조회
• 회원 등록
• 회원 수정
• 회원 삭제

여기서 리소스는 회원 입니다. 행위는 포함하지 않습니다.

게임에서 미네랄을 캐라 는 미네랄 만 리소스인것 처럼

API URI를 설계를 할때도 회원 그 자체가 리소스 여야합니다.

동사는 HTTP 메서드에서 담당하죠

HTTP 메서드

메소드는 다음과 같습니다.

주요 메서드

• GET: 리소스 조회
  • 서버에 전달하고 싶은데이터는 query 통해서 전달
  • 메세지 바디를 통해서도 가능하지만 권장하진 않음

• POST: 요청 데이터 처리, 주로 등록에 사용

  • 메시지 바디를 통해 서버로 요청 데이터 전달 (클라이언트와 서버가 약속후 서버가 처리)
  • 단순히 값 하나를 변경할때만 사용하지않고 서버에 큰변화를 줄때도 post 를 사용
  • 다른 메서드로 처리하기 애매한것은 모드 POST 로 처리

• PUT: 리소스를 대체, 해당 리소스가 없으면 생성

  • 리소스를 덮음,리소스의 위치를 정확히 식별

• PATCH: 리소스 부분 변경

• DELETE: 리소스 삭제

기타 메서드

• HEAD: GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환
• OPTIONS: 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명(주로 CORS에서 사용)

거의 사용 안함

• CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을 설정
• TRACE: 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행

HTTP 메서드의 속성

HTTP 메서드의 속성에는 다음과 같은 특징이 있습니다.

• 안전(Safe Methods)
• 멱등(Idempotent Methods)
• 캐시가능(Cacheable Methods)

안전

호출해도 리소스에 변경이 안될경우 예) GET 리소스 조회

멱등

1번호출하든 100 번 호출하든 결과가 같을때 예) GET ,PUT ,DELTE POST 두번 호출하면 2번결제가 된다. 즉 멱등성이 없다.

멱등은 재반복이 가능한지를 판단하는 기준이 됩니다.

캐시가능

이론상 GET HEAD POST PATCH 는 캐시가 가능하지만 POST 와 PATCH는 구현이 힘들기 때문에 GET과 HEAD 만 사용합니다.

본 게시글은 인프런 김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 을 기반으로 작성되었습니다.

HTTP

HTTP란 (HyperText Transfer Protocol)의 약어이자 W3 에서 정보를 주고받을수 있는 통신 규약 입니다. 처음에는 HTML 을 주고받는데 사용되었지만, 현재에는 이미지,영상,JSON,XML,서버간의 데이터 등 사실상 모든곳에서 HTTP를 사용하고 있습니다.

HTTP의 역사

• HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더X
• HTTP/1.0 1996년: 메서드, 헤더 추가
• HTTP/1.1 1997년: 가장 많이 사용, 우리에게 가장 중요한 버전
• RFC2068 (1997) -> RFC2616 (1999) -> RFC7230~7235 (2014)
• HTTP/2 2015년: 성능 개선
• HTTP/3 진행중: TCP 대신에 UDP 사용, 성능 개선

HTTP1.1은 무려 15년동안 릴리즈 되었기때문에 극도로 안정되었고 거의 모든기능이 들어가있기 때문에 현재 가장 많이 사용하는 버전입니다. 현재 버전은 RFC7230~7235(2014)

HTTP는 다음과 같은 특징이 있습니다.

• 클라이언트 서버 구조

• 무상태 프로토콜(스테이스리스), 비연결성

• HTTP 메시지

• 단순함, 확장 가능

클라이언트 서버 구조

현재에는 익숙한 클라이언트,서버 구조가 과거에는 개념조차 모호했습니다. 하지만

HTTP 에서 클라이언트는 UI 에 집중을 하고 서버는 응답과 처리에 집중을 하게됩니다.

Stateful, Stateless(무상태 프로토콜)

Stateless 이란 무상태 프로토콜을 의미하고 다음과 같은 특징이 있습니다.

• 서버가 클라이언트의 상태를 보존X
• 장점: 서버 확장성 높음(스케일 아웃)
• 단점: 클라이언트가 추가 데이터 전송

Stateless 는 한번에 받아서 처리하기때문에 중간에 점원이 바뀌어도 상관이 없습니다. 서버1이 마비가 될때 서버 2로 넘겨도 처리가 가능하죠 그렇기 때문에 무한적 수평확장이 가능합니다. 대부분 Stateless 를 최우선적으로 사용합니다.

반면 Stateful 은 데이터를 유지하지만 점원이 바뀌면 처음부터 다시 해야합니다. 즉 서버가 마비되면 처음부터 다시해야 합니다.

따라서 Stateful 은 보통 로그인을 서버에 유지 할때 사용하며 로그인과 같이 필요한경우에만 사용 합니다.

비연결성

HTTP 는 다음과 같은 특징이 있습니다.

• HTTP는 기본이 연결을 유지하지 않는 모델 일반적으로 초 단위의 이하의 빠른 속도로 응답
• 1시간 동안 수천명이 서비스를 사용해도 실제 서버에서 동시에 처리하는 요청은 수십개 이 하로 매우 작음
• 예) 웹 브라우저에서 계속 연속해서 검색 버튼을 누르지는 않는다.
• 서버 자원을 매우 효율적으로 사용할 수 있음

요약을 하자면 TCP/IP 로 연결후 3way handshake 을 할텐데 데이터를 주고 받으면 연결을 끊습니다. 그렇게 되면 많은 사용자가 이용해도 리소스를 다시 확보해서 사용하기 때문에 자원관리가 효율적입니다.

하지만 다음과 같은 한계점이 있습니다.

• 추후작업을 할때 tcp/ip 를 또 연결해야함
• HTML 뿐만 아니라 자바스크립트, css, 추가 이미지 등등 수 많은 자원이 함께 다운로드

무언가 할때마다 또 (html,css,js,image) 을 받을때마다 끊고 연결을 반복합니다.

그래서 최근에는 HTTP 지속 연결(Persistent Connections) 을 통해 모든 자원을 받은뒤 연결을 끊습니다.

HTTP/2, HTTP/3(udp)를 사용해서 최적화를 하기도 합니다.

HTTP 메세지

HTTP 는 다음과 같은 구조를 가지고 있습니다.

start-line

요청

start-line = request-line request-line = method SP(공백) request-target SP HTTP-version CRLF(엔터) (메서드 , 타겟 , HTTP 버전 순으로 들어간다)

HTTP 메서드

메서드의 종류는 다음과 같습니다. )GET, POST, PUT, DELETE

• GET: 리소스 조회
• POST: 요청 내역 처리

타겟

• absolute-path[ ?query ] (절대경로 [?쿼리])
• 절대경로= "/" 로 시작하는 경로

HTTP 버전

HTTP Version EX) HTTP/1.1

응답

start-line = status-line status-line = HTTP-version SP status-code SP reason-phrase CRLF

• HTTP 버전
• HTTP 상태 코드: 요청 성공, 실패를 나타냄
  • 200: 성공
  • 400: 클라이언트 요청 오류
  • 500: 서버 내부 오류
• 이유 문구: 사람이 이해할 수 있는 짧은 상태 코드 설명 글

HTTP Header

헤더구조 header-field = field-name ":" OWS field-value OWS (OWS:띄어쓰기 허용)

헤더에는 HTTP 전송에 필요한 모든 부가정보가 들어있습니다.

• 예) 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트(브라우저) 정보, 서버 애플리케이션 정보, 캐시 관리 정보...

HTTP BODY

실제 HTML 데이터

• HTML 문서, 이미지, 영상, JSON 등등

본 게시글은 인프런 김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 을 기반으로 작성되었습니다.

인터넷 네트워크

ip란?

인터넷 프로토콜(IP, Internet Protocol)은 인터넷에서 정보를 주고 받을때 사용하는 규약입니다.

인터넷 프로토콜은 다음과 같은 일을합니다.

• 지정한 ip 주소에 데이터를 전달
• 패킷 이라는 통신 단위로 데이터 전달

ip의 한계

ip에는 출발 ip 도착 ip로 구성되어 있지만 다음과 같은 문제점이 있습니다.

첫번째 비연결성(connectionlessness)

• 상대 서버가 꺼졌거나 주소가 바뀌었어도 그저 송신만 한다.

두번째 비신뢰성(unreliability)

• 늦게보낸 데이터가 먼저 도착할수 있다
• 패킷이 소실되어도 알아차리지 못한다.

세번째 프로그램 구분

• 같은 ip로 여러가지의 데이터들이 들어갔을때 (게임,유튜브,음악) 구분할수 없다.

TCP/UDP

이를 보완하기 위해 나온것이 TCP/UDP 입니다.

인터넷 프로토콜은 4단계로 이루어져 있습니다.(위에서 부터 아래로 출력)

TCP/UDP 를 만들고 IP로 감싸서 내보냅니다.

TCP

TCP(Transmission Control Protocol)

TCP 의 장점은 IP 의 문제였던 연결지향,데이터 전달보증, 순서 보장 을 하게됩니다.

연결지향 - 3way handshake

SYN:접속요청 ACK:요청수락

1. 먼저 상대 서버로 SYN 을 보냅니다.
2. 상대서버는 SYN + ACK 을 보내옵니다.
3. 다시 상대 서버로 ACK 을 보냅니다.
4. 데이터전송

이렇게 하면 클라이언트와 서버가 서로 믿을수 있게 되므로 신뢰할수 프로토콜이 됩니다.

최근엔 3번때 ACK와 데이터 전송을 같이 보내기도 합니다.

데이터 전달보증

TCP 에서는 데이터가 성공적으로 전송이 되면 상대도 신호를 보내옵니다.

순서보장

패킷 1,2,3,4 를 순서대로 보냈을때 1,3,2,4 순으로 도착하게 된다면 3,2,4 를 삭제하고 2부터 재요청을 하게됩니다.

서버최적화에 따라 내부에서 재조합을 하기도 합니다.

UDP

UDP(User Datagram Protocol) 는 IP와 거의 동일합니다.

ip에 포트,체크섬 만 포함된 최소한의 통신입니다. 3way handshake x 데이터 전달보증 x 순서보장 이 되지않습니다. 그렇기 때문에 속도가빠르고 단순한 형태입니다.(최소한의 백지 상태) 따라서 본인이 최적화를 원한다면 애플리케이션에서 기능을 확장해볼수 있습니다.

빠르고 단순하기때문에 HTTP3 에서는 UDP 로 전송을 하며 아직 표준안이 정해지진 않았지만 최근 각광받고 있는 프로토콜입니다.

Port

ip는 1개인데 들어오는 데이터는 많습니다. 예를들어 게임하고 음악을 들으며 유튜브를 볼수있죠 그럴때 사용하는게 포트입니다. 같은 ip 내에서 데이터를 구분해줍니다.

• 0 ~ 65535 할당 가능
• 0 ~ 1023: 잘 알려진 포트, 사용하지 않는 것이 좋음
• FTP - 20, 21
• TELNET - 23
• HTTP - 80
• HTTPS - 443

DNS

IP는 외우기도 어렵고 자주 바뀝니다.

그래서 DNS(Domain Name System) 라는것을 사용해 영문/한글 주소로 사이트를 이용할수있습니다.

URI

URI(Uniform Resource Identifier)란 리소스를 식별하는 방법 입니다. 여기서 Locator(위치) 를 찾으면 URL Name(이름) 으로찾으면 URN 입니다.

즉 URI 는 가장 큰 개념이고 그아래 URL(위치) URN(이름) 으로 구분됩니다.

URL

URL 분석법 scheme://[userinfo@]host[:port][/path][?query][#fragment] https://www.google.com:443/search?q=hello&hl=ko

scheme

https 주로 프로토콜을 사용합니다. http , https , ftp등등 http 는 포트 80 https는 포트443 을 주로 사용하기때문에 생략이 가능합니다.

userinfo

• URL 에 사용자 정보를 포함해서 인증하는데 거의 사용하지 않습니다.

host

www.google.com

• 도메인명 또는 ip주소를 입력합니다.

port

443

• 접속 포트이며 생략이 가능합니다.(http==80 ,https==443 )

path

search

• 리스트경로 , 계층적 구조

query

?q=hello&hl=ko

• key=value 형태입니다. ?로 시작하며 &로 추가가 가능합니다.
• 보통 query parameter, query string 라고도 불립니다.

fragment

잘 사용하는편은 아님

• html 내부 북마크 등에 사용
• 서버에 전송하는 정보x

private 속성을 가진 클래스에서 인스턴스를 만들면

인스턴스 전체에는 접근할수 있지만 인스턴스의 속성에는 접근할수 없습니다.

class Person {
  constructor(private name:string,private age : number) {}
}
const user1 = new Person("Tim",20);
console.log(user1);        //  { name: 'Tim', age: 20 }
console.log(user1.name);  // 오류 'name' 속성은 private이며 'Person' 클래스 내에서만 액세스할 수 있습니다.

이때 게터와 세터를 사용하면 private 을 유지하면서도 접근이 가능합니다.

get - 인수가 없는 함수로, 프로퍼티를 읽을 때 동작함 set – 인수가 하나인 함수로, 프로퍼티에 값을 쓸 때 호출됨

get 의 name 과 private name 이 중복되므로 한쪽을 바꿔야 하는데

개발자 사이에서는 암묵적으로 속성값을_이름 으로 바꿔줍니다.

class Person {
  constructor(private _name:string,private age : number) {}    // _name

  get name():string{
    return this._name
  }
}
const user1 = new Person("Tim",20);
const a = user1.name
console.log(a);              // Tim

set은 프로퍼티에 값을 입력할때 사용

class Person {
  constructor(private _name:string,private age : number) {}

  set name(value:string){
    this._name = value
  }
}
const user1 = new Person("Tim",20);

user1.name= "Elon"
console.log(user1);        // { _name: 'Elon', age: 20 }

readonly

readonly 를 사용하면 public 이라 할지라도 외부에서 바꿀수 없습니다.

class Person {
public readonly name:string = "Tim"
}

const user1 = new Person()
user1.name = "hello"            //   오류

선언시 혹은 생성자 내부에서만 변경이 가능합니다.

class Person {
  readonly name:string = "Tim"
   constructor(name:string){          
    this.name = name;             
}
  }
  const user1 = new Person("hello")
  console.log(user1.name);              // hello

Index Signatures in class

인터페이스 Index Signatures 와 마찬가지로 정해진 형식없이 마음껏 추가할수 있는 방법입니다

class Person{
  [index:string]:'A'|'B'|'C'
}
const a = new Person
a.Alice = "A"
a.Mark = "B"
a.Tim = "C" 
console.log(a);    // { Alice: 'A', Mark: 'B', Tim: 'C' }

static

클래스의 속성이나 함수를 호출하려면 new 연산자를 사용해 인스턴스를 만든뒤 인스턴스에서 불러왔습니다.

하지만 static 을 사용하면 클래스 자체에서 불러올수 있습니다.

class Person {
static Country:string = "Korea"
}
console.log(Person.Country);   // Korea

함수에도 사용 가능

class Person {
 static hello(){
    console.log("안녕하세요");
  }
}
Person.hello();  // 안녕하세요

private 일땐 외부에서 접근할수 없지만 내부에선 사용이 가능합니다.

class Person {
private static Country:string = "Korea"
 static hello(){
    console.log("안녕하세요 " + Person.Country);
  }
}
Person.hello();        // 안녕하세요 korea

정적 스태틱은 인스턴스 끼리 공유를 합니다. 따라서 함수를 통해 스태틱 속성을 바꾸면 다른 인스턴스에도 영향을 미칩니다.

class Person {
 static Country:string = "Korea"
  hello(){
    console.log("안녕하세요 " + Person.Country);
  }
  change(){
    Person.Country = "USA"
  }
}
const user1 = new Person;
const user2 = new Person;

user2.hello();          // 안녕하세요 Korea
user1.change();         // user1 의 함수를 실행
user2.hello();          // 안녕하세요 USA  

abstract

abstract 란 추상 클래스를 만들때 사용합니다. abstract class를 완벽하게 구현하지 않고 만든다음 자식 클래스에서 제대로 구현합니다.

abstract class Person{
protected  abstract name:string ;
 abstract hello():void;
}

혹시라도 abstract가 붙지않는 속성과 메서드가 있으면 그부분은 구현해야 합니다.

그후 상속을 이용해 자식클래스에서 모두 구현합니다.

abstract class Person{
protected  abstract name:string ;
 abstract hello():void;
}

class User extends Person {
  protected name: string="Tim"     // protected 는 자식클래스에서 접근 가능
  hello(): void {
    console.log("안녕하세요 " + this.name);
  }
}
const a = new User()
a.hello()                     // 안녕하세요 Tim

즉 abstract는 완벽하지않게 구현해도 오류가 발생하지 않고

자식클래스에서 상속받아 활용하기위해 만듭니다.

ES6와 마찬가지로 타입스크립트에서도 클래스를 지원합니다.

class Person {
  name;
  constructor(name: string){
     this.name = name;
  }
}
const user1 = new Person("Tim")
console.log(user1.name);        //Tim

클래스는 생성자함수 없이 사용 할수도 있습니다.

class Person {
name:string ="Tim"
age:number;        // 오류 발생
}

const user1 = new Person();
user1.age= 5;

클래스 안에는 값을 할당해야합니다.

하지만 클래스 내부에는 이름만 외부에 값을 선언하고 싶을때에는

tsconfig 에서 strict 모드를 끄거나 :앞에 !표를 붙여줍니다. age!:number;

class Person {
name:string ="Tim"
age!:number;
}

const user1 = new Person();
user1.age= 5;

console.log(user1); //  { name: 'Tim', age: 5 }

접근제한자

타입스크립트는 접근제한자 기능을 지원합니다.

public

모든 클래스안의 속성들은 기본이 public 입니다. 외부에서 접근할수 있고 기본적으로 생략이 가능합니다.

class Person {
public name:string ="Tim"        // === name:string ="Tim"
public age!:number;              // === age!:number;
}

const user1 = new Person();
user1.age= 5;

private

private 을 사용하면 클래스 안에서만 접근이 가능합니다.

encapsulation(캡슐화) 즉 수정되거나 보여서 안되는 값들을 보호하게 됩니다.

생성자 함수 접근제한자

보통의 클래스 구조는 이러한 형태를 뜁니다.

class Person {
  name: string;
  age:number;
  constructor(name:string,age:number) {
    this.name = name
    this.age = age;
  }
}

위에서 선언을 하면 생성자 함수에서 초기화 하는 방식으로 말이죠

하지만 접근제한자를 생성자 함수의 매개변수로 사용하면 속성선언과 초기화를 암묵적으로 수행할수 있습니다.

class Person {

  constructor(public name:string,public age:number) {
  }
}

public 과 private 동일하게 사용할순 있지만 private을 사용하면 외부에선 접근이 불가능합니다.

인터페이스는 사용자가 정의한 타입의 모음 입니다.

타입스크립트 에서만 사용하는 하나의 타입약속 이기 때문에

실제 자바스크립트에선 사용되지 않습니다. (컴파일 시에 지워버림)

interface user1 {
  name: string;
}

optional property

변수에 인터페이스 타입을 지정할때

해당 변수에는 인터페이스의 값들이 모두 존재 해야 합니다.

interface user1 {
  name: string;
  age: number;
}

const p1:user1 = {        // 오류 발생 age 값이 없음
  name : "Elon",                 

}

인자를 넘겨도 되고 안넘겨도 될때에는 ?: 형식으로 명시합니다.

interface user1 {
  name: string;
  age?: number;            // ?:
}
const p1:user1 = {        // 오류 없음
  name : "Elon",                  
}

indexable type

인터페이스를 사용할땐 속성값이 동일해야 합니다.

만약 구조를 추가해서 사용 하고 싶을때는 indexable type 을 사용할수 있습니다.

interface Foo{
  name: string;
  [index :string]:string 
}
const a : Foo = {
  name: 'Elon',
  hi:"hi",
  hello:"hello"
}

[indexName : indexer type ] :return type 형식으로 선언합니다.

name 과 같이 직접 표기한 것은 똑같이 명시 해야하지만 인덱서블 타입은 추가를 원할때 사용 하기 때문에 옵셔널 타입이라고 볼수 있습니다.

다만 인덱서 타입은 string 과 number 두가지만 사용 할수 있으며 선언된 즉시 인터페이스 안의 값들은 모두 인덱서 타입의 서브타입이 되야 합니다.

interface Foo{
  name: number;                  //오류발생 "number 는 string 에 할당이 불가능합니다" (서브타입 x)
  [index :string]:string 
}

따라서 보통의경우 인덱서블의 리턴타입을 늘리거나 any 를 사용합니다.

interface Foo{
  name: number;
  [index :string]:any            // 오류 없음
}

인터페이스 함수

함수의 타입도 인터페이스를 사용할수 있습니다.

interface Inum {
  (num1:number,num2:number):number
}

const sum : Inum = function(x,y){
  return x+y
} 

이때 sum : Inum 을 선언하면 함수 매개변수에는 굳이 타입을 지정하지 않아도 됩니다.

extends , readonly

extends 를 사용하면 상속을 받을수 있습니다.

interface IPerson {
  name: string
  readonly age?:number,
}

interface Iaddres extends IPerson{
  address:string
}

const user1: Iaddres = {
  name:"Elon",
  age:20,
  address:"USA"
}

만약 인터페이스 속성에 readonly 가 있으면 바꿀수 없습니다.

user1.age="25" //오류

타입스크립트 에는 9가지의 최상위 속성이 있습니다

• compilerOptions (tsc --init 시 자동생성)

• compileOnSave
• extends
• files
• include
• exclude
• references
• ts-node
• typeAcquisition

extends

tsconfig 에 존재하는 옵션을 상속 받습니다.

"extends": "./base.json"   

예를들어 tsconfig 의 strict 의 옵션이 주석 처리 되있다고 가정했을때 /base.json 을 상속받고 그에 해당하는 옵션들을 동작합니다.

하지만 주석이 아닌 서로 상응하는 옵션이 있다면 tsconfig 의 옵션을 우선합니다.

files

기본적으로 files 와 include 를 사용하지 않고 tsc명령어를 사용하면 프로젝트의 모든 파일들이 컴파일 됩니다.

만약 특정 파일만 컴파일 하길 원한다면 files와include 를 사용하면 됩니다.

"files": [],

배열안에 경로를 string 형식으로 입력합니다.

include

 "include": [],

files 와 마찬가지로 특정 컴파일을 할때 사용합니다.

단 include 된 파일을 exclude하게되면 그 파일은 컴파일 되지 않습니다.

include 와 exclude 는 글롭 패턴을 지원합니다.

• * 0개 이상의 문자와 매칭 (디렉토리 구분 기호 제외)
• ? 한 문자와 매칭 (디렉토리 구분 기호 제외)
• **/ 반복적으로 모든 하위 디렉토리와 매칭

exclude

 "exclude": [],

exclude 는 컴파일 파일을 제외할때 사용합니다.

단 files 는 제외할수 없습니다.

Definitely Typed

자바스크립트는 타입스크립트와 달리 타입이 없습니다.

만약 자바스크립트의 라이브러리를 타입스크립트로 가져오려면 어떻게 해야할까요?

 npm i react  // 추가 타입라이브러리 필요

리액트를 타입스크립트에서 사용하려면 타입 선언 모듈을 가져와야 합니다.

먼저 타입 선언모듈을 제공하는지 체크 해야되는데 명령어는 아래와 같습니다.

npm info @types/모듈이름 모듈검색

npm i -D @types/모듈이름 모듈설치

 npm i -D @types/react

node_modules/@types/react 안에 d.ts 파일 생성됩니다.

타입에 대해 명시하지 않으면 TS 자체적으로 판단하고 명시하죠

하지만 추론이란 어디서 부터 어디까지를 기준으로 두는것인지 애매하기 때문에

tsconfig.json 파일에서 설정할수 있도록 만들었습니다.

tsconfig.json

협업을 하면 구현자 와 사용자가 있을겁니다.

만약 구현자가 함수를 추론위주로 구현하면 사용자가 의도치않게 다른타입의 인자를 넣을수 있습니다.

따라서 그런 일을 방지하고자 tsconfig.json 에는 구현자에게 오류를 알려주는 여러 옵션들이 존재합니다.

아래 옵션들은 기본적으로 true로 설정되있습니다.

noImplicitAny

any 타입으로 암시한 표현식과 선언에 오류를 발생시킵니다.

매개변수에 타입을 명시하지 않은 경우입니다.

a 는 현재 any 라는 타입을 추론하고 있습니다.

"noImplicitAny": true 로 정했을 경우

function num(a) {
  return a * 30
}
console.log(num(2));       // 60
console.log("hello");     // error

컴파일 단계에서 오류가 발생합니다.

즉 noImplicitAny 옵션을 켰을때 타입스크립트는 사용자에게 "any 면 직접 any를 명시하거나 다른타입을 명시해!" 라고 오류를 출력하는겁니다.

function num(a:number) {
  return a * 30
}

console.log(num(2));    //60
console.log("hello");   // 오류     

strictNullChecks

타입을 명시했다고 가정합시다

매개변수에는 타입을 명시했지만 리턴값에는 명시하지 않았습니다.

그러면 타입스크립트는 자동적으로 number | undefined 두가지를 리턴합니다. 왜냐하면 null 과 undefined은 모든 타입의 하위 타입 이기 때문이죠

function num(a:number){    //function num(a: number): number | undefined
  if(a>0){ 
  return  a * 30;
  }
}
console.log(num(2));
console.log(num(-5)+5);      // NAN 인데 오류 출력을 안함

그런데 문제가 있습니다. a 에 음수를 집어넣으면 undefined 이 return 되고 여기에 5를 더하기 때문에 NAN 을 반환합니다.

리턴값에 넘버 하나만 명시하면 어떻게 될까요?

function num(a:number):number{    
  if(a>0){ 
  return  a * 30;
  }
}
console.log(num(-5)+5);      // NAN 인데 오류 출력을 안함

리턴값을 number 만 명시해도 타입스크립트는 undefined 를 number 안에 포함시키기 때문에 오류 출력을 하지 않습니다.

이럴땐 strictNullChecks 를 true 로 설정하면 모든 타입에 null 과 undefined 제거가 되고 오류를 발생 시킵니다.

타입 시스템

프로그램 언어는 여러가지 타입시스템이 있습니다.

• structural type system
• nominal type system
• duck typing

structural type system

구조적 자료형 체계라고도 불리는 structural type system은

타입스크립트의 자료형 체계이기도 합니다. 이름이 달라도 구조가 같으면 서로 같은것으로 판단합니다. ex)(OCaml Go TypeScript Scala)

nominal type system

명목적 자료형 체계라고 불리는 nominal type system은

상속과 같은 선언을 하지 않으면 구조가 일치해도 다른 타입이라고 판단합니다.

대표적으로는 C++, C#, Java, 오브젝티브-C, Delphi, Swift, Rust 등이 있습니다.

duck typing

duck typing은 structural type system 과 거의 비슷하지만 duck typing 은 동적 언어에서 structural type system 는 정적 언어라는 차이가 있습니다.

타입호환성

타입스크립트는 큰 타입에 작은 타입을 할당할수 있습니다. 여기서 작은 타입은 서브타입 이라고 합니다.

let subtype : 1 =1;
let supertype :number=subtype
subtype = supertype  //오류 발생

supertype : number ,subtype : 1 입니다. 넘버란 타입에 1은 할당이 가능합니다. 하지만 숫자 1에 number 란 타입은 할당이 불가능하죠

let subtype :[number, number] = [1,2]
let supertype:number[] = subtype
subtype = supertype; // 오류 발생

마찬가지로 튜플은 배열의 서브 타입입니다. 배열에는 튜플을 할당할수 있지만 반대는 불가능합니다.

이번에는 any 를 살펴보겠습니다.

any 어떠한 것도 받을수 있는 타입입니다. 따라서 가장 상위타입이죠 any 는 어떠한것도 받을수 있지만 반대로도 가능합니다.

let subtype : number =1;
let supertype:any = subtype;
subtype = supertype            //오류 없음

any 는 특별한 타입이기 때문에 1이란 타입에 any를 할당하는것도 가능합니다 😨

any 같은 특별한 경우를 제외하면 대부분의 슈퍼타입은 서브타입에 할당이 불가능합니다.

또 컴파일 이후에 오류를 체크할수 있습니다.

하지만 TypeScript 는 미리 타입을 지정해줌으로써 코딩중에도 쉽게 오류를 발견할수 있습니다.

타입

타입스크립트 에는 총 13가지의 타입이 있습니다.

• 불린: Boolean
• 숫자: Number
• 문자열: String
• 배열: Array
• 튜플: Tuple
• 열거형: Enum
• 모든 타입: Any
• 알 수 없는 타입: Unknown
• 객체: Object
• Null과 Undefined
• Void
• Never

타입선언

자바스크립트와 다르게 타입스크립트에서는 타입 명시를 해줘야 합니다.

let str: string = 'hi';

변수에 : type 타입을 표기 해주는것을 영어로 타입명시(Type Annotation) 라고합니다.

명시를 하지 않았을땐 어떻게 될까요 ?

let str= 'hi';

사실 명시를 하지 않는다고 해서 오류가 발생하진 않습니다.

타입스크립트 는 자체적으로 타입추론 기능을 제공하기때문에 str 에는 string 타입이 명시됩니다.

배열

잡탕과 같았던 JS배열과 달리 TS 에서 배열은 좀더 세밀한 명시가 가능합니다.

예를들어 아래와 같이 타입을 명시한뒤 배열을 만들수 있습니다.

let fruits: string[] = ['딸기','바나나','참외'] 
let fruits: Array<string> = ['딸기','바나나','참외'] 

let num: Array<number> = [1,2,3,4,5] 
let num:number[]=[1,2,3,4,5]; 

2가지 이상의 다중타입도 선언할수 있습니다.

let num : Array<string|number> =['딸기',1,'참외',2]
let num : (string | number)[] = ['딸기',1,'참외',2]

만약 자바스크립트와 같은 배열을 만드려면 any 타입을 명시합니다.

let arr: any = ['a', 2, true,{},[],(function(){})];

튜플

TS에서 배열은 같은 종류만 담는 배열 이였다면 튜플은 길이가 정해져 있는 배열입니다

 let arr :[string,number,string]= ['A',1,'B'];

튜플은 타입에 명시되있는 종류의 수만큼 배열의 길이가 정해집니다. 또한 인덱스에 명시되있는 타입만 담을수 있죠

만약 임의로 무언가를 추가하고 싶으면 push 나 splice를 사용할수 있습니다.

 let arr :[string,number,string]= ['A',1,'B'];
arr.push('hello');
console.log(arr);          //[ 'A', 1, 'B', 3 ]

 let arr :[string,number,string]= ['A',1,'B'];
arr.splice(3,0,'hello');
console.log(arr);        //[ 'A', 1, 'B', 'hello' ]

다만 고정 인덱스가 변경된것이 아니기 때문에 3번인덱스를 출력할땐 오류가 발생합니다.

let arr :[string,number,string]= ['A',1,'B'];
arr.push('hello');
console.log(arr);
console.log(arr[3]); // 컴파일 오류 

열거

이넘(Enum)은 숫자 값을 가지는 문자열의 집합입니다. week 이라는 enum 을 선언하고 요일을 넣으면 순서에 따라 1씩 증가하는 값을 가집니다.

enum week {
  sun, //0
  mon, //1
  tue, //2
  whe, //3
  thu, //4
  fri, //5
  sat, //6
 }

만약 임의로 숫자를 바꾸면 그 뒤의 숫자부터 다시 1씩 증가합니다.

enum week {
  mon,   //0
  tue,   //1
  whe=10,//10
  thu,   //11
  fri,   //12
  sat=50,//50
  sun    //51
}

unknown

unknown에는 어떠한 값도 넣을수 있지만 그값을 any를 제외한 나머지 타입에는 재할당 할수 없습니다.

let a:unknown = 'hello';
let b:any;
let c:number;
b = a ;        // 성공
c = a ;       // 오류

unknown 을 다시 대입하려는 타입과 동일한 타입으로 지정하면 대입할수 있는데 as를 사용하면 됩니다.

let a:unknown = 'hello';
let b:any;
let c:number;

c = a as number;    // 할당성공 하지만 a 자체는 여전히 unknown이다

void

void 는 어떠한 타입도 없는 빈 타입 입니다.

let warn = function () :void {
  console.log("Error");        // 보통 함수에 쓰임
}

void 를 선언 하는 이유는 반환된 값을 어떠한 곳에도 사용 하지 않겠다는 일종의 선언입니다.

let a:null ;
let b:undefined ;
let c:void;
c =a;            // 오류 발생   void 에 null 할당불가
c =b;           // void 에 undefined 는 할당 가능

void 는 대부분 리턴값이 없는 함수에 명시합니다.

never

never 에는 어떠한 값도 존재 할수 없습니다 보통 끝나지 않는 함수에 명시합니다.

function hi(): never { 
  console.log("hello"); // 끝나는 함수 이기 때문에 오류
}

function neverEnd(): never {
  while(true){

  }                 // 성공
}

4번 반복 합니다. @for $i from 1 to 5 {
}

 @for $i from 1 to 5 {     1부터 5전까지
    .container{
        color:red;
    }
 }

 .container {color: red;} 
 .container {color: red;}
 .container {color: red;}
 .container {color: red;}       //4개 출력

순전히 이렇게 사용하는건 뭔가 비효율적 입니다.

그래서 보통 인접 형제의 순서를 나열할때 유용합니다.

자바스크립트에서의 보간은 ${} 지만 SCSS 에서는 #{} 을 써줍니다

scss
@for $i from 1 to 5 {
    .box:nth-child(#{$i}){
        width : 50px * $i;
    }
}

css
.box:nth-child(1) {width: 50px;}

.box:nth-child(2) {width: 100px;}

.box:nth-child(3) {width: 150px;}

.box:nth-child(4) {width: 200px;}

함수

 @function raito(para) {body}

대부분의 모니터 비율은 16:9 입니다. 이를 함수로 구현해 간단하게 대입 해보겠습니다.

 @function raito($width) {
  @return  $width * (9/16)
}

.box{
  $width:1920px;               // 원하는값 입력
  width: $width;
  height:raito($width);
}

결과

 .box {
  width: 1920px;
  height: 1080px;
}

내장 색상 함수

가져오기

VSC 기준으로 SCSS 파일은 다른 SCSS 파일을 손쉽게 가져올수 있습니다. 자바스크립트와 달리 export 할 필요 없이 import 만 해도 되죠 @import url('./tset.scss'); 다만 좀더 간략하게 @import './tset'; 로 표현할수도 있습니다.한번에 가져올때는 @import './test','./tset2'; , 콤마를 씁니다.

데이터

SCSS 에서의 데이터 종류 입니다.

@each

@each 는 반복문과 유사한 형태입니다. 다만 서로다른 형태로 반환하죠 @each $var in list {} 리스트를 사용해 아래와 같이 표현할수 있습니다. 배열처럼 순서대로 생성합니다.

$list: orange,red,blue;
@each $col in $list {
    .box{
      color:$col
    }
}

.box {
  color: orange;
}

.box {
  color: red;
}

.box {
  color: blue;
}

map은 객체와 유사한 형태입니다. 키와 값을 가지고 있죠 자바스크립트와 다른점은 {} 중괄호가 아닌 () 소괄호를 사용합니다.

map은 키와 값을 가지고 있기때문에 변수를 두개 선언합니다

@each $key ,$value in $map {}

변수가 2개이기 때문에 원하는곳에 추가로 사용할수 있습니다.

SCSS
$map:(
  o:orange,
  r:red,
  b:blue
);
@each $key ,$value in $map {
    .box-#{$key}{
      color: $value
    }
}

CSS
.box-o {
  color: orange;
}

.box-r {
  color: red;
}

.box-b {
  color: blue;
}

보간법을 이용해서 서로다른 클래스에 적용할수 있습니다.

SCSS 는 CSS 를 좀더 쉽게 작성시켜주는 전처리기(Compiler) 입니다.

가장 눈에 뛰는 이점은 중첩을 간소화 시켜줍니다.

.conatiner {

}
.conatiner .inner{

}

.conatiner .inner .menu {

}

.conatiner .inner .menu .main-menu{

}

CSS는 하위 요소를 늘릴때마다 상위 요소를 전부 적어줘야 합니다. 하지만 SCSS 는 프로그래밍 언어 처럼 중첩을 지원합니다.

.conatiner{
  .inner{
    .menu{
      .main-menu{

      }
    }
  }
}

선택자

자식선택자 > 꺽쇠 기호를 써줍니다.

.conatiner{                        //.conatiner > .inner { }
  >.inner{}}

일치선택자 & 엠퍼센드 기호를 써줍니다.

//scss
.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

.list li:last-child {
  margin-right: 0;
}

혹은 상위 선택자를 참조 할수도 있습니다.

.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

중첩속성

margin : {}; 는 margin- 로 바뀝니다

body {
  margin:{
    top:20px;
    right: 30px;
    bottom: 40px;
    left: 10px;
  };
}

body {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 10px;
}

변수

SCSS 에서는 변수를 선언하고 지정할수 있습니다.

body {
 top:100px;
 .item{
   width:100px;
   height: 100px;
 } 
}

$ 달러 사인으로 size:100px; 를 선언하고 $size 를 입력하면 동일하게 출력됩니다.

$size:100px;
body {
 top:$size;
 .item{
   width:$size;
   height: $size;
 } 
}

다만 선언된 곳에 따라 변수사용이 가능합니다. 블록 안에 선언되면 그 블록에서만, 전역 공간에서 선언되면 css 전체에서 사용이 가능합니다.

산술연산

아래 산술연산을 해보겠습니다.

SCSS
box {
 width: 50px + 20px;
 height: 40px - 20px;
 margin-top: 50px*2;
 margin-bottom: 40px / 2;
 margin-left: 20px % 6 ;
}

CSS
box {
  width: 70px;
  height: 20px;
  margin-top: 100px;
  margin-bottom: 40px/2;      // 계산안됨
  margin-left: 2px;
}

다만 문제가 있습니다.

css 에서는 / 기호를 단축 기호로 인식 하기 때문에 아래와 같은 방법을 사용해야 합니다.

1. 변수 선언하기 변수를 선언하고 나누기 기호를 사용한다. ex) $size / 2 2.괄호를 사용한다 (40px / 2) == 20px

! 산술연산은 같은 단위끼리 계산해야합니다. 만약 다른 단위 끼리 계산하려면 calc() 함수를 이용해야합니다.

@mixin @include

@mixin 을 이용하면 속성값의 모음을 변수처럼 사용할수 있습니다.

SCSS
@mixin size {           // size 선언
  height: 100px;
  width: 100px;
  color:green
}

.container{
  @include size;            //size 대입
  .item{
    @include size;
  }
}

CSS
.container {
  height: 100px;
  width: 100px;
  color: green;
}
.container .item {
  height: 100px;
  width: 100px;
  color: green;
}

만약 .container 는 100px 으로 item은 50px 로 바꾸려면 어떻게 해야할까요? @mixin 는 선언할때 인수를 받을수 있습니다.

SCSS
@mixin size($sz) {
  height: $sz;
  width: $sz;
  color:green;
}

.container{
  @include size(100);
  .item{
    @include size(50);
  }
}

.container {
  height: 100;
  width: 100;
  color: green;
}
.container .item {
  height: 50;
  width: 50;
  color: green;
}

만약 일일히 인수값을 대입하는게 번거로울때는 매개변수에 기본값을 설정해줄수 있습니다. @mixin size($sz:100px) 기본값 그대로 사용하고싶을떈 @include size 그대로 사용할수 있죠로 사용할수 있죠

참고자료 : https://heropy.blog/2018/01/31/sass/