기술정보

WEBPACK

* webpack이란?

 웹서비스에서 JavaScript로 구현하는 부분이 많아지면서 JavaScript로 작성된 코드의 양도 늘어났습니다. 코드의 양이 많아지면 코드의 유지, 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요합니다. 그러나 JavaScript에는 지원하는 모듈 시스템이 없습니다. 이러한 한계를 극복하기위해 여려 가지 도구들을 활용하는데 그 가운데 하나가 webpack 입니다.  webpack은 모듈 시스템을 구성하는 기능 이외에도 로더 사용, 빠른 컴파일 속도 등의 장점을 가지고 있습니다.

* webpack 기능

1. Code Splitting   

모듈 번들링을 제공함으로써 클라이언트의 거대한

JavaScript 파일을 여러 파일로 나눠 쓸 수 있게 해줍니다. 다양한 포맷의 require를 모두 지원합니다.

2. JavaScript / CSS Preprocessing

SASS나 LESS등의 CSS Preprocessor는 물론, CoffiScript, LiveScript 등의 compile-to-javascript 들도 설정에 의해 webpack build 커맨드 하나로 빌드할 수 있습니다.

3. Long Term Cashing

브라우저가 CSS, JavaScript, 이미지등의 정적 에셋을 캐싱하게 할 수 있습니다. 이 때, 성능 향상을 위해 오랜 기간 동안 캐싱(long term cashing)을 하기 위해선 현재 캐싱 된 파일이 최신 버전인지를 검증할 수단이 필요한데, 파일 뒤에 파일 내용에 의해 결정되는 해시를 붙이는 것이 한 방법입니다. webpack은 파일 내용에 종속적인 해시값을 파일 이름 뒤에 덧붙임으로서 이런 장기 캐싱을 도울 수 있습니다. 

4. Hot Reloading   

개발 과정에선 필연적으로 코드를 지속적으로 수정하게 됩니다. 이 때,  그 변경사항을 반영하기 위해 수시로 브라우저를 새로고침 해야하는 번거로움을 겪을 것입니다. Hot Reloading이란 이러한 불편함을 해소하기 위해 서버가 돌아가는 중에 코드를 변경하면 변경사항이 생길 때 마다 변경사항을 즉각 반영하는 기능을 의미합니다. 이러한 기능들

이외에도 다양한 커스텀 로더와 플러그인을 지원하기 때문에 webpack으로 할 수 있는 일은 무궁무진 할 것으로 생각됩니다. 이러한 webpack을 잘 이해하고 적용하여 좀 더 나은 프로트엔드 개발환경을 구축하여 개발효율을 높일 수 있길 기대합니다.

도서소개

리팩토링(Refactoring)

이 책은 코드를 정리하는 절차에 관한 책입니다. 사실 리팩토링 기법과 디자인 패턴은 아주 면밀한 관계를 지니고 있습니다.책에서는 「리팩토링이란 겉으로는 드러나지 않지만, 코드의 기능은 바꾸지 않

으면서 내부 구조를 개선하는 작업을 말한다」 라고 설명하고 있습니다. 이 책에서 마틴 파울러가 설명하고 있는 리팩토링에 대한 개념중 가장 마음에 드는 것은 리팩토링을 하면 언제든 더 좋은 디자인으로 바꿀 수 있다는 것이었습니다. 항상 초기 설계할 때 좋은 설계, 좋은 디자인을 하는 것은 매우 중요하지만 우리 모두 현실적으로 이것이 쉽지 않은 것임을 알고 있고 실제로 설계와 디자인은 개발과정에서 수없이 바뀌게 되는 것 같습니다. 하지만 리팩토링을 잘 할수 있는 사람은 이에 대한 걱정 없이 잘못된 부분이 있거나 의도하지 않은 방향으로 갔으면 언제든지 리펙토링을 통해 더 좋은 디자인으로 코드를 수정할 수 있다고 책에서는 설명하고 있습니다. 책을 읽으면서 「컴퓨터가 인식 가능한 코드는 바보라도 작성할 수 있지만, 인간이 이해할 수 있는 코드는 실력 있는 프로그래머만 작성할 수 있다」 라는 문구가 가장 기억에 남았습니다. 이 책은 프로그래밍을 하는 방법을 알려주는 책은 아니지만 프로그래밍을 어떻게 개선해야 하는지 알려준다는 점에서 리팩토링에 관심있는 분들께 추천하는 도서입니다.

[강추기사모음] 이 기사 보셨나요?

이 코너에서는 함께 공유하면 좋을만한 기사들을 선정해 보았습니다. 기사 제목을 선택하시면

해당 페이지로 이동합니다. 잘 알려지지 않은 기사중에서 다른 직원들과 나누고 싶은 정보가 있다면 뉴스레터 편집실로 알려 주세요.

≫ 4차혁명 대응 ‘큰 그림 1.0’ 나왔다 (출처:ZDNet Korea/2017.11.30)

≫ “애자일 개발의 지휘자“ 스크럼 마스터의 이해 (출처:IT World/2017.12.06)

≫ 세상 모든 것을 서비스화하는 무료 플랫폼··· 'IFTTT' 따라잡기 (출처:CIO Korea/2017.12.06)

≫ PM의 생산성을 '업'시켜줄 프로젝트 관리 툴 15선 (출처:CIO Korea/2017.11.30)

≫ 2018년에 수요 많은 프로그래밍 언어 7가지 (출처:ZDNet Korea/2017.12.11)

≫ 파이썬·R·SQL 잘 알고 석사 학위 있으면 데이터 과학자로 '인기' (출처:CIO Korea/2017.12.13)

≫ 5G 첫 표준 '논스탠드얼론(NSA)' 확정 초읽기 (출처:전자신문/2017.12.17)

≫ 조달청,192개국 정부조달기관 입찰정보 무료 제공 (출처:news1/2017.12.19)