Don’t worry about failures

Javacript그리고 Typescript(2) - 필기 본문

Online class Study

Javacript그리고 Typescript(2) - 필기

허흥 2021. 6. 13. 09:25
728x90


웹앱의 규모와 복잡의 증가

웹앱의 역할이 커짐에 따라 코드의 양, 복잡도 증가하게 된다.

초기 당시 javascript는 간단하게 html을 관리하는 데에 이용이 됐다.

하지만, 웹앱에서의 사용자와의 인터렉션이 증가함에 따라 javascript의 역할이
커지고 모듈이라는 새로운 개념이 생겼다.

2015 이후 import와 export 문법을 지원

이 개념이 규모가 커짐에 따라 중요해지는 이유는 다음과 같다

우선, 기존의 javascript를 불러오기 위해서는

<HTML>
  <HEAD>
    <SCRIPT SRC="myScript-.js"></SCRIPT>
   </HEAD>
<HTML>

위와 같이 SCRIPT 태그를 통해 해당 파일을 호출한다. 위와 같은 방식의 호출은
수 많은 javascript 파일이 존재할 경우 그 많은 파일들을 한번에 호출하는 방식을
사용해야한다. 이와 같은 방식은 처음 로딩 당시 모든 스크립트 파일을 호출하게 되고
규모가 커지는 만큼 로딩이 오래걸리게 된다.

이를 위해 모듈이라는 개념이 도입된 것이다.

하나의 javascript 파일을 태그로 호출 후 다른 javascript 파일을 import export를 통해
필요한 파일만 가져옴으로써 완화를 시킬 수 있다.

하지만 여기서 문제가 생긴다. 새로운 문법이라는건 어떤 누군가에게는 안맞는 법이라는 것.
즉, 호환성의 문제가 된다. module, import, export의 경우 explore에서는 호환이 안되며,
다른 브라우저에서 또한 어떤 버전 그 이상의 경우만 호환이 된다. 이렇게 되면, 
모든 브라우저에서 사용이 되지 않게 되므로 문제가 된다.

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import


이에 생겨난 것이 번들러이다.
모든 파일을 하나의 파일로 묶어서 한번의 script 태그에 가져오게 되면 모든 문제가
해결이 된다.

가장 많이 사용되는 번들러 중 하나는 webpack

1. 가장 큰 역할은 자바스크립트 파일을 하나의 파일로 압축
2. 그 압축 하는 과정에서 주석, Debbuger 등 불필요한 코드 삭제
3. 번들러가 img의 path를 알고 있으니 이 파일이 일정 용량을 초과할 시에 
압축해 주는 작업(이미지 최적화)
4. 코드를 외부에 노출될 때 알아보게 하기 어렵게 해주는 작업 (어글리파이)

5. 트랜스 파일링 -> typescript
- 브라우저는 오직 javascript만을 읽어 들인다. 하지만 다른 언어로 개발을 하고 싶은 경우가 있다.
이와 같은 상황에서 필요한 것이 트랜스 파일링. 그 예시가 typescript이다. 기존 자바스크립트에서
정적인 타입을 입혀 코드를 작성하고 이후에 트랜스컴파일링을 통해 javascript를 변환하여 파싱
- 2015 이후 최신 javascript 문법을 2015로 변환 또한 트랜스 파일링 -> 이를 바벨이라는 트랜스 파일러가 해줌
( 
데이터 유형, 즉 타입에 대한 중요성 
 - 웹앱의 규모가 커지게 되면, 그만큼 많은 개발자가 도입이되고, 수년간 해당 서비스에 대해 유지보수를 하게 되면서, 많은 개발자들이 거쳐가게 된다.  여기서 타입에 대한 중요성이 부각된다.
타입이 명확하지 않은 상태 + 내가 작성하지 않은 코드는 파악하기가 매우 어렵다.
이를 수정함에 따라 사이드 이펙트가 일어날 가능성이 매우 크다.
이러한 문제를 잡기 위해 코드 자체 내에서 데이터 유형을 명시해줌에 따라 다른 개발자가
보더라도 바로 어떠한 의미를 가지고 있는 코드인지 파악하기 위해 필요하다.
)

728x90
저작자표시

'Online class Study' 카테고리의 다른 글

Layout Shift에 대해  (0) 2022.04.17
브라우저 캐쉬에 대해  (0) 2022.04.09
Reflow, Repaint 그리고 Reflow, Repaint생략에 대해  (0) 2022.03.20
Javascript 그리고 Typescript (1) - 필기  (0) 2021.06.06
김민태 프런트 엔드 개발자님 강의  (0) 2021.05.30
'Online class Study' Related Articles more