[패스트캠퍼스 수강후기] 프론트엔드 강의 47회차 미션

 

오늘은 39. webpack 부분 수강을 시작했다. 

오늘 11개 클립을 들었고

총 31개 클립이 있어서 3~4일에 나눠서 수강할 예정이다..

 

Module

module : 프로그램을 구성하는 내부의 코드가 기능별로 나눠져 있는 형태

module의 표준 : 모듈을 사용하기 위해서는 모듈을 인식하는 모듈 시스템과 모듈을 다루는 키워드가 제공되어야 한다

 1. common.js (node.js)

 2. ESM

module 키워드

1. 내보내기

 1) 한 곳으로 내보내기

 2) 개별적으로 내보내기

2. 가져오기

 모듈 객체를 참조하는 형태

*commonjs에서 가져오기

  1) require(모듈의 경로)

  2) module.exports 

 *commonjs에서 내보내기

   module.exports = {...}

   module.exports = 값

   module.exports.키_이름 = 값

   exports.키_이름 = 값

 <예시> 

1. 원의 넓이를 구하는 공식

2. PI 정의

3. 공식을 통해 결과 얻기

<index.js>

const PI = 3.14;

const getCircleArea = r => r * r * PI;

 

const result = getCircleArea(2);

console.log(result);

[결과]12.56

--> 모듈로 분리하기

<mathutil.js>

const PI = 3.14;

const getCircleArea = r => r * r * PI;

 

module.exports = {

    PI,

    getCircleArea

}

다시 <index.js>

const {getCircleArea} = require('./mathutil')

 

const result = getCircleArea(2);

console.log(result);

 

또는 <mathutil.js>에서 이렇게 써도 결과는 같음

exports.PI = PI;

exports.getCircleArea = getCircleArea;

 

*ESM에서 가져오기

 import_모듈_이름 from 모듈_위치

 

*ESM에서 내보내기

 export 

 export default

 

<예시>

<index.js>에서 내보내기

import { getCircleArea } from './mathutil'

import { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript';

 

const result = getCircleArea(2);

console.log(result);

 

<mathutil.js>

export {

    PI,

    getCircleArea

}

 

모듈의 종류 3가지

1. built-in cor module (내장되어 있는 코어모듈)

 - node.js module

2. community-based module

 - NPM

 - npm CLI를 사용해야 함 (npm install ModuleName)

3. Local Module (특정 프로젝트에 정의된 모듈)

 

<예시> 도형의 넓이를 구하는 코드를 기능별로

모듈 쓰기 전

<readline.js>

const readline = require("readline");

const rl = readline.createInterface({

    input: process.stdin,

    output: process.stdout

})

 

const { getCircleArea, getSquareArea } = require('./mathutil'); //require를 통해서 mathutil에서 불러옴

const { logFigureError, logInput, logResult } = require('./log');

 

rl.question(

    "넓이를 구하고자 하는 도형의 종류를 입력해주세요. (정사각형, 원) :",

    figure => {

        console.log('선택된 도형: ${figure}');

        

        switch (figure) {

            case "정사각형" :

                rl.question("변의 길이를 입력해주세요 : ", input => {

                    console.log('입력받은 값 : ${input}');  -> 수정 (logInput(input));

                    console.log('정사각형의 넓이는 : ${input * input} 입니다.');

                    rl.close();                                -> 수정 {getSquareArea(input)}

                });                    ->수정 (logResult(figure, getSquareArea(input)));

                break;

            case "원" :

                rl.question("반지름의 길이를 입력해주세요 : ", input => {

                    console.log('입력받은 값 : ${input}'); -> 수정 (logInput(input));

                    console.log('원의 넓이는 : ${input * input * 3.14} 입니다.');

                    rl.close();                      -> 수정 {getCircleArea(input)}

                });                   ->수정 (logResult(figure, getCircleArea(input)));

                break;

            default;

             console.log(

                 "지원되지 않는 도형입니다. '정사각형' 또는 '원'을 입력해주세요. \n 커멘드 라인을 종료합니다."  

             );

            -> 수정 (logFigureError);

             rl.close();

        }

    }

);

 

<mathutil.js>

const PI = 3.14;

const getCircleArea = r => r * r * PI;

const getSquareArea = d => d * d;

 

module.exports = {

    PI,

    getCircleArea,

    getSquareArea

}

 

<log.js>

const logInput = input => '입력받은 값 ${input}';

const logResult = (figure, result) =>'${figure}의 넓이는 : ${result} 입니다.';

const logFigureError =   "지원되지 않는 도형입니다. '정사각형' 또는 '원'을 입력해주세요. \n 커멘드 라인을 종료합니다.";

 

module.exports = {

 logInput,

 logResult,

 logFigureError 

}

 

module를 사용한다면?

 1)코드의 재사용성이 증가한다

 2)코드의 관리가 편해진다

 3)코드를 모듈화하는 기준이 명확해야 한다

 

Bundle

서로 관계가 있는 모듈들을 모아서 하나의 파일로 묶는 것

화살표는 의존성을 의미

Bundle이 중요한 이유

 1)모든 모듈을 로드하기 위해 검색하는 시간이 단축된다

 2)사용하지 않는 코드를 제거해준다 

 3)파일의 크기를 줄여준다

 

Webpack

= 모듈번들러

= 웹어플리케이션의 도구 : 구조, 설정, 활용

모듈들의 의존성을 유지하면서 안정적으로 만드는 것

webpack이 바라보는 module

 1) js

 2) sass

 3) hbs

 4) jpg, png

 ...

 

오늘은 강사님 설명도 좋고 따라하기도 편하다!

 

 

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스