3주차 개념 스터디

Typescript

Typescript는 Javascript에 정적 타입 문법을 추가한 프로그래밍 언어라 보면 된다.

-특징

 1) 컴파일 언어이며 정적 타입 언어

타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.

 2) 자바스크립트 슈퍼셋

타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.

 3) 객체 지향 프로그래밍 지원

타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

 

-자바스크립트와 차이점

자바스크립트	타입스크립트
스크립팅 언어 (인터프리터 기반 언어)	객체 지향 프로그래밍 언어
컴파일러 필요 X	컴파일러 필요 O
프로토 타입 기반	클래스 기반
클라이언트 측에서 실행	클라이언트 & 서버 둘 다 실행
정적 유형 검사 X	정적 유형 검사 O
지원 모듈 허용 X	파일과 모듈 하용 O

타입스크립트는 자바스크립트의 상위호환이라고 이해하면 된다.

Javascript의 비동기 기술

• 동기와 비동기란

동기(Synchronous)란 요청과 결과가 순차적으로 일어나는 개념으로 이해하면 될 것 같다. 이 말은 즉 앞에 A라는 작업이 수행중이라면 B라는 작업은 대기 상태가 되어 A가 완료될때까지 수행되지 않는다는 것이다. 

비동기(Asynchronous)란 동기와 반대로 요청과 결과가 순차적으로 일어나지 않는다. 사용자가 A라는 작업을 요청했을때 작업이 다 수행되었지 않더라도 B라는 작업으로 넘어가는 것이다. 

• blocking과 non-blocking의 차이

blocking은 호출된 함수가 요청한 작업을 마칠때까지 제어권을 가져 대기하게 만든다. return값을 받아야 종료가 가능하고 return 값은 작업이 끝나야지만 주어진다. 

non-blocking은 호출된 함수가 요청한 작업을 즉시 마칠 수 없을경우 return값을 부여한다. 

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

Callback이란 특정 함수에 매개변수로 전달한 함수가 다시 호출되는 것을 의미한다. 콜백을 계속 사용하다보면 중첩되는 상황이 발생하는데 이를 콜백지옥이라고 부른다고 한다.

Pormise란 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 하는 객체이다. 쉽게 말해 자바스크립트에서 비동기처리에 사용되는 객체라고 보면 될 것 같다. 

Async-await란 callback과 promise의 단점을 보완하고 가독성 있는 코드를 작성할 수 있게 도와준다. 사용하는 방법은 function 앞에 async를 쓰고 비동기로 처리가 되는 부분 앞에다가 await를 붙여주면 된다.

Ex) async function 함수명() {

        await 비동기처리메소드명(비동기 처리가 되는 부분);

     }

CORS

교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처와 다를 때 CORS 요청을 실행한다

그렇다면 왜 이런식으로 출처를 요청하는 것인가? 

이는 이상한 사이트에서 내 세션을 악의적으로 사용하는 것을 방지할 수 있기 때문에 사용한다. 자동으로 세션을 획득할 경우 이런 문제가 발생하기에 CORS를 통해 내가 허락한 출처(도메인)에서만 요청할 수 있도록 해준다. 

JWT

JWT(Json Web Token)은 JSON 객체를 사용하여 가볍고 자가수용적 방식으로 정보를 안전성 있게 전달해주기 위한 토큰이다. JWT는 header, payload, signature로 나뉘어진다. header는 아이디랑 패스워드에 해당하는 부분(signature)을 해싱하는 알고리즘 정보가 담겨있다. payload는 정보가 담긴 조각들이고 signature는 아이디랑 패스워드이다.  

JWT를 사용하는 목적은 다양하다. JWT를 이용해 회원정보를 주고 받으면 유저의 정보를 세션에 유지할 필요가 없어진다. 이는 stateless한 서버를 만들 수 있게 도와준다. 또한, 데이터를 주고받을때 안정성있게 정보를 교환할 수 있게 도와준다. 다만 stateless한 서버를 만들 경우 상태를 저장하지 않기 때문에 한번 만들어지면 제어가 불가능하다. 즉, 토큰을 임의로 삭제하는 것이 불가능하므로 토큰 만료 시간을 지정해주어야 한다. 

테스트 프레임워크

테스트 프레임워크에 대해 알기 전에 테스트에 대해 알아보고자 한다. 

테스트는 어플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위로 UI변경 확인, API 호출 및 확인 등 다양한 요구사항을 검증한다. 

테스트 프레임워크는 Jest, Mocha, Jasmine, AVA 등 다양한 테스트 프레임워크가 존재한다. 

Jest는 페이스북에서 만든 오픈소스 테스트 프레임워크이며 활발하게 사용되는 테스트 도구이다. Node.js 환경에서 실행되며, 내부적으로 Jasmine 스타일의 API를 사용하기 때문에 기존 Jasmine 사용 유저들이 쉽게 적응할 수 있다.

Jest는 테스트 러너의 기능뿐 아니라, 단언, 테스트 더블, 코드 커버리지 등 테스트에 필요한 대부분의 기능을 한 번에 지원하기 때문에 별다른 추가 설치가 필요 없다. 또한 특별한 설정 없이 디폴트 설정 만으로도 실행할 수 있기 때문에, 처음 사용하는 사람도 손쉽게 테스트를 작성하고 실행해 볼 수 있다.

FE

React의 Virtual Dom

Virtual Dom에 대해 말하기 전에 DOM에 대해서 이해해야 한다. DOM은 객체로 문서 구조를 표현하는 방법으로 트리 형태를 통해 특정 노드 조회, 수정, 제거, 생성 등이 가능하다. DOM 자체는 속도가 빠르지만 요소가 많아질수록 허비되는 시간이 많아지기에 느려진다. 이런 속도 문제를 해결하기 위해서 React에서는 Virtual DOM 방식을 통해 DOM을 최소한으로 조작하고자 한다. React에서는 DOM을 생성하기 이전에 Virtual DOM을 먼저 생성한 이후에 이전의 Virtual DOM과 현재 Virtual DOM의 차이점을 비교하여 다른 부분만 DOM에 적용하는 방식이다. 때문에 DOM만을 사용할 때는 조그만 변화가 일어나면 모든 DOM을 렌더링하여 성능의 저하를 일으키지만, Virtual DOM을 사용하면 변화가 일어난 부분을 대체하기 때문에 DOM만을 사용할 때 보다 렌더링 성능에서 좋은 부분을 보여준다. 쉽게 말해 Virtual DOM은 DOM에 복사본으로 이해하면 될 것 같다. 

<순서>
데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링 -> 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교 -> 바뀐 부분만 실제 DOM에 적용

Class Component vs Functional Component

클래스형: state, lifeCycle 관련 기능이 사용 가능 / 메모리 자원을 함수형 컴포넌트보다 조금 더 사용함 / 임의 메서드 정의 가능 / 함수 선언 시 에로우 화살로 바로 선언 가능 / 요소에 적용을 위해 this 필요 / render함수 필요

함수형: state, lifeCycle 관련 기능 사용 불가 / 메모리 자원 클래스형보다 조금 덜 사용함 / 컴포넌트 선언 간편 / const + 함수 형태로 선언 / this 필요 없음

최근에는 리액트 훅 덕분에 클래스 컴포넌트의 동작이 구현 가능하여 함수 컴포넌트가 대세이다. 공식 문서에도 훅과 함수 컴포넌트를 같이 사용할 것을 권장하고 있다 한다.

React Hook

리액트 훅은 함수형 컴포넌트에서 기존에 라이프사이클 메서드가 없어서 사용할 수 없었던 기능을 사용할 수 있게 해주었다. 리액트 훅이 도입된 목적은 컴포넌트에서 상태관련 로직을 사용할 때 레이어 변화 없이 재사용할 수 있게 하고 로직 기반으로 컴포넌트를 함수 단위로 쪼갤 수 있게 해주기 위해서이다. 

<자주 사용되는 Hook>

• useState - 기본적인 Hook으로 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해주어 함수형 컴포넌트에서 상태를 관리해야 할때 사용한다. 

• useEffect - 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있게 한다. 예를 들어 함수형 컴포넌트에서 데이터 가져오기, 구독 설정, 수동 DOM 조작 등을 수행할 수 있게 한다. 

• useMemo - 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 때 사용한다. 

• useRef - 리렌더링과 관련 없이 한 번 만들어진 컴포넌트에서 이전 데이터를 유지하게 해준다. 

• useCallback - 함수를 캐싱하여 반환한다. 주로 렌더링 성능을 최적화 할 때 사용한다. 즉, 함수 재활용에 유용하다.

• useReducer - 컴포넌트 상황에 따라 다양한 상태를 다른 값을 업데이트를 해줄 때 사용한다. 

React Router

리액트 라우터를 알기 전에 리액트의 특성을 알아야 한다. 리액트는 SPA(Single Page Application)방식으로써, 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA(Multi Page Application) 방식과 달리 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. 그렇다면 SPA와 MPA의 차이는 무엇일까? 둘의 차이점은 SPA는 필요한 데이터만 가지고 와서 재로드 없이 랜더링을 하고 MPA는 페이지를 완전히 다시 로드해서 새로 구성을 해야 한다는 것이다. 그러나 react-router를 사용하면 SPA와 같이 페이지 전환이 없이도 주소를 가질 수 있게 된다. 

Redux

리덕스는 가장 사용률이 높은 상태관리 라이브러리로써 리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게 모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 해주는 방식이다. 리덕스는 리액트 내부에만 있는 기술이 아니며 순수 HTML, Javascript 내에서도 사용이 가능하다. 컴포넌트에 집중된 리액트와 시너지가 좋아서 대체적으로 리액트에 리덕스를 사용할 뿐이라고 한다. 

리덕스를 조금 더 쉽게 이해해보자면 기차를 생각하면 될 것 같다. 기차는 1호칸부터 2,3,4 ~ 마지막 칸까지 칸이 여러개 존재한다. 만약 1호칸에 있는 사람이 마지막 칸으로 가고 싶다면 2호칸 3호칸 그리고 모든 칸을 거쳐서 도착하게 되다보니 비효율적인 것이다. 이때 기차역에서 내려서 바로 마지막 칸에 간다면 얼마나 효율적일까? 즉 이런 개념으로 스토어라는 매체를 두어 1호칸에서 스토어로 갔다가 마지막 칸으로 접근이 가능하게 하는 효율적인 방식이 리덕스이다.