week_3 개념스터디_공통

은영·2021년 8월 16일

Dev-immersion

목록 보기

5/6

1.Typescript

JavaScript와 TypeScript의 차이점

1) JavaScript

웹 페이지에 상호 작용을 추가하는 인터프리터 기반 언어
스크립팅 언어
클라이언트 측에서 실행

2) TypeScript

일반 JavaScript로 컴파일되는 Javascript의 상위 집합
객체 지향 프로그래밍 언어
클라이언트 측과 서버 측에서 실행

TypeScript의 장점

1) 높은 수준의 코드 탐색과 디버깅

코드에 목적을 명시하rh목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거

2) 자바스크립트 호환

타입스크립트는 자바스크립트와 100% 호환
앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능

3) 강력한 생태계

대부분의 라이브러리들이 타입스크립트를 지원

4) 점진적 전환 가능

각종 에디터가 타입스크립트 관련 기능과 플러그인을 지원

5) 프로젝트의 규모가 크고 복잡할수록, 유지보수가 중요한 장기 프로젝트일수록 타입스크립트의 이점이 부각될 것

=> 이러한 장점 덕분에 최근에 js진영에서 ts를 많이들 도입하고 있다.

TypeScript 기초문법과 사용법

1) 기본 타입 : Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never

2) 제네릭 : 타입을 마치 함수의 파라미터처럼 사용하는 것

function logText(text: T):T {
 return text;
}

logText<string>('aa');
logText<number>(100);

3) 타입 추론 : 타입스크립트가 코드를 해석하는 과정

var a = true;

a = 100; //Error

4) 타입 단언 : 타입스크립트가 해석하는 것보다 더 확실한 목적을 가지고 개발자가 해당 코드에 타입을 직접 지정하는 것

var a;
a = 10;
a = 'string';
var b = a as string;

참고)
https://www.typescriptlang.org/
https://www.samsungsds.com/kr/insights/TypeScript.html
https://ko.strephonsays.com/javascript-and-vs-typescript-13697#menu-1

2. Javascript의 비동기 기술

동기와 비동기란

동기(Synchronous)
- 답변을 기다리는 것(결과를 기다리는 것)
- 장점 : 단순
- 단점 : 자원의 비효율적 사용
비동기(Asynchronous)
- 답변을 기다리지 않는 것(결과를 기다리지 않는 것)
- 장점 : 자원의 효율적 사용
- 단점 : 복잡

blocking과 non-blocking의 차이

blocking
- 동기식에서 답변이 올 때까지 기다리는 상태
non-blocking
- 비동기식에서 답변이 올 때까지 기다리지 않는 것

자바스크립트의 비동기 처리 기술 변화(callback부터 promise, async-await까지)

callback
- 인자로 받아들인 함수를 다시 호출하는 기능
- callback 예제

function add5(a, callback) {
  setTimeout(() => callback(a + 5), 100)
// 100ms가 지난 후 함수로 입력받은 callback에 a + 10값을 다시 입력하여 callback함수 호출
}
add5(10, function (res) { // add5가 입력받는 callback함수 정의 부분
  console.log(res)
});

promise
- 작업이 끝난 후 실행할 함수를 제공하는 것이 아니라 Promise 자체 메소드인 .then()을 호출
- promise 특징

function add10(a) {
  return new Promise(resolve => setTimeout(() => resolve(a + 10), 100));
} //Promise사용 시 작업이 끝났음을 알려주는 resolve를 인자로 받아들임.

add10(10)
  .then(add10)
  .then(add10)
  .then(add10)
  .then((res) => console.log(res))

async-await
- Promise에 비해 보다 쉽게 비동기적인 상황을 표현

async function f1() {
  const a = await add10(10);
  const b = await add10(a);
  console.log(a, b)
}
f1();

참고)https://www.youtube.com/watch?v=sN4E9_u7xQk
https://techlog.io/Javascript/General/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B9%84%EB%8F%99%EA%B8%B0%ED%86%B5%EC%8B%A0-callback-promise-async-await-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/

3. CORS

CORS란?

CORS (Cross-Origin Resource Sharing)
- 브라우저에서 다른 출처의 리소스를 공유하는 방법

CORS의 동작 방식

1) Simple request

서버에게 바로 요청을 보내는 방법
서버에 API를 요청하고, 서버는 응답을 브라우저에게 보냄
브라우저는 헤더를 확인하여 동작을 수행할지를 판단

2) Preflight request

서버에 예비 요청을 보내서 안전한지 파난한 후 본 요청을 보내는 장법
실제 리소스를 요청하기 전에 OPTIONS라는 메서드를 통해 실제 요청을 전송할지 판단
브라우저는 헤더를 확인해서 동작을 수행할지를 판단

CORS를 사용하는 이유

CORS 메커니즘은 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원
최신 브라우저는 XMLHttpRequest또는 Fetch 와 같은 API에서 CORS를 사용 하여 출처 간 HTTP 요청의 위험을 완화함

참고)
https://beomy.github.io/tech/browser/cors/
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORc

4. JWT

Session과 Cookie 방식을 대체할 수 있는 JWT 방식이란?

JWT (JSON Web Toke)
- 인증에 필요한 정보들을 암호화시킨 토큰
장점
1) 세션/쿠키는 별도의 저장소의 관리가 필요하지만 JWT는 발급한 후 검증만 하면 되기 때문에 추가 저장소가 필요 없음
2) 확장성이 뛰어남
단점
1) 세션/쿠키 방식에서는 유저의 정보가 전부 서버의 저장소에 안전하게 보관됨 하지만 JWT는 유저의 중요한 정보들은 Payload에 넣을 수 없음

5. 테스트 프레임워크

테스트 프레임워크란?

Test Framework : 재사용할 수 있는 부분을 확장하여 앱 개발을 용이하게 하는 토대로 만들어진 것

테스트의 종류

1) 유닛테스트

애플리케이션의 개별 모듈을 독립적으로 테스트

2) E2E 테스트

해당 시스템과 해당 시스템을 구축하고 배포하는 프로세스를 모두 시험

3) 통합테스트

모듈을 통합하는 과정에서 모듈 간 호환성의 문제를 찾아내기 위해 수행

jest 란?

jest
- 단순함에 초점을 둔 페이스북에서 개발한 오픈 소스 자바스크립트 테스트
- 장점 : 쉬운 설치 및 사용 방법 (테스트의 필요한 기능을 모두 지원하기 때문에 설치를 추가로 요구하지 않음)
jest 설치 방법
- npm install --save-dev jest
테스트 실행
- npm run test