📌 이 글은 THE SOPT 30기 서버파트 1차 세미나에서 학습한 내용을 다룹니다.

JavaScript

객체 기반 스크립트 프로그래밍 언어

var, let, const 차이

	var	let	const
재선언	O	X	X
재할당	O	O	X

var variable1 = 'var variable';
var variable1 = 'new var variable';

console.log('var : ', variable1);

let variable2 = 'let variable';
let variable2 = 'new let variable';
// Cannot redeclare block-scoped variable 'variable2'.

console.log('let: ', variable2);

const variable3 = 'const variable';
const variable3 = 'new const variable';
// Cannot redeclare block-scoped variable 'variable3'.

console.log('const: ', variable3);

var variable1 = 'var variable';
variable1 = 'new variable';

console.log('var: ', variable1);

let variable2 = 'let variable';
variable2 = 'new variable';

console.log('let: ', variable2);

const variable3 = 'const variable';
variable3 = 'new variable';
// TypeError: Assignment to constant variable.

console.log('const: ', variable3);

범위, Scope

• Function Scope
  • 유효범위가 함수 범위 내
  • 전역 함수 외부에서 생성한 변수는 전역 변수
• Block Scope
  • 블록 범위 - if, while, for, function
  • 중괄호 '{'와 '}' 사이

if (true) {
  var x = 'var';
}
console.log(`var: ${x}`); // var: var

if (true) {
  let y = 'let';
}
console.log(`let: ${y}`);
// ReferenceError: y is not defined

var는 Function Scope를 가지기 때문에, block과 관계없이 접근
let, const는 Block Scope를 가지기 때문에, block 안에서 선언된 값은 block 밖에서 접근 불가

function foo() {
  if (true) {
    var variable = 'hello';
    console.log('if block - ', variable); // if block -  hello
  }
  console.log('function block - ', variable); // function block -  hello
}

console.log('global - ', variable);
// ReferenceError: variable is not defined

Function Scope를 가지는 var는 해당하는 Function을 벗어나면 접근 불가

데이터 타입

• 원시 타입 (Primitive Type)
  원시 타입은 메모리에 고정 크기로 값을 저장하고, 해당 저장 값을 변수가 직접 가지고 있음
  • Boolean
    • 논리 요소를 나타내는 타입
    • true와 false 두 가지 값을 가짐
  • Null
    • 정해지지 않은 '값'
  • Undefined
    • 정해지지 않은 '타입'
    • 초기화 되지 않은 변수
    • 존재하지 않는 값
  • Number
    • 숫자 타입
    • 64비트 실수 형태
  • String
    • 문자열 자료형 - ""와 ''를 동일 취급
    • ES6부터 백틱 (``) 문자열인 Template literal 지원
  • Symbol
    • 고유하고 변경 불가능한 원시 값
• 객체 타입 (Object Type)
  크기가 정해져 있지 않고 변수 할당 시 데이터 주소만 저장
  • Object
    • JavaScript의 기본 타입
    • {} 로 감싸진 형태
    • 속성의 컬렉션
    • 속성은 {key: value} 형태
    • 속성은 함수일 수도 있음 -> 이 경우 method
    • 원시 타입을 제외하고 나머지는 모두 객체 타입
    • 즉, Function, Array 모두 객체 타입이다.
  • Array
    • JS에서는 Array도 객체타입
    • 배열 요소의 타입이 고정되어 있지 않음 -> 같은 배열 내 여러 타입 요소들이 같이 있을 수 있음
    • 배열 요소의 인덱스가 연속적이지 않아도 됨 -> 특정 배열 요소가 비어있을 수 있음
    • 기본 형태 -> arr = [item1, item2, item3]
  • Function
    • JS에서 Function은 일급 객체
    • 변수 or 데이터 구조에 담을 수 있음
    • 다른 함수에 파라미터로 전달할 수 있음
    • 반환값으로 사용할 수 있음

TypeScript

왜 TypeScript를 쓰는거지? 🤔
정적 타입 검사를 위해!

TS는 JS에서 타입 문법 등을 추가한 상위 집합
코드 작성 단계에서 타입을 체크해 오류 발견

JS와 100% 호환!

변수가 어떤 Type을 가지는 지 몰라서 생기는 오류가 없다!

• 높은 수준의 코드 탐색과 디버깅
  • 코드에 목적을 명시, 버그를 사전에 제거
• JavaScript와 100% 호환
  • 백엔드 / 웹 프론트엔드 어디서든 가능
• 강력한 생태계
  • 그리 오래되지 않은 언어지만 다양한 플러그인이 존재

기본적인 타입 표현

const variable: T = 초기값;
let variable: T = 초기값;

let isDone: boolean = true;

const str: string = 'hello';

let num: number = 2;

const sum: number = 'sum number';
// Type 'string' is not assignable to type 'number'.

배열 타입 표현

const variable: T[] = 초기값;
let variable: Array<T> = 초기값;

let array: number[] = [1, 2, 3];

const strArr: Array<string> = ['hello', 'world'];

const objArr: Array<object> = [{ item: 'value' }, { itme: 'value2' }];

Object vs object

Object는 자바스크립트의 모든 생성자를 extend
즉, 자바스크립트의 모든 타입이 할당될 수 있다.

object는 원시 타입을 제외한 나머지를 모두 받을 수 있다.

const f1 = (obj: object): void => {
  console.log(obj);
};

const b1 = (obj: Object): void => {
  console.log(obj);
};

f1('hi');
// Argument of type 'string' is not assignable to parameter of type 'object'.

b1('hi');

함수 타입 표현

반환 타입 표기

• 반환 값이 없는 함수 = void 타입

function f2(a: number, b: number): number {
  return a + b;
}

const b2 = (a: number, b: number): number => {
  return a + b;
};

const noReturn = (): void => {
  console.log('hihi');
};

null, undefined

null, undefined는 이름 그대로가 타입
해당 타입은 null / undefined 자신 이외의 값 할당 안됨

let a: null = null;

let x: null = 2;
// Type '2' is not assignable to type 'null'

let b: undefined = undefined;

let y: undefined = null;
// Type 'null' is not assignable to type 'undefined'.

타입 단언 (Type assertions)

"날 믿어, 난 내가 뭘 하고 있는지 알아"
개발자가 직접 타입을 단언

// angle-bracket
let myName: any = '공혁준';
let myNameLength: number = (<string>myName).length;

// as
let yourName: any = '공혁준';
let yourNameLength: number = (yourName as string).length;

(마법의) any

어떤 타입이라도 any에 할당 가능
즉, 타입 검사를 하지 않는다!

개발자가 알기 어려운 타입을 받을 때 사용
혹은, 일부 타입만 알 때 사용

const unknown: any = {
  name: '공혁준',
  age: 25,
  organization: 'SOPT',
  completion: [30],
};

Interface

타입 체크를 위해 여러가지 프로퍼티를 갖는 새로운 타입 정의
변수, 함수, 클래스 모두 사용 가능

interface Sopt {
    name: string;
    age: number;
    organization: string;
    completion: number[]; // or Array<number>
}

const sopt: Sopt = {
    name: '공혁준',
    age: 25,
    organization: 'SOPT',
    completion: [30]
};

선택적 프로퍼티

인터페이스 내부에서 필수적이지 않은 프로퍼티
있을 수도 있고, 없을 수도 있다!

프로퍼티 명 뒤에 '?'를 붙여서 표시!

선택적 프로퍼티가 아닌 프로퍼티를 지정하지 않을 경우 오류 발생!

interface Closet {
  name: string;
  shirt: number;
  pants: number;
  sunglass?: number;
  hat?: number;
}

const ohmygirl: Array<Closet> = [
  {
    name: '효정',
    shirt: 5,
    pants: 2,
  },
  {
    name: '아린',
    shirt: 2,
    pants: 8,
    hat: 2, // 선택적!
  },
];

Node.js

Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임

Node.js는 쉽게 말해
브라우저 밖에서 JavaScript를 실행할 수 있게 만들어주는 환경

특징

• Non-Blocking I/O
• Single Thread
• Event-Driven

Non-Blocking I/O

Blocking은 I/O가 끝날 때까지 작업이 중단, 대기
Non-Blocking은 I/O가 진행되는 동안 멈추지 않고 다음 작업

Single Thread

• Process

  • 메모리에 올라와 실행되고 있는 프로그램의 인스턴스
  • 실행되고 있는 프로그램 (독립적인 개체)
  • 운영체제에서 할당하는 작업의 단위
  • Process끼리 자원 공유 불가

• Thread

  • 프로세스 내에서 할당받은 실행의 단위
  • Thread들은 부모 프로세스의 자원 공유

1. Node 실행 시 프로세스 1개 생성
2. 생성된 프로세스가 여러개의 쓰레드 생성
3. 제어 가능한 쓰레드 (JavaScript 실행) 는 단 1개

Node.js 는 Single Thread

Event-Driven

이벤트가 발생할 때, 미리 저장해둔 작업을 수행하는 것

function greet() {
  return 'hello';
}

function timer() {
  return setTimeout(() => {
    return 'End';
  }, 3000);
}

greet();
timer();

1. greet() 이 콜 스택으로 push 되었다가 pop 되면서 "Hello" 출력
2. timer() 가 콜 스택으로 push
   setTimeout() push 후 바로 백그라운드로 pop
   다음 timer() pop
   setTimeout()에 의해 콜백함수 백그라운드 실행
3. 콜 스택에서 pop 되는 동시에 setTimeout에서 설정한 함수가 백그라운드로 추가
4. 설정된 시간 종료 후 콜백 큐로 이동
5. 콜 스택이 비어있다면, 이벤트 루프가 콜백 큐에서 콜백 함수를 콜 스택으로 옮긴다.
6. 콜 스택에서 콜백 함수를 pop