컴퓨터 비젼 공학은 '미군'에서 군사목적으로 도입되었다가 현재는 많은 곳에서 사용되고 있다.

사람 얼굴인식, AR, 3D 모델링, OCR, Digital puppetry, Recognition, Self-driving cars등등 여러 곳에서 사용하고 있다.

이러한 비젼 공학의 제일 기본은 image pixel 로 부터 의미있는 데이터를 추출해내는 과정이다.

즉, 중간에 어떤 과정을 거치던 적절한 알고리즘을 통하여 pixel→output 을 해내는게 비젼 공학의 목표라고 할 수 있다.

그러면 이 이미지로부터 뽑아낼 수 있는 가장 기본적인 정보가 무엇일까?

1. Semantic Information : 이미지에 대한 환경적 정보를 뽑아낼 수 있다.

2. Geometric Information : 이미지의 거리, depth 등에 대한 기하 정보를 뽑아낼 수 있다.

여튼 이러한 로직을 통해 많은 회사들이 존재하고 있다고 해서, 비전 공학이 쉽다고 보면 안된다.

특히, 100% 의 정확도를 가진 output 을 뽑아내는 것은 매우매우 힘들다. 왜냐? 이미지를 다루는 데에 있어서 default로 생기는 몇가지 문제들이 있기 때문이다.

1. Viewpoint variation : 첫 번째로 viewpoint variation 문제이다.

   

   같은 물체임에도 보이는 각도에 따라서 다른 pixel 값을 가지게 된다. 이를 해결하기 위해서는 pixel 데이터 뿐 아니라 각도 데이터까지 포함하여 계산을 해야 하는데 요즘은 big-data 학습을 통해 이 문제를 어느 정도 해결할 수 있다고 한다.

2. illumination : 두 번째 문제로 illumination 문제가 있다. 이미지가 명암으로부터 받는 영향을 뜻한다.

   

   밝고 어두운 정도에 따라 같은 이미지인데도 pixel 값이 달라져서 output 이 이상해질 수 있다.

3. scale : 세 번째 문제로 scale 문제가 있다.

   

   이미지의 scale 을 맞추는 거에 대한 어려움이 있을 수 있다.

4. deformation : 네 번째 문제로 모양이 다른 경우에 이미지를 다루는 데에 문제가 생길 수 있다.

   

   그림의 말 발굽을 보면 그때그때 모양이 다르기 때문에 같은 물체인지 확인하기 힘들 수 있다.
5.  

5. object intra-class variation : 같은 물체인데 디자인에 따라 다르게 생겨 확인하기 힘들 수 있는 문제이다. 다음 그림을 보면 바로 어떤 문제인지 알아챌 수 있다.

   

6. Occlusion, clutter : 6번째 문제이다. 특이하게 생긴 이미지의 경우 인식에 문제가 생길 수 있다. 마치 머신러닝의 outlier 라고 생각하면 편할 듯하다.

   

7. Motion : 7번째 문제이다. 물체가 움직이는 동안에 이미지 pixel 데이터를 다루기가 힘들다. 다음 그림을 보면 어떤 경우인지 바로 확인 가능하다.

   

8. Ambiguity : 인식의 모호함에 대한 문제가 있을 수 있다.

   

   호박의 경우 원근감으로 매우 커보이는 문제가 생길 수 있고, 오른쪽의 나비의 경우 착시효과떄문에 나비처럼 보이는 데 실제로는 단지 땅바닥의 그림이라는 문제가 있을 수 있다.
9. 또한 blur 처리 된 경우 역시 인식이 애매할 수 있는데 이 경우에는 일전에 말한 이미지의 환경 정보, semantic information 을 동원하여 어떤 물체인지, 같은 물체인지 확인할 수도 있다.

9. Semantic context : 인식에 있어 상황 맥락이 필요한 경우가 있다. 바로 위에서 해결책으로 잠깐 언급한 방식이다.

   

즉 이러한 문제들 때문에 비전 공학은 하는 사람마다 다른 방법으로 연구를 한다. 따라서 사용하는 키워드, 정석 문제 풀이 같은 것들이 타 공학에 비해 애매하기 때문에 말만 잘한다면 어떤 방법을 사용해도 상관없는 학문이다. 즉, 자신이 보기에 어? 이거 답에 도움이 될거같은데? 하는 단서들을 다 끌어와 정확도만 좋다면 장땡인 듯하다.

참고할 수 있는 단서들

• Depth cues
  • Linear perspective : range information, depth information
  • Parallax : 왼눈, 오른 눈 에서 보는 것과 같이 미세하게 다를 수 있다.

• Shape cues
  • Texture gradient
  • Shading

• Grouping cues
  • Similarity : 색상, 텍스쳐, 등등 유사도
  • Common fate

Chapter 1

학습목차

• 데이터 통신과 통신망이란
• 통신 모델이란
• 통신망과 서비스의 융합

데이터 통신과 통신망의 개념을 익히고 현대 기업망의 추세와 요구사항을 알아본다. 또한 정보전달의 표준화와 통신모델을 이해하고 통신 서비스의 융합을 이해한다.

현대 통신의 큰 특징 2가지는 고속화, 광대역화이다. 즉, 기술이 발전하고 새로운 서비스들이 무수하게 나오면서 그에 따른 통신의 속도, 대역이 늘어나고 있다는 점이 큰 특징이다.

5G를 살펴보면 바로 알 수 있다.

5G는 최신 통신 기술로써 19년도에 생긴 따끈따끈한 통신 기술이다. 5G의 특징에 대해서 간단하게나마 알아보자.

→ 1. Enhanced Mobile BroadBand

: eMBB로 불리우는 확장된 광대역의 기술이다.

→ 2. Ultra reliable Low Latency

: uRLLC 로 불리우는데 속도가 매우 빠르기 때문에 지연이 없다는 특징이 있어 신뢰성이 높다는 특징으로 볼 수 있다. 즉, 자율 주행차와 같은 경우에 사고를 줄일 수 있는 신뢰성을 가지고 있다고 할 수 있다

→ 3. Massive Machine Type Communication

: mMTC 로 불리우는 것으로 IOT를 이야기하는 것이다. 일종의 사물 통신으로써 엄청나게 많은 센서의 개수를 지원하는 특징이 있다.

현재 화웨이가 5G기술에 많은 투자를 하고 있다. 5G는 3.5 G 정도 속도의 4G 기술과는 다르게 27G~37G 정도의 높은 주파수 대역을 사용해 높은 속도를 가지는 통신기술이다. 하지만 그만큼 파장이 짧아져 간섭이 심해지는 단점이 있을 뿐더러 아까 말했듯이 센서의 개수를 많이 지원하게 되어 그만큼 보안문제가 생겨 미국에서 난리 부르스를 치고 있기도 한다. ( 결국 헌법으로 화웨이가 웃긴했지만.. )

여튼 간섭이 심하다는 특징 때문에 요즈음 통신사들은 멀리보낼 땐 4G, 가까이 보낼 땐 5G 식으로 섞어서 통신기술을 쓰고 있기도 한다.

그러면 5G의 특징을 알아봤으니 어떤 기술들을 쓰는지 3가지만 알아보자.

⇒ 1번 기술 : Beanforming

: 안테나 여러 개를 사용해서 전파가 쏟아붇는 범위를 전방향이 아닌 특정(여러)방향으로 줄여 device 와 기지국 사이의 연결을 줄이겠다는 의미의 기술이다. 그만큼 안정성을 높이고 주파수 대역을 높였다고 할 수 있다.

⇒ 2번 기술 : Massive MIMO

: input, output을 여러 개 쓰는 기술로써, 안테나를 하나가 아닌 여러 개 쓰겠다는 의미이다. 4G에서 쓰는 MIMO는 linear MIMO이다. 배치를 일차원적으로 하여 여러 개 안테나를 사용했었다. 허나 5G에서는 2차원으로 배치를 해서 다양하게 기능들을 사용하고 앞서 말한 beamforming도 잘 사용하고 있다.

⇒ 3번 기술 : Network slice

: 자원을 특정 포멧에 집중한다. 일종의 QoS 로 data보다 voice에 지원할당을 많이 한 것이 4G였다면 5G는 영상 data 등등 여러 포멧에 고도화 시킨 기술이라고 할 수 있다.

이러한 5G의 특징과 기술들은 현대 통신의 기본 개념들을 잘 포용하고 있는 좋은 예제라고 할 수 있다. 허나 핵심은 2가지이다.

(1) Mobility를 어떻게 지원하는가

(2) 고속 광대역화를 어떻게 지원하는가

통신이라는 것은 결국 ‘망’ 의 개념에서 벗어날 수 없다. 망은 switch, router의 집합으로써 이동통신에서는 core라고도 불릴 수 있고, 유선에서는 backbone 이라고도 불릴 수 있다.

허나 이러한 망에 500억개 이상의 단말이 있는게 요즘이기 때문에 망과 단말들 사이의 interaction 인 ‘통신’ 이 중요해질 수 밖에 없다.

이 때 성능을 높이기 위해 망을 만진 network는 intelligence network라고 불리우며 단말을 만진 network는 smart~device network 라고 불리운다. 참고로 단말이 smart 한 network 가 압도적으로 많아지고 있다.

여튼 아까 말했듯이 현재의 network는 고속화, 광대역화를 핵심으로 발전하고 있으며, mobility(이동성) 또한 중요시 되고 있다. 이 두가지 핵심 기술의 바탕은 Internet 이므로 all IP network 를 바탕으로 여러 기술들의 핵심을 바라보는 것이 좋다.

인터넷 분류 기준

• 크기 : 망의 크기에 따라 BAN, PAN, LAN, MAN, WAN 등등의 네트워크들이 있다.

• 기능별 : CPN 은 가입자 망으로써 집안 내부의 망이라고 볼 수 있고 BN은 BackBone network 로써 유선에서의 전체 망이라고 볼 수 있다. 이 중간에서 사용되는 network는 SAN으로 subscriber access network 즉, 접속할 떄 사용하는 network 가 있다

• 기업망 : 추가적으로 기업에서 쓰는 internet에도 용어가 붙었는데 intranet, extranet, internet 등등이 있다.

다시 말하지만 현재 시대에서는 단말이 압도적으로 smart해지고 빨라지고 있다. 따라서 어쩔 수 없이 거기에 맞춰 망역시 빨라지고 있다.

＃Convergence

통신에서의 융합은 3 layer로 설명이 된다.

일단 applications 는 여러가지 app 들이 공통으로 필요한 기능을 제공해주는 layer로써 service layer 라고도 불리운다. 그리고 이러한 service 들에 공통적으로 제공되는 요소, 보안 등등을 제공하는 것이 Enterprise services 이며 이것들의 전송하는 틀, 기반이 Infrastructure 이다.

즉, 통신을 솔직히 Applications – enterprise service – infrastructure 3가지가 융합된 상태라고 할 수 있는 것이다. 제일 대표적인 Convergence 로 data + voice 가 있다. (Voip)

통신의 흐름을 그림으로 나타낸 것이다. 각각의 화살표는 전기 또는 광케이블로 연결된 것이라고 보면된다.

또한 source, destination 은 데이터를 비트로써 다루기 떄문에 중간 통신용 장비들이 이러한 비트들을 설정된 프로토콜에 맞춰서 읽어가면서 전송해주는 망 역할을 해준다고 보면 된다.

일종의 변조 복조 장치로써 생각하면 편하다.

그리고 컴퓨터 네트워크에서 배웠겟지만 통신에는 여러 기능들이 있지만 비슷한 기능들을 얼추 묶으면 7개 정도로 나타낼 수 있다. 이게 OSI 7 layer라는 걸 기억하자.

＃Transmission Lines

전송선, 광케이블 등을 의미한다. 이 lines은 몇 가지만 고려하면 된다.

이 3가지이다. 딱 보면 이해하기 쉽다. 참고로 reliability는 무선일 경우 유선에 비해 낮다는 특징이 있다.

＃Transmission Services

어떻게 하면 망 통신 효율이 좋아질까? 는 큰 과제일 것이다. 한 라인에서 여러 통신을 동시에 하는 방식에 대한 Multiplexing을 어떻게 잘할 것인지, 전송할 데이터를 어떻게 압축을 시킬지에 대한 Compression 을 어떻게 잘 할 것인지에 대한 고민을 계속 해야 될 것이다.

Chapter 1(2)

학습 목차

• 통신망의 정의와 분류
• 인터넷
• 망 구성의 예

통신망의 개념을 익히고, 인터넷의 의미를 기원, 주 구성요소 일반적인 인터넷 구성 형태와 용어를 알아보며 익혀보자.

＃Networks

단말이 여러 개 있음에 자연스레 스위치, 라우터로 구성된 망이 출현하게 되었다.

현재 200억개 이상의 단말로 수가 증가하게 되어 이 망의 역할이 매우 중요해졌다. 엄청난 traffic을 적절하게 관리하며 capacity, simultaneously 하게 고속화 광대역화를 잘 이루어야 하며 이것을 기준으로 통신이 발달하고 있다.

시대의 유행 data에 맞춰서 network가 발전해왔다. 허나 결국에는 all-ip network로써 하나의 network 로 발전하게 될 것이라고 생각한다.

＃WAN

넓은 범위의 망으로써 여러 switching node의 집합이다. 또한 KT, SKT 같은 통신사업자들이 사용하는 망으로 보통 장거리 통신을 위해 깔리는 통신 인프라라고 생각하면 편하다.

＃망

1. 전화망 (circuit switching): 일종의 음성망으로써 전화국에서 자구 사용하는 직접 source들을 연결해주는 망이다. 돈 벌이가 안되는 망이다. 즉, 전화를 할 때, 상대방과 나의 음성 메시지가 원할히 오고 갈 수 잇는 길을 일일이 만들어주는 방식의 망이다.

2. Virtual circuit switching (가상회선망)
   • packet switching 조각들로 mix 시켜서 destination 까지 쫙 보내는 기술을 의미한다. 대표적으로 TCP/IP 가 있다. 즉 data를 packet 단위로 쪼개서 보내는 것으로 router를 통해 dest 로 데이터가 전송되는 특징을 가진 망이다.
   • 허나 다음과 같은 문제가 생길 수도 있다. A 에서 100Mb/s 로 데이터를 보낸 경우 Multiplexing line 은 1.5Mb/s 이므로 1.5개만 보내지고 나머지 98.5 개는 packet queue 에 쌓였다가 drop 된다. 이를 해결하기 위해 Flow control 를 도입하기도 하였다.
   • message s/w 초창기 데이터 전송 기술로 alpha net 이 있다. 교환기 사이의 data 단위가 message (file) 로써 공용으로 쓰기엔 단위가 커서 시간이 좀 걸린다는 단점이 있었다.
   • Frame relay (fast packet switching)Mbps 로 성능이 향상되었다. Frame relay 기능을 사용함으로써 error control, flow control 기능을 기반으로 속도를 향상시켰다. 망보다 단말 기능을 올린 것으로 망을 단순화 시킨 망이라고 할 수 있다.
   • Frame 이란 link 계층에서 데이터를 부르는 단위이다. 위에서 packet은 network 계층에서 데이터를 부르는 단위이다. 일단 frame relay는 link layer의 기술을 단말에 부담시키며 망을 단순화한 기술이다. 2Mbps 의 속도로 업데이트 되었는데 이 단위는 화상 data를 보낼 수 있는 범위를 나타낸다. ⇒ 이 역시 현재는 안쓴다.
   • cell switching (ATM) : Asynchronous Transfer Mode2000년 초 속도를 Gbps 까지 향상시킨 기술이다.때문에 Gbps 정도의 속도가 나오게 되어 동영상 데이터를 송수신하는데 부담이 없게 되었다. ⇒ 허나 요즘에도 좀 느린 거라고 생각할 수 있다.
   • ATM은 비동기 전송방식을 의미하는데 이 전송 방식은 cell 단위로 data를 보낸다. 즉 쪼개진 단위가 일정해 HW의 영향을 많이 받는데 요즈음 HW의 성능이 좋아 그만큼 속도가 잘나오게 된다. → circuit switching 과 packet switching 2개를 합친거라고 봐도 된다.
   • label switching (MPLS)

＃LAN

초창기 LAN은 Star LAN 구조였다. 중심에 hub가 있고 그 가지로 terminal 노드들이 있었다. 주로 회사에서 사용하는 망이 전부였다. 허나 이러한 망이 점점 발전하면서 WAN 구조로 발전되었고 home 영역까지 확장되었다.

＃The Internet

Internet의 고유명사형이다. 보통 인터넷이라고 하면 packet switching 기술을 사용하는 TCP/IP 프로토콜을 의미한다.

전세계의 보편적인 공용 네트워크로써 TCP/IP 가 전세계 표준으로 자리를 잡았다는 것을 알아두자.

＃Key Elements of the Internet (Router, Ethernet switch)

여기서 몇 가지 집고 넘어가자. 일단 Router 는 왜 layer 3 로 했을까? 일단 전세계 주소 체계를 어디로 보낼지 알기 위해서는 체계가 있어야 한다. 이 때 IP 는 잘 체계화 되어있지만 그에 반해 Mac address 는 제조업체에서 막 찍는대로 생기기 떄문에 일련번호의 체계가 없다.

즉, IP에 반해 MAC address 는 routing table 에서 관리하기가 힘들다. 이 이유로 IP 주소를 관리하는 layer 3 에 Router 를 두었고 MAC Address 는 따로 layer2 에 Ethernet switch 를 두어 관리하도록 하였다.

＃ISP

Internet Service Provider 를 의미한다. 주로 SKT, KT 같은 서비스 제공업자들을 의미한다. 이러한 망을 이용해 돈을 버는 사업자들을 NSP 로 부른다.

＃Internet Terminology

1. POPPoints of presence 로 서비스가 존재하는 점들을 의미한다.

2. NAPNetwork Access Point로 2개의 network가 만나는 지점을 의미한다.

3. COCentral Office 로 전화 교환국을 의미한다.

4. CPECustormer Premises Equipment 로 사용자가 내돈내산한 장비를 의미한다.

위의 내용을 정리하면 다음과 같다.

일단 로더에 관한 개념을 알아보자.

css라는 파일을 만들어보자.

css 파일을 만들어 link 하기 위해서 css 파일 부터 만들어야 하고, 그 후 link 태그를 추가해 외부 스타일시트를 가져오도록 하는 것이 일반적이다.

하지만 이렇게 되면 css 파일 하나당 또 한번의 connection 을 해야 하게 되어 기존의 js 를 묶어 한번에 처리했던 의미가 퇴색되게 된다. 이를 또 webpack이 해결해준다.

다시 한번 위 그림을 보자.

webpack 이 무엇인가를 바로 알 수 있게 해주는 그림이다. 저기 보면 sass 나 css, png 조차도 번들링해주는 것도 알 수 있다. 이 역할을 해주는 애가 바로 로더이다.

미리 말하겠지만 사회나가서 webpack을 얼마나 잘 알고있냐를 판가름하는 것이 이 "로더" 를 얼마나 잘 알고있냐가 될 정도로 중요한 놈이다.

webpack의 guide 페이지로 가면 Asset Management 라는 탭이 있다. Asset 이란 자산으로 우리가 코딩한 js, css 파일들을 의미한다. 여튼 여길 보면 로더를 사용하기 위해서 다음과 같은 명령어를 치라고 나와있다.

npm install —save-dev style-loader css-loader

그 후 webpack.config.js 파일을 다음과 같이 수정하라고 되어있다.

• css-loader

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'css-loader',
        ],
      },
    ],
  },
};

저 코드 중 css-loader 를 추가함으로써 webpack을 동작시켯을때 확장자가 css파일을 만나게 되면 로더가 알아서 해당 css 파일을 로더 안으로 로드시켜주게 된다.

// src/index.js
import hello_word from './hello.js'; 
import world_word from './world.js';
import css from './style.css';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

index.js 파일을 다음과 같이 바꿔준다.

그 후 번들링 한 이후 실행시켜주게 되면 css 라는 변수에 style.css 안의 내용들이 리스트화되어 들어가있는 것을 확인 할 수 있다. 즉, 이 리스트 요소를 컨트롤 해서 css를 디자인할 수 있는 것이다.

허나 직접 리스트 요소들을 사용할 필요 없이 이 적용을 자동화해주는 로더가 있다.

• style-loader

바로 style-loader 이다. 이 로더를 추가해준 webpack.config.js 파일을 다음과 같다.

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
					'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

즉 정리하자면 css-loader 는 css 파일을 읽어와서 그것을 webpack으로 가져오는 녀석이고, style-loader 는 그렇게 가져온 css 코드를 web page 안에 style 코드로 주입시켜주는 놈이다. 거의 짝꿍인 것이다.

여튼 이런식으로 config 파일을 수정해주고 다시 실행해주게 되면 index_bundle.js 하나만 connection 하여 가져오게 되었는데 css, js 모두 적용된것을 확인할 수 있다.

webpack.config.js 에 추가했던 코드 중에 다음 코드를 보자.

module:{
    rules:[
      {
        test: /\.css$/,
        use:[
					'style-loader',
          'css-loader',
        ],
      },
    ],
  },

저기서 test: /\.css$/ 라는 문구가 있는 것을 볼 수 있다. 저 코드의 의미는 .css 로 시작하는 파일이 발견되면 밑의 로더들을 통과시켜 처리해라 라는 조건형식의 의미이다.

이 때 중요한 것은 밑쪽에 적혀있는 loader 일수록 늦게 시작된다는 것이다. 즉 밑에서 부터 차근차근 사용되는 " 체이닝" 이 된다는 것이다.

이러한 것을 적용시켜 이미지 로더, 폰트 로더 등등 여러가지 로더가 있다. 이러한 로더 중 official 하게 제공되는 로더, 커스텀화된 로더 들이 있으니 알아서 찾고 사용하면 될것이다!!!

이제 로드를 한 이후 어떻게 최종적인 파일의 이름 및 결과를 만들어낼 것인가를 알아보자. 즉, 하나로 합칠건지 쪼갤건지 설정하는 방법에 대해 알아보자.

OUTPUT 파트를 좀더 알아보자.

여러가지 엔트리 파일이 있는 경우 어떤식으로 config 파일을 처리해야 할까?

// webpack.config.js 파일
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

config 파일을 다음과 같이 바꿔주자.

추가된 코드는 entry 부분이다. 객체화 시켜 2개의 속성으로 구분하여 나누었다. 그 후 output 부분도 바꼈는데 [name] 으로 나타내서 저 부분에 index 또는 about 값이 들어가잇는 것을 확인할 수 있다.

이렇게 output을 두개로 쪼개 나타낼수도 있다.

또 다른 방법으로 하는 것이 많은데 역시 webpack document 를 검색해서 알아보는 것이 좋다. 외울 필요가 없다는 말이다.

참고로 [name], [id], [hash] 등 여러 방법이 있으니 검색해서 알아보자.

webpack에는 2가지의 확장 기능이 있다.

첫번째는 앞에서 배웠던 로더이고, 두번째는 플러그인이다.

로더는 우리가 가지고 있는 모듈을 최종적인 아웃풋으로 만들어가는 과정에서 사용되는 것이고, 플러그인은 그렇게 해서 만들어진 최종적인 결과물을 변형하는 것이라고 생각하면 된다.

플러그인이 더 복합적이고 자유로운 일들을 할 수 있도록 해준다는 것을 알고 있자.

플러그인은 플러그인마다 사용방법이 제각각 다르다.

때문에 다 배울필요는 없고 하나정도만 사용해보고 그 방법만 숙지하자.

webpack document에 들어가서 플러그인 탭에 들어가면 여러가지 플러그인들이 있는 것을 볼 수 있다. 그 중에서 HtmlWebpackPlugin 을 살펴보자.

코딩 과정에서 html 파일을 자동으로 생성하고 싶거나 template 화 해서 벽돌찍듯이 html 파일을 생성하고 싶을 수 있다.

이 때 저 플러그인을 쓸 수 있다.

플러그인 다운받는 방법은 다음 명령어만 치면 된다.

npm install —save-dev html-webpack-plugin

그리고 webpack.config.js 파일을 다음과 같이 바꿔준다.

// webpack.config.js 파일
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'./index.html'
    })
  ]
};

다음과 같이 config 를 만들어주게 되면 HtmlWebpackPlugin 플러그인이 index.html 을 템플릿으로 해서 html 파일이 생기게 되었고, 그 안에 다음과 같은 js, css 파일들이 번들링된 파일이 들어가 있는 것을 볼 수 있다.

// 템플릿 기준으로 만들어진 html 파일
<html>

<head>
    <link rel='stylesheet' type='text/css' src='./public/style.css'>
</head>

<body>
    <h1>Hellow, Webpack</h1>
    <div id='root'></div>
    
<script src="index_bundle.js"></script><script src="about_bundle.js"></script></body>

</html>

그런데 여전히 번들이 된 여러가지 파일들이 모두 다 들어가있는 것을 볼 수 있다. 원하는 것을 추가하기 위해서는 webpack github 들어가 다음과 같은 표를 보고 적절한 속성을 추가하면 된다. 이 떄는 chunk라는 속성을 사용하자.

// webpack.config.js 파일
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'./index.html',
			chunk:['index']
    })
  ]
};

chunk에 위 entry 에서의 식별자를 넣어주면 된다. 그렇게 되면 해당 템플릿 기준으로 설정된 chunk 번들링만 링크되어 만들어지게 된다.

만약 두개의 html 을 만들고 싶다. 그러면 webpack.config.js 파일을 다음과 같이 변경해주면 된다.

// webpack.config.js 파일
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'./index.html',
			chunk:['index']
    }),
		new HtmlWebpackPlugin({
      template:'./src/about.html',
      filename:'./about.html',
			chunk:['about']
    }),			
  ]
};

이렇게 되면 webpack 실행시 html 파일이 2개 생기게 된다. 즉, html 도 최적화 시킬수도 있는 것이다.

이 외에도 여러가지 플러그인이 있으니 필요한 것들 잘 찾아서 사용하면 좋을 것이라 생각된다.

npx webpack 을 계속해서 실행하기 귀찮은 경우가 있을 것이다.

이 경우 다음과 같은 명령어를 사용해보자.

npx webpack —watch

이 명령어를 치게 되면 파일을 변경하게 되면 webpack 이 자동으로 탐지하고 번들링을 해주게 된다.

NPM 패키지 사용

npm을 통해서 설치한 여러가지 작은 부품이될 프로그램들을 애플리케이션으로 가져오는 방법으로써 webpack을 사용하는 방법을 알아보자.

lodash 라는 유명한 라이브러리로 알아보자.

npm install lodash

를 입력하게 되면 해당 라이브러리가 npm 패키지 도구에 의해 다운로드 된다. 그러면 이 라이브러리를 어떻게 webpack 에 삽입할까

다운 받은 후 js 파일을 다음과 같이 바꿔줄 수 있다.

import hello_word from './hello.js'; 
import world_word from './world.js';
import _ from "lodash";
import css from './style.css';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

이렇게 바꿔주면 lodash 도구를 _ 에 할당해주어 사용할 수 있다.

크게 별거는 없지만 이런식으로 유용한 npm 라이브러리를 다운받아 사용할 수 있다.

Lazy loading

: 너무 큰 번들링 파일인 경우 → 쪼개는 과정이 필요 → webpack 이 제공

Webpack 은 없어도 일은 할 수 있지만 있으면 일을 잘 할 수 있는 정도이다. 허나 모르는 것보다는 한번 맛보는 것이 더 좋은 것이니 프로젝트에 한번 사용해볼 예정이다.

이 3가지에 거의 모든 개념이 들어가있다는 '생코'의 명언

저 위 순서에 따라 어떻게 다양한 형태의 자원들을 webpack 에게 던져줄 것인가? 또한 어떤 방법으로 가공할 것인가? 를 알아보는 게 중요하고, 또한 어떻게 유리한 형태로 내보낼 것인가? 를 알아보는 게 중요하다.

이 흐름을 컨트롤하기 위해서는 webpack 에게 어떻게 해라 시키는 방법이 있는데 이 방법에 대해서 알아보자.

npx webpack —entry ./src/index.js —output ./public/index_bundle.js

위의 명령어는 webpack 에게 entry 파일과 output을 선언하는 명령어였다. 그러나 프로젝트가 커질수록 이 명령어를 일일이 사용하기 번거롭기 때문에 설정파일을 사용하는 것이 좋다.

https://webpack.js.org

위 webpack 홈페이지에 들어가보면 webpack.config.js 파일에 대한 예제들이 나와있는 것을 볼 수 있다.

이 예제를 참고하면서 코딩하면 쉬울 것이다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

다음과 같이 config 파일을 코딩해주고

npx webpack —config webpack.config.js 을 입력해주면 번들링되어 파일화 된다. (참고로 파일을 webpack.config.js 라는 약속된 이름으로 해주었으면 npx webpack 만 입력해주어도 된다.)

즉 정리하자면 번들링하는 방법은

• 명령어를 통해 엔트리 아웃풋 적어 시키기

• webpack.config.js 에 코드 적어주고 npx webpack 입력

<> 모드 도입

webpack의 운영모드라는 것을 알아보자.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

위 코드가 작성했었던 webpack.config.js 파일이다.

저 형태로 실행하게 되면 경고 문구가 하나 뜨는 것을 볼 수 있다. mode 설정을 하지 않아서 생기는 문구이다. 즉, 개발용인지 서비스 용인지 webpack에게 알려줘야 한다는 것이다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

다음과 같이 mode 한 줄 추가해주면 경고 문구가 뜨지 않는 것을 볼 수 있다.

이 모드를 사용해서 개발용 번들과 배포용 번들을 따로둬서 따로 분리시켜 js 파일을 가질 수도 있다.

또는 하나의 webpack.config.js 하나의 파일 내에서 조건문을 설정해 switching 되게 할 수도 있으니 이 점은 따로 찾아서 처리해보자.

Webpack 을 도입했을 때의 효과는 리팩토링이다.

리팩토링이란 구동되는 방법을 그대로 유지하면서 내부의 코드를 더 효율적으로 바꾸는 행위를 이야기한다.

코드의 전체적인 모습을 그대로 유지하면서 구형 브라우저에서 돌릴 수 있으며 여러가지 파일을 하나로 번들링하는 것을 Webpack 을 통해 해보자.

일단 nodejs 서버 프레임웤으로 해당 페이지를 올려보자.

npm init 을 입력해 해당 프로젝트 폴더를 nodejs 초기 설정을 해주고, npm install -D webpack webpack-cli 저 -D 는 개발을하기 위한 옵션이다.

이렇게 2개를 다운받은 후에 src/index.js 파일을 만들어 html 에서 import 했던 구문들을 옮겨주자

// src/index.js
import hello_word from './src/hello.js'; 
import world_word from './src/world.js';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

즉, 애플리케이션의 입구 역할의 파일을 index.js 로 설정해준것이다. 이것을 엔트리파일 이라고 한다.

index.js 파일이 hello.js 와 world.js 파일을 사용하고 있다. 그러면 이 의존성을 이용해 index.js 로 번들링 해보자. 이 때의 작업한 결과는 public이라는 폴더 안에다가 넣겠다.

위 과정을 진행하기 위해 webpack 을 실행시켜주자.

npx webpack —entry ./src/index.js -—output ./public/index_bundle.js

위 명령어를 쳐주면 된다. 의미는 src/index.js 의 엔트리 파일과 그 파일이 사용하고 잇는 모든 파일들을 하나로 만들어 public/index_bundle.js 에 가져다 놓아라 라는 의미이다.

그러면 public 폴더 밑에 번들화 된 파일이 만들어져 있을 것이다.

그 후 html 파일에 script src 연결해두면 해당 파일 하나만 커넥션해서 받아도 기존의 기능과 동일하게 돌아간다는 것을 확인할 수 있다.

이렇듯 import 를 webpack을 통해 모든 브라우저가 읽을 수 있게 번들링해줄 수 있게 되어 우리는 편하게 코딩해줄 수 있고, 브라우저도 쉽게 코드를 읽게 된, 서로 윈윈했다고 볼 수 있다.