대수 타입은 여러 개의 타입을 합성하여 새롭게 만들어낸 타입을 뜻한다. 대수 타입의 종류로는 합집합과 교집합 타입이 있다.

1. 합집합(Union) 타입

원시타입의 합집합

let a: string | number | boolean;

a = 1;
a = "hello";
a = true;

배열의 합집합

let arr: (number | string | boolean)[] = [1, "hello", true];

객체의 합집합

type Dog = {
  name: string;
  color: string;
};

type Person = {
  name: string;
  language: string;
};

type Union1 = Dog | Person; // 타입에 타입 할당

let union1: Union1 = { // Dog 타입만 사용 
  name: "",
  color: "",
};

let union2: Union1 = { // Person 타입만 사용 
  name: "",
  language: "",
};

let union3: Union1 = { // 모든 프로퍼티 사용 가능
  name: "",
  color: "",
  language: "",
};

이 때, 공통된 name:"" 프로퍼티 하나만 사용하는 것은 합집합 어디에도 포함되지 않는 타입이기 때문에 사용이 불가하다.🙅🏻‍♀️ ⭐️⭐️ 위 그림에서의 교집합은, 프로퍼티의 교집합이 아닌 "값의 교집합"을 뜻한다. 즉, A와 B 두 타입의 모든 조건을 동시에 충족해야 하므로 모든 프로퍼티를 포함하는 타입이 생성되게 된다.

만약, 공통된 name:"" 프로퍼티를 교집합으로 만들고 싶다면 인터페이스와 상속 개념을 통해 구현해볼 수 있다.

interface BaseType { 
    name: string;
}
// BaseType의 프로퍼티를 모두 상속 (name 프로퍼티 자동으로 생김)
interface Dog extends BaseType {
    color: string;
}
interface Person extends BaseType {
    language: string;
}

2. 교집합(Intersection) 타입

위에서 설명한 것과 같이, 교집합은 두 타입의 모든 프로퍼티를 포함하는 타입을 생성한다.

type Dog1 = {
  name: "";
};

type Person1 = {
  age: "";
};

type Intersection1 = Dog1 & Person1;

let intersectionVar: Intersection1 = {
  name: "",
  age: "",
};

하지만 원시 타입의 교집합은 다르다. 아래 예시를 보면 어떤 값도 number 이면서 동시에 string일 수 없기 때문에 원시 타입의 교집합은 공존할 수 없다.

let variable: number & string; // = never

타입 추론

타입스크립트는 변수에 타입을 선언하면 프로그램이 실행되기 이전에 타입 검사를 수행하는 점진적 타입 시스템이다. 이 때 타입을 선언하지 않아도 초기값을 기준으로 자동으로 타입을 추론해주기도 한다.

• 초기 값이 있을 때

  let a = 10;
  let b = "hello";
  

let c = { id: 1, name: "aaa", profile: { nickname: "winter", }, }; let { id, name, profile } = c;

function func(message = "hello") { return "hello"; }

* **초기 값이 없을 때 (~~any 타입의 진화~~)**

let d; // any d = 10; // 아직 any (값이 할당될 때 any -> number로 진화) d.toFixed(); // number

d = "string"; // 다시 any (값이 할당될 때 any -> string로 진화) d.toUpperCase(); // string

* **const로 선언할 때**
  * const는 상수이기 때문에 다른 값이 재할당될 일이 없으므로 할당된 값으로 리터럴 타입 표시 

const num = 10; // num:10 const str = "hello"; // str:"hello"

* 배열 

let arr = [1, "string"]; // let arr: (string | number)[]

> 타입 추론 시 범용적으로 변수를 사용할 수 있도록 좀 더 넓은 타입으로 추론해 주는 것을 **'타입 넓히기'** 라고 한다.

---
* 출처 : [한 입 크기로 잘라먹는 타입스크립트](https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8) / [docs](https://ts.winterlood.com/6c9bf87f-6a8f-4e96-95b4-5e12d9f82165#c8a5f8ebaa7d4692a90e3d743bb21dea)

타입스크립트의 모든 타입은 집합이며 서로 부모-자식의 관계를 맺는다. 여기서 부모는 슈퍼 타입, 자식은 서브 타입이라 한다.

• 서브 타입의 값을 슈퍼 타입으로 취급하는 것을 Up Cast(업 캐스트)라고 하며, 업 캐스트는 모든 상황에 허용된다.
• 반대로 슈퍼 타입의 값을 서브 타입으로 취급하는 것은 Down Cast(다운 캐스트)라 하며, 대부분의 상황에서 허용되지 않는다.

위 타입 계층도를 보면서 기본 타입을 살펴보자.

1. Unknown 타입

unknown 타입은 전체 집합 즉, 최상위 슈퍼 타입이다. 때문에 모든 타입의 업 캐스트는 가능하지만, unkown 타입의 다운 캐스트는 불가능하다.

function unknownExam() {
  //  모든 타입의 UpCasting ⭕️
  let a: unknown = 1;
  let b: unknown = "hello";
  let c: unknown = true;
  let d: unknown = null;
  let e: unknown = undefined;

  // unknown의 DownCasting ❌
  let unknownVar: unknown;
  let num: number = unknownVar;
  let str: string = unknownVar;
  let bool: boolean = unknownVar;
}

2. Never 타입

never 타입은 공집합(=아무것도 없음) 즉, 최하위 서브 타입이다. 때문에 never 타입의 업 캐스트는 모두 가능하고, 다른 타입의 다운 캐스트는 모두 불가능하다.

function neverExam() {
  function neverFun(): never {
    while (true) {}
  }

  // never의 UpCasting ⭕️
  let num: number = neverFun();
  let str: string = neverFun();
  let bool: boolean = neverFun();

  // 모든 타입의 DownCasting ❌
  let never1: never = 10;
  let never2: never = "string";
  let never3: never = true;
}

3. Void 타입

void 타입은 undefined 타입의 슈퍼 타입이라는 것을 기억하자.

function voidExam() {
  function voidFun(): void {
    console.log("hi");
    return undefined; // return 가능 ⭕️
  }

  // undefined의 UpCasting ⭕️
  let voidVar: void = undefined;
}

4. Any 타입

any 타입은 타입 계층도를 완벽히 무시하는 치트키 타입이다. 모든 타입의 최상위 슈퍼 타입 또는 최하위 서브 타입으로 위치하기도 한다.(never는 제외) 때문에 사용이 권장되지 않음!! 🙅🏻‍♀️

function anyExam() {
  let unknownVar: unknown;
  let anyVar: any;
  let undefinedVar: undefined;
  let neverVar: never;

  // unknown을 any로 DownCationg ⭕️
  anyVar = unknownVar;

  // any를 undefined로 DownCationg ⭕️
  undefinedVar = anyVar;

  // never만 DownCationg ❌
  neverVar = anyVar;
}

⭐️ 타입 호환표

객체 타입 간의 호환성

객체 타입 간에는 추가 프로퍼티가 있는 객체가 서브 타입(자식)이 되고, 공통 프로퍼티만 가지고 있는 객체가 슈퍼 타입(부모)가 된다. 객체 타입 역시 Up Cast는 가능하고 Down Cast는 대체로 불가능하다.

// 슈퍼 타입
type Animal = {
  name: string;
  color: string;
};

// 서브 타입
type Dog = {
  name: string;
  color: string;
  breed: string;
};

let animal: Animal = {
  name: "기린",
  color: "yellow",
};

let dog: Dog = {
  name: "돌돌이",
  color: "brown",
  breed: "진돗개",
};

animal = dog; // Up Cast ⭕️
console.log(animal); // { name: '돌돌이', color: 'brown', breed: '진돗개' }

dog = animal; // Down Cast ❌

또한 아래와 같이 슈퍼 타입의 변수에 서브 타입을 선언한 변수를 넣어 초기화도 가능하다.

let animalExm: Animal = dog;

But, 객체 리터럴로 초기화 시 ts의 초과 프로퍼티 검사로 인한 오류가 나니 조심!!

let animalExm: Animal = {
  name: "돌돌이",
  color: "brown",
  breed: "진돗개", ❌ERROR❌
}

• 출처 : 한 입 크기로 잘라먹는 타입스크립트 / docs

모던 자바스크립트 딥다이브 책의 내용을 기반으로 작성하였습니다.🌿

1. 타입 변환이란?

자바스크립트의 모든 값에는 타입이 있고, 개발자의 의도에 따라 타입을 변환할 수 있다. 개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting) 이라 한다.

반대로, 개발자의 의도와는 상관 없이 자바스크립트 엔진이 표현식을 평가하는 도중에 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환(implicit coercion) 또는 타입 강제 변환(type coercion)이라 한다.

명시적 타입 변환이나 암묵적 타입 변환은 기존 원시 값을 직접 변경하진 않는다. 원시 값은 변경 불가능한 값(immutable value)이므로 변경할 수 없다. 타입 변환이란 원시 값을 사용하여 다른 타입의 새로운 원시 값을 생성하는 것이다.

let x = 10;

// 명시적 타입 변환
let str = x.toString();
console.log(typeof str, str); // string, 10 
console.log(typeof x, x); // number, 10 --> 원시 값 변경 X

// 암묵적 타입 변환
let str = x + '';
console.log(typeof str, str); // string 10
console.log(typeof x, x); // number, 10 --> 원시 값 변경 X

2. 암묵적 타입 변환

문자열 타입으로 변환

1 + '2' // "12" 위 예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다. 문자열 연결 연산자의 모든 피연산자는 모두 문자열 타입이어야 하기 때문에, 위 예제의 1은 문자열 타입으로 자동 타입 변환된다.

`1 + 1 = ${1 + 1}` // "1 + 1 = 2" 연산자 표현식 뿐만 아니라, 템플릿 리터럴의 표현식도 문자열로 암묵적 타입 변환된다.

• 아래는 자바스크립트 엔진이 문자열 타입으로 암묵적 타입 변환을 수행할 때의 동작이다.

  // 숫자 타입
  0 + '' // "0"
  -0 + '' // "0"
  1 + '' // "1"
  NaN + '' // "NaN"
  Infinity + '' // "Infinity"
  
  // 불리언 타입
  true + '' // "true"
  false + '' // "false" 
  
  // null 타입
  null + '' // "null"
  
  // undefined 타입
  undefined + '' // "undefined"
  
  // 심벌 타입
  (Symbol()) + '' // TypeError
  
  // 객체 타입
  ({}) + '' // "[object object]"
  Math + '' // "[object Math]"
  [] + '' // ""
  [10,20] + '' // "10,20"

  숫자 타입으로 변환

  1 - '1' // 0
  1 * '10' // 10
  1 / 'one' // NaN

  위 예제와 같이, 산술 연산자의 모든 피연산자는 모두 숫자 타입이어야 한다. 이 때 피연산자를 숫자 타입으로 변환할 수 없는 경우의 결과는 NaN이 된다.

비교 연산자 또한 문맥 상 모두 숫자 타입이어야 하므로 암묵적 타입 변환된다. '1' > 0 // true

• 아래는 단항 연산자(+)의 암묵적 타입 변환 동작 과정이다.

  // 문자열 타입
  +'' // 0
  +'0' // 0
  +'1' // 1
  +'string' // NaN
  
  // 불리언 타입
  +true // 1
  +false // 0
  
  // null 타입
  +null // 0
  
  // undefined 타입
  +undefined // NaN
  
  // 심벌 타입
  +Symbol() // TypeError
  
  // 객체 타입
  +{} // NaN
  +[] // 0
  +[10,20] // NaN

• 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않음

불리언 타입으로 변환

if('') console.log(x); if나 for 문과 같은 제어문이나 삼항 조건문의 조건식은 불리언 값으로 평가되어야 한다. 때문에 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 자동 변환한다.

if('') console.log('1');
if(true) console.log('2');
if(0) console.log('3');
if('str') console.log('4');
if(null) console.log('5');

// 2 4

이 때 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

• false로 평가되는 Falsy 값
  • false
  • undefined
  • null
  • 0, -0
  • NaN
  • ''

3. 명시적 타입 변환

문자열 타입으로 변환

1. String 생성자 함수를 new 연산자 없이 호출
2. Object.prototype.toString 메서드 사용
3. 문자열 연결 연산자 사용

  // 1. String 생성자 함수를 new 연산자 없이 호출 
  String(1); // "1"
  String(NaN); // "NaN"
  String(Infinity); // "Infinity"
  String(true); // "true"
  String(false); // "false"

  // 2. Object.prototype.toString 메서드 사용
  (1).toString(); // "1"
  (true).toString(); // "true"

  // 3. 문자열 연결 연산자 사용 
  1 + ''; // "1"
  NaN + ''; // "NaN"
  true + ''; // "true" 

숫자 타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출
2. parseInt, parseFloat 함수를 사용
3. +단항 산술 연산자 이용
4. *산술 연산자 이용

  // 1. Number 생성자 함수를 new 연산자 없이 호출
  Number('0'); // 0
  Number('-1'); // -1
  Number(true); // 1
  Number(false); // 0

  // 2. parseInt, parseFloat 함수를 사용 
  parseInt('0'); // 0
  parseInt('-1'); // -1
  parseFloat('10.53'); // 10.53

  // 3. + 단항 산술 연산자 이용
  +'0'; // 0
  +'-1'; // -1
  +true; // 1
  +false; // 0

  // 4. * 산술 연산자 이용
  '0' * 1; // 0
  '-1' * 1; // -1
  true * 1; // 1
  false * 1; // 0

불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출
2. ! 부정 논리 연산자를 두번 사용

// 1. Boolean 생성자 함수를 new 연산자 없이 호출
Boolean('x'); // true
Boolean(''); // false

Boolean(0); // false
Boolean(1); // true

Boolean(NaN); // false
Boolean(Infinity); // true
Boolean(null); // false
Boolean(undefined); // false

Boolean({}); // true
Boolean([]); // true

// 2. ! 부정 논리 연산자를 두번 사용 
!!'x'; // true
!!''; // false
!!'false'; // true

!!0; // false 
!!1; // true
!!NaN; // false
!!Infinigy; // true
!!null // false
!!undefined; // false

!!{}; // true
!![]; // true

4. 단축 평가 ⭐️

논리 연산자를 사용한 단축 평가

논리 연산자 논리합(||) *또는 *논리곱(&&)은 평가 결과가 불리언 값이 아닐 수도 있다. 이 두 연산자는 *언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. *

논리곱(&&) 연산자

'Cat' && 'Dog // --> 'Dog' 논리곱(&&) 연산자는 좌항에서 우항으로 평가되며, 두 개의 피연산자가 모두 True로 평가될 때 True를 반환한다. 위 예제에서 'Cat'은 Truthy 값이고 두 번째 피연산자인 'Dog'를 평가한다. 이 때 논리 연산의 결과를 결정하는 두 번째 피연산자인 'Dog' 문자열을 그대로 반환한다.

논리합(||) 연산자

'Cat' || 'Dog // --> 'Cat' 논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 때문에 첫 번째 피연산자인 'Cat'이 Truthy 값이므로 true로 평가된다. 두 번째 피연산자까지 평가해보지 않아도 되므로 연산 결과를 결정한 첫 번째 피연산자, 문자열 'Cat'을 반환한다.

이를 단축 평가(short-circuit evaluation)라고 하는데, 단축 평가는 표현식을 평가하는 도중 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

true || anything // true
false || anything // anything
true && anything // anything
false && anything // false

• 단축평가는 if문을 대체할 수 있다.

  let done = true;
  let message = '';
  
  // if문 
  if(done) message = '완료';
  // 단축평가
  message = done && '완료'; 

  let done = false; 
  let message = '';
  
  // if문 --> message 할당해야 하니까 !done 사용
  if(!done) message = '미완료';
  // 단축평가 --> 작업이 false이면 두번째 피연산자 반환
  message = done || '미완료';

• 객체를 가리키는 변수가 Null 또는 Undefined인지 확인하고 참조하기 객체를 가리키는 변수의 값이 null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 TypeError가 발생하고 프로그램이 강제 종료된다. 이 때 단축평가를 사용하면 에러가 발생하지 않는다.

  let elem = null;
  
  let value = elem.value; // TypeError❌
  let value = elem && elem.value; // null👍🏻 --> elem이 falsy값이니까 첫번째 피연산자값 반환

• 함수 매개변수에 기본값 설정할 때 함수 호출 시 인수를 전달하지 않으면 매개변수는 Undefined가 할당된다. 이 때 단축평가를 사용하여 매개변수의 기본값을 설정하여 에러를 방지할 수 있다.

  function getStringLength(str){
      str = str || '';
      return str.length;
  }
  
  getStringLength(); // 0
  getStringLength('hi'); // 2
  
  // ES6의 매개변수 기본값 설정도 가능!
  function getStringLength(str = ''){
      return str.length;
  }

옵셔널 체이닝 연산자( ?. )

옵셔널 체이닝 연산자(?.)는 ES11에서 도입되었다. 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 참조를 이어간다. 옵셔널 체이닝 연산자가 없을 때는 위 예제처럼 단축 평가를 통해 null을 체크했다.

let elem = null;
let value = elem?.value;
console.log(value); // undefined

// 단축 평가 시절..
let value = elem && elem.value;

⭐️ 논리곱(&&) 연산자는 0이나 ''를 객체로 평가할 때도 있기 때문에, 옵셔널 체이닝 연산자(?.)를 사용해 주는 것이 안전하겠다.

null 병합 연산자( ?? )

ES11에 도입된 null 병합 연산자(??)는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환한다.

let foo = null ?? 'default string';
console.log(foo); // 'default string'

null 병합 연산자는 변수에 기본값을 설정할 때 유용하게 사용된다. 이전에는 논리합(||) 연산자를 사용했지만 좌항의 피연산자가 Falsy값(false, undefined, null, 0, NaN, '')이면 우항의 피연산자를 반환한다. 하지만 null 병합 연산자는 null 또는 Undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

let foo1 = '' || 'default string';
console.log(foo1); // 'default string'

let foo2 = '' ?? 'default string';
console.log(foo2); // ""

⭐️Falsy 값인 0이나 ' '도 기본값으로 유효하다면, 논리합(||) 연산자 보다는 null 병합 연산자를 사용하는 것이 낫다.

앞으로 논리합, 논리곱 연산자보다는 상황에 따라 옵셔널 체이닝 연산자나 null 병합 연산자를 사용하여 안전성을 더 높이도록 해야겠다..!!!🔥

프로젝트 진행 중에 백엔드를 로컬에서 돌려 테스트할 상황이 생겼는데, 백엔드(java) 세팅은 처음 해보는 거라 생각보다 시간이 많이 걸렸다..ㅎㅎ 그 과정들을 정리해 보았다 😀

• 실행 환경 : MacOS M3, VSCode

1. JDK 설치

JDK는 Java 애플리케이션을 컴파일하고 실행하는 데 필요한 필수 소프트웨어이다.

• ORACLE JDK 설치 링크
• 참고 : Mac OS에서 JDK 설치하기 맥북 M3는 ARM64 DMG로 설치해야 호환 가능!

$ which java     //java 위치 확인 
$ java --version //java 버전 확인  

2. gradle 설치

Gradle은 Java 프로젝트 빌드를 자동화하는 도구로, Java Development Kit (JDK)와 함께 사용되어야 한다.

$ brew install gradle
$ gradle -v   

3. VSCode Extension 설치

• Debugger for Java
•  Red Hat의 Java™에 대한 언어 지원
•  자바용 디버거(Debugger for Java)
•  자바용 테스트 러너
•  자바용 메이블(Maven for Java)
•  자바용 프로젝트 관리자(Project manager for Java)
•  비주얼 스튜디오 인텔리코드(Visual Studio IntelliCode)

4. aws cli 설치 및 세팅

계속 아래 에러가 나서 찾아보니 aws cli 설정이 추가로 필요했다. 현재 프로젝트에서는 소스 코드 내 민감정보를 외부 저장소에 저장하기 위해 AWS Parameter Store 사용하고 있다. 때문에 AWS Parameter Store를 통해 데이터를 읽기 위해서는 Credential을 세팅해줘야 했다. AWS Configure(AWS CLI) 세팅은 Credential을 세팅하는 방법 중 하나로 맥북에서는 간단히 brew를 통해 설치할 수 있고, Access Key, Secret Key, region name 등을 입력하면 된다.

$ brew install awscli // aws cli 설치
$ which aws           // aws 위치 확인
$ aws --version       // aws 버전 확인

$ aws configure       // aws 구성 세팅 

AWS Access Key ID [None]: (Access Key 입력)
AWS Secret Access Key [None]: (Secret Key 입력)
Default region name [None]: ap-northeast-2 (서울 리전)
Default output format [None]: text / json / table

• 참고 : aws cli 설치 & 등록 방법

  5. build & start

  build & start 명령어는 각 프로젝트마다 다르게 적용될 수 있다. 아래 실행한 명령어는 application-local.yml 파일을 실행할 수 있게 세팅된 것이다.
• build
  • gradlew : Gradle Wrapper로, 빌드 실행 스크립트
  • clean : 이전 빌드에서 생성된 모든 파일 삭제
  • -x test : 특정 작업(test) 제외

    $ ./gradlew clean build -x test

• start
  • bootRun : Spring Boot 애플리케이션 실행
  • --args : bootRun에 인수를 전달하는 옵션
  • '--spring.profiles.active=local' : application-local.yml 파일 사용

    $ ./gradlew :프로젝트명:bootRun --args='--spring.profiles.active=local'

    로컬 테스트 성공!! 🤩

1. 원시타입과 리터럴타입

원시타입(Primitive Type)

• 동시에 하나의 값만 저장하는 타입

• number / string / boolean / null / undefined

  // number
  let num1: number = 123;
  let num2: number = -123;
  let num3: number = 0.123;
  let num4: number = -0.123;
  let num5: number = Infinity;
  let num6: number = -Infinity;
  let num7: number = NaN;
  
  // string
  let str1: string = "hello";
  let str2: string = 'hello';
  let str3: string = `hello`;
  let str4: string = `hello ${num1}`;
  
  // boolean
  let bool1: boolean = true;
  let bool2: boolean = false;
  
  // null
  let null1: null = null;
  
  // undefined
  let unde1: undefined = undefined;
  

:number 와 같이 타입을 작성하는 문법을 타입 주석(annotation) 이라 한다.

만약, 다른 타입의 변수에 null 값을 임시로 넣고 싶다면 tsconfig.json에서 "strictNullChecks:false"를 추가 해주면 된다. "strictNullChecks" 옵션은 "strict"옵션의 하위 호환 버전으로 "strict"옵션을 끄면 "strictNullChecks"도 같이 꺼진다.

리터럴 타입

• 변수의 타입을 값 그 자체로 정의

  let numB: 10 = 10;
  let strA: "hello" = "hello";
  let boolA: true = true;
  

## 2. 배열과 튜플
### 배열 

// 배열 let numArr: number[] = [1, 2, 3]; let strArr: string[] = ["hello", "im", "yricog"]; let boolArr: Array = [true, false, true]; // 제네릭 문법

// 배열 요소의 타입이 다양할 경우 let multiArr: (number | string)[] = [1, "hello"]; // 유니온 타입

// 다차원 배열의 타입 정의 let doubleArr: number[][] = [ [1, 2, 3], [4, 5], ];

### 튜플
* 길이와 타입이 고정된 배열 

let tup1: [number, number] = [1, 2]; let tup2: [number, string, boolean] = [1, "2", true];

/**

• js로 컴파일하면 일반 배열이기 때문에 배열 메서드 사용 가능!

• 이 때 push, pop을 사용해도 에러가 나지 않는 것은

• 길이에 제한을 두지 않기 때문이다.

• / tup1.push(1); tup1.pop(); tup1.pop(); tup1.pop(); // 정상!

  const users: [string, number][] = [ ["이아무개", 1], ["김수민", 2], ["박나래", 3], ["김아라", 4], ];

3. 객체

• 객체 리터럴 타입

  • optional property(?) : 옵셔널 속성
  • readonly : 읽기 전용

    let user: {    // 객체 리터럴 타입
    id?: number; // optional property
    name: string;
    } = {
    id: 1,
    name: "yricog",
    };
    

  user.id; user = { name: "홍길동" }; // id는 옵셔널

  let config: { readonly apiKey: string; // readonly } = { apiKey: "API KEY", };

  // config.apiKey = "hacked"; 변경 불가능!

> 타입을 object로 지정하면 객체 안에 object만 남는다. 
그래서 user.id 와 같이 속성을 지정하면 없는 속성이 된다.

> 위와 같이 구조를 기준으로 타입을 정의하는 것을 **'구조적 타입 시스템(Property Based Type System)'**이라 한다.

## 4. 타입 별칭과 인덱스 시그니처
### 타입 별칭(type alias)

type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string; };

let user: User = { id: 1, name: "jenna", nickname: "jj", birth: "1999.01.08", bio: "안녕하세요", location: "서울시", };

### 인덱스 시그니처
* key-value의 타입이 어떠한 규칙을 갖게 됨
* 해당 타입은 검사할 객체가 비어 있어도 괜찮다

type CountryCodes = { [key: string]: string; // 인덱스 시그니처, 비어있어도 된다 Korea: number; // 꼭 필요한 값 };

let countryCodes: CountryCodes = { UnitedState: "us", // key가 string이면 어떤걸 추가해도 ok. UnitedKingdom: "uk", Korea: "ko", // 없으면 에러 };

## 5. Enum 타입
* 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입 
* 값을 지정하지 않으면 자동으로 0부터 숫자가 값으로 부여된다.
* enum은 type과 다르게 컴파일 시 사라지지 않는다.

enum Role { ADMIN = 0, USER = 1, GUEST = 2, }

enum Language { korean = "ko", english = "en", }

const user1 = { name: "김이박", role: Role.ADMIN, //0 language: Language.korean, };

const user2 = { name: "홍길동", role: Role.USER, //1 };

const user3 = { name: "아무개", role: Role.GUEST, //2 };

## 6. Any와 Unknown 타입
### any 
* 특정 변수의 타입을 우리가 확실히 모를 때 사용
* 단점 : 타입 검사를 다 통과한 다음에 런타임에 오류를 낸다.
  * 사실상 타입 검사를 안하는 것과 같으며, 그것은 타입스크립트가 가진 이점을 포기한다는 것.
  * ~~최대한 사용하지 말기!!~~ 

let anyVar: any = 10;

// 모든 타입 할당 가능 anyVar = "hello"; anyVar = true; anyVar = 1; anyVar = {}; anyVar = () => {};

let num: number = 10; num = anyVar; // ❗️ 모든 타입의 값에 할당되어질 수 있다.

### Unknown
* any처럼 아무 변수에나 할당할 수 없다.
  * ~~any 보다 낫다는 점..~~

let unknownVar: unknown;

// 모든 타입 할당 가능 unknownVar = "hello"; unknownVar = true; unknownVar = 1; unknownVar = {}; unknownVar = () => {};

let num: number = 10; num = unknownVar; // 할당 불가❌

// 타입 정제 후 할당 가능 if (typeof unknownVar === "number") { num = unknownVar; }

## 7. Avoid와 Never 타입 
### void
* void(= 공허, 아무것도 없음을 의미하는 타입)
* 오직 **undefined만 할당 가능**하다.
* "strictNullChecks"를 false로 하면 **null 값도 할당 가능 **
  * ~~undefined와 null을 타입으로 명시하면 실제로 undefined와 null을 직접 return 해주어야 한다.~~
* return문이 필요없는 함수에는 void를 사용하자.

function func1(): string { return "hello"; // string을 리턴 }

function func2(): void { console.log("hello"); // 그냥 출력문, 아무것도 리턴하지 않음 }

let a: void; a = 1; // 할당 불가❌ a = "hello"; // 할당 불가❌ a = {}; // 할당 불가❌ a = undefined; // 오직 undefined만 담을 수 있다

### never
* never(= 존재하지 않는, 불가능한 타입)
* 함수가 종료될 수 없어서 **이 함수에 반환값 자체가 있는게 모순이다!** 할 때 사용

function func3(): never { while (true) {} // 무한 루프 }

function func4(): never { throw new Error(); // 실행 시 프로그램 종료 }

// ❗️변수에 never 타입을 사용할 순 있지만, 아무런 값도 담을 수 없다. let b: never;

---
* 출처 : [한 입 크기로 잘라먹는 타입스크립트](https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8) / [docs](https://ts.winterlood.com/6c9bf87f-6a8f-4e96-95b4-5e12d9f82165#c8a5f8ebaa7d4692a90e3d743bb21dea)

❗️문제상황❗️ 현재 진행중인 프로젝트는 Dockerfile를 이용해 Docker Image를 만들어 github action으로 자동배포를 진행한다. 그런데 .env 파일을 세팅하다 보니 두 가지 문제가 생겼다. 하나는 .env 파일은 github에 올라가지 않기 때문에 yml 파일에서 강제로 만들어 배포해야 한다는 것이고, 다른 하나는 Dockerfile에서 각 환경에 따른 분기처리를 위한 세팅을 해야 한다는 것이었다.

Docker를 처음 다루어봐서 해결하느라 3일이나 걸렸지만 서버 기동하는 것까지 성공하니 엄청 뿌듯하다! 마지막에는 Docker를 로컬에서 테스트하는 방법도 작성해 보도록 하겠다😀

1. yml 파일에서 .env 파일 생성하기

(yml 파일은 dev와 prod로 구분되어 있지만 dev를 기준으로 작성하도록 하겠다.) 먼저, 배포 시 필요한 환경변수 파일은 .env.development와 .env.production 두 가지이다. 각 파일에는 NEXT_PUBLIC_API_URL 이라는 변수와 api 주소가 저장되어 있다. 해당 변수값을 gihub action secrets에 각 환경별로 저장해준다.

• Secrets 저장

  • DEV_NEXT_PUBLIC_API_URL
  • PRD_NEXT_PUBLIC_API_URL

• yml 파일에 명령어 추가 ```

• name: Generate Environment Variables File for Devlopment run: |

    echo "NEXT_PUBLIC_API_URL=$DEV_NEXT_PUBLIC_API_URL" >> .env.development

  env:

    DEV_NEXT_PUBLIC_API_URL: ${{secrets.DEV_NEXT_PUBLIC_API_URL}}

  ```

• 해석

  • name: 개발을 위한 환경변수 파일 생성
  • run : "NEXT_PUBLIC_API_URL = $DEV_NEXT_PUBLIC_API_URL" 문구를 .env.development 파일을 생성하여 저장
  • env : DEV_NEXT_PUBLIC_API_URL 는 secrets의 DEV_NEXT_PUBLIC_API_URL 값을 가져옴

이렇게 하면 .env.development 을 생성하여 NEXT_PUBLIC_API_URL=http://0.00.00.00:8080 처럼 기존 파일과 같은 내용이 저장되고, 코드 내부에서 해당 변수를 사용할 수 있게 된다.

2. Dockerfile 변수명 분기처리 하기

.env 파일을 생성한 뒤 package.json 파일 또한 다음과 같이 수정하게 되었다.

"scripts": {
    "dev": "env-cmd -f .env.local next dev",
    "build:dev": "env-cmd -f .env.development next build",
    "build:prod": "env-cmd -f .env.production next build",
    "start:dev": "env-cmd -f .env.development next start",
    "start:prod": "env-cmd -f .env.production next start"
}

때문에 Dockerfile 에서는 script 실행 명령어와 파일 복사하는 부분에서 변수를 사용하여 분기처리 할 수 있도록 수정해 주었다.

# Build 
ARG BUILD_ENV
RUN pnpm run build:${BUILD_ENV}

# Copy environment file
ARG ENVIRONMENT
COPY ../.env.${ENVIRONMENT} /app/.env.${ENVIRONMENT}

# Start Next.js 
EXPOSE 3000
ARG BUILD_ENV
ENV BUILD_ENV=${BUILD_ENV}

CMD ["/bin/sh", "-c", "pnpm run start:${BUILD_ENV}"]

해당 변수는 다음과 같이 yml 파일에서 변수 값을 지정하여 사용하면 된다. (Docker 이미지 빌드 시 적용)

- name: Build Docker image
    run: |
          docker build \
            -t project-name:latest \
            -f .docker/Dockerfile \
            --build-arg BUILD_ENV=dev \
            --build-arg ENVIRONMENT=development .

3. Docker 로컬 테스트

1. 터미널에서 docker ps 명령어로 실행 중인 컨테이너 있는지 확인
2. 해당 프로젝트 & 브랜치 이동
3. docker build -t project-name:latest -f .docker/Dockerfile --build-arg BUILD_ENV=dev --build-arg ENVIRONMENT=development . 로 docker 띄우기
4. 다시 docker ps 로 확인 Docker Desktop 에서도 확인 가능하다!

모던 자바스크립트 딥다이브 책의 내용을 기반으로 작성하였습니다.🌿

연산자

1. 산술 연산자

산술 연산자는 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능할 경우 NaN을 반환한다. 산술 연산자는 피연산자의 개수에 따라 이항 / 단항 산술 연산자로 구분된다.

이항 산술 연산자

• 2개의 피연산자를 산술

  5 + 2; // 7
  5 - 2; // 3
  5 * 2; // 10
  5 / 2; // 2.5
  5 % 2; // 1

  단항 산술 연산자

• 1개의 피연산자를 산술 ++, --, +, -

  let x = 1;
  x++; // x = x + 1
  console.log(x); // 2
  

x--; // x = x - 1 console.log(x); // 1

* 전위 증가/감소```++, --``` 연산자는 피연산자의 값을 먼저 증가/감소 시킨 후 다른 연산을 수행한다. 피연산자의 값을 변경하는 부수 효과가 있는 것으로, **암묵적 할당**이 이뤄지게 된다. 

let x=5, result;

// 선할당 후증가 result = x++; console.log(result, x); // 5, 6

// 선증가 후할당 result = ++x; console.log(result, x); // 7, 7

// 선할당 후감소 result = x--; console.log(result, x); // 7, 6

// 선감소 후할당 result = --x; console.log(result, x); // 5, 5

* ```+``` 연산자는 피연산자에 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.

+10; // 10 +(-10); // -10

* ```-``` 연산자는 피연산자의 부호를 반전한 값을 반환한다. 

-(-10); // 10

* 숫자 타입이 아닌 피연산자에 ```+, -``` 연산자를 사용하면 숫자 타입으로 변환하여 반환한다. 부수 효과는 없다. 

let x = '1';

console.log(+x); // 1 -> 숫자타입으로 반환 console.log(x); // "1" -> 문자열 그대로다. 부수효과 없음!

### 문자열 연결 연산자 
```+``` 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 

'1' + 2; // '12'

// 암묵적 타입 변환 1 + true // 2 (true = 1) 1 + false // 1 (false = 0) 1 + null // 1 (null = 0)

// undefined는 숫자 타입으로 변환되지 X +undefined; // NaN 1 + undefined; // NaN

자바스크립트 엔진은 암묵적으로 불리언 타입을 숫자 타입으로 강제 변환한 뒤 연산을 수행하는데, 이를 **암묵적 타입 변환** 또는 **타입 강제 변환** 이라고 한다. 

---
## 2. 할당 연산자 
할당 연산자는 피연산자의 결과 값을 변수에 할당한다. 

let x;

x = 10; // 10 x += 5; // 15 x -= 5; // 10

할당문은 값으로 평가되는 표현식인 문으로써 할당된 값으로 평가된다. 때문에 할당문 자체를 다른 변수에 할당할 수도 있다. 

let x; console.log(x = 10); // 10

/* < 연쇄할당 순서 > 1. c = 0 2. b = 0 3. a = 0 */ let a, b, c; a = b = c = 0; console.log(a, b, c); // 0 0 0

---
## 3. 비교 연산자
비교 연산자는 좌,우항의 피연산자를 비교하여 결과를 불리언 값으로 반환한다. 

### 동등/일치 비교 연산자 
동등 비교 연산자(==)와 일치 비교 연산자(===)는 좌,우항의 피연산자가 같은 값으로 평가되는지를 검증하지만 그 엄격성의 정도가 다르다. 

* x == y : x와 y의 값이 같음 
* x === y : x와 y의 값과 타입이 같음
* x != y : x와 y의 값이 다름
* x !== y : x와 y의 값과 타입이 다름 

**동등 비교 연산자(==)**는 먼저 **암묵적 타입 변환**을 통해 타입을 일치시킨 후 같은 값인지를 비교한다. 이는 편리한 경우도 있지만 결과를 예측하기 어려워 실수하기 쉽다. 

5 == 5; // true 5 == '5'; // true

'0' == ''; // false 0 == ''; // true 0 == '0'; // true false == 'false'; // false false == '0'; // true false == null; // false false == undefined; // false

**일치 비교 연산자(===)**는 값과 타입 모두 같은 경우에 한하여 true를 반환한다. 때문에 예측하기 쉽다. 

5 === 5; // true 5 === '5'; // false

NaN은 자신과 일치하지 않는 유일한 값이다. NaN인지 검증하려면 **Number.inNaN**을 사용하자.

NaN === NaN; // false Number.isNaN(NaN); // true

JS에는 양의 0과 음의 0이 있는데, 이 둘은 본래 true를 반환한다. 이를 정확히 구분하기 위해서는 **Object.is** 메서드를 사용하자.

0 === -0; // true 0 == -0; // true

Object.is(-0, +0); // false Object.is(NaN, NaN); // true

### 대소 관계 비교 연산자
대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값으로 반환한다. 

5 > 0; // true 5 > 5; // false 5 >= 5; // true 5 <= 5; // true

---
## 4. 삼항 조건 연산자 
삼항 조건 연산자는 조건식의 결과에 따라 반환할 값이 결정된다. 
* 조건식 ? 조건식이 True일 때 반환할 값 : 조건식이 False일 때 반환할 값

또한 삼항 조건 연산자는 값으로 평가될 수 있는 표현식인 문이다. 
따라서 if...else 문과 다르게 값처럼 사용될 수 있다. 

let x = 2; let result = x % 2 ? '홀수' : '짝수'; console.log(result); // 짝수

---
## 5. 논리 연산자 
논리 연산자는 좌,우항의 피연산자를 논리 연산한다. 

// 논리합(||) 연산자 true || true; // true true || false; // true false || true; // true false || false; // false

// 논리곱(&&) 연산자 true && true; // true true && false; // false false && true; // false false && false; // false

// 논리 부정(!) 연산자 !true; // false !false; // true

// 논리 부정 연산자의 암묵적 타입 변환 !0; // true !'Hello'; // false

위 예시처럼, 논리 부정 연산자는 암묵적 타입 변환을 해서라도 **언제나 불리언 값을 반환**한다. 하지만 논리합(||) 또는 논리곱(&&) 연산자의 표현식 결과는 **불리언 값이 아닐 수도 있으며**, 2개의 피연산자 중 어느 한쪽으로 평가된다.  (이후 '단축 평가'에서 자세히 알아보자) 

'Cat' && 'Dog'; // 'Dog'

### 드 모르간의 법칙 
논리 연산자로 구성된 복잡한 표현식을 가독성 좋은 코드로 변환해보자.

!(x || y) === (!x && !y) !(x && y) === (!x || !y)

---
## 6. 쉼표 연산자 
쉼표 연산자는 왼쪽부터 차례대로 피연산자를 평가하고, 평가가 끝나면 마지막 피연산자의 결과를 반환한다.

let x, y, z; x = 1, y = 2, z = 3; // 3

---
## 7. 그룹 연산자
소괄호```()```로 피연산자를 감싼 그룹 연산자는 표현식을 가장 먼저 평가한다. 그룹 연산자는 연산자 우선순위가 가장 높다. 

10 * 2 + 3; // 23 10 * (2 + 3); // 50

---
## 8. typeof 연산자
typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다. typeof가 반환하는 문자열은 7개의 데이터 타입과 정확히 일치하지는 않는다.  

typeof '' // string typeof 1 // number typeof NaN // number typeof true // boolean typeof undefined // undefined typeof Symbol() // symbol typeof null // ❌object typeof [] // object typeof {} // object typeof new Date() // object typeof /test/gi // object typeof function(){} // function

```typeof null``` 의 결과는 object를 반환하는데, 이는 **자바스크립트의 첫 번째 버그**이다.
(~~기존 코드에 영향을 줄 수 있기 때문에 아직 수정되지 못하고 있다고 한다~~🫢)
때문에 null 타입을 확인할 때는 일치 연산자(===)를 사용하도록 하자.

let foo = null; typeof foo === null; // false foo === null // true

또 하나 주의할 점은, 선언하지 않은 식별자를 typeof로 연산할 때 ```ReferenceError```가 아닌 ```undefined```를 반환한다. 

typeof undeclared; // undefined

---
## 9. 지수 연산자
지수 연산자는 ES7에서 도입된 것으로, 좌항의 피연산자를 밑(base)로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자를 반환한다. 지수 연산자가 도입되기 전에는 Math.pow 메서드를 사용했었다. 

2 ** 2; // 4 2 ** 2.5 // 5.6568... 2 ** 0 // 1 2 ** -2 // 0.25

// Math.pow 메서드 예시 Math.pow(2,2) // 4

음수를 거듭제곱의 밑으로 사용하려면 괄호로 묶어보자. 

-5 ** 2; // SyntaxError (-5) ** 2; // 25

할당 연산자와 함께 사용 가능한 지수 연산자

let num = 5; num **= 2;

지수 연산자는 이항 연산자 중 우선순위가 가장 높다.

2 * 5 ** 2; // 50

```

10. 그 외의 연산자

그 외 연산자들은 다른 주제와 연관하여 추후 자세히 살펴보도록 하자!

• ?. 옵셔널 체이닝
• ?? null 병합 연산자
• delete 프로퍼티 삭제
• new 생성자 함수 호출 시 인스턴스 생성
• instanceof 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
• in 프로퍼티 존재 확인

Github Organization에서 repo 생성 후 프로젝트를 진행하는 중에, 작업중인 repo를 개인 Github에서도 확인하고 관리하고 싶어졌다.

해결책

1. Github Import Repository

먼저 Organization에서 repo를 가져오는 방법은 Fork와 importer 두 가지가 있다. 하지만 Fork는 repo를 가져온 뒤 최신 변경 사항을 업데이트 하기 위해서는 Pull Request를 사용해야 하고, importer는 upstream repo를 origin remote로 등록한 뒤 fetch만 해주면 되었다. 그래서 importer 를 사용하는 것으로 결정!

Github에서 repository를 import하는 과정은 다음과 같다.

• 개인 github에서 오른쪽 상단에 있는 + 버튼을 클릭한 뒤 Import repository로 접속한다.
• 가져올 repository의 URL을 입력한다. (.git으로 끝나는 것 확인)
• username과 access token을 입력한다.
• 아래 Begin import 버튼 누르면 복제 시작!

2. 최신 변경사항 업데이트 하기

• 복제된 repo를 로컬로 clone
  • git clone (복제된 repository url)
• 원본 repo 주소를 upstream으로 등록
  • git remote add upstream (원본 repository url)
• upstream 등록되었는지 확인
  • git remote -v
• upstream(원본 저장소) 최신 변경사항 가져오기
  • upstream 등록 후 업데이트는 여기서부터만 진행하면 된다!
  • git fetch upstream
• 변경사항 merge 및 push 하기
  • git checkout main
  • git merge upstream/main
  • git push origin main

이렇게 하면 원본 repository를 복제한 뒤 최신 변경사항 업데이트까지 주기적으로 진행할 수 있다! 😀

1. 초기화 및 설치
   • npm init
   • npm i @types/node : node.js 내장 기능들의 타입 정보 패키지(ex_console)
   • npm i -g typescript : 타입스크립트 컴파일러(tsc) 설치
2. ts -> js 컴파일
   • src/index.ts 파일 생성
   • tsc src/index.ts : 컴파일된 index.js파일 생성
   • node src/index.js : index.js 파일 실행
3. 컴파일과 실행을 동시에
   • npm i -g tsx
   • tsx src/index.ts : 바로 node로 실행

컴파일러 옵션 설정하기

1. 컴파일러 옵션 파일 생성

   • tsc --init

2. 컴파일 옵션 설정

   {
      "compilerOptions": {
         "target": "ESNext",   // js 버전 설정
         "module": "ESNext",   // js 모듈 시스템 설정
         "outDir": "dist",     // 컴파일된 js파일 위치 설정
         "strict": true,       // 타입검사 엄격 여부
         "moduleDetection": "force", // ts의 파일 모듈 인식 여부 - 개별/전역
         "skipLibCheck": true  // 타입 정의 파일(.d.ts)의 타입 검사 생략
      },
      "include": [
         "src"                 // 컴파일할 파일의 범위와 위치 설정
      ]
   }
   

   • ts파일은 전역모듈로 인식되기 때문에, 각각 다른 ts파일이라도 같은 변수명을 사용하면 에러가 난다. (하나의 모듈로 인식) 때문에, export{} 같은 모듈시스템을 사용하는 키워드를 사용 해주어야 개별 파일로 인식할 수 있다.
   • 'moduleDetection' 옵션을 설정한 뒤 같은 변수명이 있는 ts파일을 컴파일하면 js 파일 내부에 'export {};' 코드가 생성된 것을 확인할 수 있다.

• 출처 : 한 입 크기로 잘라먹는 타입스크립트 / docs

모던 자바스크립트 딥다이브 책의 내용을 기반으로 작성하였습니다.🌿

데이터 타입

숫자 타입

C나 Java의 경우 정수(소수점 이하 없는 숫자)와 실수(소수점 이하 있는 숫자) 구분이 가능한 다양한 숫자 타입을 제공한다. 하지만 자바스크립트는 모든 수를 실수로 처리하며, 정수를 위한 데이터 타입이 존재하지 않는다.

다음과 같은 특별한 값도 표현 가능하다.

• Infinity : 양의 무한대
• -Infinity : 음의 무한대
• NaN : 산술 연산 불가(not-a-number)

  console.log(10 / 0) // Infinity
  console.log(10 / -0) // -Infinity
  console.log(1 * 'string') //NaN

  문자열 타입

  문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다. 작은 따옴표(''), 큰 따옴표("") 또는 백틱(``)으로 감싸서 표현 가능하다.

  var string = '문자열';

  자바스크립트의 문자열은 원시 타입이며, 변경 불가능한 값(immutable value)이다.

템플릿 리터럴

ES6에 도입된 템플릿 리터럴은 백틱을 사용해 표기하며, 멀티라인 문자열 / 표현식 삽입 / 태그드 템플릿 등 편리한 문자열 기능을 제공한다.

var template = `<ul>
    <li><a href="#">Home</a></li>
</ul>`

var first = 'Enna';
var last = 'Kim';
console.log(`My name is ${first} ${last}.`) // My name is Enna Kim.

console.log(`1 + 2 = ${1 + 2}`) // 1 + 2 = 3

불리언 타입

논리적 참과 거짓을 나타내는 true, false 값

var foo = true;
console.log(foo); //true

foo = false;
console.log(foo); //false

undefined 타입

변수를 선언하면 암묵적으로 undefined로 초기화 된다. 따라서 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다. undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라, 자바스크립트 엔진이 변수를 초기화할 때 사용되는 값이다. 따라서 개발자가 의도적으로 undefined 값을 할당하는 것은 본래 취지와 어긋나므로 권장되지 않는다.

null 타입

null 타입은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. null을 할당하는 것은 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이며, 자바스크립트 엔진은 참조되지 않는 메모리 공간에 대해 가비지 콜렉터를 수행하게 된다.

또한 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

심벌 타입

ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값이다. 또한 다른 값과 중복되지 않는 유일무이한 값이다. Symbol 함수를 호출해 생성하며, 생성된 심벌 값은 외부에 노출되지 않는다.

var key = Symbol('key');
console.log(typeof key); // symbol

(33장에서 자세히-)

💡 자바스크립트의 데이터 타입은 크게 원시 타입과 객체 타입으로 분류된다. 자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체라는 사실을 기억하자. (객체 타입에 대해선 11장에서 자세히 살펴볼 예정)

데이터 타입의 필요성

자바스크립트 엔진은 데이터 타입에 따라 정해진 크기의 메모리 공간을 확보한다.

예를들어, 숫자 100을 2진수로 저장한다고 했을 때 자바스크립트 엔진은 8바이트의 메모리 공간을 확보하고 저장한다. 반대로 이 값을 참조할 경우, 식별자를 통해 숫자 타입의 값 100이 저장되어 있는 메모리 공간의 선두 메모리셀의 주소를 찾아가 8바이트만큼 읽어오게 된다. 이처럼 값을 참조하기 위해 한번에 읽어 들여야 할 메모리 공간의 크기(메모리셀의 개수)를 알아야 한다.

또한 메모리에서 읽어들인 2진수를 데이터 타입에 따라 다르게 해석될 수 있다. 예를들어 저장된 값 0100 0001을 숫자로 해석하면 65이지만 문자열로 해석하면 'A'이다.

데이터 타입이 필요한 이유

• 저장 시 메모리 공간의 크기를 결정하기 위해
• 값 참조 시 읽어들일 메모리 공간의 크기를 결정하기 위해
• 2진수를 어떻게 해석할지 결정하기 위해

동적 타이핑

C나 자바같은 언어는 변수 선언 시 데이터 타입을 선언해야 하는 정적 타입 언어이다. 정적 타입 언어는 컴파일 시점에 타입 체크를 수행하는데, 만약 타입 체크를 통과하지 못하면 에러를 발생시킨다. 자바스크립트는 이와 다르게 변수 선언 시 타입을 선언하지 않으며 어떤 데이터 타입의 값이라도 자유롭게 할당이 가능하다.

즉, 정적 타입 언어는 변수 선언 시점에 타입이 결정되고 변수의 타입을 결정할 수 없다. 반면에 자바스크립트는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 변수의 타입을 언제든지 변경할 수 있다.

다시 말해, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)되며 재할당에 의해 변수의 타입은 언제든지 동적으로 변경 될 수 있다. 이러한 특징을 동적 타이핑(dynamic typing)이라고 한다.

자바스크립트와 같은 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어져 안정적인 프로그램 개발을 위해 주의해야 할 사항이 있다.

• 오류 발생 가능성을 낮추기 위해 변수는 필요한 만큼 최소한으로 유지할 것
• 변수의 스코프는 최대한 좁게 만들 것
• 전역 변수는 최대한 사용하지 않을 것
• 변수보다는 상수(const)를 사용할 것
• 변수 네이밍은 목적과 의미에 맞게 할 것

모던 자바스크립트 딥다이브 책의 내용을 기반으로 작성하였습니다.🌿

변수

변수란 무엇인가

컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.
메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이며, 메모리 셀 하나의 크기는 1바이트(8비트) 이다. 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들인다.

각 셀은 고유의 메모리 주소를 갖는다. 메모리 주소는 메모리 공간의 위치를 나타내며, 0부터 메모리 크기만큼 정수로 표현된다.(0x00000000 ~ 0xFFFFFFFF) 또한, 컴퓨터는 모든 데이터를 2진수로 처리한다. 메모리에 저장되는 데이터는 데이터의 종류와 상관없이 모두 2진수로 저장된다.

10 + 20 이라는 식이 있다. 컴퓨터는 10과 20을 각 메모리셀에 저장하고 그에 대한 연산 결과인 30도 새로운 메모리셀에 저장한다. 이 때 30이라는 결과값을 재사용하기 위해 메모리 공간을 식별하기 위한 이름인 변수를 사용한다. 값에 직접 접근하는 것은 치명적인 오류가 발생할 가능성이 있기 때문에 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다. var result = 10 + 20

변수 이름을 식별자(identifier)라고도 한다. 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺고, 이 매핑 정보 또한 메모리에 저장된다. 식별자는 값이 아닌 메모리 주소를 기억한다. (변수 이름을 비롯한 모든 식별자는 실행 컨텍스트(execution context)에 등록된다. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.)

변수 선언이란, 변수를 생성하여 값을 저장하기 위한 메모리 공간을 확보하는 것을 말한다. 변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지는 아무도 사용할 수 없게 보호된다. 변수 선언 키워드에는var, let, const가 있다. 자바스크립트 엔진은 변수 선언 시 선언단계와 초기화 단계를 거쳐 수행된다.

• 선언 단계 : 자바스크립트 엔진에 변수의 존재를 알림
• 초기화 단계 : 메모리 공간을 확보하고 undefined를 할당하여 초기화

때문에 var score; 와 같이 변수를 선언한다면, score에는 암묵적으로 undefined가 할당될 것이다. 만약 초기화 단계를 거치지 않으면 이전에 사용했던 값인 쓰레기 값(garbage value)가 남아있을 수 있기 때문에 꼭 초기화 단계를 거치게 된다.

변수 및 모든 식별자 사용 시 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.

변수 선언의 실행 시점과 호이스팅

console.log(score); // undefined

var score; // 변수 선언문 

위 코드는 변수 선언문보다 변수를 참조하는 코드가 앞에 있지만, ReferenceError(참조 에러)가 발생하지 않고 undefined가 발생한다. 왜 그럴까?

자바스크립트 엔진은 런타임 이전에 먼저 소스코드의 평가 과정을 실행한다. 이 때 변수 선언을 포함한 모든 선언문(변수, 함수 선언문, class 등)을 찾아내 먼저 실행하게 된다. 이러한 평가 과정이 끝나면 비로소 런타임 환경에서 모든 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행한다.

이렇게 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을 변수 호이스팅 이라 한다.

값의 할당

var score = 80;

위 코드는 변수 선언과 값의 할당을 하나의 문으로 단축 표현한 것이다. 하지만 자바스크립트는 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행하게 된다. 코드 평가 과정에서 변수를 선언한 뒤, 런타임 환경에서 값을 할당하는 것이다.

때문에 다음과 같은 식에서 첫번 째 콘솔이 실행될 때는 변수 선언만 된 상태이므로 undefined가 출력된다.

console.log(score); // undefined
var score = 80; // 1. 변수선언 2. 값의 할당
console.log(score) // 80

값의 재할당

재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 할당하는 것이다. 만약 값을 재할당 할 수 없으면 변수가 아니라 상수(constant)라 한다.

💡 ES6에서 도입된 const 키워드를 사용하면 재할당이 금지된 상수를 표현할 수 있다. 하지만 const를 반드시 상수만을 위해 사용하지 않는다. (15장에서 더 자세히-!)

변수에 값을 재할당하면 이전 값이 저장되어 있던 메모리 공간을 지우고 재할당하는 것이 아니라, 새로운 메모리 공간을 확보하고 그 메모리 공간에 새로운 값을 할당하게 된다. 이 때 더 이상 필요하지 않는 이전 값들은 가비지 콜렉터에 의해 메모리에서 자동 삭제된다.

💡 가비지 콜렉터는 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제한다. 자바스크립트는 매니지드 언어로써 내장된 가비지 콜렉터를 통해 메모리 누수를 방지한다.

• 매니지드 언어(managed language) : 메모리의 할당 및 해제 등의 관리 기능을 언어 차원에서 담당하고, 개발자의 직접적인 메모리 제어를 허용하지 않음 (언매니지드 언어 : C언어)

식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 포함 가능
• 숫자로 시작하는 것은 허용되지 않음
• 예약어는 사용 불가 (ex_await, class, const, if, this...)
• 대소문자 구별 가능

var first-name; // - 사용불가
var 1st; // 숫자로 시작 불가
var this; // 예약어 사용 불가 

네이밍 컨벤션

가독성을 좋게 하기 위해 규정한 명명규칙. 자바스크립트에서는 일반적으로 변수나 함수 이름에는 카멜 케이스를, 생성자 함수 및 클래스 이름에는 파스칼 케이스를 사용한다.

// 카멜 케이스
var firstName; 

// 스네이크 케이스
var first_name; 

// 파스칼 케이스
var FirstName; 

// 헝가리언 케이스
var strFirstName; // 타입 + 식별자
var $elem = document.getElementById('myId) // DOM 노드
var observable$ = fromEvent(document, 'click') // RxJS 옵저버블 

책의 예제를 인용한 것으로 var 키워드를 동일하게 사용하였습니다 :)

*AWS TechCamp - AWS 핵심 서비스로 웹 애플리케이션 구축하기 *

3일동안 진행되는 온라인 AWS TechCamp를 신청했다. 실무에서 사용해오던 AWS 핵심 서비스들에 대한 깊은 이해와, 아직 사용해보지 않은 서비스들에 대한 지식의 확장을 기대하면서!

모든 과정은 이론+실습으로 진행되며 오전/오후 각각 다른 과정들이 다양한 레벨로 진행된다. 이번 기초 과정은 그동안 실무에서 가장 빈번하게 사용해왔던 서비스들이지만 조금씩 놓치고 있던 부분들이 있어 다시 한번 큰 흐름으로 개념 정리를 해보려고 한다.

• 실습 구성도 아키텍쳐

AWS 리전과 가용영역

AWS는 전세계적으로 호스팅되며, 이 호스팅되는 위치를 지리적 관점으로 구분하고 리전(region)이라 부른다. 각 리전은 완전히 독립되어 있기 때문에 한 리전에서 만든 리소스를 다른 리전에서 사용할 수 없다. 하나의 리전은 고가용성 및 확장성을 위해 물리적으로 분리된 _최소 3개 이상의 가용 영역(Availability Zone)_으로 구성된다. (현재 서울에는 총 4개의 가용 영역이 존재한다)

각 가용영역 간 모든 트래픽은 암호화 되며, 서로 100km 이내 거리에 위치한다. 또한 각 가용 영역은 하나 이상의 개별 데이터 센터로 구성되고, 데이터 센터는 보통 50,000~80,000대의 물리적 서버가 존재한다.

1. 네트워크 구성

VPC(Virtual Private Cloud) 개요

VPC(Virtual Private Cloud)란, 사용자가 정의한 논리적으로 격리된 가상의 프라이빗 네트워크 환경이다. 자체 데이터 센터에서 운영하는 기존 네트워크 환경과 유사하게 사용이 가능하다. 여기서 '논리적으로 격리' 란 예를들어 집 주소 중 A동 303호만 알려주는 격으로, 퍼블릭 주소가 있어야만 앞의 주소를 알려주어 찾아오게 할 수 있다.

이해가 쏙 갔던 강연자님의 인상적인 한 마디 -

📢 "땅 없이 아파트를 올릴 수 없듯, 네트워크(VPC)를 구성해야 서버(EC2)를 올릴 수 있다!"

VPC는 아래 예시와 같이 구성하게 된다. VPC에는 하나의 리전의 각 가용성 영역 안에 하나의 서브넷이 있고, 각 서브넷 안에 EC2 인스턴스가 있다. 그리고 VPC 리소스와 인터넷 간의 통신을 허용하는 Internet Gateway가 있게 된다.

VPC 구성

1. IP 주소 범위 설정

VPC의 IP범위는 _RFC 1918(사설 아이피 대역)_에 맞춰서 구축해야 한다. 사설 아이피(프라이빗 IP)란 인터넷을 위한 사용이 아닌 사용자간 사용하는 아이피 주소 대역을 말한다. 즉, 네트워크 내부에서 서로의 위치를 찾아갈 때 사용한다.

📢 다른 집 찾아갈 땐 퍼블릭아이피! 같은 집 안에서는 사설아이피!

IP 주소 범위 설정 시 주의사항

• CIDR(Classless Inter-Domain Routing) 블록 설정
  • CIDR : 클래스 없이 네트워크에 유연하고 효율적으로 IP주소를 할당하는 방법
• RFC 1918의 사설 IP 대역 사용 권고
• VPC의 네트워크 범위는 /16~/28까지 가능
• CIDR는 생성 후 변경 불가능
• 향후 직접 연결할 가능성이 있는 네트워크와 주소가 중복되지 않도록 할당이 권고됨

2. 서브넷 정의

서브넷은 _VPC의 IP 주소 범위_이다. VPC 안에는 여러개의 서브넷이 있을 수 있는데, 더 많은 네트워크망을 만들기 위해 서브넷을 나누게 된다. 서브넷은 VPC보다 더 작은 단위이므로 IP범위 또한 더 작은 값을 갖게 된다. 서브넷을 추가하면 _EC2_와 같은 리소스를 배포할 수 있다.

3. 라우팅 테이블 구성

네트워크 요청 시 데이터는 _라우터(목적지)_로 향하게 되는데 각각 정의된 _라우팅 테이블(이정표)_에 따라 작동된다. VPC의 각 서브넷은 라우팅 테이블에 연결되어야 하며, 라우팅 테이블에서는 서브넷에 대한 라우팅을 제어한다. 이 때, 서브넷을 특정 라우팅 테이블과 연결하지 않으면 VPC와 함께 자동으로 제공된 기본 라우팅 테이블과 연결된다.

라우팅 테이블을 통해, 로컬을 타겟으로 하는 IP범위를 갖는 네트워크 요청은 로컬 안에서 찾게 된다. 하지만 그 외의 외부로 통하는 트래픽은 인터넷 게이트웨이라는 관문이 필요하다.

📢 라우터는 목적지! 라우팅 테이블은 이정표!

4. Internet Gateway 설정

Internet Gateway는 VPC를 인터넷에 연결해주어 통신할 수 있게 해주는 장치이다. 외부 인터넷에서 Internet Gateway를 통해 라우팅 테이블에 있는 타겟을 확인하여 퍼블릭 서브넷 안에 있는 인스턴스에 접근이 가능해진다. 혹은 거꾸로! (프라이빗 서브넷은 Internet Gateway와 연결되어 있지 않다)

5. 프라이빗 서브넷과 NAT 게이트웨이

위에서 말한 것과 같이 _Internet Gateway_는 _퍼블릭 서브넷_과만 연결이 가능하다. 기본적으로 프라이빗 서브넷의 라우팅 테이블은 10.0.0.0/16 local을 타겟한다. 하지만 프라이빗 서브넷이 인터넷과 아웃바운드 통신이 필요하다면?

_프라이빗 서브넷_이 외부 요청에 의한 인바운드는 필요 없더라도, 인스턴스의 주기적인 업데이트와 같은 이유로 아웃바운드 통신만 허용해야되는 경우가 있다. 이 때 퍼블릭 서브넷에서 동작하는 _NAT 게이트웨이_가 프라이빗 서브넷에서 외부로 요청하는 아웃바운드 트래픽을 받아 Internet Gateway와 연결한다.

6. VPC 액세스 제어 - NACL과 보안 그룹

• NACL(Network Access Control List, 네트워크 액세스 제어 목록)
  • 서브넷 단위 방화벽
  • Stateless(상태 비저장)
  • Allow, Deny 설정 가능
• 보안그룹(Security Group)
  • 인스턴스 단위 방화벽
  • Stateful(상태 저장)
  • Allow만 설정 가능

_NACL(또는 네트워크 ACL)_은 서브넷과 외부 트래픽을 제어하기 위한 방화벽 역할을 담당하는 보안 계층이다. 최소 1개 이상의 서브넷과 연동되어 사용되며 1:N 연동도 가능하다. 포트 및 아이피를 직접 Deny 설정 가능하며, 들어오고 나가는 트래픽을 구분하지 않는다. (NACL에는 규칙에 부여되는 고유 번호가 있는데, 낮은번호부터 우선순위를 갖게 되므로 주의할 것!)

_보안그룹_은 기본적으로 모든 설정이 차단되어 있어 필요한 설정을 Allow해주어야 한다. NACL과는 다르게 각각의 리소스 별로 별도의 트래픽을 설정할 수 있다. NACL과 보안그룹 충돌 시에는 보안그룹이 더 높은 우선순위를 갖게 된다.

📝 [실습과정]

1. VPC 생성 : 초기 VPC 생성 시, VPC CIDR 블록 (10.0.0.0/16) 설정 후 1개의 가용영역 안에 1개의 서브넷을 같이 만든다. ( 서브넷 CIDR 블록 :10.0.10.0/24 )
2. 추가 서브넷 생성 : 위에서 만든 VPC 선택 후 다른 가용영역(ex. ap-northeast-2c) 안에 CIDR 블록 (10.0.20.0/24) 을 설정하여 생성
3. 라우팅 테이블 편집 : 기본 라우팅 테이블이 아닌 사용자 지정 테이블에 인터넷 통신 가능한 경로(ex. 0.0.0.0/0) 가 있는지 확인 후 지정
4. 보안 그룹 생성 : 위에서 생성한 vpc 선택 후 인바운드 규칙에 SSH, HTTP 를 추가하여 인스턴스의 보안그룹 생성

2. 웹 서버 생성

EC2(Elastic Compute Cloud) 개요

EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스이다. EC2는 온디맨드(필요한 서비스를 실시간 제공) 확장 가능한 컴퓨팅 용량을 임대해주는 서비스로, EC2를 사용하여 원하는 수의 가상 서버를 구축하고 관리할 수 있다. 용량을 추가(스케일 업)하여 트래픽 급증 등의 사용량 많은 작업을 처리하고, 사용량이 감소하면 다시 축소(스케일 다운)할 수 있다.

• *EC2의 장점 *
  • 용량의 탄력성
  • 사용한 만큼만 비용 지불
  • 인스턴스 제어 가능
  • 보안 및 네트워크 구성, 스토리지 관리 용이

EC2 구성

1. Instance

인스턴스는 _서버의 컴퓨팅(CPU/RAM)에 해당하는 가상 컴퓨터_로, CPU 및 메모리, 그래픽카드 등의 연산을 위한 하드웨어 부분을 담당한다. AWS EC2는 각 쓰임새에 맞는 최적화된 다양한 인스턴스 유형을 제공한다.

• 인스턴스 유형 마치 게임에서 힘/민첩/지능 중 어느걸로 할지 결정하는 것처럼, EC2 인스턴스도 유형을 선택하고 사이즈를 골라 사용 목적에 맞게 생성 가능하다. CPU / 메모리 / 그래픽 카드 중 어떤 것에 힘을 실을지 성능 목적에 따라 여러가지 타입이 존재한다.

• 인스턴스 사이즈 인스턴스의 사이즈는 CPU의 갯수, 메모리 크기 및 성능 등으로 결정된다. CPU나 메모리 사이즈가 클수록 성능이 빨라지고 요금도 더 많이 부과된다. 아래 예시에서, 아래로 갈수록 사이즈가 커지는 것을 볼 수 있다.

• 인스턴스 타입 읽는 법

  • 인스턴스 패밀리(타입) : ex_범용 애플리케이션 서버용
  • 인스턴스 세대
  • 추가 기능(접두사) : 무슨 기반의 CPU 프로세서 사용?
  • 인스턴스 크기(사이즈)

2. EBS(Elastic Block Storage)

서버의 하드디스크에 해당하는 가상 하드디스크로써 _데이터를 저장하는 역할_을 한다. EBS는 네트워크로 별개로 연결된 서비스이기 때문에 EC2 인스턴스가 종료되어도 별개로 작동한다.

• *EBS 볼륨 * EBS 볼륨이란 EBS로 생성한 디스크 하나하나의 저장 단위를 말한다. 하드 저장 디스크가 SSD,HDD로 나뉘는 것처럼 EBS 볼륨에도 총 5가지의 타입이 있다.
  • 범용(General Purpose of GP3) : SSD
  • 프로비저닝 된 IOPS(Provisioned IOPS or io2) : SSD
  • 쓰루풋 최적화(Throughput Optimized HDD or st1)
  • 콜드 HDD(SC1)
  • 마그네틱(Standard)

3. AMI(Amazon Machine Image)

AMI란 EC2 인스턴스의 OS 및 소프트웨어 등 _설정 상태를 저장하는 기능_이다. AMI를 이용하여 새 인스턴스를 만들면 이미지에 저장된 설정과 같은 환경의 컴퓨터를 빠르게 생성 가능하다. 빠른 개발 및 배포가 가능한 것이 장점이다.

📝 [실습과정]

1. 인스턴스 생성 : OS 이미지 선택 후, 위에서 만든 VPC / 서브넷 / 보안그룹 등을 설정해준다.
   • 인스턴스 생성 후 퍼블릭 IPv4 주소로 아래와 같은 웹 화면을 확인할 수 있다
   2. AMI 생성 : 이미지로 만들 인스턴스 클릭 후 작업 메뉴 > 이미지 및 템플릿 > 이미지 생성 에서 이미지를 생성한다.
   3. AMI 기반 인스턴스 생성 : EC2 > AMI 메뉴에서 위에서 만든 AMI 선택 후 AMI로 인스턴스 시작 버튼을 눌러 새 인스턴스를 생성한다.
   • 해당 실습에서 EBS에 대해선 다루지 않았다

3. 로드 밸런서 구성

ELB(Elastic Load Balancing) 개요

로드 밸런서는 부하를 적절하게 분배해주는 장치인데, AWS에서는 로드 밸런서를 ELB라는 서비스를 통해 제공한다. ELB는 둘 이상의 가용영역에서 트래픽을 자동으로 분산한다. 또한 등록된 대상의 상태를 모니터링하면서 상태가 양호한 대상으로만 트래픽을 라우팅해준다. ELB 사용 시 안정적인 서버 환경을 운영할 수 있다.

• *ELB 특징 *
  • 네트워크 트래픽 분산을 통한 애플리케이션 확장성 개선
  • 여러 가용 영역을 기반으로 고가용성 제공
  • 트래픽에 따라 자동 조정
  • 트래픽을 받는 대상 : EC2 인스턴스 / 컨테이너 / IP주소 / Lambda 함수 등

📝 [실습과정]

1. 로드밸런서 생성하기 클릭 후 트래픽을 라우팅할 VPC와 가용영역(서브넷)을 지정한다. 이 때 가용영역은 2개 이상 선택하는 것이 좋다.
2. 새 보안그룹 생성에서 위에서 지정한 VPC를 선택하고, 인바운드 규칙으로 HTTP를 추가해준다.
3. 리스너 및 라우팅 항목에서 대상 그룹 생성 클릭 후 대상 유형으로 인스턴스를 선택한다. 이후 대상 등록에 보이는 두 개의 인스턴스를 보류 중인 대상으로 등록한다.
4. 리스너 및 라우팅로 돌아와 생성된 대상 그룹을 지정해준다.
5. 웹 서버가 로드 밸런서의 트래픽만 받게 하기 위해서, 해당 서버의 보안 그룹의 인바운드 규칙 편집 후 HTTP 소스를 위에서 만든 보안그룹으로 지정해준다.

참고

• [AWS]가장쉽게 VPC 개념잡기 - Harry The Great
• [AWS]EC2 개념 원리 & 사용 세팅 총정리(Instance/EBS/AMI) - Inpa Dev
• ELB(Elastic Load Balancer) 구성 & 사용법 가이드 - Inpa Dev

모던 자바스크립트 딥다이브 책의 내용을 기반으로 작성하였습니다.🌿

자바스크립트란?

자바스크립트의 탄생

• 1995년, 넷스케이프 커뮤니케이션즈가 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기 위해 브렌던 아이크가 개발

자바스크립트의 표준화

• 1996년, 마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러 3.0에 탑재한다. 하지만 JScript와 자바스크립트는 적당히 호환되었고, 크로스 브라우징 이슈가 발생하기 시작한다.
• 이에 넷스케이프 커뮤니케이션즈는 자바스크립트의 파편화를 방지하기 위해 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트의 표준화를 요청한다.
• 1997년, 표준화된 자바스크립트 초판(ECMAScript 1)이 완성되었고, 상표권 문제로 ECMAScript로 명명된다.
• 1999년, ECMAScript 3(ES3)이 공개되고, 이후 10년 만인 2009년 ECMAScript(ES5)가 HTML5와 함께 출현한다.
• 2015년, ECMAScript 6(ES6)는 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같은 기능을 대거 도입하게 된다.

자바스크립트의 성장의 역사

1. AJAX (Asynchronous JavaScript and XML)
   • 1999년, 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장
   • Ajax = XMLHttpRequest를 이용해 일부 데이터를 별도로 요청하는 기법
   • 자바스크립트가 XMLHttpRequest 객체를 사용하여 서버로 요청을 보내면, 서버는 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달 (= Ajax 요청 처리) 👉🏻 참고
2. V8 자바스크립트 엔진
   • Ajax를 기반으로 동작하는 구글 맵스가 데스크톱 앱과 비교해도 손색없는 부드러운 화면 전환 효과를 보여주면서, 자바스크립트로 웹 앱을 구축하려는 시도가 늘었고 더욱 빠른 자바스크립트 엔진의 필요성이 대두되었다.
   • 2008년, 구글의 V8 자바스크립트 엔진의 등장으로 자바스크립트는 웹 앱 프로그래밍 언어로 정착하게 된다.
3. Node.js
   • 2009년, 라이언 달이 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js를 발표
   • Node.js는 브라우저에서만 동작하는 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 독립시킨 자바스크립트 실행 환경
   • 서버 사이드 애플리케이션 개발에서 주로 사용
     • 브라우저를 벗어나 백엔드 영역에서도 사용 가능한 범용 프로그래밍 언어가 된 자바스크립트는 이제 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있다!
4. SPA 프레임워크
   • 자바스크립트로 개발되는 모던 웹 애플리케이션은, 우수한 성능과 사용자 경험을 제공하는 것이 필수가 되면서 개발 규모와 복잡도도 상승했다.
   • 이러한 필요에 따라, CBD(Component based development) 방법론을 기반으로 SPA가 대중화되면서 Angular, React, Vue, Svelte 등 다양한 프레임워크/라이브러리 등장한다.

자바스크립트의 특징

• 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(interpreter language) 이다.
  • 대부분 브라우저에서 사용되는 인터프리터는 실행 속도가 느리다는 단점을 극복하기 위해 일부 복잡한 과정을 거치며 소스코드를 컴파일하고 실행한다. 따라서 현재는 컴파일러와 인터프리터의 기술적 구분이 모호해지는 추세이다.
• 자바스크립트는 명령형(절차적), 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.
  • 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다! 👉🏻자바스크립트는 어떤 언어인가?

개인 페이지를 만들어 그 안에 뿌려줄 유튜브 API 데이터가 필요할 때 불러오는 방법을 정리해 보았다!

구글 클라우드 플랫폼 (API Key)

1. Google Cloud Platform > API 라이브러리 > YouTube Data API v3 > 사용 클릭 !

2. 사용자 인증정보 들어가기

3. 키표시 옆 API 키 수정 클릭 !

4. API Key 복사

Youtube Data API (Restful API)

1. Youtube Data API > Search > list 클릭

2. 옵션 설정

• part : snippet
• q : React
• maxResults : 50

3. Google OAuth 2.0 클릭해제 (구글에게 허락받는 것)

4. EXECUTE를 클릭하면 API 소스코드를 미리 볼 수 있다.

5. SHOW CODE를 클릭하고 Restful API 주소를 '' 빼고 안에 내용만 복사한다.

6. https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=React&key=[YOUR_API_KEY] 라고 복사된 코드에서 [YOUR_API_KEY] 부분에 구글 클라우드 플랫폼에서 복사한 API Key를 붙여넣어준다. 이렇게!

   https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=React&key=AIzaSyDLgsuoY1CwJn22GRRwQCQlolPq-Z_EONs

📌 결과!!

위 주소를 그대로 주소창에 붙여넣으면 다음과 같이 소스를 확인할 수 있다.

• 'React' 검색 시 나오는 유튜브 동영상 목록

Post man

• 로그인 후 Workspaces의 My Workspace 들어가기
• New 누르고 Collection 클릭
• Get에 위에서 만든 주소를 넣고 Send 버튼을 클릭하면 Youtube API Key의 관리가 가능해진다!

Youtube API 할당량 초과 에러

위와 같은 에러가 나와 찾아보니, 유튜브 API 일일 할당량 한도를 초과한 것이었다. 유튜브 API에서 제공하는 기본 할당량은 10,000인데, 사용하는 기능에 따라 차감되는 양이 다르다. 그래서 기능에 따라서는10,000번을 사용할 수 없다. 해결방법은 할당량 연장 신청을 하는 것인데,, 나는 연습 중이니 하루 기다리기..!!

• onChangeMode={} 값으로 함수를 전달하여 props로 가져와 실행한다.
• html 문법은 똑같지 않다. 코드를 작성하면 리액트 개발환경이 최종적으로 브라우저가 이해할 수 있는 html로 컨버팅해주는 것!

// ----- Header -----
function Header(props) {
  console.log("props", props, props.title);
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(e) => {
            e.preventDefault();    //기본동작 방지
            props.onChangeMode();  // Header의 props로 전달된 onChangeMode가 가리키는 함수를 호출
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}


// ----- Nav -----
function Nav(props) {
  const li = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    li.push(
      <li key={t.id}>
        <a
          id={t.id}                  // id값 부여
          href={"/read/" + t.id}
          onClick={(e) => {          // 클릭이벤트
            e.preventDefault();
            props.onChangeMode(e.target.id);   // target: 이벤트를 유발시킨 태그를 가리킴 -> a태그
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{li}</ol>
    </nav>
  );
}


// ----- App -----
function App() {
  const topics = [
    { id: 1, title: "James", body: "James is ..." },
    { id: 2, title: "Susan", body: "Susan is ..." },
    { id: 3, title: "Amy", body: "Amy is ..." },
  ];
  return (
    <div>
      <Header
        title="Name"
        onChangeMode={() => {
          alert("My Friends");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(id) => { 
          alert(id);                // id값을 알림창에 뜨게 하자
        }}
      ></Nav>
    </div>
  );
}

export default App;

VSCode 사용 시 설치하면 편리한 익스텐션 정리! 이제 없으면 불편하다고 느낄정도. 한번에 정리해놓기 :)

1. Material Theme

• 배경 테마 정하기

2. Marterial Icon Theme

• 아이콘 테마, 아이콘이 조금 더 생동감 있게 바뀜

3. Preitter - Code formatter

• 코드 포멧팅
• ctrl+, 눌러서 setting 창으로 이동 -> tab 2로 변경

4. Bracket Pari Colorizer

• 괄호마다 코드에 색깔을 다르게 줌

5. Indent-rainbow

• 들여쓰기 된 부분을 레인보우컬로로 하이라이트 표시
• 코드 읽을 때 도와줌

6. Auto Rename Tag

• 앞에 태그를 바꾸면 뒤에 태그를 자동으로 바꿔줌

7. CSS Peek

• html에서 css를 금방 찾게해줌
• html에서 커맨드를 누른 상태로 클릭하면 정의된 css파일로 이동하게 해줌.

8. HTML CSS Support

• html에서 css의 자동완성을 이용하게 해줌

9. Live Server

• html이나 css 수정 시 브라우저창에 새로고침하는 것을 없애줌.
• 커맨드 팔렛트에 > live Server: Open with Live Server 입력하고 숏컷키 후 실행

img 태그에 src 속성이 있듯이 직접 정의한 나만의 태그(컴포넌트)에 속성을 넣을 수 있는데, 리액트는 그 속성을 props 라고 부른다. 그리고 props에는 객체-Object가 들어온다.

📌 Props 기본 사용

각각의 컴포넌트(사용자 정의 태그)를 만들어준 후, rendering 되는 함수인 App()에 위치시켜 export 해주었다. App()을 보면 컴포넌트 태그 안에 속성을 넣어줬는데, 이 속성 값을 props로 가져와 컴포넌트에서 다음과 같이 출력할 수 있다.

// 1. Header Component
function Header(props) {
  console.log("props", props);
  return (
    <header>
      <h1>{props.title}</h1>
    </header>
  );
}

// 2. Contents Component
function Contents(props) {
  return (
    <ul>
      <li>{props.name1}</li>
      <li>{props.name2}</li>
      <li>{props.name3}</li>
    </ul>
  );
}

// 3. Footer Component
function Footer(props) {
  return (
    <article>
      <p>{props.title}</p>
    </article>
  );
}

// --- Export App ---
function App() {
  return (
    <div>
      <Header title="Fruits"></Header>
      <Contents name1="apple" name2="banana" name3="orange"></Contents>      
      <Footer title="Thank you!"></Footer>
    </div>
  );
}

export default App;

📌 변수 사용

컴포넌트 내부에서 변수를 선언한 뒤 중괄호{} 안에 변수명을 넣어 사용할 수 있다. (함수도 마찬가지!) 변수안에 다양한 요소를 담을 때는 배열요소 안에 객체형식으로 작성하며, 각각 고유의 id 값을 갖는다. 다음은 객체형식의 변수를 props(태그속성) 값으로 넣은 뒤, 컴포넌트에서 빈 변수안에 배열 갯수만큼 태그를 자동 생성하여 출력해준 것이다.

• 반복문 안에서 자동으로 생성된 태그는 리액트가 추적할 때 근거가 있어야 하므로 각각의 태그들은 고유의 key 값을 가져야 한다.

// 빈 list 변수 안에 과일명이 들어있는 fruName의 각 값을 차례대로 넣어준다. 
// 그리고 값이 들어간 list 변수를 return 해준다. 

function Contents(props) {
  const list = [];

  for (let i = 0; i < props.name.length; i++) {
    let n = props.name[i];
    list.push(<li key={n.id}>{n.title}</li>);
  }

  return (
    <nav>
      <ol>{list}</ol>
    </nav>
  );
}


// 변수를 선언하고 각 정보에 고유 id값 주기
// 선언한 변수를 {} 안에 넣어 사용 
function App() {
  const fruName = [
    { id: 1, title: "apple" },
    { id: 2, title: "banana" },
    { id: 3, title: "orange" },
  ];

  return (
    <div>
      <Header title="Fruits"></Header>
      <Contents name={fruName}></Contents>
    </div>
  );
}

export default App;

리액트 컴포넌트를 선언하는 두 가지 방식에는 함수형과 클래스형이 있다. 클래스형 이후에 함수형이 나왔지만, 클래스형을 쓰던 기업의 프로젝트 유지보수를 위해 개념을 알고 있어야 한다. 최근에는 함수형 + 클래스형의 장점을 넣은 리액트 훅을 사용하는 추세이다.

클래스형 컴포넌트는 로직을 컴포넌트 내에서 구현하기 때문에 더 복잡한 UI를 갖게 된다. 반면에, 함수형 컴포넌트는 props로 데이터를 받아서 UI에 뿌려주기 때문에 상대적으로 단순한 형태를 갖게 되며 재사용성이 높다는 장점이 있다.

클래스형 컴포넌트

• class 키워드 필요
• Component로 상속 받음
• render() 메소드 필요
• state, lifeCycle 사용 가능
• this.state 초기값 설정, 변경 가능
• this.props로 데이터 불러옴
• 메모리 자원의 많은 사용
• 임의 메소드 정의 가능

함수형 컴포넌트

• state, lifeCycle 사용 불가 (Hook으로 해결)
• useState 함수로 state 사용
• props 불러올 필요 없이 바로 호출
• 메모리 자원 덜 사용
• 컴포넌트 선언이 편리함

- 터미널 작성순서 -

1. ls (위치확인)

2. cd desktop (이동)

3. npx create-react-app 폴더명 (scaffolding 생성)

4. cd 폴더명 (생성한 폴더로 이동)

5. code . (vscode열기 : 설정필요)

   • vscode에서 code 명령어로 열 수 있도록 환경설정하기 : f1누르고 shell 검색 후 클릭

6. npm install node-sass (사스 다운)

7. npm install react-router-dom axios prop-types gsap (리액트 실행 시 필요한 요소 한번에 다운로드 : 스펠링 주의)

8. package.json에서 확인 !

📌 fonts 파일 넣기

폰트파일 넣을때는 아래 4가지 확장자를 각각 넣어줘야 한다.

• EOT(Embedded Open Type) : Microsoft에서 제안한 웹 글꼴, IE 호환성을 위해서 지원
• TTF(True Type Font) : Mac 및 Windows 운영체제에서 가장 일반적인 글꼴
• WOFF(Web Open Font Format) : 주요 웹 브라우저에서 지원하는 메타 데이터 압축 기능 글꼴
• WOFF2 : WOFF의 개선 버전. WOFF보다 30% 더 압축한 글꼴, 널리 사용되지는 않고 있음

📌 자동 줄바꿈 설정하기

    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "editor.formatOnSave": true,

📌 함수형 컴포넌트의 사용 (Props)

- props 매개변수로 가져오기

function Info(props){
    return (
        <div>{props.text1}</div>
        <div>{props.text2}</div>
        <div>{props.text3}</div>
        <div>{props.text4}</div>
    )
}

function Main(){
  <>
    <main>
      <section className="main__cont">
        <Info
            text1="we provide"
            text2="visual coding"
            text3="solution"
            text4="for you webs"
        />
      </section>
    </main>
  </>
}

- 객체로 가져오기 (수정필요...)

function Info(???){
    return ( 
        <div>{props.text1}</div> ????
        <div>{props.text2}</div>
        <div>{props.text3}</div>
        <div>{props.text4}</div>
    )
}

const textInfo = {
  text1: "we provide",
  text2: "visual coding",
  text3: "solution",
  text4: "for you webs",
};

function Main(){
  <>
    <main>
      <section className="main__cont">
        <Info
            text1={textInfo.text1}
            text2={textInfo.text2}
            text3={textInfo.text3}
            text4={textInfo.text4}
        />
      </section>
    </main>
  </>
}

- text로 이름 통일

function Info({ text }) {
  return <div>{text}</div>;
}

const textInfo = {
  { text: "we provide" },
  { text: "visual coding" },
  { text: "solution" },
  { text: "for you webs" }
};

function Main(){
  <>
    <main>
      <section className="main__cont">
          <div className="main__inner">
            {textInfo.map((txt) => (
              <Info text={txt.text} />
            ))}
          </div>
      </section>
    </main>
  </>
}

📌 함수형 vs 클래스형 컴포넌트의 차이점

리액트 컴포넌트를 선언하는 두 가지 방식에는 함수형과 클래스형이 있다. 클래스형 이후에 함수형이 나왔지만, 클래스형을 쓰던 기업의 프로젝트 유지보수를 위해 개념을 알고 있어야 한다. 최근에는 함수형 + 클래스형의 장점을 넣은 리액트 훅을 사용하는 추세이다.

클래스형 컴포넌트는 로직을 컴포넌트 내에서 구현하기 때문에 더 복잡한 UI를 갖게 된다. 반면에, 함수형 컴포넌트는 props로 데이터를 받아서 UI에 뿌려주기 때문에 상대적으로 단순한 형태를 갖게 되며 재사용성이 높다는 장점이 있다.

클래스형 컴포넌트

• class 키워드 필요
• Component로 상속 받음
• render() 메소드 필요
• state, lifeCycle 사용 가능
• this.state 초기값 설정, 변경 가능
• this.props로 데이터 불러옴
• 메모리 자원의 많은 사용
• 임의 메소드 정의 가능

함수형 컴포넌트

• state, lifeCycle 사용 불가 (Hook으로 해결)
• useState 함수로 state 사용
• props 불러올 필요 없이 바로 호출
• 메모리 자원 덜 사용
• 컴포넌트 선언이 편리함

리액트 훅(Hook)

=> 2019년부터 함수형 컴포넌트에 사용할 수 있는 리액트 훅을 지원하고 있다.

📌 Viewport는 웹사이트에서 보여지는 영역을 뜻하며 vh, vw는 현재 실행중인 스크린 크기를 기준으로 상대적인 크기를 반환하는 단위이다. 예를들어 현재 스크린 높이가 1000px이라면 1vh=10px, 50vh=500px 이 된다.

• 특징 1) vh 는 width에서, vw는 height에서 사용 가능하다.
• 특징 2) 실제 보여지는 화면의 상대적 크기를 반환하기 때문에 스크롤바를 포함한 크기를 반환한다. 반면 %는 전체 화면이 아닌 부모 요소의 크기에 비례하기 때문에 스크롤바와 상관이 없다.

vh (Viewport height)

• 100vh = 전체화면 기준
• 1vh = Viewport 높이의 1%

  div{ height: 20vh; }

vw (Viewport width)

• 100vw = 전체화면 기준
• 1vw = Viewport 너비의 1%

  div{ width: 20vw; }

em / rem

📌 em, rem 은 모두 font-size값에 비례한 상대 단위이다. 예를 들어 font-size가 16px일 때, 1em=16 x 1=16px, 2em=16 x 2=32px 이다. 여기서 기준이 되는 font-size를 변경하면 그에 따른 상대단위 값들도 함께 변경된다.
em, rem 의 차이점은 어떤 font-size를 기준으로 하는가에 따라 발생한다. em은 해당 요소의 font-size를 기준으로 하고, rem의 r은 root를 뜻하므로 최상위 요소(html)의 font-size를 기준으로 한다.

• em

div{ 
    font-size: 20px;
    width: 10em; /*200px*/
}

• rem

• html의 font-size가 16px일 때

  div{ 
     font-size: 20px;
     width: 10rem; /*160px*/
  }