Javascript의 모듈 번들링 도구, Webpack
웹 서비스 개발에서 SPA 등 새로운 트렌드로 인해 클라이언트단에서 Javascript로 작성하는 코드의 양도 늘어나게 되었다. 이렇게 되면서 코드의 유지와 보수를 위해 모듈화를 하여 관리하게 되었는데 Javascript는 자체에서 모듈을 지원하는 시스템이 없기 때문에 이러한 한계를 극복하고자 활용하게 된 도구 중 하나가 바로 이 Webpack이다.
또한, 내가 작성한 코드가 지원되지 않는 브라우저와의 호환성을 위해, 코드의 빠른 컴파일을 위해, 많은 라이브러리들을 각각 추가해주는 불편함을 해소하기 위해 사용한다.
크게 모듈 loader와 plugin으로 구성된다.
loader
모듈(image, js, jsx, css, sass..)을 입력받아서 다른 형태로 수정후에 JavaScript로 변환한다. 예를 들어 ES6문법으로 짜여진 코드를 ES5 문법으로 변환한다.
plugin
주로 번들된 결과에 대한 후속 처리를 담당하며, loader처럼 모듈의 내용은 수정이 불가능하다. 예를 들어 html에 bundle.js를 추가하거나 /dist 디렉토리에 clear, bundle 파일을 압축한다.
Babel
babel.config.json 뜯어보기
- preset? 구문별로 변환해주는 여러 모듈들의 묶음
- core.js? 폴리필 서드 파티
- polyfill? 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드 (일반적으로 웹의 JavaScript)입니다.
- 소스맵? 개발을 위한 디버깅 툴로서 설정에 development 모드에서만 동작하며 devtool:"inline- source-map" 추가하면 크롬 개발자 도구에서 디버깅을 할 수 있다.
MVC 패턴?
MVC패턴은 디자인패턴 중 하나이다. 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리한 특정한 규약과 같은 것을 말한다.
model
애플리케이션의 정보, 데이터를 나타낸다. 데이터베이스, 상수, 초기화값, 변수 등을 뜻한다. 또한 이러한 정보들의 가공을 책임지는 컴포넌트이다.
이 모델은 다음과 같은 규칙을 가지는데,
- 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.
- 뷰나 컨트롤러에 대해 어떤 정보도 알지 말아야 한다.
- 변경이 일어나면 변경 통지에 대한 처리를 구현해야 한다.
view
입력 텍스트, 체크박스 등과 같이 사용자 인터페이스 요소를 나타낸다. 이는 데이터 입력 및 출력을 담당하며 데이터를 기반으로 사용자들이 볼 수 있는 화면이다.
다음과 같은 규칙을 갖는다.
- 모델이 가진 정보를 따로 저장해서는 안된다.
- 모델이나 컨트롤러의 구성요소들을 알지 못해야 한다.
- 변경에 대한 처리를 구현해야 한다.
controller
데이터와 사용자인터페이스 요소들을 잇는 다리 역할을 한다. 즉, 사용자가 데이터를 클릭하고 수정하는 것에 대한 이벤트 등을 처리하는 부분이다.
다음과 같은 규칙을 가진다.
- 모델이나 뷰에 대해 알고 있어야 한다.
- 모델이나 뷰의 변경을 모니터링 해야 한다.
어떻게 적용해볼까?
view : 메인 페이지 컴포넌트별로 나눈다. 이벤트를 등록하고 렌더링을 처리한다.
model : 각 모듈들의 상태관리
controller: 위의 둘을 잇는 중간 다리 역할 (이벤트 발생시 상태 업데이트 하고 뷰 변경하는 식)
이런 식으로 ?
scss Mixin
자주 쓰는 scss 구문을 mixin으로 처리하여 한줄로 만들거나, 함수처럼 변수를 넣어 사용함으로써 가독성을 높이고 편리함을 가져다 준다.
나는 주로 이렇게 사용하였다.
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
@mixin border($radius) {
border: 1px solid $gray4;
border-radius: $radius;
box-sizing: border-box;
}