[개념스터디]3주차 (공통)

TypeScript

타입스크립트 공식 홈페이지를 보면 다음과 같이 나와있다.

 

https://www.typescriptlang.org/

Typed JavaScript at Any Scale.

 

TypeScript extends JavaScript by adding types.  

타입스크립트는 자바스크립트에 타입을 추가했다.

By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.

타입스크립트는 코드를 실행하기 전 에러를 잡거나 고치면서 시간을 절약한다.

Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.

어떤 브라우저, OS 에서도 자바스크립트는 동작한다. 그리고 완전한 오픈소스이다.

 

 

타입스크립트는 왜 쓰는걸까??

 

타입스크립트는 static type(정적 타입) 이고 , 자바스크립트는 dynamic type(동적 타입) 이다. 

static type의 경우 코드 작성 중간에 (컴파일시) 타입 에러를 확인할수 있는 반면,

dynamic type의 경우는 프로그램이 동작할때 실시간으로 타입이 결정이 되서 실행도중 에러가 발생할 확률이 높다.

최악의 경우 사용자가 사용을 하는 도중 에러가 발생할수도 있다. 

 

타입관리가 엄격하다.

javascript 

let age = 20;

age = 'apple';   <- 가능



typescript

let age : number = 20;

age = 'apple' < - error 발생

 

타입을 명시하기때문에 가독성이 좋다. 즉 자바스크립트의 경우 이 변수가 어떤 타입인지

한번에 알기가 어렵다. 하지만 타입스크립트는 타입이 명확해 바로 알수있고 이에따른 실수도 줄일수 있다.

 

타입스크립트를 사용하면 객체지향 프로그래밍도 가능하다. 즉 객체지향의 장점을 갖게된다. 

 

따라서 다른 개발자들과 협업을 할때도 빠르고 안전하게 개발을 할수 있다. 

 

물론 자바스크립트 기반이기때문에 프론트, 백 둘다 가능하다.

 

이러한 장점들 때문에 많은 회사나 개발자들 사이에서 인기를 얻고있다.

타입스크립트의 사용량은 계속해서 쭉쭉 증가하고 있다.

최근 2년간의 사용량을봐도 꾸준히 증가하는것을 볼수 있다.

 

 

 

어떻게 사용할까?

 

가장 먼저 타입스크립트를 설치하는 방법이다. 위에 나와있는 타입스크립트 공식 홈페이지 download 탭에 가면 

다운받을수 있는 총 3가지 방법이 나와있다. 

여기서는 그중에서 Globally installing typescript 방법으로 설치할 예정이다. 이렇게 설치하면 어느 프로젝트에서든 따로 설정하지 않고 typescript 를 사용할수가 있다.

 

설치는 npm 또는 vs 를 사용해서 할수 있다. 하지만 나는 npm 으로 설치를 했다.

설치 명령어는 위에 나온대로 npm install -g typescript 로 설치하면된다. 참고로 -g 옵션은 global을 의미한다.

 

버전확인으로 잘 설치된것을 볼수 있다.

 

설치후 typescript 코드를 아무거나 작성한뒤 실행을 해본다.

node 에서 ts 코드를 실행하면 에러가 나는것을 알수 있다.

브라우저에서 실행해도 오류가 난다.

 

 

 

 

타입스크립트의 경우 브라우저나 node에서 바로 읽을수 없기 때문에 기본 자바스크립트로 변환하는 과정이

필요한데, Typscript compiler가 그 역할을 해준다.

 

우리는 위에서 npm 으로 typescript를 설치했기때문에, 간단한 명령어를 통해 typescript 파일을 javascript 파일로

변환해줄수 있다.      tsc   변환할ts파일     명령을 통해서 바꿔준다.

 

성공적으로 변환이되면 js 파일이 추가적으로 생긴다.

그리고 그 변환된 js 파일을 실행하면된다.

 

 

Typescript 문법 기초

 

자바스크립트의 타입은 크게 primitive 타입과 object 타입으로 나눌수 있다.

primitive : number, string, boolean, bigint, symbol , null, undefined

oboject : function, array....

 

타입스크립트는 변수를 선언할때 반드시 타입을 명시해주어야 한다. 

그리고 한번 정의된 타입에 다른 타입의 데이터는 담을수 없다.

 

// boolean 
let isDone : boolean = false;

// string  - 문자열
let name : string = "kim coding";

// undefined  - 아직 값이 결정되지 않음
let age : number|udefined;
age = undefined;
age = 15;

// null  - 값이 없음
let color : string|null;

// 함수
function add(num1 : number , num2 : number) : number {
	return num1 + num2;
    }

C, C++, Java 등 다른 언어들처럼 변수에 맞는 타입을 같이 명시해주면 된다. 

 

 

 

JavaScript의 비동기 기술

동기와 비동기

 

동기(synchronous)는 답변을 기다리는것을 말한다. 즉 요청에 대한 답변이 오지 않는다면 다른 일을 수행하지 않는다.

동기방식은 설계가 간단하고 직관적이지만 답변(결과)이 주어질때까지 아무것도 하지 못하고 대기해야하는 단점이 있다.

 

ex. 사원이 상사에게 서류를 전달한다. 이때 사원은 기다리거나 다른일을 한다. 상사가 서류를 다읽고 답변을 하면 

사원은 그즉시 답변에 대한 일을 처리한다. 

 

비동기(asynchronous)는 답변을 기다리지 않는것을 의미한다. 요청에대한 답변을 받지 않아도 다른일을 계속 수행한다.

따라서 일을 효율적으로 처리할수 있지만 동기식보다 설계가 복잡하다.

 

ex. 사원이 상사에게 서류를 전달한다. 이때 상사는 일을 바로 처리하기 않아도 되고, 사원은 기다리거나 다른일을 한다. 상사는 서류를 다 보고 그에대한 답변을 한다. 사원은 그 답변에 대한 일을 언젠가는 처리한다. 

 

blocking 과 non-blocking의 차이

 

blocking 은  자신의 작업을 진행하다가 다른 주체의 작업이 시작되면 다른 작업이 끝날때 까지 기다렸다가 

자신의 작업을 시작한다.

 

ex. 사원이 상사에게 서류를 전달한다.  이때 사원은 상사가 서류를 처리하는동안 아무일도 하지않고 상사가 서류처리를 완료할때까지 하염없이 기다린다. 상사가 끝났다고 하면 사원은 돌아가서 자신의 일을 처리한다.  

 

non-blocking 은 다른 주체의 작업에 관련 없이 자신의 작업을 한다. 즉, 다른쪽에서 작업을 하는 순간 그 작업에서 빠져나와 자신의 일을 진행한다. 

 

ex. 사원이 상사에게 서류를 전달한다. 사원은 서류를 전달한후 돌아가서 자신의 일을 한다. 

 

 

blocking/sync : 다른 작업이 시작되는 동안 기다린다. 다른 작업이 결과를 반환하면 그 결과에대한 일을 바로 처리한다.

non-blocking/sync : 다른 작업이 시작되도 자신은 자기일을 계속 한다. 그리고 중간중간 다른 작업에게 결과가 나왔는지 확인한다. 그리고 결과가 나오면 그 결과에대한 일을 바로 처리한다. 

blocking/async : 다른 작업이 시작되는 동안 기다린다. 그러나 async 이므로 결과에대한 일을 바로 처리하지 않아도 된다. <- 잘 사용하지 않음

non-blocking/async : 다른 작업이 시작되도 자신의 일을 계속 한다. 그리고 결과가 나와도 바로 처리하지 않고 자신의 일을 다 마친후에 처리한다. 

 

 

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

 

callback

자바스크립트에서는 함수의 인자로 int, string 등의 기본 타입뿐만 아니라 함수도 올수 있다.

이때 인자로 받은 함수를 다시 호출하는 것을 callback이라고 한다.

이 callback 함수는 호출된 바로 실행(동기 콜백)될수도 나중에 실행(비동기 콜백)될수도있다.

대표적인 콜백 함수의 사용 예제로는 이벤트 핸들러가 있다. 어떤 특정한 동작을 했을때 

지정된 이벤트가 실행된다.

 

callback 예제

setTimeout(function(){
	console.log("hello");
    }, 2000);

2초후에 콘솔화면에 hello가 찍히는 예제이다. setTimeout 함수가 또다른 함수를 호출한다.

 

callback은 자칫하면 callback 지옥을 가져올수 있다는 단점이 있다.

callback 지옥이란 함수가  callback을 하고 또 그 함수가 callback을 하고 이렇게

계속해서 함수들이 중첩되는것을 말한다. 

callback 지옥은 가독성이 떨어지고 에러확인도 어려우며 유지보수도 어려운 단점이있다. 

 

promise

promise는 기본적으로 callback과 하는일이 같다. 차이점은 promise의 경우는 작업이 끝난후 

실행할 함수를 제공하지 않고 promise 자체 메소드인 .then()을 호출한다.

then() 은 중첩이 되지 않기때문에 가독성이 훨씬 좋다.

또 작업이 실패했을경우 자동으로 .catch() 메소드가 호출된다. 따라서 callback과 같이 함수 호출

중간에 예외처리를 하지 않고 .catch()에서 해결할수 있다.

promise는 const promise = new Promise((resolve, reject) => { // executor(실행자, 실행 함수) } 로 만든다.

executor의 인수 resolve는 성공시, reject는 실패시 수행하는 자바스크립트 자체 제공 callback 함수이다. 

executor 에서는 결과를 언제 얻든지 상관없이 상황에 따라 인수로 넘겨준 콜백 중 하나를 반드시 호출해야 한다.

resolve(value) - 일이 성공적으로 끝난 경우 그 결과를 나타내는 value 를 인자로 호출

reject(error) - 에러 발생시 에러 객체를 나타내는 error 를 인자로 호출

즉, executor는 자동으로 실행되고 여기서 원하는 일을 처리하게되고 처리가 끝나면

처리 성공 여부에따라 resolve나 reject를 호출한다.

 

new Promise 생성자가 반환하는 객체는 state, result 이다.

state : pending / fulfilled / rejected

result : undefined/ value/ error

 

초기

state : "pending"

result : undefined

 

성공 : resolve(value)

state: "fulfilled"

result: value

 

실패 : reject(error)

state: "rejected"

result: error

 

ex. 2초뒤에 일이 성공했다는 내용이 전달되는 예시.

const pr = new Promise(function(resolve,reject){
	setTimeout(()=>
    	resolve("ok!")
        ,2000);
        });

일에대한 결과가 전달되면 소비자입장 즉 일처리의 결과를 받는 사람 입장에서는 전달받은 결과에따라

처리를 해줄수가 있다. 이때 사용할수 있는 함수가 .then, .catch , .finally 이다.

 

.then 은 가장 중요하고 기본인 메서드이다. 사용 예시는 다음과 같다.

pr.then(
	function(result){ console.log(result) },
    function(error){ console.log(error) } 
    }

첫번째 함수는 결과가 성공일때 호출되고, 두번째 함수는 결과가 실패했을때 호출된다. 

 

성공일때만 다루고 싶으면 함수를 하나만 사용하면 된다.

실패의 경우만 다루고 싶다면 cath를 쓰면된다.

pr.catch(
	function(error){ alert(error) }
    )

 

finally 는 성공 실패 상관없이 무조건 실행시킬 내용이 있을때 사용하면 된다.

pr.finally(()=>
	console.log('실행 종료'))

 

 

 

Async/Await

promise 보다 비동기처리를 쉽게 구현할수 있다. 즉 promise를 더 편하게 사용할수 있다.

 

async 함수

async 키워드는 함수 앞에 붙여줘야 한다.

async function test(){
	// 코드 
    }

이렇게 함수 앞에 async 를 붙이면 이 함수는 항상 promise를 반환한다.

반환할때 promise 형식으로 반환을 하지 않으면 성공한 promise로 간주하고 promise를 반환한다.

 

await

await 는 async 함수 안에서만 동작한다. 

자바스크립트는 await 를 만나면 promise가 처리될때까지 기다린후 동작한다.

 

ex. 예시.

async function test(){
	
    let pr = new Promise((resolve, reject) =>{
    	
        setTimeout(()=> resolve("success!"),1000);
        });
        
    let result = await pr;  // promise 가 수행될때까지 기다린다.
    
    console.log(result);  // success!

 

 

CORS

cors는 웹개발을 할때, 한 사이트에서 주소가 다른 서버로 요청을 보낼때 자주 접할수 있는 오류이다.

cors = cross orgin resource sharing 의 약자로 해석하면 교차 출처 리소스 공유 라고한다.

cors는 sop 의 문제를 해결해준다고 볼수 있다.

 

sop(same-origin policy)

 

해석하면 같은 출처 정책이다. 

postman 같은 곳에서 api를 테스트 할때는 잘 되다가 브라우저에서 api를 호출할때 cors policy 오류가 자주 발생한다.

그 이유는 브라우저가 sop 을 따르기때문에 다른 출처의 리소스 접근을 막기때문이다.

sop 은 xss나 xsrf등의 보안 취약점을 막기위해 만들어졌다. 

하지만 실제 개발을하다보면 알수있지만 다른 출처의 리소스를 사용할때가 많다.

이런 문제를 해결하기위해 나온것이 cors 이다. 

 

cors(cross-origin resource sharing)

 

다른 출처의 리소스를 공유할수 있게 한다. 

cors를 사용하기 위해서는 요청을 받는 백엔드 쪽에서 허락할 다른 출처들을 미리 명시해 두어야 한다.

백엔스 서버를 프로그래밍할때 쓰는 프레임워크들 예를들면 스프링이나 장고등도 cors 옵션을 넣을수 있다.

 

간단한 동작 원리

 

어떤 사이트에서 네이버 지도 api로 요청을 보낸다. 이때는 다른 출처의 요청이므로 

이렇게 다른 출처에서 요청을 보낼때는 요청에 origin 이라는 header를 추가한다.

origin 항목에는 요청하는 쪽의 scheme 과 도메인 그리고 포트가 담겨있다.

요청을 받은 네이버 지도 api 서버는 답장 헤더에다가 지정된 Access-control-allow-origin 정보를 담아서 보낸다. 

만약 요청하는 사이트의 출처가 서버쪽에 등록이 되어있는 상태라면 당연히 그 사이트 주소가 

들어있기때문에 같은 값이 동일하게 들어있다면 수락을 하고 없다면 cors 에러를 띄우게된다.

 

 

출처란?

위에서 자꾸 언급되는 출처는 scheme + 도메인 + 포트 까지를 말한다.

이부분이 모두 같으면 출처가 같은것, 하나라도 다르면 출처는 다르다고 할수 있다.

 

 

JWT

JWT(Json Web Token)은 Json 형식의 self contained 방식의 web token 방식으로 정보를 안전하게 전달한다.

보통 로그인할때 서버로부터 JWT를 받아와 static 변수와 로컬 저장소에 저장하게된다.

 

JWT 구조

 

header, payload, signature 부분으로 나눠진다.

header : typ와 alg 로 구성되며, typ는 토큰의 타입 지정 alg는 signature를 해싱하기위한 알고리즘을 지정

payload : 토큰에서 사용할 정보들이 담겨있음.

sinature : 토큰을 인코딩하거나 유효성을 검증할때 사용하는 고유한 암호화 코드

 

동작 예시

 

1. 사용자가 아이디와 비밀번호를 입력해서 로그인을 요청한다.

2. 서버는 요청을 확인하고 access token 을 발급한다.

3. jwt 토큰이 클라이언트에 저장된다.

4. 클라이언트에서 api를 요청할때 이 jwt 토큰도 담아서 보낸다.

5. 서버는 jwt signature를 확인하고 payload에서 사용자 정보를 확인한후 클라이언트에 응답한다.

 

 

테스트 프레임워크

어느정도 규모있는 프로그램을 만들다보면 test 코드를 작성해야할 필요성이 있다.

개발하고 있는 코드를 테스트한다면 절차도 길고 복잡하다. 하지만 테스팅 도구를 사용하면

명령어 한줄로 테스트를 할수 있다.

 

js 테스팅 도구로는 jest와 mocha가 있다. 둘다 사용방법이 비슷하다.

 

Jest

Jest는 facebook에서 만들었다. 

내가 작성한 코드가 제대로 동작하는지 확인할때 사용한다.

여러 상황들을 설정할수 있고, 그 상황에 따른 결과를 확인해준다.

보통 프로젝트 규모가 클때 사용한다.