[개념 스터디] 3주차

타입스크립트

 

TypeScript = Type + JavaScript
타입스크립트는 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장된 언어라고 볼 수 있다.

특징

• 타입스크립트는 동적인 자바스크립트를 정적으로 바꿔준다
• 타입스크립트는 컴파일 이후에 자바스크립트가 된다
• 타입의 반환값을 명확하게 제시해준다
• 컴파일 단계에서 오류를 포착할 수 있다
• 정적 타입으로 지정되기 때문에 개발자의 의도를 명확하게 나타내어 가독성을 높인다
• 오류를 쉽게 포착할 수 있기 때문에 디버깅이 편하다

function sum(a: string, b: string) {
  return a + b;
}
sum("Type","Script); //TypeScript

TypeScript를 이용하여 a와 b에 string 타입을 지정해준 코드.

만약 string이 아니고 number로 지정되어 있다면 오류가 발생한다.

 

 

 

JavaScript 비동기 기술

 

동기(Synchronous)

동기는 요청을 보낸 후 응답을 받아야 다음 동작이 이루어진다.
모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기한다.

-> 동기는 직렬적

 

비동기(Asynchronous)

비동기는 요청을 보낸 후 응답을 받지 않아도 다음 동작이 이루어진다.
결과가 주어지는데 시간이 걸리더라도 다른 작업을 수행한다.

-> 비동기는 병렬적

 

 

blocking

• 요청한 작업을 마칠 때까지 계속 대기
• 작업이 끝나면 즉시 return
• return 값을 받아야 종료
• return을 받기 전까지 함수가 다른 일을 할 수 없음

 

non-blocking

• 요청한 작업을 즉시 마칠 수 없다면 즉시 return
• return을 통해 함수가 다른 일을 할 수 있는 기회를 줌

 

비동기 처리 기술의 변화

Callback -> Promise -> Async/Await

 

 

Callback

 

Callback 함수는 특정 함수에 매개변수로 전달된 함수를 의미한다.

가독성도 떨어지고 무한 콜백으로 인한 실수의 위험이 있다.

 

Promise

 

Promise는 Callback과 하는 일이 같다. 

차이점은 Promise는 작업이 끝난 후 실행할 함수를 제공하지 않고

Promise 자체 메소드인 .then()을 호출하여 함수를 다시 호출하기 때문에 가독성이 좋다.

 

 

Async/Await

 

Async/Await를 사용하면 Promise에 비해 보다 쉽게 비동기적인 상황을 표현할 수 있다.

Await는 함수의 작업이 끝나고 결과값을 반환할 때까지 대기하게 되며 결과 값이 리턴된다면 다음 작업으로 넘어간다.

 

async function 함수명() {
  await 비동기_처리_메서드_명();
}

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // promise가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 '중단’되었다가 promise가 처리되면 실행이 재개된다. 이때 promise 객체의 result 값이 변수 result에 할당된다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력된다.

 

 

CORS

 

CORS("Cross-Origin Resource Sharing")은 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘

필요성

서비스하고 있지 않은 사이트에서 세션을 요청하여 세션을 획득하게 될 경우,

세션을 획득한 사이트는 내 세션을 통해 악의적인 행동을 할 수 있다.

그렇기 때문에 내가 허용한 Origin에서만 요청할 수 있도록 하기 위해 필요하다.

 

동작 방법

브라우저가 요청 헤더의 Origin 필드에 출처를 담아 요청을 전송하면

서버는 응답 헤더의 Access-Control-Allow-Origin이라는 값에 허용된 출처를 내려준다

응답을 받은 브라우저는 자신이 보냈던 요청과 서버가 보내준 응답의 값을 비교하여 유효한 응답인지를 결정한다.

 

 

JWT

 

 

JWT는 "JSON Web Token"의 약자로 전자 서명된 URL의 JSON입니다.
Web Token인 전자 서명은 JSON의 변조를 체크 할 수 있게되어 있습니다.

 

 

• 클라이언트에서 로그인 요청을 한다.
• 서버는 DB에서 사용자를 확인한 후, Token을 발급한다.
• 클라이언트는 Token을 안전한 곳에 저장한다.
• 클라이언트에서 Token과 함께 데이터를 요청한다.
• 서버는 Token을 검증한 후, 인증을 완료한다.
• 정상일 경우 데이터를 넘겨 준다.

 

JWT는 세 파트로 나누어지며, 각 파트는 점으로 구분하여 표현된다. 

헤더 (Header)

토큰 정보와 해시 알고리즘 정보를 포함

페이로드 (Payload)

토큰의 내용물이 인코딩된 부분

서명 (Sinature)

토큰이 변조되었는지 여부를 확인

 

 

JWT Token 생성 및 검증 방법

 

[Node.js] JWT Token 생성 및 검증(오류 제거)

[Node.js] JWT Token 생성 및 검증(오류 제거)

 

 

 

Test Framework

 

Test

애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위
예) 서버 API 호출 및 확인, UX 검증 및 개선, QA, UI 변경 사항 확인 등

Test Framework

테스트 코드 작성을 위한 기반을 제공해주는 js 도구
프레임워크 제공 함수를 사용해서 테스트 도구를 작성

 

Jest

 

 

코드가 제대로 동작하는지 확인하는 test case를 만드는 Test Framework

특징

• 거의 모든 라이브러리 기능을 한 번에 지원한다
• 코드가 올바른 기능을 하는지 체크 가능
• 따로 라이브러리 설치 필요 없이 프로젝트에 내장되어 있다.

function sum(a, b) {
  return a + b;
}
module.exports = sum;

const sum = require("./sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

expect()안에 테스트할 변수나 값을 넣은 후 toBe나 toEqual을 이용해 예측 값과 비교한다.

 

 

Dependency Injection

 

DI(Dependency Injection)는 의존성을 줄이기 위해 사용합니다. 의존성은 함수에 필요한 클래스 또는 참조변수나 객체에 의존하는 것입니다. 의존성이 높게 되면 코드의 재활용성이 떨어지고 의존성을 가지는 객체는 반드시 함께 수정해야한다는 문제를 갖게됩니다. 그래서 DI는 필요한 객체를 직접 생성하지 않고 외부로부터 필요한 객체를 받아서 사용합니다.

장점

• 코드의 재활용성을 높여준다
• 객체간의 의존성을 줄여준다
• 유연한 코드를 작성할 수 있다

 

대표적인 Node.js Dependency Injection 라이브러리

Inversify

Javascript와 Typescript 모두 구현가능하고 쉽고 빠르게 DI를 구성할 수 있도록 구성함

 

Lerna

여러 저장소의 의존성을 묶어주는 역할과 test, build, release 같은 작업을 최적화 시켜준다

 

 

 

Javascript Decorator

 

Decorator

새 함수를 반환하여 전달된 함수 또는 메소드의 동작을 수정하는 함수

특징

• @ + 데코레이팅할 코드로 Decorator 사용
• 원하는 만큼 사용 가능
• 코드가 간결해지고 명확해짐
• Class나 Class member에 적용이 편하다

사용 예시

function withColor(color) {
  return function(target) {
    target.prototype.color = color;
  };
}

@withColor("blue")
class Paint {}

const sky = new Paint();
console.log(sky.color);

 

Nest.js

 

Nest.js는 효율적이고 확장 가능한 Node.js 서버측 애플리케이션을 구축하기 위한 프레임워크입니다. JavaScript와 TypeScript로 빌드되고 객체 지향 프로그래밍, 함수형 프로그래밍 등의 요소를 결합합니다.

 

 

Express.js와 Nest.js 차이

 

Express.js는 개발 구조에 대한 자유도가 높습니다. 그렇지만 개발자들의 개개인의 선호에 따라 다양한 개발 구조가 생성되고 이는 통일성을 해치게 됩니다. 

하지만, Nest.js는 유지 관리가 쉬운 애플리케이션 구조를 제공하기 때문에 통일성이 생기고 생산성이 향상되는 대신 제한성이 있습니다.

결론

Express는 개인 이용자들의 가볍고 간편한 웹 서버를 위해,

Nest는 통일성 있고 거대한 프로젝트에 쓰기 좋다!!

 

 

 

 

데이터베이스 ORM

 

ORM

객체와 데이터베이스 데이터를 자동으로 연결해주는 것
객체 모델과 관계형 모델 같에 불일치가 존재하기 때문에 ORM을 통해 객체를 이용하여 간접적으로 데이터베이스를 조작하여 불일치를 없앤다.

장점

• 객체지향 코드
• 재사용성 증가
• 유지보수 용이
• 종속성 하락

 

DB Client와의 차이

ORM

• RDB의 종류에 관계없이 사용이 가능하기 때문에 DB 변경이나 코드 재활용이 용이하다
• 테이블이나 객체 생성, 변경 등 관리가 용이하다
• 쿼리에 많은 시간 투자를 안해도 되기 때문에 빠른 개발이 가능하다

DB Client

• ORM에 비해 쉽다
• SQL의 세부적인 내용을 변경할 수 있고 간편하다
• 동적 쿼리 사용 시 ORM보다 간편하게 구현 가능하다

 

 

관련글

7 Best Node.js Dependency Injection Libraries in 2021 | Openbase

[DI] Dependency Injection이란 무엇일까? (velog.io)

메인 | 네스트JS 한국어 매뉴얼 (nestjs.kr)

JPA와 MyBatis의 차이 (ORM과 SQL Mapper) (tistory.com)

Javascript - Decorator 문법 (godsenal.com)

Typescript를 쓰는 이유 (velog.io)

JWT (JSON Web Token) 이해하기와 활용 방안 - Opennaru, Inc.

삽질기록 — 로그인 API 작성 (JWT, Refresh Token, Access Token, HTTP only) | by Youngwoo Lee | Medium

F/E Testing Tool (프론트엔드 테스팅 도구) (tistory.com)

JEST 사용법 (velog.io)

동기 vs 비동기 (feat. blocking vs non-blocking) (velog.io)

Javascript 동기와 비동기방식의 차이점 (velog.io)

async와 await (javascript.info)