TypeScript에는 기본 타입과 객체 타입이 존재한다.

기본 타입은 JS에도 존재하는 Number, String, Object.. 같은 데이터 타입 + Enum, Never같은 TS에서 추가된 타입을 의미한다.

자세한 사항은 typescript 핸드북에서 볼 수 있다. 기본 타입을 부여하는 방법은 어렵지 않아 따로 설명하지 않겠다.

객체 타입은 말 그대로 객체형식으로 설정된 타입이다.

사용자가 필요에 의해 새로 만드는 형식이기 때문에 매우 다양한 방법으로 타입을 지정할 수 있다.

새로 만든 타입에 Type Alias와 Interface간의 차이가 존재하는데 아래에서 정리하겠다.

객체 타입을 지정하는 방법은 2가지가 존재한다.

1. Type Alias

타입 별칭이라는 의미의 Type Alias는 의미 그대로 타입에 이름을 붙힐 수 있다.

사용 방식 1. 기본 타입에 별칭을 짓는 방법

모든 식별자(함수, 클래스, 변수, 객체..)에는 타입을 정의 해야하고 사용 방식은 type 타입이름 = 데이터타입으로 설정한다.

// type alias 미사용
const age: number = 25;

// type alias 사용
type UserAge = number;
const age: UserAge = 25;

// type alias의 사용 2
type RGB = "R" | "G" | "B";
const rgb : RGB = "R";  // 성공
const rgb1 : RGB = "H";  // 실패

사용 효과

1. type에 이름을 붙히므로써 표현력을 높힐 수 있다.

2. 직접 type에 들어갈 값을 설정함으로써 더 안정적인 코드를 작성할 수 있다.

단순히 number, string이라면 무슨 숫자인데? 무슨 문자열인데? 라는 의문이 생길 수 있는데 type에 이름을 붙혀 더 세세한 정보를 제공한다.

사용 방식 2. 객체 타입을 생성하는 방법

사용방식은 type 타입이름 = { 속성명 : 데이터타입 }으로 작성한다.

// type alias 미사용
const person: object = {
  name: "Yun",
  age : 25,
  address : "seoul",
}

// type alias 사용
type PersonInfo = {
  name : string;
  age : number;
}
const person: PersonInfo = {
  name : "Yun",
  age : 25,
}

일반 객체의 타입을 object로 설정하면 내부 속성들은 모두 타입 추론을 통해 타입이 지정된다. 이는 잘못된 타입이 설정될 수 있으며 사용자가 직접 타입을 하나 하나 설정할 수 없다.

때문에 type alias를 통해 객체 타입을 설정하여 객체의 속성을 지정해 줘야한다.

사용 방식 3. 타입을 합치는 방법

사용 방식은 type 타입1 = 타입2 & 타입3 & { 타입1의 내용 }처럼 &를 통해 합칠 수 있다.

type Year = { month : 12 }
type Month = Year & { day : 30 }
type Day = Month & { hour : 24 }

const day : Day = {
    month : 12,
    day : 30,
    hour : 24,
}
// 만약 month or day or hour 중 하나라도 빠지면 타입 에러 발생

type Year = { month : 12 }
type Month = Year & { day : 30 }
type Day = Month | { hour : 24 }

const day : Day = {
    //month : 12,
    //day : 30,
    hour : 24,
}
// 에러가 발생하지 않음

&와 |의 차이점

• 유니온을 사용할 경우 or 연산이 되어 month & day 또는 hour 중 하나만 있으면 에러가 발생하지 않는다.
• 인터섹션을 사용할 경우 and 연산이 되어 month & day & hour 모두 정의 되어야 에러가 발생하지 않는다.

2. Interface

인터페이스도 기본적으로 타입 별칭과 같이 타입에 이름을 부여합니다.

사용 방식 1. 객체 타입을 지정하는 방법

사용 방식은 interface { 속성명 : 데이터타입 }으로 작성한다.

// 단순 객체 생성
interface Person {
  name : string;
  age : number;
}

const person: Person = {
  name : "Yun",
  age : 25,
}

약간의 문법 차이가 있을 뿐 type alias와 유사하다.

사용 방식 2. 타입을 합치는 방법

사용 방식은 interface 타입1 extends 타입2, 타입3 { 타입1의 내용 }으로 작성한다.

interface R { r : "Red"; }
interface G { g : "Green"; }
interface B extends R, G{ b : "Blue"; color : string}

const rgb2: B = {
    r : "Red",
    g : "Green",
    b : "Blue",
    color : "삼원색",
}
// r, g, b, color 중 하나라도 빠지면 타입 에러 발생

extends도 &와 마찬가지로 and 연산을 하여서 하나라도 타입의 속성이 없다면 에러를 발생시킨다.

Type Alias와 Interface의 차이점

1. Type Alias는 타입을 값으로 갖고 Interface는 값으로 갖지 않는다.

type A = { a : string }
interface A { a : string }
// 때문에 interface는 할당연산자(=)를 사용할 수 없다

때문에 interface는 type a = string; 같은 기본타입에 별칭을 짓는 방법이 없다.

또한 타입에 커서를 올려 자세한 정보를 확인할 경우 type alias는 타입의 값을 보여주는데, interface는 interface 명만 표시한다.

2. Interface는 같은 이름으로 재선언과 확장이 가능하지만 Type Alias는 불가능하다.

// 확장 가능한 interface의 특징
interface UserInfo {
    id : string;
    password : string;
}
interface UserInfo {
    email : string;
}

const user: UserInfo = {
    id : "gameU",
    password : "passW",
    email : "user@abc.com",
}

이러한 확장성 때문에 interface를 선호하는 사람들도 있다.

3. Type Alias에서는 유니온(|) 타입을 사용할 수 있지만 Interface에서는 불가능하다.

4. Type Alias에서는 튜플 타입을 사용할 수 있지만 Interface에서는 불가능하다.

튜플이란 TS에서 새로 탄생한 데이터 타입으로 기존 JS의 배열 타입을 확장한 개념이다.

차이점 : 배열의 모든 특성을 유지한 채, 배열의 원소에 하나하나 타입을 지정한다. => 이를 통해 배열 원소의 수와 타입을 고정시킬 수 있다.

// 일반 배열
const userArr = ["Yun", 25, "y@abc.com", true]

// 튜플
const userTuple: [string, number, string, boolean] = ["Yun", 25, "y@abc.com", true]

Javascript의 확장된 개념으로 기존 Javascript에 type을 부여한 코드이다.

타입을 부여함으로써 얻을 수 있는 이점

1. 사전에 에러를 방지할 수 있다.

   • TypeScript의 핵심 기능으로 식별자에 명확한 타입을 부여함으로써 엉뚱한 데이터 타입이 들어가 예상치 못한 결과가 발생하는 것을 막을 수 있다.

   • 기본 타입 외에 더 세세한 타입 별칭을 붙히거나 여러 TypeScript 만의 기능을 사용하여 더 견고한 코드를 작성할 수 있다.

2. 코드의 자동 완성을 통한 생산성 증가

   • 명확한 타이핑을 함으로써 해당 데이터 타입에 존재하는 메서드나 속성을 자동완성으로 사용할 수 있게된다.

     • javascript에서는 a = 5, a.toString()을 사용하는 경우 toString은 자동완성이 되지 않는다. (a의 타입이 확실하지 않으므로)

     • 하지만 typescript에서는 a : number = 5로 a에 number라는 타이핑을 하면 Number의 메서드인 toString이 자동완성 목록에 나온다.

출처 : TypeScript 핸드북

TypeScript 프로젝트 환경 설정

TypeScript 프로젝트를 진행하기 위해 우선 설치해야하는 패키지들이 있다.

1. package.json 파일 생성 - node.js의 여러 라이브러리를 사용할 수 있는 환경이 된다.

   // npm을 통한 package.json 파일 생성
   npm init - y
   
   

// yarn이 설치되지 않았다면 우선 yarn 설치가 필요 npm install -g yarn

// yarn을 통한 package.json 파일 생성 yarn init -y

2. 패키지 매니저를 통해 TypeScript 설치

// npm 사용 (프로젝트 내에 설치, 글로벌은 -g 옵션 추가) npm i typescript

// yarn 사용 (프로젝트 내에 설치, 글로벌은 global 옵션 추가) yarn add typescript

>2까지의 과정을 통해 이제 `tsc` 명령어를 사용할 수 있게 된다.
>
`tsc`란 `typescript compiler`로 typescript를 javascript로 변환할때 사용하는 명령어다.
>
`tsc app.ts`를 실행하면 `app.js`로 컴파일됨

3. tsconfig.json 파일 생성

// npx 사용 (npx는 패키지 실행기로 tsc --init을 실행하여 tsconfig.json파일을 생성한다.) // 글로벌이 아니라 프로젝트 내에서만 typescript를 설치하였기 때문에 npx를 사용해야한다. npx tsc --init

// yarn 사용 yarn tsc --init

모든 과정이 성공했다면 무사히 typescript 프로젝트가 생성된 것이다.


## tsconfig.json

tsconfig.json에는 typescript에서 javascript로 변환될때 설정이 담겨있다.

기본설정은 javascript를 그대로 typescript로 옮겨도 작동될만큼 유연하게 설정되어있는데, 이러면 의미가 없다.

대표적인 설정들을 몇가지 살펴보고 바꿔보겠다.

>
1. strict : typescript의 엄격한 문법을 따를지 설정한다. `true로 설정 권장`
2. noImplicitAny : Any 타입을 사용하지 않도록 설정한다. `true로 설정 권장`
3. noImplicitThis : This 타입을 사용하지 않도록 설정한다. `true로 설정 권장`
4. allowJs : TS코드를 컴파일 할때 JS코드도 포함할지 설정한다. 
`기존의 js코드를 리팩토링하는 과정이라면 true 권장`
5. alwaysStrict : use strict 모드를 켤지 설정한다. `true로 설정 권장`
>
이외에도 많은 설정이 있는데 그때그때 추가해주면 된다.

이는 기본 터미널이 powershell일 경우 발생하는데

아래와 같은 과정으로 해결할 수 있다.

1. PowerShell을 관리자 권한으로 실행한다.

2. get-help Set-ExecutionPolicy 명령어를 실행하고 Y를 입력한다. (powerShell의 실행 정책에 관한 설정 권한을 얻는다.)

3. Set-ExecutionPolicy RemoteSigned 명령어를 실행하고 Y를 입력한다. (스크립트의 실행 권한을 Yes로 설정하는 과정이다.) 설명과 같이 악의적인 스크립트를 실행할 경우 문제가 발생할 수 있으므로 실행 권한을 바꾼후에는 보안에 주의해야한다.

출처 블로그

1. 문제를 이해

  1-1. 나만의 방식으로 문제를 이해하여 정리하자.
  1-2. 조건을 정확히 이해하고 정리하자.
  1-3. 문제의 입력값과 어떤 출력값이 필요한지 파악하자.

2. 구체적인 예시를 탐색

2-1. 간단한 예시부터 복잡한 예시 순으로 넣어보자.
2-2. 빈 값과 유효하지 않은 값등 예외케이스를 넣어보자.
2-3. 이때 넣어본다는 의미는 완성된 코드에 넣는다는 것이 아닌 머리속으로 넣어본다는 의미이다.

3. 문제를 세분화

3-1. 문제를 이해했다면 단계별 수행할 작업을 명시적으로 표시하자.(수도코드)
3-2. 만약 코딩테스트에서 시간이 부족해 통과하지 못했다면 이러한 단계를 명시한 것이 도움이 될 수있다.

4. 문제를 해결, 단순화

4-1. 만약 해결 가능하다면 바로 문제 해결을 시작하고,
4-2. 해결법이 떠오르지 않는다면 세분화하며 간단한 구현부터 시작하자.

5. 문제를 복습 및 재구성

5-1. 위에서 해결한 문제는 해결을 위한 방법이였다.
5-2. 이를 리팩토링하여 코드를 정리하고 효율적으로 만드는 것이 실력향상의 지름길이다.

통용적인 해결 패턴이 없는 경우의 풀이 예시

문제링크

1. 문제 이해

• 로또 번호와 당첨 번호 리스트가 입력값으로 주어진다.
• 이때 로또 번호는 (숫자, 0)으로 이루어져있다.
• 당첨 번호별 등수가 주어진다. (6개 당첨 => 1등)
• 0은 조커로 무조건 당첨될 수 있고, 무조건 낙첨될 수 있다.
• 이때 최대 당첨 등수와 최저 당첨 등수 순으로 배열을 만들어 출력하라.
• 6 -> 1등, 5 -> 2등 ... 1 -> 6등, 0 -> 6등으로 6등과 매칭되는 당첨 번호 개수는 2개이다.(주의점)

2. 구체적인 예시를 탐색

• 보통 테스트 케이스에 명시된 예시를 사용하여 문제에 대입해 본다.
  • 나의 로또 번호([44, 1, 0, 0, 31, 25]), 당첨 로또 번호([31, 10, 45, 1, 6, 19]) 일때, 0이외에 당첨 개수는 [1, 31]이므로 [0,0]을 모두 당첨으로 따지면 4개 당첨(3등), [0,0]을 모두 낙첨으로 따지면 2개 당첨(5등)이다. => [3,5]
• [0,0,0,0,0,0]을 입력한다면 0이 모두 당첨일경우 1등, 0이 모두 낙첨일 경우 6등이므로 [1,6]이 return되어야 한다.
• 입력값은 항상 길이가 6인 0이상 45이하의 정수 배열이므로 빈배열은 들어갈 수 없다.

3. 문제를 세분화

• 우선 주어진 로또 번호에서 0 이외에 몇개가 당첨번호와 일치하는지 구해야한다.
• 주어진 로또 번호에서 0의 개수를 구하여 위에서 구한 일치한 당첨번호 개수와 더한 뒤 최대 당첨 번호의 개수를 구한다.
• 0의 개수를 더하지 않은 개수는 최저 당첨 개수이다.
• 문제에서 주어진 당첨번호 개수별 당첨 등수를 통해 당첨 등수를 구한다.
  • 이때 당첨번호 1개, 0개는 모두 6등으로 취급하여야 한다.(주의점)

4. 문제 해결

• 해결법을 통해 문제를 해결한다.

  function solution(lottos, win_nums) {
   var answer = [];
   let correctNumCount = 0;
   let zeros = 0;
  
     // 문제 세분화를 코드에 수도코드식으로 적고 해결하자.
     // 주어진 로또 번호에서 0을 제외한 당첨 번호의 개수를 저장한다.
   lottos.map((num) => win_nums.includes(num) ? correctNumCount += 1 : correctNumCount)
     // 주어진 로또 번호에서 0의 개수를 저장한다.
   lottos.map((num) => (num === 0) && (zeros += 1))
  
     // 0을 제외한 당첨 번호에 맞는 등수를 저장한다.
   const low = 7-correctNumCount <= 5 ? 7-correctNumCount : 6;
     // 0을 포한한 당첨 번호에 맞는 등수를 저장한다.
   const high = low-zeros <= 1 ? 1 : low-zeros;
  
   answer = [high, low];
  
  

return answer;

}

#### 5. 문제 복습 및 리팩토링
 - 위에 코드는 실제 문제를 처음 봤을때 내가 짠 코드이다. 
 그런데 가독성이 좋지 않고 복잡하게 구현한 점과 줄일 수 있는 for문이 있었다. (2N을 N으로 줄인것이라 큰 의미는 없다.)

```javascript
function solution(lottos, win_nums) {
    var answer = []
    let minSameCnt = 0;
    let maxSameCnt = 0;

      // 최소 당첨 개수에 0을 제외한 당첨 번호를 넣고, 최대 당첨 개수에 0을 합한 당첨 번호를 넣는다.
    lottos.forEach(e => {
      if(win_nums.includes(e)){
        minSameCnt++;
      };
      if(win_nums.includes(e) || e===0){
        maxSameCnt++;
      }
    })

      // 최대 당첨 개수와 최소 당첨 개수를 통해 당첨 등수를 구한다. 
    topRank = (7 - maxSameCnt === 7) ? 6 : 7-maxSameCnt; 
    lowRank = (7 - minSameCnt === 7) ? 6 : 7-minSameCnt;

    answer = [topRank, lowRank]

    return answer;
}

• 앞서 주어진 로또 번호에서 0의 개수를 구하여 위에서 구한 일치한 당첨번호 개수와 더한 뒤 최대 당첨 번호의 개수를 구한다., 0의 개수를 더하지 않은 개수는 최저 당첨 개수이다.의 부분을 하나의 for문으로 처리하였다.

• 최대 등수와 최저 등수의 로직을 동일하게 구현하여 가독성을 높혔다.

2. 통용적인 해결 패턴이 있는 경우

Grid, DFS, BFS, Divide And Conquer, Dijkstra 등등 통용적인 해결 패턴이 있는 경우

=> 관련 문제를 많이 풀고 알고리즘을 이해하는 노력이 필요하다.

Javascript에서 자료형(Data Type)은 기본형과 참조형 두가지로 나눌 수 있습니다. 앞서 작성한 데이터 타입에서 자세히 다뤘으니 간단하게 짚고 넘어가겠습니다.

기본형(Primitive Data Type)의 특징과 종류

• 한번에 하나의 값 만 가질 수 있습니다.
• 하나의 고정된 메모리 공간을 이용합니다.
• 종류에는 Number, String, Boolean, Undefined, Null 등이 있습니다.

참조형(Non-Primitive DataType)의 특징과 종류

• 한번에 여러 값을 갖을 수 있습니다.
• 여러개의 고정되지 않은 동적인 메모리 공간을 이용합니다.
• 종류에는 Object, Array, Function 등이 있습니다.

얕은 복사

얕은 복사는 참조형에서만 발생하며 참조형의 프로퍼티들이 담긴 주소를 복사합니다.

즉 '값을 담은 주소'를 복사해서 '값'이 변해도 '값을 담은 주소'는 그대로이므로 원본데이터와 복사한데이터의 값이 같이 변합니다.

그림으로 설명하면 obj2 = obj1에서 obj2는 obj1의 프로퍼티들이 담긴 주소 @2000~을 가리키는 주소 @1000을 복사합니다.

let obj1 = {
  a : 10,
  b : 'abc'
};
obj2 = obj1

console.log(obj2 === obj1)         // true
console.log(obj2.a === obj1.a)     //true

obj2.a = 20;
console.log(obj1.a)             // 20

때문에 복사한obj2의 프로퍼티를 변경하면 obj1의 프로퍼티도 변하고, obj2와 obj1을 비교하면 같다고 나옵니다.

이렇게 복사한 값이 원본 데이터를 변경하면 매우 큰 문제가 발생할 수 있으므로 상황에 따라 깊은 복사를 사용해야 합니다.

깊은 복사

깊은 복사는 기본형과 참조형에서 약간 다르게 복사해야합니다.

기본형에서는 값에 직접 연결된 주소를 복사하므로 그 자체가 깊은 복사입니다. 참조형에서는 '값을 담은 주소'를 원본데이터와 다른 메모리 주소로 복사해야합니다.

Javascript에서는 값을 서로 다른 새로운 값으로 재할당하면 새로운 메모리 주소로 배치합니다. (같은 값은 같은 주소를 사용함)

기본형의 깊은 복사

기본적으로 기본형 데이터타입의 복사는 깊은 복사를 합니다.

그림을 살펴보면 a를 복사한 b는 값 100을 가리키는 주소 @1001을 복사합니다. 즉 값(100)의 주소(@1001)를 복사합니다.

let a = 100;
b = a;

console.log(a === b);     // true
b = 200;

console.log(a);            // 100
console.log(a === b);     // false

그리고 기본형은 값의 주소를 복사할 경우 식별자에 새로운 값을 할당할 시 새로운 값의 주소를 메모리에 연결합니다.

참조형의 깊은 복사

이제 중요한 참조형의 깊은 복사를 알아보겠습니다.

이론적으로 얕은 복사에서 원본 참조형과 복사된 참조형이 같이 변경되는 이유는 같은 주소값을 바라보기 때문입니다.

즉, 간단하게 생각하면 같은 값을 담은 주소값(아래 그림에선 @1000)를 참조하지 않으면 됩니다. 그림에선 obj1과 obj2가 서로 다른 주소값을 가리킵니다.

이때 obj2.a의 값을 변경하면 아래 그림처럼 obj1.a의 값은 변하지 않게 됩니다.

이러한 생각을 갖고 참조형의 여러 깊은 복사를 살펴보겠습니다.

직접 재귀 함수를 통해 깊은 복사 함수 구현

위의 이론을 토대로 직접 깊은 복사를 구현해보겠습니다.

const copyObjectDeep = (obj) => {
  if(obj === null || typeof obj !== "object"){
    return obj;
  }

  let copyResult = {}
  for (let prop in obj){
    copyResult[prop] = copyObjectDeep(obj[prop]);
  }
  return copyResult;
}

const obj = {
  a: 10, 
  b: {
      c: null,
    d: [1, 2]
  },
};
const obj2 = copyObjctDeep(obj);
console.log(obj === obj2)     // false

obj2.a = 1000;
console.log(obj, obj2);     // {a: 10, b: {…}} {a: 1000, b: {…}}

obj2.b.c = 200;
console.log(obj.b, obj2.b);    // {c: null, d: Array(2)} {c: 200, d: {…}}

앞선 이론처럼 재귀함수를 통해 원본 객체 obj의 모든 프로퍼티를 복사하여 새로운 객체 result에 넣었습니다.

즉, 완전히 다른 주소를 참조하는 깊은 복사를 하였습니다.

때문에 복사된 obj2의 프로퍼티를 변경해도 원본 객체에 영향을 주지 않습니다.

JSON를 활용한 깊은 복사

원리는 객체를 JSON.stringify() 메서드로 문자열로 전환했다가 다시 JSON.parse() 메서드를 통해 문자열을 객체로 변환하는 것입니다.

이렇게 하면 기존과 값만 같을 뿐 새로운 주소를 갖게되므로 이론상 깊은 복사를 합니다.

const copyObjectUsingJSON = (obj) => {
  return JSON.parse(JSON.stringify(obj));
}

const obj = {
  a: 10, 
  b: {
      c: null,
    func1 : function () { console.log("함수"); },
  },
  func2 : function () { console.log("함수2"); },
};

const obj2 = copyObjectUsingJSON(obj);
console.log(obj === obj2)     // false

obj2.a = 1000;
console.log(obj, obj2);     // {a: 10, b: {…}} {a: 1000, b: {…}, func2: f}

obj2.b.c = 200;
console.log(obj.b, obj2.b);    // {c: null, func1: ƒ} {c: 200}

JSON을 사용해 깊은 복사를 사용하는 것은 몇가지 주의사항이 있습니다.

1. function, _proto_, getter/setter 같이 JSON으로 변경 불가능한 프로퍼티는 모두 무시합니다.

2. 다른 방법에 비해 처리 속도가 느립니다.

spread 연산자를 사용한 깊은 복사

spread 연산자 ...obj를 사용해도 참조형의 깊은 복사를 할 수 있습니다.

const obj = {
  a: 10, 
  b: {
      c: null,
    func1 : function () { console.log("함수"); },
  },
};

const obj2 = {...obj};
console.log(obj === obj2)     // false

obj2.a = 1000;
console.log(obj, obj2);        // {a: 10, b: {…}} {a: 1000, b: {…}} 

obj2.b.c = 200;
console.log(obj.b, obj2.b); // {c: 200, func1: ƒ} {c: 200, func1: ƒ}

spread 연산자를 사용하면 매우 간단하게 깊은 복사를 할 수 있지만

예제코드에서도 확인할 수 있듯이 큰 문제점이 있습니다. spread 연산자를 통한 깊은 복사는 중첩된 객체에서는 얕은 복사를 한다는 점 입니다.

때문에 상황에 맞게 잘 사용해야 합니다.

lodash 모듈의 cloneDeep을 사용한 깊은 복사

직접 구현하기엔 귀찮고, JSON을 사용하기엔 function같은 자료형을 복사하지 못하고, spread 연산자를 사용하자니 중첩 객체를 깊은 복사하지 못합니다.

이런 우리를 위해 나온 좋은 모듈이 있습니다. lodash 모듈의 cloneDeep() 메서드를 활용하면 됩니다.

// 먼저 lodash 모듈을 설치해줍니다.
& npm i lodash

const lodash = require("lodash");

const obj = {
  a: 10, 
  b: {
      c: null,
    func1 : function () { console.log("함수"); },
  },
};

const obj2 = lodash.cloneDeep(obj);
console.log(obj === obj2)     // false

obj2.a = 1000;
console.log(obj, obj2);        // {a: 10, b: {…}} {a: 1000, b: {…}} 

obj2.b.c = 200;
console.log(obj.b, obj2.b); // {c: null, func1: ƒ} {c: 200, func1: ƒ}

지금까지 알아본 방법 중 가장 간단하고 단점이 없는 방법인 것 같습니다.

깊은 복사를 하려면 lodash를 사용해야할 듯 합니다.!

forEach

forEach : 배열을 순회하는 간단한 내장함수

const array = ['a', 'b', 'c', 'd'];

array.forEach((param) => console.log(param)); // a, b, c, d

내장함수 forEach는 push, pop, shift, unshift 등을 함께 사용하여 더 유용하게 사용할 수 있습니다.

const array = ['a', 'b', 'c', 'd'];
const newArray = [];

array.forEach((param) => newArray.push(param + param));

console.log(newArray);  // ['aa', 'bb', 'cc', 'dd']

map

map : 원본 배열을 순환하며 각각 모든 요소마다 콜백함수를 실행하고 return값을 반환

forEach와 비슷하지만 return을 반환하기 때문에 변수에 대입을 할 수 있습니다.

const array = ['a', 'b', 'c', 'd'];

const newArray = array.map((param) => {return param + param + param;})

console.log(newArray); // ['aaa', 'bbb', 'ccc', 'ddd']

includes

includes : 임의의 값이 주어진 배열에 존재하는지 판단 (true, false)

const array = ['a', 'b', 'c', 'd'];
let str = "b";

console.log(array.includes(str));    // true

indexOf

indexOf : 임의의 값이 주어진 배열의 몇번째에 존재하는지 반환. (없으면 -1)

indexOf가 첫번째값 즉, 0을 반환시 False처리가 되는 경우가 있어 (0은 falsy) 이를 보완하기 위해 includes가 등장하였습니다.

const array = ['a', 'b', 'c', 'd'];
let str = "b";

console.log(array.indexOf(str));    // 1

findIndex

findIndex : 조건에 맞는 배열의 인덱스 번호를 반환

const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(arrObj.findIndex((value) => { 
  return value.color === "pink";    // 3
}));

find

find : 조건에 맞는 배열의 요소를 반환

const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(arrObj.find((value) => {
  return value.color === "pink";    // {color : pink}
}));

filter

filter : 조건에 따라 배열내에서 true를 반환하는 모든 요소 반환

const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(arrObj.filter((value) => value.color === "blue"))    // [{color: 'blue'}, {color: 'blue'}]

slice

slice : 조건에 맞게 배열의 요소를 자르는 메서드

const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(arrObj.slice(0,3));    [{color: 'red'}, {color: 'blue'}, {color: "green"}]

concat

concat : 두개의 배열을 합치는 메서드

const array = ['a', 'b', 'c', 'd']
const arrObj = [
  {color : "red"},
  {color : "blue"},
  {color : "green"},
  {color : "pink"},
  {color : "blue"}
]

console.log(array.concat(arrObj)); // ['a', 'b', 'c', 'd', {…}, {…}, {…}, {…}, {…}]

sort

sort : 원본 배열의 순서를 사전순으로 정렬

const engs = ['d', 'e', 'a', 'c', 'b'];

engs.sort();

console.log(engs);  //['a', 'b', 'c', 'd', 'e']

하지만 숫자를 정렬할 시 숫자를 문자로 취급하여 1, 12, 2, 233, 3 처럼 정렬합니다.

const numbers = [3,124,23,5,46,345,32,12,3,41,24,2];

numbers.sort();

console.log(numbers); //[12, 124, 2, 23, 24, 3, 3, 32, 345, 41, 46, 5]

// 때문에 비교함수를 만드는 사전 작업이 필요함
const compare = (num1 , num2) => {
  if (num1 > num2){
    // numb1 이 num2 보다 크다면 num1을 num2보다 뒤로 보냄
    return 1;   
  };
  if (num1 < num2){
    // numb1 이 num2 보다 작다면 num1을 num2보다 앞으로 보냄
    return -1;
  };
  return 0;
};
numbers.sort(compare);
console.log(numbers);   //[2, 3, 3, 5, 12, 23, 24, 32, 41, 46, 124, 345]

join

join : 배열의 값을 이어서 출력해주는 메서드

const strings = ["안녕하세요", "자바스크립트", "es6", "이후", "공부중입니다."];

console.log(strings.join(" ")); // 안녕하세요 자바스크립트 es6 이후 공부중입니다.

1. 함수 선언문 function func1() {}

2. (익명) 함수 표현식 const func2 = function() {};

3. 화살표 함수 const func3 = () => {};

함수 선언문과 함수 표현식은 앞서 코어 자바스크립트책에서 정리한 적이 있으므로 화살표함수에 대해 알아보겠습니다.

화살표 함수의 특징

화살표 함수는 항상 익명이기 때문에 재사용하기 위해선 함수 표현식 방식으로 작성해야합니다.

하지만 재사용을 하지 않는 경우 함수 선언문방식 으로도 작성할 수 있습니다.

때문에 용도에 맞춰 두가지 방식의 사용법을 알아보겠습니다.
1. 화살표함수를 재사용할 경우 var/let/const 함수명 = (매개변수) => {실행문}

// 기본형
const func1 = (a, b) => { return console.log(a,b) };

// 매개변수가 1개인 경우 () 생략가능
const func2 = a => { return console.log(a) };

// 1개의 실행문만 갖는 경우 {} 생략가능
const func3 = (a, b) => console.log(a,b);

이 경우에는 함수명을 통해 화살표 함수를 불러와 재사용할 수 있습니다.

2. 화살표 함수를 재사용하지 않을경우

기본적으로 화살표 함수를 단독으로 함수 선언문방식으로 사용할 순 없습니다.

function (a,b) => { return console.log(a,b); };  // Uncaught SyntaxError: Function statements require a function name

오류 메세지에 나와있듯 function name이 필요하기 때문입니다.

하지만 재사용이 필요하지 않은 콜백함수에 사용할 경우 유용하게 사용할 수 있습니다.

const array = ['a', 'b', 'c'];

array.forEach((value) => console.log(value + value)); // aa bb cc

만약 화살표 함수를 사용하지 않고 함수 선언문으로 작성할 경우

const array = ['a', 'b', 'c'];

array.forEach(function (value) {
  console.log(value + value);
}); // aa bb cc

이처럼 코드의 가독성이 떨어지게됩니다. (간단한 예제라 별 차이가 없지만 긴 코드에서는 더 복잡해집니다.)

3. 화살표 함수 사용할 수 없는 경우

1. 객체의 메소드를 정의하는 경우(사용할 순 있지만 권장하지 않음) 화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다. (아래 자세히 설명)

2. prototype에 메소드를 할당하는 경우 화살표 함수는 prototype 속성이 없습니다.

   var Foo = () => {};
   var foo = new Foo(); // TypeError: Foo is not a constructor

3. 생성자 함수로 사용하는 경우 화살표 함수는 생성자로서 사용될 수 없으며 new와 함께 사용하면 오류가 발생합니다.

   var Foo = () => {};
   var foo = new Foo(); // TypeError: Foo is not a constructor

==> 화살표 함수를 사용할때 자주 하는 실수를 잘 정리한 블로그

화살표 함수의 this

일반 함수나 메서드는 자신이 호출될때 생성된 실행 컨텍스트에 this binding 정보를 생성합니다.

하지만 화살표 함수는 호출될때 this binding을 하지 않습니다. 쉽게말하면 누가 자기를 호출한지 알지 못합니다.

때문에 화살표함수는 자체적으로 호출되는 시점과 무관하게 화살표 함수가 선언되어 있는 실행 콘텍스트가 참조하는 thisBinding 정보를 참조합니다.

즉, 항상 자신의 상위 스코프의 this를 가리키는 것입니다.

예제를 통해 살펴보겠습니다.

// 일반 함수로 작성한 메서드
var name = 'yun';
var info = {
    name : 'kim',
    getName : function(){
        console.log(this.name);
    },
};
info.getName();     // 'kim'
// .을 기준으로 getName의 상위 스코프인 info를 this로 바인딩하여 'kim'이 출력된다.

var name2 = 'yun';
var info2 = {
    name2 : 'kim',
    getName: () => console.log(this.name),
};
info2.getName();     // 'yun'
// this가 정적으로 바인딩되어 info의 상위 스코프인 window를 가리키고 'yun'이 출력된다.

메서드로 화살표함수를 사용한 두번째 예제는 화살표함수가 선언되어 있는 실행 컨텍스트 ==> 즉, info2의 실행 컨텍스트의 this를 가리킵니다.

때문에 info2의 상위 스코프인 window를 this가 가리키고 window.name인 'yun'이 호출됩니다.

블록 레벨 스코프, 함수 레벨 스코프, 호이스팅 등의 차이를 알아보기 이전에 코드를 작성할 때 왜 const와 let을 사용하는지 배워보겠습니다.

const를 사용하는 이유

결론부터 말하자면 대부분의 경우에 const를 사용하는 것이 좋습니다.

const는 가장 많은 제약이 있고 이는 코드를 쉽게 이해할 수 있게 만듭니다.

왜 가장 기능이 적은 const가 코드를 쉽게 만든다는 것 일까요?

한번 값을 할당하면 재할당이 불가능하다는 const의 성질은 코드를 훑어보는 개발자가 const로 선언된 변수를 신경쓰지 않도록 만듭니다.

두가지 예제를 살펴보겠습니다.

// var 선언
var salePercent = 0.2;
var totalPrice = 100 - (100 * salePercent);
// 200행의 코드 생략
return `총 구매 금액은 ${totalPrice}입니다.`;

// const 선언
const salePercent = 0.2;
const totalPrice = 100 - (100 * salePercent);
// 200행의 코드 생략
return `총 구매 금액은 ${totalPrice}입니다.`;

만약 var로 선언된 코드를 읽는다면 생략된 200줄의 코드에서 salePercent가 변경되는 부분이 있는지 꼼꼼히 읽어봐야합니다.

하지만 salePercent가 const로 선언된다면 200줄의 코드에서 salePercent가 변경될 일이 없기 때문에 해당 변수는 신경쓰지 않아도 됩니다.

이러한 가독성과 코드의 이해력을 높히기 위해 재할당이 필요없는 변수는 const를 사용하길 권장합니다.

const 사용시 주의사항

앞서 const는 재할당이 불가능한 변수라고 설명했습니다. 하지만 const에 할당된 값이 불변값이 되는 것은 아닙니다.

모순되는 말처럼 들릴 수 있지만 이전 데이터 할당 포스트를 보면 이해를 도울 수 있습니다.

기본적으로 자바스크립트는 배열이나 객체를 할당할때 객체나 배열의 프로퍼티의 주소를 변수에 할당하므로 const로 선언한 변수 자체를 변경하는 것이 아닌 변수의 주소와 연결된 프로퍼티는 변경 가능한 것입니다.

조금 어려운 부분인데, 요약하자면 const에 배열 또는 객체를 선언할 경우 내부 프로퍼티는 변경 가능하기 때문에 const값을 확신할 수 없다는 것 입니다.

let을 사용하는 이유

앞서 변수를 다룰 때는 재할당을 피하는 것이 낫다고 배웠습니다. 하지만 재할당이 필요할 경우 let을 사용해야 합니다.

var이 아닌 let을 사용하는 이유는 무엇일까요?

var은 함수 레벨 스코프, let은 블록 레벨 스코프이기 때문입니다. (스코프에 관한 글)

왜 블록 레벨 스코프를 사용해야 하는지 예제를 통해 알아보겠습니다.

//var 사용
const item = {
    inventory: 3,
    price: 3,
    salePrice: 2,
    saleInventory: 0,
  };

function getLowestPrice(item) {
    var count = item.inventory;
    var price = item.price;

    if (item.salePrice) {
      var count = item.saleInventory;
      if (count > 0) {
        price = item.salePrice;
      }
    }

    if (count) {
      return price;
    }

    return 0;
  }

의도대로 함수 결과를 출력한다면 saleInventory가 0이므로 정상적인 가격 Price(2)를 출력해야 합니다.

하지만 var는 함수 레벨 스코프이므로 var count = item.inventory;의 count를 if문 내의 var count = item.saleInventory;에서 재할당합니다.

때문에 if (count) { return price; }에서 count를 0으로 인식하여 return 0을 반환한 것 입니다.

//let 사용
const item = {
    inventory: 3,
    price: 3,
    salePrice: 2,
    saleInventory: 0,
  };

function getLowestPrice(item) {
    let count = item.inventory;
    let price = item.price;

    if (item.salePrice) {
      let count = item.saleInventory;
      if (count > 0) {
        price = item.salePrice;
      }
    }

    if (count) {
      return price;
    }

    return 0;
  }

하지만 let을 사용하면 각각의 변수를 블록 레벨 스코프로 인식하여 let count = item.inventory;의 count와 if (item.salePrice) 내의 count와 다른 변수로 인식하여 앞서 생긴 버그를 해결합니다.

블록 레벨 스코프에서는 내부 블록에서 외부 블록의 변수를 사용할 수 있지만, 외부 블록에서는 내부 블록의 변수에 접근할 수 없습니다.

이 외에도 let은 유효범위 내에서 같은 변수명을 재사용할 수 없다는 장점도 있습니다.

const, let, var의 차이점

앞서 const와 let을 사용하는 이유에서 몇몇 차이점을 언급했지만 다시 정리해보겠습니다.

1. var은 함수 레벨 스코프이고 const,let은 블록 레벨 스코프입니다.

2. var은 유효범위 내에서 이미 선언한 변수명과 같은 변수를 선언할 수 있지만, let과 const는 이미 존재하는 변수와 똑같은 변수를 선언할 수 없습니다.

3. var와 let은 변수 선언시 초기 값을 할당하지 않아도 되지만 const는 항상 초기값을 할당하여 선언해야합니다.

4. var은 선언하고 값을 할당하기 전에 사용하면 undefined값을 반환하지만, const, let은 선언하고 값을 할당하기 전에 사용하면 에러를 발생시킵니다.(TDZ)

5. var, let은 할당된 값을 변경할 수 있지만 const는 할당된 값을 변경할 수 없습니다.(하지만 const가 배열또는 객체일 경우 내부 프로퍼티는 변경할 수 있습니다.)

⁂ TDZ : Temporal Dead Zone의 약자로 var과 달리 let과 const는 호이스팅 시 자동으로 부여되는 초기값이 없어 TDZ구간에서 let과 const로 선언된 변수를 사용시 에러가 발생됩니다.

정리하자면 최대한 const변수를 사용하고 재할당이 필요한 경우 let을 사용합시다! (var은 안됩니다(˘･_･˘))

BEM(Block Element and Modifiers)은 클래스 이름을 짓는 규칙을 의미합니다.

좀더 쉽게 읽히는 CSS를 사용하기 위해 만들어진 규칙입니다.

🤔그렇다면 정확히 어떤 규칙을 의미하는것 일까요?

이름에서 볼 수 있듯이 Block과 Element, Modifiers로 이루어진 이름을 짓는 규칙입니다.

Block, Element, Modifiers로 이루어진 이름이라... 잘 감이 오지 않습니다.

우선 간단한 예제를 통해 알아보겠습니다.

<style>
  <!--blcok-->
  .btn {}

  <!--Element : block에 속한 하위 element-->
  .btn__text {}

  <!--Modifiers : block에 속성을 부여하는 의미-->
  .btn--big {}
  .btn--blue {}
</style>

<button class="btn btn--big btn--blue">
  <span class="btn__text">
  </span>
</button>

약간 예제를 보니 감이 오지 않나요?

• 상위 블록은 평소대로 이름을 작성한다.

• 상위 블록에 속하는 하위 element는 상위블록이름__element이름으로 표현한다.

• 상위 블록의 속성들은 상위블록이름--modifiers이름으로 표현한다.

간단하게 이렇게 정리할 수 있습니다.

세부적인 규칙

위에서 전체적인 BEM의 규칙을 살펴봤습니다.

그런데 이외에도 세부적으로 알아야할 규칙들이 있습니다.

1. 상위 블록의 하위 element는 모두 상위 블록의 하위 element로 작성한다.

이게 무슨말인가 싶기도 합니다.

예제를 보면 좀 더 쉽게 이해할 수 있습니다.

<div class="first-block">
  <div class="first-block__first-element">
    <!--<div class="first-block__first-element__second-element> ==> 틀린 표현입니다.-->
    <div class="first-block__second-element">
    </div>
  </div>
</div>

이처럼 상위 블록 내의 하위 element의 depth level이 다르더라도 모두 상위 블록의 직계 하위 element처럼 표현합니다.

2. 상위 블록의 내부에 정의된 class라도 상위 블록과 연관이 없다면 element(__)로 표현하지 않는다.

<div class="header">
  <div class="header__inner">
    <div class="tabzilla"></div>
    <div class="header__logo"></div>
    <div class="nav"></div>
    <div class="header__search"></div>
  </div>
</div>

모두 상위 block인 header에 묶인 element들입니다.

하지만 중간중간 tabzilla, nav가 눈에 띄네요

이들은 다른곳에도 쓰이는 component CSS라서 element가 아닌 block으로 취급하는것 같습니다.

이처럼 BEM을 사용하면

1. 클래스의 이름만으로 구조와 역할을 파악할 수 있습니다.

2. 검색과 유지보수가 쉬워집니다.

3. 중복으로 사용되는 .div, .header, .main등을 구분하지 않고 유니크한 클래스명으로 style을 작성할 수 있습니다.

하지만 단점도 존재합니다.

1. .btn 하나를 .btn--color, .btn--size등으로 나누면 관리할 내용들이 많아집니다.

2. .first-block__second-element 같이 클래스명이 매우 길어집니다.

https://nykim.work/15 ==> BEM에 대해 정말 잘 정리된 블로그입니다!

이번에는 이 방법들에 대해 알아보겠습니다.

transition

transition : 어떤 조건일때 특정 상태에서 다른 상태로 "변화" 시키는 방법을 컨트롤합니다.

기본 구조는 transition : "변화시킬 속성" "변화할 시간" "변환방식"; 입니다.

예제를 통해 알아보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        a{
            background-color: aqua;
            color: teal;
            font-size: 50px;
            border-radius: 10px;
            text-decoration: none;
        }

        a:hover{
            background-color: teal;
            color: aqua;
        }
    </style>

    <title>Document</title>
</head>
<body>
    <a href="#">
        Hover Button
    </a>
</body>
</html>

이처럼 transition을 주지 않을 경우, hover 조건일때 a{} 상태에서 a:hover{} 상태로 효과 없이 변화하게 됩니다.

이제 transition을 적용한 경우를 살펴보겠습니다.

<style>
  a{
    background-color: aqua;
    color: teal;
    font-size: 50px;
    border-radius: 10px;
    text-decoration: none;

    transition: background-color 3s ease-in-out, color 3s ease-in-out;
  }

  a:hover{
    background-color: teal;
    color: aqua;
  }
</style>

이처럼 transition을 사용하면 변화를 컨트롤할 수 있습니다.

transition의 몇가지 특별한 사용방법에 대해 알아보겠습니다.

• transition : all "변화할 시간" "변환방식";을 사용하여 변화되는 모든 속성을 선택할 수 있습니다.

• transition : "변화시킬 속성" "변화할 시간" "변환방식", "변화시킬 속성" "변화할 시간" "변환방식", ... 이처럼 쉼표를 사용해 계속해서 이어 붙일 수 있습니다.

• transition은 state selector이 없는 곳에서 사용되어야 합니다. (예를 들면 .a:hover{}이 아닌 .a{}에 정의)

ease-in-out같은 "변환방법"은 이미 정의된 방법을 사용할 수 있고, 사용자가 직접 비율을 지정하여 사용할 수 있습니다.

이 사이트에서 여러 변환 방법과 예제를 확인할 수 있습니다.

transform

transform은 HTML 요소의 모양, 크기, 위치, 각도등을 자유롭게 변경시키는 속성입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;
        }
        img:first-child{
            transform: translateX(-100px);
        }
        img:nth-child(2){
            transform: rotate(0.5turn);
        }
        img:nth-child(3){
            transform: scaleY(2);
        }
        img:nth-child(4){
            transform: skew(30deg, 20deg);
        }
    </style>

    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
    <img src="img/gugu.jpg">
</body>
</html>

기본 이미지를 translate로 위치를 옮기거나 rotate로 돌리거나, scale로 늘리고 줄이거나, skew로 x, y각도로 기울일 수 있습니다.

그런데 그냥 transform만 사용하면 약간 밋밋합니다. transition를 곁들이면 더 이쁜 효과를 만들 수 있을 것 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;

            transition: transform 3s ease-in-out;
        }

        img:hover{
            transform: rotateX(0.5turn) translateX(400px);
        }
    </style>

    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
</body>
</html>

tranform과 transition을 같이 사용하니 그럴듯한 효과가 만들어졌습니다. (rotateX가 회전을 저렇게 하는진 상상도 못했는데 과정을 보니 새롭게 느껴지네요 ..)

transform 효과는 매우 많은 종류가 있는데 여기서 또는 여기서확인할 수 있습니다.

animation

지금까지 배운것들이 다 animation같은데 또 따로 animation이라는 개념이 나왔습니다.

차이가 무엇일까요?

transition으로 만든 효과는 항상 특정 조건(:hover, :active...)일때만 실행됐습니다.

이번에 배워볼 animation은 이를 보완하여 우리가 원하는 만큼, 원할때 실행할 수 있도록 도와줍니다.

animation은 keyframes를 사용하여 만드는데 기본 구조는 아래와 같습니다.

@keyframes animation-name{
  from {
    설정 효과;
  }
  to {
    설정 효과;
  }
#또는 0% {} 25% {} 50% {} 75% {} 100% {} 등도 있습니다. 
}

.class{
  animation : animation-name "설정 시간" "변환 효과" "변환 기간"
}

이제 실제로 animation을 사용한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 3px solid black;
            border-radius: 50%;

            animation : guImg 3s ease-in-out infinite;
        }

        @keyframes guImg {
            0%{
                transform : rotateY(0);
            }
            25% {
                transform: rotateY(0.25turn) scale(1.5);
                border-radius: 25%;
            }
            50% {
                transform: rotateY(0.5turn) scale(2);
                border-radius: 5%;
            }
            75% {
                transform: rotateY(0.25turn) scale(1.5);
                border-radius: 25%;
            }
            100% {
                transform: rotateY(0);
            }
        }
    </style>

    <title>Document</title>
</head>
<body>
    <img src="img/gugu.jpg">
</body>
</html>

state selector을 사용하지 않아도 animation이 잘 작동하는 것을 확인할 수 있습니다.

이처럼 animation을 사용하는 이유와 예제도 살펴봤습니다.

animation의 여러 방식을 소개한 사이트인데 매우 유용하므로 필요하면 사용하시면 됩니다!

커스텀 속성(custom property)은 개발자가 정의한 속성의 집합입니다.

개발자는 임의로 정한 이름의 속성에 임의의 값을 할당할수 있습니다.

임의로 정한 이름에 임의의 값을 할당한다.. 많이 익숙한 것 같습니다.

맞습니다. 변수의 사용과 유사합니다. (임의의 이름은 변수명, 임의의 값은 변수의 값으로 생각할 수 있습니다.)

즉 custom property는 CSS에서 변수를 사용할 수 있도록 만든 방법이라 생각하면 쉽습니다.

root{}

custom property를 설명하기 전에 root{}라는 개념을 알고 가야합니다.

root{} 란 문서 트리에서 가장 상위 요소를 의미합니다.

따라서 모든 CSS 파일에 적용할 CSS변수는 :root{}내부에 정의해야 합니다.

사용 방법은 매우 간단합니다.

임의의 CSS파일(어떤곳이든)에 :root{ }를 사용하면 됩니다.

custom property 사용법

앞서 custom property는 root{} 내부에 정의해야한다는 것을 배웠습니다.

이번엔 어떤식으로 정의하여 사용해야하는지 배워보겠습니다.

:root{
    --name : value;
}

기본적인 구조는 예제처럼 구현됩니다.

• --name : 커스텀 속성의 이름은 --로 시작되며 name은 사용자가 임의로 정의합니다.

• value : 커스텀 속성의 값은 css의 모든 속성 값(#24545a, flex, 10rem ...)이 들어갈 수 있습니다.

이제는 이렇게 :root{}에 구현한 custom property를 사용하는 방법을 알아보겠습니다.

:root{
  --yellow : #fae100;
}

.class-name{
    color : var(--yellow) tomato;
}

color : var(--yellow) tomato는 만약 root에서 --yellow가 정의되지 않았을 경우 tomato 색상을 정의하라는 의미로 예비속성을 주는 방법입니다.

custom property를 사용하는 이유

1. 중복된 height, width, margin.. 등의 값에 이름을 정의하여 알아보기 쉽게할 수 있고, 한번에 변경 가능하여 유지보수에 이점이 있습니다.

2. 예제처럼 #fae100 같은 색상에 이름을 부여하므로서 더 가독성과 일관성을 높힐 수 있습니다.

가상선택자(pseudo selector) 직접 id, class, tag를 사용하지 않고 세부적으로 엘리먼트를 선택하는 방법입니다.

정의를 봤을때 pseudo selector가 어떤것인지 와닿지 않아 몇가지 예제를 통해 알아보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</body>
</html>

예제에서 여러 div태그들을 개별적으로 다루기 위해선 어떻게 해야할까요?

1. div마다 id를 정의하고 css에서 style을 적용한다.
2. div마다 class를 정의하고 css에서 style을 적용한다.

이런 방식이 있습니다.

하지만 매번 하나의 태그마다 하나의 id나 class를 부여하는 것은 매우 비효율적입니다.

이때 pseudo selector을 사용할 수 있습니다.

<style>
    div:first-child{
            background-color: aqua;
    }
    div:nth-child(2n){
          background-color: tomato;
    }
</style>

이렇게 pseudo selector을 사용하여 특정 엘리먼트를 선택하여 style을 적용할 수 있습니다. (first:child, nth:child() 이외에도 수많은 pseudo selector이 있고 모두 외울필요는 없습니다!)

pseudo selector MDN ==> pseudo selector의 종류와 기능들을 알아보기 좋은 사이트입니다.

state selectors

state selectors도 위에서 설명한 가상선택자(pseudo selectors)의 한 종류입니다.

하지만 따로 설명하는 이유는 그만큼 많이 사용하기 때문이고 약간의 특이점이 있기 때문입니다.

F12를 통해 개발자도구를 들어가 확인해보면 Force element state라는 녀석들이 따로 존재합니다.

이 친구들은 css 이벤트에서 발생하는 element들입니다.

pseudo selectors로도 이 state selectors들을 제어할 수 있습니다.

자주 사용하는 state selectors

• :active : 보통 버튼과 링크에 사용되며 element가 활성화될때 지정된 style을 반환합니다. ('활성' 이란 마우스를 사용하는 경우 눌렀을때부터 ~ 떼는 시점까지를 의미)
• :hover : 포인팅장치(마우스)를 사용해 마우스가 해당 element의 위에 존재할 경우 지정된 style을 반환합니다.
• :focus : 클릭하여 대상을 지정한 동안 style을 반환합니다.

state selectors도 pseudo selectors의 일부이므로 MDN에서 자세한 태그와 예제를 확인할 수 있습니다.

attribute selectors

특성 선택자(attribute selectors)는 id나 class가 아닌 속성값을 통해 특정 element를 선택하는 방법입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <input type="text" required placeholder="id">
        <input type="password" placeholder="password">
        <input type="button" value="submit">    
    </form>
</body>
</html>

<style>
    input:required{
        background-color: tomato;
    }
    input[type="password"]{
        background-color: aqua;
    }
</style>

이처럼 id나 class가 아닌 속성값들을 통해 style을 지정하는 방법이 attribute selectors입니다.

관련 MDN 주소 : https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

combinators

연결자 혹은 결합자로 불리는 combinators는 선택자(selectors)들 사이의 관계를 설명하는 역할을 합니다.

combinators의 종류는 4가지가 있습니다.

1. 자손 결합자 (공백) : 자손 결합자는 지정된 태그의 자손을 모든 노드에서 검색하고 선택합니다. (div span은 <div> 태그 내에 위치한 모든 <span> 태그를 의미합니다.)

2. 자식 결합자 (>) : 자식 결합자는 지정된 태그의 직접적인 자녀만 선택합니다. (div > p는 <div>태그의 직계 자식에서만 <p>를 찾아 선택합니다.)

3. 인접 형제 결합자 (+) : 인접 형제 결합자는 지정된 태그와 같은 레벨의 인접 노드만 선택합니다. (div + p는 <div>태그의 인접 형제 중 가장 가까운 <p>태그를 찾아 선택합니다.)

4. 일반 형제 결합자 (~) : 인접 형제 결합자와 달리 같은 레벨의 모든 형제 노드들을 찾아 선택합니다.

7가지로 구성된 웹브라우저의 동작 과정을 살펴보면

1. User interface : 사용자에게 브라우저의 화면을 보여주는 부분 (웹 주소를 입력하면 user interface get)

2. Browser engine : 유저가 url을 입력하면 rendering engine으로 보내며 동작을 제어

3. Rendering engine : 요청 받은 주소를 networking 모델로 보내 서버에 요청

4. Networking : 서버에서 받아온 정보를 Rendering engine에게 보냄

5. Rendering engine : 서버로부터 받은 정보가 Js 파일이면 Js engine에게 해석 요청

6. JS engine : 요청 받은 정보를 파싱하여 HTML/CSS로 이루어진 Dom 파일을 Rendering engine에 보냄

7. Rendering engine : 받아온 Dom 파일들 하나하나를 객체화 하여(render object) Render Tree를 만듬

8. UI backend : 입력받은 Render Tree를 통해 UI backend에서 Dom 객체를 화면에 표시

Data storage : 쿠키나 캐쉬파일들을 저장함, 웹브라우저 동작과정에서 페이지 정보들이 쌓이며 이전에 했던 작업은 Data storage에서 꺼내씀 (Brower engine은 사실 Rendering engine에 url를 보내지 않고 Data storage에서 먼저 검색함)

2. Rendering engine process(렌더링 엔진 처리 과정)

과정 설명

HTML/CSS 파싱 => DOM tree 구축 => Render tree 구축 => Render tree 배치 => Render tree 그리기 => Display 출력

• [1] HTML 문서가오면 파싱하여 Dom Tree에 저장

• [2] CSS 문서가 오면 파싱하여 Style Rules에 저장

• [3] 만들어진 Dom Tree와 Style Rules를 합쳐 RenderTree에 저장

• [4] Render Tree의 (layout)배치를 위한 과정

• [5] UI backend에 요청하여 화면에 보여줌

가운데 정렬을 해도 어떤 박스는 제대로 되는 반면 어떤 박스는 그자리 그대로 있거나 길게 늘어집니다.

이번에는 박스 구조를 마음대로 구성할 수 있게 flexbox에 대해 배워볼것 입니다.

기본 display

flexbox를 배워보기 이전에 우선 기본적인 display인 block, inline, inline-block 박스에 대해 간단히 알아보겠습니다.

• block : <div>같은 block 태그를 통해 만들어지는 박스로 한 라인에 하나만 위치할 수 있습니다.

• inline : <span>같은 inline 태그를 통해 만들어지는 박스로 한 라인에 여러개가 위치할 수 있습니다. 특징으로는 높이와 너비(height, width)를 가질 수 없습니다.

• inline-block : block과 inline의 특징을 섞은 박스로 높이와 너비를 가질 수 있고 한 라인에 여러개가 위치할 수 있습니다.

과거에는 inline-block을 많이 사용했지만 유연하지 못하고 편의 기능이 부족하였고 이를 보완하기위해 개발된 것이 flexbox입니다.

flexbox

앞서 말했듯 flexbox는 정렬, 좌우 대칭, reverse, 행열 변경등 여러 기능을 지원합니다.

이를 사용하기 전에 flexbox의 세가지 주의사항부터 살펴보겠습니다.

1. 자식 엘리먼트에 적용하기 위해선 무조건 부모 클래스에 display : flex를 선언한다. (속성들도 부모클래스에서 적용한다.)
2. justify-content는 수평에서 적용되는 것이 아니라 주축에서 적용된다.
3. align-items는 수직에서 적용되는 것이 아니라 교차축에서 적용된다.

주의사항 1을 자세히 살펴보면

<body>
  <div></div>
  <div></div>
  <div></div>
</body>

앞서 display : inline, block, inline-block등은 적용을 원하는 해당 박스에 직접 선언하여 사용하였습니다. (<div display : inline>)

하지만 flex의 경우 자식 엘리먼트인 <div> 박스에 적용을 원할 경우 부모 엘리먼트에 선언하여 사용합니다. (<body display : flex>)

주의사항 2,3을 살펴보면

flex에는 주축과 교차축이라는 개념이 존재합니다.

기본적으로 주축은 row 즉, 수평으로 적용되어 있기 때문에 justify-content가 수평에서 정렬되고 align-items가 수직에서 정렬되는것 입니다.

하지만 flex-direction : column으로 주축을 수직으로 변경시키면

주축은 수직이되고 교차축은 수평이 됩니다.

사진 출처 : https://usingu.co.kr/references/css/flexbox-layout/

flex의 주요 속성들

각 속성에 대한 자세한 정보는 mdn을 참고하여 사용합시다.

1. justify-content : 주축의 정렬 방법을 설정

2. align-items : 교차축의 정렬 방법을 설정

3. flex-wrap : flex 박스들의 각 요소를 wrapping함 (기본값 : nowrap)

4. flex-direction : flex 박스들의 주축을 설정 (기본값 : row), row-reverse, column-reverse등으로 요소의 순서도 바꿀 수 있음)

박스의 경계를 나누는 방법 3가지를 알아보겠습니다. 외부부터 순서대로 margin, border, padding으로 구성됩니다.

margin : 박스 외부 영역의 크기입니다. padding : 박스 내부 영역의 크기입니다.

글로는 이해가 잘 가지 않으니 그림으로 알아보겠습니다. (여기서 기본 first, second 박스에 margin값은 기본적으로 설정된 body의 margin이므로 신경쓰지 않아도 됩니다.)

그림처럼 margin에 값을 주면 박스의 외부에 영역을 줍니다.

주의점 : first에도 second에도 margin : 50px을 주었으므로 first와 second사이의 margin은 100px이여야 할듯합니다.

하지만 collapsing margins라는 현상이 발생하여 하나의 margin만 인식해 50px가 됩니다.

만약 first와 second를 inline-block으로 수평에 위치시키면 좌우의 경계가 서로 50px씩 100px가 생기게 됩니다.

collapsing margins : 박스의 위 아래 경계에서만 발생하는 현상으로 경계가 같다면 하나의 margin으로 인식함.

그림처럼 padding값을 주면 박스의 내부에 영역을 주게 됩니다.

특징으로는 padding값만큼 box의 크기가 증가하게 되므로 주의해야합니다.

마지막으로 border에 대해 알아보겠습니다.

border : 박스 경계를 나타내는 영역입니다. border은 크기(px,rem..)외에 선의 종류, 색깔을 지정해 주어야합니다. border : 10px solid black

padding과 마찬가지로 border의 크기만큼 box의 크기가 증가하게 됩니다.

Django, flask, 딥러닝, 데이터분석 등등 여러 분야를 공부해보면서 문득 프론트 분야도 한번 공부해볼까? 하는 생각에 여러 사람들에게 조언을 구했습니다. (나에게 맞는 분야라는 생각이 들지 않아서..)

그 결과 다들 모던 자바스크립트와 이 책을 추천해주셨습니다.

처음 책을 봤을땐 그렇게 두껍지 않아 보름정도면 마칠 수 있겠단 생각을 했습니다. 그런데 그 결과 한달하고도 일주일..

핑계를 대자면 노마드 챌린지와 타 독서 병행, 처음 블로그 글 작성..등을 해보니 생각보다 완독에 시간이 걸렸습니다. 😢

사담은 여기까지 하고

이 책을 통해 자바스크립드의 콜백함수, 클로저, 프로토타입, 실행 컨텍스트 등 핵심 개념들과 동작 원리등을 배울 수 있었습니다.

정말 자바스크립트에 대해선 하나도 모르는 노베이스 상태인 저에게도 이해가 잘되도록 세세히 설명해 주셨고 목차도 정말 잘 구성되어서 전 단원을 읽으면 다음 단원에서 한번더 이해가 되는 책이였습니다.

현 ES6에 맞춰진 책이 아니지만 핵심 개념은 어디 도망가지 않으므로 읽으면 무조건 도움이 될듯합니다.

이젠 ES6 공부와 자바스크립트 프로젝트 진행, 리엑트 스터디로 방향을 잡고 열심히 공부하겠습니다.

오늘 읽은 범위

12장 동시성 ~p244

😃 책에서 기억하고 싶은 내용을 써보세요.

• 한정된 자원을 사용하는 스레드는 데드락 상태에 빠지지 않도록 조심해야한다.

• 처리율을 강조해서 처리기간을 늘리면 기아현상이나 오래된 정보가 쌓이게 된다.

  • 읽기 스레드와 쓰기 스레드의 요구를 적절히 맞춰 적당한 처리율을 유지시키고 기아현상을 없애야한다.

• 대다수의 다중 스레드 문제는 한정된 자원을 여러 프로세스에서 얻기 위해 경쟁한다.

  • 데드락, 라이브락, 처리율 저하, 효율성 저하등의 문제를 해결하기 위해 알고리즘을 공부해 해법을 직접 구현해보는 공부가 필요하다.

• 동기화하는 메서드 사이에 존재하는 의존성을 이해해야한다.

  • 메서드 사이에 의존성이 존재하면 동시성 코드에 찾아내기 어려운 버그가 생긴다.
  • 즉, 공유 객체 하나에는 메서드 하나만 사용해야한다.
  • 만약 여러 메서드를 사용해야하는 상황이라면 아래 세가지 방법 중 하나를 사용하라.
    • 클라이언트에서 잠금 : 클라이언트에서 첫 번째 메서드를 호출하기 전에 서버를 잠근다.
    • 서버에서 잠금 : "서버를 잠그고 모든 메서드를 호출한 후 잠금을 해제하는" 메서드를 구현한다.
    • 연결 서버 : 잠금을 수행하는 중간 단계를 생성한다. "서버에서 잠금"과 다른점은 원래 서버를 변경하지 않는 점이다.

• 동기화하는 부분을 작게 만들어라.

• 스레드 코드 테스트하기

  • 코드가 올바르다고 증명하기는 현실적으로 불가능하다.
  • 그럼에도 충분한 테스트는 위험을 낮추므로 시스템 설정과 부하를 바꿔가며 자주 돌려라

• 여러 스레드가 돌아가는 프로그램이라면 같은 테스트가 통과할때도, 실패할때도 있을것이다. 이런 경우엔 고려할 사항이 많다.

  • 말이 안되는 실패는 잠정적인 스레드 문제로 취급하라.
  • 다중 스레드를 고려하지 않은 순차 코드부터 제대로 돌게 만들자
  • 다중 스레드를 쓰는 코드 부분을 상황에 맞게 조율할 수 있게 작성하라.
  • 프로세서 수보다 많은 스레드를 돌려봐라
  • 다른 플랫폼에서 돌려봐라
  • 코드에 보조 코드(Object.wait(), Object.sleep()...)를 넣어 돌려보고 강제로 실패를 일으키게 해봐라.

🙄*오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요 *

• 예전 운영체제 시간에 배웠던 기아, 데드락, 상호 배제등을 보니 반갑기도 하고 더 이해가 잘갔다. 사실 알고 있던 내용을 다시 배운 느낌이였다. 책을 읽으면서 느낀게 모든 코드에 '한번에 한가지일만, 짧게 작성하라'라는 규칙이 적용되는것 같다. 스레드에도 적용된다니.. 다중 스레드를 구현할 일이 있을지 모르겠지만 그때가 되서 다시 읽어보면 도움이 될듯하다.

• 드디어 클리코드 책 TIL가 마무리됐다. 뒷 내용들을 간단히 살펴보니 17장의 냄새와 휴리스틱 페이지는 꼭 읽어봐야겠다. 하지만 앞에 내용들과 중복되는 내용이 많으므로 그냥 독서식으로 살펴보고 따로 포스팅을 하진 않겠다.

✏ 소감 3줄 요약

• 다중 스레드를 올바르게 구현하긴 어렵다. 각별히 깨끗한 코드와 꾸준한 테스트를 작성해야한다.
• 오류를 해결하기 위해선 기본 알고리즘과 유사한 문제들의 해결법들을 이해하고 적용할줄 알아야한다.
• 드디어 클린코드가 마무리됐다. 다음책을 골라야겠다.

오늘 읽은 범위

12장 동시성 ~p233

😃 책에서 기억하고 싶은 내용을 써보세요.

• 일단 동시성과 깔끔한 코드는 양립하기 어렵다는 점을 알고 가자.

• 이 단원에서는 여러 스레드를 돌리는 이유와 어려움을 논한다. 또한 이 어려움에 대처하고 깨끗한 코드를 작성하는 방법도 제안한다.

• 동시성이 필요한 이유

  • 동시성은 결합을 없애는 전략이다. 즉, 무엇과 언제를 분리하는 전략이다.
  • 무엇과 언제를 분리하면 구조적 관점에서 프로그램이 거대한 하나의 루프가 아니라 작은 협력 프로그램 여럿으로 보인다.
  • 한번에 하나를 처리하는 단일 스레드는 대규모 프로그램에서 너무 느리다. => 다중 스레드로 병렬 처리해야하는 이유 => 동시성이 중요한 이유

• 미신과 오해

  • 동시성은 항상 성능을 높혀준다.
  • 동시성을 구현해도 설계는 변하지 않는다.
  • 웹 또는 EJB 컨테이너를 사용하면 동시성을 이해할 필요가 없다. (헉 ...)

• 동시성의 실체

  • 동시성은 다소 부하를 유발한다.
  • 동시성은 복잡하다.
  • 일반적으로 동시성 버그는 재현하기 어렵다.
  • 동시성을 구현하려면 흔히 근본적인 설계 전략을 재고해야한다.

• 동시성 방어 원칙 : 동시성 코드가 일으키는 문제로부터 시스템을 방어하는 원칙

  • 단일 책임 원칙(SRP)
    • 동시성은 복잡성 하나만으로도 따로 분리할 이유가 있다. 즉, 동시성 관련 코드는 다른 코드와 분리해야 한다는 것이다.
    • 권장사항 : 동시성 코드는 다른 코드와 분리하라.
  • 따름 정리 : 자료범위를 제한하라
    • 스레드 간의 간섭 때문에 예상치 못한 결과가 나타날 수 있다.
    • 이런 문제를 해결하기 위해 공유 객체를 사용하는 코드 내 임계영역을 synchronized 키워드로 보호하라 권장한다.
    • 권장사항 : 자료를 캡슐화하라. 공유 자료를 최대한 줄여라
  • 따름 정리 : 자료 사본을 사용하라
    • 공유 자료를 줄이려면 처음부터 공유하지 않는 방법이 제일 좋다.
    • 객체를 복사해 읽기 전용으로 사용하거나 각 스레드가 객체를 복사해 사용한 후 한 스레드가 해당 사본에서 결과를 가져오는 방법이 있다.
    • 사본으로 동기화를 피할 수 있다면 복사 비용보다 줄어드는 비용이 클것이다.
  • 따름 정리 : 스레드는 가능한 독립적으로 구현하라
    • 다른 스레드와 자료를 공유하지 않아야한다.
    • 각 스레드는 클라이언트 요청 하나를 처리하며 모든 정보는 비공유 출처에서 가져와 로컬 변수에 저장한다.
    • 권장사항 : 독자적인 스레드로, 가능하면 다른 프로레서에서, 돌려도 괜찮도록 자료를 독립적인 단위로 분할하라.

🙄*오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요 *

• 처음에는 싱글 스레드를 사용하는 JS를 공부하고 있어서 이 단원은 읽지 않을려고 했다. 하지만 생각해보니 비동기처리로 유사 동시성?을 구현하는 자바스크립트와 브라우저 엔진을 떠올리며 읽으면 좋을것 같아 읽어보았다. 역시 멀티 스레드 내용은 정말 어려웠다. 개념 자체는 어렵지 않지만 내부적인 코드를 보면 정신이 혼미해진다. 하지만 중간의 '미신과 오해' 부분에서 뼈를 맞아 열심히 읽었다.

• 솔직히 말하면 JS로 계속 개발을 할 경우 그렇게 유용한 내용은 아닌것 같다. 그냥 멀티 스레드의 주의점과 개념, 필요성등을 이해하고 넘어가도 될듯하다.

🔎 궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

• synchronized : 여러개의 스레드가 한개의 자원을 사용하고자 할 때, 현재 데이터를 사용하고 있는 해당 스레드를 제외하고 나머지 스레드들은 데이터에 접근 할 수 없도록 막는 개념 출처 : https://coding-start.tistory.com/68

✏ 소감 3줄 요약

• 동시성 구현의 필요성과 어려움을 배웠다.
• 동시성을 사용해도 항상 성능이 좋아지는 것은 아니므로 잘 설계하여 구현해야한다.
• 웹 또는 EJB 컨테이너를 사용해도 동시성을 이해해야 한다.

프로토 타입을 공부하며 '클래스의 상속과 거의 같은게 아닌가?' 라는 생각을 했습니다.

그런데 제 생각을 어떻게 알았는지 이번 장에서 클래스와 프로토타입 체인은 비슷한 점이 있지만 왜 같다고 생각하면 위험한지에 대한 설명을 해주었습니다.

이번 장에선 클래스와 인스턴스의 개념과 자바스크립트 ES5에서의 클래스 작성법, ES6에서의 클래스 사용법등을 알아보겠습니다.

클래스와 인스턴스의 개념 이해

클래스의 일반적인 개념은 공통 속성의 정의라고 할 수 있습니다.

직업이라는 공통 속성 내에 IT라는 분야가 있을 수 있고 IT라는 분야 내에 개발자라는 분야가 있을 수 있습니다.

개발자의 내부에는 구체적인 직업들이 있을 수 있죠

여기서 직업, IT, 개발자라는 개념은 공통 속성을 모아 정의한 추상적인 개념이고 프론트엔드, 백엔드, 임베디드, 모바일 어플리케이션 등은 구체적인 개념에 해당합니다.

또한 직업은 IT의 상위 클래스(superClass)이고, IT는 개발자의 상위 클래스(superClass)이며 반대로 IT는 직업의 하위 클래스(subClass), 개발자는 IT의 하위 클래스(subClass)입니다.

클래스의 속성을 자세히 살펴보겠습니다.

• 직업 : 일을 하여 돈을 벌 수 있음.
• IT : 일을 하여 돈을 벌 수 있음 + IT 분야에서 일함
• 개발자 : 일을 하여 돈을 벌 수 있음 + IT 분야에서 일함 + 요구사항에 맞춰 각종 소프트웨어, 웹, 어플리케이션등을 유지보수, 개발함

이처럼 하위 클래스는 상위 클래스의 속성을 상속하며 점차 구체적인 요건이 추가 또는 변경됩니다.

여기서 프론트엔드, 백엔드, 임베디드 등은 개발자 클래스의 속성을 지니는 구체적인 개체들입니다.

이처럼 클래스의 속성을 지니는 실존하는 개체들을 일컬어 인스턴스(instance)라고 합니다.

현실세계에서는 개체들이 먼저 만들어지고 서로 공통점을 묶어 상위 개념이 만들어집니다. (ex. 기현, 병현, 수연 등 개인이 모여 가족을 이루고, 가족이 모여 동네를 만들고 동네가 모여 도시가 만들어집니다.)

하지만 프로그래밍 상에서는 클래스가 먼저 정의되고 점차 하위 클래스가 만들어지며 필요해의해 클래스를 바탕으로 구체적인 개체들이 만들어집니다.

이러한 차이때문에 클래스를 이해할때 약간의 헷갈림이 생길 수 있습니다.

자바스크립트의 클래스

일반적으로 프로토타입 기반의 언어는 클래스의 개념이 없다고 하지만 프로토타입 체이닝을 통해 상위 프로토타입의 내용을 참조한다는 점이 클래스의 개념과 약간 비슷하게 해석할 수 있습니다.

생성자 함수로 인스턴스를 생성할 경우 해당 인스턴스는 생성자 함수의 prototype 객체 내부 요소들을 참조합니다. (클래스의 개념에선 상속이지만 프로토타입은 참조를 하므로 약간의 차이가 발생합니다. (결과적으론 동일하게 작동!))

하지만 앞서 6장에서 배웠듯이 인스턴스가 생성자 함수를 참조할때 모든 내용을 참조하는것은 아니고 구분할 수 있습니다.

• 스태틱 멤버 : 생성자 함수에서만 정의되어 인스턴스에서 참조할 수 없음
• 인스턴스 멤버 : 프로토타입에 정의되어 인스턴스에서 참조할 수 있음

그런데 여느 클래스 기반 언어와 달리 자바스크립트는 인스턴스에서도 직접 메서드를 정의할 수 있습니다. (메서드 오버라이딩)

// 6장에서 사용한 내용
var Person = function (name) {
  this.name = name;
};
Person.prototype.getName = function () {
  return this.name;
};

var myName = new Person('윤철');
myName.getName = function () {
  return '신' + this.name;
};
console.log(myName.getName());            // 신윤철

때문에 '인스턴스 멤버'의 '인스턴스 메서드'라는 명칭은 프로토타입에 정의한 메서드인지 인스턴스에 정의한 메서드인지 혼란스럽습니다. (예제에선 Person.prototype.getName도 인스턴스 메서드이고 myName.getName도 인스턴스 메서드입니다.)

때문에 인스턴스 메서드는 프로토타입 메서드라고 부르는편이 좋습니다. (Person.prototype.getName == 프로토타입 메서드, myName.getName == 인스턴스 메서드)

코드를 약간 수정하여 스태틱 멤버, 프로토타입 멤버에 대해 예제를 통해 알아보겠습니다.

var Person = function (name) {
  this.name = name;
};
Person.isPerson = function (instance) {
  return instance instanceof Person;
};
Person.prototype.getName = function () {
  return this.name;
};

var myName = new Person('윤철');

console.log(myName.getName());                // 윤철
console.log(myName.isPerson(myName));        // (error) myName.isPerson is not a function
console.log(Person.isPerson(myName));        // true

프로토타입 객체에 할당한 메서드는 인스턴스에서 자신의 것처럼 (__proto__를 생략해서) 사용할 수 있다고 했고 실제로 myName.getName에서 잘 사용할 수 있습니다.

그리고 생성자 함수 Person에서 생성한 isPerson 메서드는 스태틱 메서드이므로 인스턴스에서 사용할 수 없고, 생성자 함수에서만 사용할 수 있습니다.

함수를 생성할 때 prototype을 붙히지 않고 생성하면 스태틱 멤버, prototype을 붙히고 생성하면 프로토타입 멤버입니다.

앞서 클래스는 추상적인 개념이라고 설명했는데 Person.isPerson같이 클래스에서 스태틱 메서드를 호출할 때 클래스는 하나의 개체로서 취급됩니다.

클래스 상속

클래스 상속은 객체지향에서 가장 중요한 요소 중 하나입니다.

하지만 자바스크립트에선 클래스가 존재하지 않기 때문에 ES5까지는 최대한 프로토타입 체인을 활용하여 클래스와 비슷한 형태를 흉내냈습니다.

ES6에선 클래스 문법이 도입되었기 때문에 이러한 방식을 사용할 일은 없겠지만 ES6에서의 클래스 문법도 prototype을 기반으로 만들어진것이기 때문에 그 이전의 방식들을 배우는 것도 이해에 도움이 될 것입니다. (책에선 너무 확실히 이해하려 하진 않아도 된다고 합니다.)

기본 구현

var Grade = function () {
  var args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < args.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

Grade.prototype = [];
var g = new Grade(100, 80);

앞서 자바스크립트에서 클래스를 흉내내기 위해 prototype을 사용한다고 하였습니다.

다만 겉으로는 비슷해보여도 세부적으로 superClass와 subClass를 완변하게 구현한 것은 아닙니다.

위 코드에는 length 프로퍼티가 삭제 가능하단 점과 Grade.prototype이 빈 배열을 참조한다는 문제점이 있는데 자세히 알아보겠습니다.

문제점 1. length 프로퍼티 삭제가능, 상위 클래스의 값이 하위 클래스의 값에 영향을 줌

// 위 코드의 이어서 작성
g.push(90);
console.log(g)            // Grade(3) [100, 80, 90] length : 3

delete g.length;
g.push(70);
console.log(g);            // Grade [70, 1: 80, 2: 90] length : 1

g.push(90)을 통해 Grade의 마지막값에 90이 잘 추가되고 length도 정상적으로 늘어났습니다.

그런데 delete g.length를 통해 length를 한번 지우고 g.push(70)을 할 경우 Grade의 첫번째 행에 70이 추가되고, length도 1이 됩니다.

왜 그럴까요❓

바로 내장객체 Array의 length 프로퍼티는 configurable 속성이 false라서 삭제가 불가능하지만, Grade의 length 프로퍼티는 삭제가 가능하기 때문입니다.

실제 결과를 보니 약간 더 이해가 잘 가네요.

delete로 삭제한 결과 Grade의 length 프로퍼티가 삭제되었고 그 다음 g.push(70)을 실행한 결과 g.length가 없어졌기 때문에 프로토타입 체이닝을 통해 g.__proto__.length의 값을 찾아 +1을 한 것입니다. (length가 삭제되어 기존의 값도 새로운 push값으로 대체됩니다.)

만약 Grade.prototype = ['a', 'b', 'c', 'd', 'e']; 처럼 빈 배열이 아닌 값을 할당하면 어떻게 될까요?

Grade.prototype = ['a', 'b', 'c', 'd', 'e'];
var g = new Grade(100, 80);

g.push(90);
console.log(g)            // Grade(3) [100, 80, 90] length : 3

delete g.length;
g.push(70);
console.log(g);            // Grade(6) [100, 80, 90, empty × 2, 70], length : 6

마찬가지로 g.length가 사라져서 프로토타입 체이닝을 통해 g.__proto__의 정보를 찾습니다.

그런데 해당 Grade.prototype의 length가 5라서 length + 1인 6이 되고, 비어있지 않은 인덱스 5에 70을 넣게됩니다. (인덱스 0~4는 'a','b','c','d','e' 가 들어있음)

이처럼 superClass의 값이 인스턴스의 동작에 영향을 미치는데 정상적인 클래스에서는 추상성을 해치는 일입니다.

클래스는 인스턴스에 구체적인 데이터를 주지 않고 추상적인 틀로서 역할을 해야하는데 이렇게 사용한다면 예기치 않은 오류가 발생할 가능성이 있습니다.

문제점 2. intance와 subClass의 constructor이 superClass의 constructor을 보고있음

g.constructor은 g.__proto__.__proto__.constructor, 즉 Array를 가리키고 있습니다.

때문에 아래와 같은 코드가 성립하게 됩니다.

var g2 = new g.constructor(10, 20);
console.log(g2);            // [10, 20]

클래스의 관점에서 instance에서 상위 클래스의 constructor에 접근하여 새로운 instance를 생성하는것은 구조적으로 안전성이 떨어집니다.

문제점 1을 해결한 후 하위 개체들이 상위 클래스의 constructor을 바라보지 못하게 만들겠습니다.

문제점 1 해결 => 클래스가 구체적인 데이터를 지니지 않게 만들기

첫번째 방법으로 클래스가 구체적인 데이터를 지니지 않게 하는 가장 간단한 방법은 프로퍼티들을 일일이 지우고 freeze하여 더는 추가할 수 없게 만드는 것입니다.

delete superClass.prototype.method;            // 상위 클래스의 메서드를 지
Object.freeze(superClass.prototype);        // freeze로 더는 추가할 수 없게 만듬

두번째 방법은 더글라스 크락포드가 제시한 방법으로

subClass의 prototype에 직접 superClass의 instance를 할당하는 대신 아무런 프로퍼티를 생성하지 않는 빈 생성자 함수(Bridge)를 하나 더 만드는 것 입니다.

var Bridge = function () {};
Bridge.prototype = superClass.prototype;
subClass.prototype = new Bridge();
Object.freeze(subClass.prototype);

즉, superClass와 subClass 사이에 Bridge 추가

그런데 이때 subClass.prototype을 freeze하므로써 상위 클래스의 prototype을 참조할 수 없게 만듭니다. (subClass.prototype이 빈 값이므로)

이로써 intance를 제외한 프로토타입 체인 경로상에는 구체적인 데이터가 남아있지 않게 됩니다.

세번째 방법은 ES5에서 도입된 Object.create를 이용한 방법입니다.

subClass.prototype = Object.create(superClass.prototype);
Object.freeze(subClass.prototype);

Object.create는 아무 내용이 없는 prototype을 생성합니다. 때문에 위의 코드를 실행하고 freeze할시 subClass의 prototype에는 아무 prototype이 남아있지 않게 됩니다.

구체적인 코드로 살펴보기위해 앞서 "클래스 상속 부분의 기본 구현"의 코드로 비교해보겠습니다.

//Object.create(superClass.prototype)을 구현한 코드
var Grade = function () {
  var args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < args.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

Grade.prototype = Object.create(Array.prototype);
Object.freeze(Grade.prototype);

var g = new Grade(100, 80);
console.log(g);

결과를 보니 Grade의 기본 length값이 사라져서 상위 클래스의 값에 영향을 받지 않게 된것을 확인할 수 있습니다.

문제점 2 해결 => instance와 하위 클래스가 상위 클래스의 constructor을 가리키는 문제 해결

이 문제의 해결법은 간단합니다.

subClass.prototype.constructor = subClass;
Object.freeze(subClass.prototype);

이처럼 subClass의 prototype에 직접 subClass를 담는것 입니다.

이 예시도 위에서 사용한 코드에 추가하여 살펴보겠습니다.

var Grade = function () {
  var args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < args.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

Grade.prototype = Object.create(Array.prototype);
Grade.prototype.constructor = Grade;                // 이 부분 추가
Object.freeze(Grade.prototype);

var g = new Grade(100, 80);
console.log(g);

그 결과 constructor에 Grade가 잘 들어간 것을 확인할 수 있습니다. 이로써 하위 클래스는 자신의 constructor을 제대로 가리키게 됩니다.

ES6의 클래스 및 클래스 상속

앞서 언급했든 ES6부터는 클래스 문법이 도입되었습니다.

ES5와 ES6의 클래스 문법을 비교하여 소개해보겠습니다.

// ES5에서 유사 클래스 문법
var ES5 = function (name) {
  this.name = name;
};
ES5.staticMethod = function () {
  return this.name + ' staticMethod';
};
ES5.prototype.prototypeMethod = function () {
  return this.name + ' prototypeMethod';
};
var es5Instance = new ES5('es5');
console.log(es5Instance);
console.log(ES5.staticMethod());
console.log(es5Instance.prototypeMethod());

// ES6에서 클래스 문법
var ES6 = class {
  constructor(name) {
    this.name = name;
  }
  static staticMethod() {
    return this.name + ' staticMethod';
  }
  prototypeMethod() {
    return this.name + ' prototypeMethod';
  }
};
var es6Instance = new ES6('es6');
console.log(es6Instance);
console.log(ES6.staticMethod());
console.log(es6Instance.prototypeMethod());

ES5는 일일이 staticMethod, prototypeMethod, 프로퍼티등을 하나하나 작성하였습니다.

하지만 ES6에서는 class로 묶어 static 메서드와 prototype 메서드등을 한번에 정의하는 것을 확인할 수 있습니다.

그럼 결과를 살펴보겠습니다.

ES5와 ES6의 console.log 결과는 같게 나옵니다.

하지만 내부 구조를 살펴보면 많은 차이가 있습니다.

가장 큰차이는 ES5의 constructor은 함수, ES6의 constructor은 class라는 점입니다.

그 외에도 prototypeMethod, staticMethod 등도 차이를 보입니다. (코드를 작성해서 직접 구조를 보는 것을 추천)

약 3주간 매일 클린코드를 읽고 TIL를 작성하며 노마드 코더 회원분들과 서로의 TIL를 공유하며 좋은 시너지를 낼 수 있었습니다!

과연 혼자였으면 꾸준히 읽었을 수 있었을지..

니코쌤이 자바스크립트를 공부하는 우리에게 필요한 단원과 스케줄을 짜주셔서 부담없이 진행할 수 있었던 것 같습니다.😃

중간중간 잘 작성한 TIL에 뽑히기도 하고 끝까지 완주한 리스트와 열심히 참여한 목록에 올라가니 열심히한 보람이 있네요..ㅎㅎ

노개북이 끝나고 남은 뒷부분을 읽어보니 코드 리펙토링 과정, JUnit, SerialDate 내부 구조 공부 등 자바 코드로 구현된 부분들만 남았습니다.

그래서 니코쌤이 여기까지 스케줄을 잡으셨나 싶기도 합니다. 앞으로 동시성 부분만 읽고 클린코드 TIL를 마치겠습니다.