크로스 브라우징 관련되어 프론트엔드 개발자에게 webpack과 babel은 필수라고 하는데 
react에서 기본적으로 제공되어 잘 모르고 있었습니다. 😭
기본부터 잡기 위해 모듈 번들러에 대해 알아보도록 하겠습니다.

모듈 번들러에 앞서 크로스 브라우징이 뭘까요?

크로스 브라우징 

개발자마다 사용하는 언어가 다릅니다 . 프론트엔드에서도 주로 사용되는 것은 JS이지만 최신 문법을 사용할 수도 있고, TS를 사용할 수도 있습니다. 그리고 브라우저가 해석할 수 있는 언어 또한 다릅니다. 인터넷 익스플로어가 최신 문법을 지원하지 않아서 문제가 많았었는데, 이젠 사용하지 않아서 다행입니다. 그래도 사파리 같은 경우에는 작년까지 Promise 에서 finally  메소드를 사용할 수 없었다고 합니다.   

(자주 사용하는 메소드인데..🙊)

 이렇게 여러 브라우저에서 작성한 코드가 정상적으로 돌아갈 수 있게 하는 행위를 '크로스 브라우징을 지원하게 한다' 라고 합니다. 바벨을 통해 크로스 브라우징을 지원하게 할 수 있습니다. 바벨은 ES6 이후 최신 문법으로 작성된 코드와 TS JSX 처럼 다른 언어들을 모든 브라우저에서 동작하도록 호환성을 지켜줍니다. 

1.  모듈 번들러란?

여러개로 나뉘어 있는 파일들을 하나의 파일로 묶어주는 것입니다.

js 파일들을 각각 분리해서 로드하면 순서에 따라 에러가 발생하는 등 불편함이 생깁니다.

이런 불편함을 모듈번들러가 해소 시켜줍니다.

2. Webpack

모듈 번들러로 가장 유명한 webpack 입니다.

webpack은 최신 자바스크립트 애플리케이션을 위한 정적 모듈 번들러입니다. 

웹팩이 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈을 매핑하고, 

하나 이상의 번들을 생성하는 종속성 그래프를 내부적으로 빌드합니다. 

웹팩에는 4가지 개념을 이해해야 합니다 .

• Entry 

자바스크립트가 로딩하는 모듈이 많아질수록 모듈간 의존성이 증가합니다. 

종속성 그래프를 구축하기 위한 시작점을 Entry 라고 합니다.

필요한 모듈을 로딩하고 하나의 파일로 묶습니다. 

기본값은 ./src/index.js 입니다.

• Output 

웹팩에게 번들 파일을 어디에 생성할지 어떤 이름으로 할 것인지를 알려줍니다.

main output 파일일 경우 기본값이 ./dist/main.js입니다.

• Loader

기본적으로 웹팩은 js 및 JSON만 읽을 수 있습니다.

하지만 Loader를 사용하면 웹팩이 다른 유형의 파일을 처리하고 이를 애플리케이션에서 사용하고

종속성 그래프에 추가할 수 있는 유효한 모듈로 변환할 수 있습니다.

-- babel-loader : ES6 를 ES5로 변환합니다. test:/\.js$/ 과 같이 파일을 정규표현식으로 지정합니다.

-- css-loader(style-loader) : 웹팩은 모든 것을 모듈로 다루기 때문에 CSS 파일을 JS로 변환해서 로딩을 해야합니다.

test:/\.css$/로 작성. styled-loader 는 자바스크립트로 변경된 스타일시트를 동적으로 돔에 추가해야하는 로더입니다.

• Plugin

로더가 특정 유형의 모듈을 반환하는데 사용되었다면, 플러그인은 번들된 결과물을 처리합니다.

번들 최적화, asset 관리 및 환경 변수 삽입과 같은 광범위한 작업을 수행합니다.

--UglifyJsPlugin : 로더로 처리된 자바스크립트 결과물을 난독화 처리하는 플러그인입니다.

--ExtractTextPlugin : sass를 style.css파일로 따로 번들링하는 플러그인 입니다. 

3. Babel 

ES6 에서 ES5로 컴파일 해주는 트랜스 파일러입니다.

 🙊 컴파일러와 트랜스파일러의 차이 

- 컴파일러 : 한 언어로 작성된 소스 코드를 다른 언어로 바꾸는 것입니다.

트랜스 파일 :

a라는 소스코드 파일을 읽어서 b라는 소스코드 파일로 변환시키는 행위,  컴파일 했을 때 , 추상화 수준이 같은 코드로 변환합니다. 

구버전의 소스코드를 신버전에 호환하는 형식으로 바꾸기도 하며, 신버전의 소스를 구버전에 호환되게 하기도 하는것이 목적입니다.

webpack에서 나온 babel-loader 과 babel 의 차이는 뭔가요?

- babel-loader 는 웹팩에서 바벨을 로드할 때 쓰이는 것입니다. (그저 웹팩과 바벨을 연결시키는 것이라고 할 수 있습니다.)

Polifill 

폴리필은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미합니다. 

브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워넣는다는 의미입니다.

- babel-polyfill 

바벨은 이 폴리필을 지원해, 최신 함수들을 사용할 수 있습니다 (Promise)

transpiler 역할만 하는 바벨은 컴파일시에 진행되고, bable polyfill은 런타임 시에 실행되는 차이가 있습니다. 

바벨 사용법은 아래에서 보시면 됩니다.

https://hihyunhong.tistory.com/4

ES6 에서 ES5로 컴파일 해주는 트랜스 파일러입니다.

 컴파일러와 트랜스파일러의 차이 

- 컴파일러 : 한 언어로 작성된 소스 코드를 다른 언어로 바꾸는 것입니다.

트랜스 파일 :

a라는 소스코드 파일을 읽어서 b라는 소스코드 파일로 변환시키는 행위,  컴파일 했을 때 , 추상화 수준이 같은 코드로 변환합니다. 

구버전의 소스코드를 신버전에 호환하는 형식으로 바꾸기도 하며, 신버전의 소스를 구버전에 호환되게 하기도 하는것이 목적입니다.

사용법

설치하기

npm install @babel/core @babel/cli

js 파일을 하나 만들고 babel로 실행시켜 보겠습니다.

const alertMessage = (msg)=>{window.alert(msg)}

실행하기  

npx babel myJS.js

바벨 명령어를 통해 트랜스 파일을 하게 되면 똑같은 결과가 나오게 됩니다. 일단 바벨의 빌드 단계부터 알아봅시다.

바벨의 빌드 단계

- 파싱 : 코드를 읽고 추상 구문 트리로 변환하는 단계를 파싱이라고 합니다. 빌드 작업을 처리하기 적합한 구조인데, 컴파일러 이론에 사용되는 개념입니다.

- 변환 : 추상 구문 트리를 변경하는 것이 변환 단계 입니다. 실제 코드를 변경합니다.

- 출력 :  변경된 결과물을 출력합니다. 

앞선 작업에서 바벨이 변환을 못한 것 같은데 바벨은 파싱과 출력만 담당하고 , 변환작업은 '플러그인'이 처리하게 됩니다.

= 바벨의 코드 변환은 플러그인 혹은 preset 설정 파일에 적용함으로써 활성화 됩니다. 

바벨 플러그인

custom-babel-plugin.js 를 만들면서 알아보겠습니다.

module.exports = function customBabelPlugin() {
    return {
        // 보통 visitor라는 객체를 만들게 됨
        visitor: {
            Identifier(path) {
                const name = path.node.name;

                // 바벨이 만든 AST 노드 출력
                console.log("change name:", name);

                // 변환 작업: 코드 문자열을 역순으로 변환
                path.node.name = name.split("").reverse().join("");
            },
        },
    };
};

- 바벨의 플러그인은 오브젝트 내부에 visitor : 프로퍼티를 반환하는 함수로 시작됩니다.

- visitor 프로퍼티 내부에 Identifier 매소드를 구현합니다.

- Identifier 가 받을 path 에서는 node.name 등 정보를 가져올 수 있습니다. 

이제 실행을 해보겠습니다. 바벨의 여러 명령어 중 plugins 명령어를 이용하겠습니다.

npx babel myJS.js --plugins './custom-babel-plugin.js'

결과창

change name:alertMessage
change name:msg
change name:window
change name:alert
change name:msg

const egasseMtrela = gsm => wodniw.trela(gsm);

AST 노드의 토큰 하나하나를 path.node.name 으로 가지고 있습니다 . 그리고 이것을 뒤집어 출력해줍니다. 

이런식으로 js 파일의 코드를 하나씩 확인하면서 바꿔줄 수 있습니다. 

이번에는 const를 var로 바꾸는 플러그인을 만들어 보겠습니다. 

module.exports = function customBabelPlugin() {
    return {
    	visitor: {
            VariableDeclaration(path) {
                if (path.node.kind === "const") {
                    path.node.kind = "var";
                }
            },
        },
    };
};

위와 동일하게 실행시키면 아래와 같이 바뀌게 됩니다.

구형 브라우저에서 호환되지 않는 const를 var로 변환하기 때문에 그 브라우저에서도 사용할 수 있게 됩니다.

var alertMessage = (msg)=>{window.alert(msg)}

바벨이 제공해주는 플러그인 사용해보기

우리가 만들었던 customBabelPlugin은 이미 플러그인 형태로 제공되고 있습니다.

babel-plugin-transform-block-scoping 에서 let을 var로 바꿔주는 것을 확인할 수 있습니다.

npm install @babel/plugin-transform-block-scoping

npx babel myJS.js --plugins @babel/plugin-transform-block-scoping

결과 

var alertMessage = (msg)=>{window.alert(msg)}

const 가 var 로 바껴있는 것을 확인할 수 있습니다.

마찬가지로 ()=> 함수 또한 트랜스컴파일해줄 수 있는 플러그인을 설치하고 같이 실행해 보겠습니다. 

plugin-transform-arrow-functions

콤마(,) 를 이용해 여러개를 같이 사용할 수 있습니다.

npx babel myJS.js --plugins @babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

결과

var alertMessage = function(msg){
  return window.alert(msg);
}

strict-mode 

자바 스크립트 문법에 엄격 모드를 적용시키는 플러그인입니다.

바벨 설정파일에 사용할 플러그인 설정하기

babel.config.js 파일을 메인에 생성합니다.

module.exports = {
    plugins: [
        "@babel/plugin-transform-block-scoping",
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-transform-strict-mode",
    ],
};

실행해보겠습니다.

npx babel myJS.js

를 바로 실행해도 플러그인을 적용한 결과로 나옵니다.

프리셋 

많은 양의 바벨 플러그인을 사용해야 하는데, 바벨의 플러그인 설치는 시간과 관리가 힘듭니다. 그래서 목적에 맞게 여러개의 플러그인을 모아놓은 것을 프리셋이라고 부릅니다. 

custom-babel-preset.js 파일을 만들고, 

module.exports = function customBabelPreset() {
    return {
        plugins: [
            "@babel/plugin-transform-block-scoping",
            "@babel/plugin-transform-arrow-functions",
            "@babel/plugin-transform-strict-mode",
        ],
    };
};

babel.config.js 내용도 바꿔줍니다.

module.exports = {
    preset: ["./custom-babel-preset.js"],
};

실행시켜주면, 뭉쳐진 preset이 잘 적용이 됩니다.

바벨 프리셋

자주 사용되는 프리셋 몇개가 있습니다.

- preset-env : ES6 를 변환할 때 사용됩니다. 

- preset-flow  : flow 를 변환합니다.

- preset-react : react를 변환합니다.

- preset-typescript : typescript를 변환합니다.

타겟 브라우저 설정해보기

babel.config.js 작성

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    chrome: "79",
                },
            },
        ],
    ],
};

targets 가 추가 되었습니다. 결과는 어떨 까요 ? 화살표 함수와 const 가 둘다 그대로 적혀있습니다. 

왤까요? chrome 이 최신 문법들을 사용이 가능하기 때문에 그대로 사용되는 것입니다. 

하지만 이 targets에 ie가 적힌다면 어떻게 될까요?

targets: {
    chrome: "79",
    ie: "11"
}

ie 에서 호환이 되기 위해 function과 var으로 변환된 결과가 나타나게 됩니다.

리액트에서 자동으로 preset을 만들어 줘서 잘 몰랐었으나 
Babel을 이해하고, 적용시키기 위해 크로스 브라우징을 해결해볼 수 있는 기회가 생겼으면 좋겠습니다. 

변수 다루기

타입검사

자바스크립트는 동적인 타입이라, 타입검사가 어렵습니다.

typeOf 나 instanceOf 로 원시타입, 참조타입을 알 수 있습니다.

Object.prototype.toString.call( )

undefined & null

undefined & null 은 값이 없거나 정의되지 않은 것입니다.

type = undefined , Object

eqeq 줄이기

== (두개) = 동등 연산자

• type casting 이 일어납니다.
• ‘1’== 1 >> true

=== (세개 )= 엄격한 동등 연산자

• ‘1’=== 1 >> false

두개가 형 변환이 되어서 더 편한 게 아닌가 ? 하는 의문도 있지만 엄격하게 맞추는 것이 더 오류 검사에 좋습니다.

• Number(‘1’)=== 1 >> true

함수 작성법

숫자와 관련된 함수 (min-max)

경계값을 다룰 때 함수 작성법

function getValidAge = (age:number)=>{
    const MIN_IN_AGE = 19
    const MAX_AGE = 45
    return(age< MAX_AGE && age>= MIN_IN_AGE)
} 

• 네이밍을 최소값과 최대값을 잘 명시해줍니다.
• 이상, 이하 일 경우 IN 과 같은 전치사로 알기 쉽게 합니다.

begin-end

• 예약날짜를 잡을 때 주로 사용합니다 .

function reservationDate(beginDate,endDate){
    ...
}
reservationDate('YYYY-MM-DD','YYYY-MM-DD')

first- last

• 함수 안에서 array 의 첫 인자와 마지막 인자를 의미할 때 변수로 사용합니다.

function getStudent(first,last){
    ... 
}

prefix & suffix

접두사, 접미사

일관성 있게 코드네이밍을 하기 위해서는 접두사가 필요합니다.

접미사는 s를 붙이는 등의 방법이 있습니다.

매개변수의 순서가 경계이다.

인자가 두개일 경우에는 처음과 끝이구나 라고 생각을 할 수 있습니다.

인자가 여러개일 경우에는 어떤 식으로 함수를 생성하면 될까요?

• 호출하는 함수의 네이밍과 인자의 순서의 연관성을 고려합니다.
• 매개변수를 2개가 넘지 않도록 만듭니다.
• arguments, rest parameter
• 매개변수를 객체에 담아서 넘긴다. *
• 랩핑하는 함수를 만듭니다. ⇒ 받아오는 함수가 따로 있고, 실제 함수를 만듭니다.

클린코드에 대해서 항상 많은 고민을 했습니다.

기능 구현에만 앞선던 코드들을 어디 내놓으려니 부끄럽기도 합니다.

팀원들에게 보여줄 수 있고, 그들이 한번에 이해하기 쉬운 코드를 짜야겠다 라는 생각으로

자바스크립트 클린코드 에 대한 공부를 시작했습니다.

클린코드에 대해 고민하기

- 남이 적은 코드가 항상 맞진 않습니다.

- 물론 내 코드도 항상 옳지 않습니다.

- 항상 열린 태도로 여러 코드를 읽어보고 판단하는 것이 중요합니다

JavaScript 특성 파악하기

JS 의 폭발적인 성장은 Node.js 가 생기면서 부터 입니다.

Node.js는 크롬 v8 엔진으로 빌드 된 자바스크립트 실행 환경입니다.

현재는 Electron처럼 자바스크립트로 데스크탑 애플리케이션을 만드는 프레임워크도 있어 많은 프로그램을 만듭니다.

노션이나 VSCode 또한 js 기반으로 만들어졌다고 합니다. 🫢

Js는 치명적인 단점이 있습니다.

런타임 중에 내용이 변경되는 특성이 있는데 몽키 패치🐒라고도 불립니다.

var 지양하기

let 과 const는 ES6 부터 생겼습니다.

var는 함수 스코프이고, let & const는 블록 단위 스코프를 갖고 있습니다.

var는 선언한 내용이 다시 중복 선언이 가능하기 때문에 코드가 길어질 경우 위험에 노출됩니다.

var global= 1
  if(global===1){
      global = 2
  }
global => 2

전역 변수로 global 을 만들어서 사용해서 다른 스코프에서 변경하면 원래의 값이 변경됩니다.

let global = 1
  if(global===1){
      global = 2
      global >> 2
  }
global >> 1

하지만 let으로 선언하면 블록 안에서만 변경되기 때문에 블록 밖에서는 원래의 값을 사용가능합니다.

const global = 1
    if(global===1){
        let global = 2
        global >> 2
    }
global >> 1

블록이 다르기 때문에 두번 선언하더라도 에러가 발생하지 않습니다.

전역공간을 사용하지 말라

전역공간 : 최상위 환경

• global - node JS 환경
• window - 브라우저 환경

스코프를 나눠서 작업을 해야 하지만, 다른 곳에서도 사용이 가능해집니다.

var 를 사용하면, 전역변수로 선언이 됩니다

임시 변수 제거하기

임시 변수의 단점 ⇒ 명령형으로 가득한 로직 , 디버깅이 힘들고 유지보수가 어렵다.

해결 방법 : 함수 나누기 , 바로 반환, 고차함수 (map,filter,reduce), 선언형 함수로 변환

function getElement(){
    const result = {}
    result.a = 'a'
    result.b = 'b'
    result.c = 'c'
    return result 
}

result 라는 변수를 만들어서 return 하고 있지만 , 임시 변수를 최대한 줄이는 것이 좋습니다.

function getElement(){
     return { a:'a',b:'b',c:'c'}
}

호이스팅

호이스팅 : 런타임시 선언을 최상단으로 끌어올려 주는 것을 뜻합니다.

문제 : 코드를 작성할 때 예측하지 못하는 것이 실행되기도 합니다.

• var 를 이용하면 선언을 하기 전에 데이터를 할당하기 때문에 undefined가 나올 수 있습니다.

방법 : var 을 안쓰고 , 함수를 함수 표현식으로 사용하면 오류를 줄일 수 있습니다.

지금까지 주석은 전부 // 로 만들었었습니다.

JavaScript 에는 주석을  조금 더 효과적으로 다는 방법이 있습니다.

/**  과    */ 사이에 적어주는 방식입니다. 마우스를 호버하게 되면 변수나 함수의 설명을 볼 수 있게 됩니다. 😳

저는 함수에서 주석을 자주 사용합니다.

주의해야 할 사항들을 적어놓으면

이 함수가 뭐였지 하고 생각이 나지 않을 때 유용합니다.

어려운 코드를 짜거나 

return 의 형태들에 대해 설명이 필요할때 사용하기에 좋습니다.