멘토링 6번째

🌕 F-lab 멘토링 기록

멘토링 이후 부족한 부분을 채우기 위한 기록

폴리필(polyfill)이란?

바벨: 새로운 문법을 사용해 코드를 작성하면 트랜스파일링을 통해 구 표준을 준수하는 코드로 변경 폴리필: 새롭게 추가된 함수나 메서드는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용이 가능하다. 즉, 이렇게 변경된 표준을 준수할 수 있도록 기존 함수의 동작 방식을 수정하거나 새롭게 구현한 함수의 내용을 메꿔주는 역할을 하는 것이 폴리필!

폴리필에서 core-js란?

기존 폴리필 라이브러리들

• @babel/polyfill

  • 전역공간에 폴리필을 채워 넣기 때문에 전역공간의 오염으로 폴리필 충돌 가능성이 있다.
  • 브라우저에서 이미 구현된 폴리필까지 전부 번들에 포함되어있어 크기가 커지는 단점
  • 번들 크기는 커지지만 실행 시에는 브라우저에서 미구현된 문법만 실행하기 때문에 빠르다는 장점
  • 바벨 7.4버전부터 depeciated됨

• @babel/plugin-transform-runtime

  • 바벨이 ES6+의 문법들을 자체 구현한 함수로 트랜스파일링
  • 번들 크기가 작은 장점이 있지만, Array.prototype.includes()와 같은 메소드는 제대로 트랜스파일링 되지 않는 이슈 존재

개선된 폴리필

• core-js@3
  • 위에서의 2가지 문제(전역공간 오염문제, 메서드 문제) 모두 해결
  • 아래와 같이 웹팩을 통한 바벨로더-preset-env와 함께 사용한다.

loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: '> 2%, not dead',
                  corejs: 3,
                  useBuiltIns: 'entry',
                  modules: false,
                  shippedProposals: true,
                },
              ],
            ],
          },
        },

npm이란

Node Packaged Manager의 약자로, Node.js로 만들어진 패키지(모듈)을 관리해주는 툴이다.

package.json에서 dependency란

말 그대로 의존성을 나타내며, npm을 통해 모듈을 추가할 때 기본적으로 dependencies 리스트에 추가된다.

• dependencies: 실제로 어플리케이션 운용에 필요한 모듈을 추가한다. —save 옵션을 추가한다.
• devdependencies: 어플리케이션 개발에 필요한 모듈을 추가한다. —save-dev 혹은 -D 옵션을 추가한다.

왜 나눌까?

• 가독성의 차이
• 배포 환경에서 해당 프로젝트를 가져와 의존성을 설치해 프로젝트를 빌드하는 경우, devdependencies의 모듈들은 필요하지 않기 때문

(추가) peer dependencies

‘동료’의 의미를 가진 peer 의존성을 의미한다. 예를 들어, A 패키지를 사용하기 위해서 B 패키지의 17.0.0 버전이 필요하다고 할 때, A 패키지는 B 패키지의 17.0.0에 의존한다라고 한다.
즉, A패키지를 사용하게 될 프로젝트에 B패키지는 17.0.0을 사용해주세요!라고 알려주는 역할을 하는 것
npm 7버전부터는 peer dependency의 버전이 맞지 않으면 패키지가 설치되지 않는다.

바벨의 동작원리

1. (1) 파싱(Parsing)

• 소스코드를 통해 추상적인 형태의 코드로 변환하는 과정
• AST(Abstract Systax Tree; 추상구문트리)로 코드를 변환한다.
• babel-parser(bablyon이라고도 부른다.)가 이 과정을 담당한다.

2. (2) 변환(Transformation)

• 추상구문트리를 받아와 각 브라우저의 환경에 맞는 내용물로 변환하는 작업
• babel preset/plugin에 의해 처리되는 과정
• 각 브라우저에서 코드 구문이 어떻게 바뀌어야하는지에 대한 내용을 기술

3. (3) 코드 생성(Code Generation)

• 2단계에서 생성된 새로운 추상구문트리를 바탕으로 실제 브라우저 환경에 맞는 소스코드로 변환하는 과정
• babel-generator에 의해 이뤄지는 과정

es6 모듈 등장 전

html에서 script 태그를 하나하나 다 붙여서 사용
파일은 달라도 하나의 전역을 가지기 때문에 문제가 발생한다.

webpack의 대체제, 다른 번들러들?

rollup, vite 등이 존재하며 자세한 사항은 이곳을 참고!!
실제 현업에서는 webpack이 아닌 vite와 같은 다른 번들러를 많이 사용한다고 한다. 아무래도 번들링 속도에서 갖는 이점이 큰가보다!

webpack의 code splitting이란?

일반적으로 앱들은 번들러를 통해 하나의 파일로 번들링된다. 번들링은 훌륭한 기법이지만, 앱의 규모가 커짐에 따라서 하나의 번들이 되려 긴 로드시간을 가져오기도 한다. 이 때, code splitting을 통해 런타임시 필요한 코드만 로드할 수 있도록 여러 번들로 쪼개는 작업을 할 수 있다. 이렇게 되면 앱 전체 코드의 양이 줄어드는 것은 아니지만, 사용자가 필요로 하지 않은 코드 로드를 피하여 초기 페이지 로드 속도를 향상시킬 수 있다. 이렇게 나누어진 번들 파일들을 chunk라고 한다.

Promise.all과 Promise.allSettled

• Promise.all: 비동기 처리를 병렬적으로 묶어 처리하게 해준다. and의 개념처럼 모든 promise가 fulfilled되어야 전체값이 반환된다.(하나라도 rejected되면 에러가 발생한다.)
• Promise.allSettled: all에서 하나의 promise라도 rejected되면 에러가 나는 것을 방지하기 위해 ES2020에 추가되었다. 하나가 rejected되어도 rejected된 값으로 반환되어 전체가 반환된다. 이후 값들에 대해 처리를 해주면 된다.

그렇다고 반드시 allSettled가 상위호환인 것은 아니다! 일단 비교적 최신 문법이기에 브라우저 호환도 따져야하고 모든 로직이 완료되어야만 다음 단계로 넘어가는 로직의 경우엔 all을 사용하는 것이 맞다.

async/await의 내부 로직

• 🐾 Promise에 대해 제대로 공부한 후 다시 작성

모달을 개발할 때, 싱글톤 패턴 사용 / Promise 패턴 사용의 장단점 및 차이

• ing