20210817 TIL

Facts

• 스피드퀴즈 같은 기술 면접을 봄
• 백신예약 성공 
• 면접때 대답하지 못한 부분들 다시 공부 

Feelings

• 나는 작은 카페인에도 심장이 잘 뛴다. 근데 오늘은 카페인이 없어도 엄청 뛰었다. 그냥 계속 긴장상태를 유지하는 듯 하다. 긴장을 좀 풀고 싶은데 간절한 마음이 들어서일까 각성상태가 유지되고 있다. 최선을 다하고 내일은 맥주마시자.
• 화상면접으로 보면서 라이브 코테(알고리즘) + 기술 면접을 봤는데 정말 정신없이 모든 걸 다 질문하는 스피드 퀴즈같은 면접이었다. 지난 면접들 에서 매끄럽게 말하지 못했던 부분은 더 보완됐고 그냥 다 모르는 부분도 있어서 대답하지 못한 부분도 또 있다. 역시 까도까도 또 나오는 개발 지식들이 놀랍다.  그리고 항상 아는데 대답 잘 못한게 항상 아쉽다. 지금 몰라서 대답 못한 부분은 무죄 매번 대답 못한 부분을 잘 짚고 넘어가자. 저번에도 못한 대답을 이번에도 못한다면 그건 유죄

Finding

웹팩

프론트엔트 프레임워크에서 제일 많이 사용되는 모듈번들러

모듈이란 웹 애플리케이션을 구성하는 자원들(프로그래밍 관점에서는 특정 기능을 갖는 작은 코드 단위, 웹팩에서는 모든 자원)로 모듈을 조합하여 병합된 하나의 파일로 만들어주는 것이 모들 번들러이다. 

 

웹팩이 필요한 이유

• 자바스크립트 변수의 유효범위 문제를 해결하기 위해 
• Html,css,js압축, css 전처리기 변환등을 자동화해주기 위해 
• 서버로 요청하는 파일의 숫자를 줄여 로딩 속도를 높이기 위해
• Code spliting 지원 -> 코드를 다양한 번들로 분할하고 리소스 우선순위를 제어하여원하는 타이밍에 로딩을 할 수 있다. (Dynamic import 인라인 함수호출을 통해 코드를 분할한다)

Entry: 

• 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점, 자바스크립트 파일 경로 
• 엔트리 속성에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨야 한다. 
• 디펜던시 그래프: 모듈간의 의존 관계가 생기는 구조
• 엔트리 포인트는 여러개가 될 수 있다. 싱클 페이지가 아닌 특정 페이지로 진입했을 때의 해당 정보 경로를 담고 있다. 

Output:

• 웹팩을 실행시키고 나온 결과물의 파일경로
• filename: 웹팩으로 빌드한 파일의 이름
• Path: 해당 파일의 경로
• Path.resolve(): 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 api
• [name]: 엔트리 속성 포함
• [id]: 웹팩 내부적으로 사용하는 모듈 id 포함
• [hash]: 빌드마다 고유한 해쉬값 포함
• [chunkhash]: 모듈 내용을 기준으로 한 해시값 포함

Loader: 

• 웹팩이 자바스크립트 파일이 아닌 웹 자원들을 변환할 수 있도록 도와주는 속성 
• module 이라는 이름 사용함
• test: 로더를 적용할 파일 유형(정규식으로)
• use: 적용할 로더 (오른쪽에서 왼쪽으로 적용되기 ㄱ때문에 sㅅyle로더를 제일 앞에 넣어야 한다.)

Plugin:

• 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성, 변환과정 전반에 대한 제어권이 있다.
• 결과물의 형태를 바꾸는 역할
• 생성자 함수로 생성한 객체 인스턴스만 추가할 수 있다. 

• HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인

 

웹팩 데브 서버 

• 웹팩 빌드 대상 파일이 변경 됐을 때 저장만 하면 매번 명령어로 실행해주지 않아도  브라우저를 새로고침 해줌 ( 시간 절약 )
• 데브서버를 실행해 빌드하는 경우 프로젝트 폴더에 빌드한 결과물이 생성되는 것이 아닌 메모리에 저장되어 확인 할 수 없다.
• 프록시 설정: 데브 서버에서 발생하는  api 요청의 경로를 변경한다. (CORS 문제 해결)

핫 모듈 리플레이스먼트

• 브라우저를 새로고침하지 않아도 실시간으로 빌드 결과물이 반영되는 것 (지금은 웹팩 기본으로 탑재되어 있다.)

 

소스맵

• 빌드한 파일과 원본파일을 연결해주는 기능
• 배포용 파일이 원본 소스의 어느부분인지 확인해 디버깅할 수 있다. 

`module.exports = {

  devtool: 'cheap-eval-source-map'

}`

 

 

웹팩 모드

None, development, production(기본값)

 

 

webpack.common.js

webpack.dev.js

webpack.prod.js

로 나누어 설정을 관리해 줄 수 있다. 

Affirmation

• 나는 할 수 있다.
• 나는 탐나는 개발자다. 
• 나는 최고다!!!