ko
ko
가우딘, 전체보기

윌슨의 개발지식- 개발환경과 빌드(2)

윌슨의 개발지식

개발환경과 빌드(2)

개발환경과 빌드는 도메인마다 다 다르고, 복잡해 보이기 때문에 접근하려고 마음 먹기 전에 두려움이 먼저 자리 잡는 것 같아요. 이러한 새로운 개발환경을 처음 접할 때 가장 어려운 부분은 전체 시스템에 대한 이해가 완벽하지 않기 때문에, 한 수 한 수 둘 때마다 이것이 어떠한 사이드 이펙트를 만들지에 대해서 불안감과 두려움이 먼저 생긴다는 것이죠. 전체 시스템에 대해서 확신을 가지고 있는 누군가가 옆에서 불확실하다고 여겨질 때마다, 확신을 준다면, 배움의 속도도 빨라지고, 응용의 속도도 빨라질 것 같다는 생각이 들었습니다.

그래서 도메인 별로 개발환경에 대해서 한 번 정리하고 많은 분들이 불안한 마음으로 다루고 있는 빌드 시스템에 대해서 알리고자 이 문서를 기획했습니다.

Web Javascript Library 빌드와 개발환경

빌드

웹도 네이티브 빌드와 크게 다를 게 없습니다. 결과적으로 해당 플랫폼 런타임에서 사용할 수 있는 라이브러리 또는 실행 스크립트를 배포하는 것이죠. 다만 그 타겟 플랫폼이 Chrome, Safari, IE 등의 브라우저고 기계가 이해할 수 있는 언어로 번역하는 시점이 좀 다릅니다. 브라우저는 Java의 Virtual Machine처럼 텍스트 기반의 Javascript 파일을 Runtime에 기계어로 번역하는 JIT 자바스크립트 엔진을 가지고 있어서 클라이언트가 브라우저에서 웹페이지를 접근하는 시점에 스크립트를 번역합니다.

그러면 특정 플랫폼에서 사용가능한 자바스크립트 라이브러리 파일을 배포하기 위해서는 무엇을 고려해야 할까요?

브라우저 타겟 고려사항

  1. OS : 똑같은 버젼의 브라우저일지라도 모바일과 데스크탑 브라우저에서 지원하는 API 지원여부가 다를 수 있어요. 한 예로 Safari 브라우저는 모바일에서는 video.volume이 readonly인 반면 데스크탑에서는 값 할당이 가능하죠.

  1. 브라우저 종류 : Chrome, Edge, IE, Safari, Opera 등 브라우저들마다 표준 Web API를 구현한 수준이 다릅니다. 대표적인 예로 MSE를 들 수 있어요. IE에서는 이 API를 지원하지 않고 있다가 최근에서야 Netflix와 공동으로 이 API를 구현했죠.
  1. 브라우저 버젼 : 브라우져 버젼별로 지원하는 Web API가 다를 수가 있어요. 한 예로 스트리밍 플레이어 개발에 필수적인 API인 MSE는 크롬 55 버젼부터 사용이 가능합니다. (참고로 크롬은 버젼 77까지 출시되었다.)
  1. Web API & Polyfill : 브라우저마다 표준 API 지원여부가 다릅니다. 지원하지 않을 경우 Polyfill(브라우저에서 지원하지 않지만 워크어라운드로 구현한 라이브러리 또는 SDK)을 서치해서 찾아야 하죠.
  1. Javascript 버젼 : 최신 브라우저 버젼 대부분 ES 최신 문법을 지원하는 반면 오래된 버젼이나 구형 브라우저에서는 이를 지원하지 않을 수 있습니다. 더 넓은 범위의 호환성을 지원하려면 타겟 OS/브라우저를 설정하고 이에 따라 문법 지원여부를 고민해야 합니다.

위 고려사항을 생각하고 범용성을 고려하면 개발 프로세스는 다음처럼 생각할 수 있어요.

개발 프로세스

대개 개발 워크플로우는 다음과 같이 크게 3가지로 볼 수 있을 것 같아요.

  • 개발
  • 테스트
  • 배포

위와 같은 3가지 축으로 볼 때 개발 워크플로우를 다음과 같이 표현할 수 있어요.

개발 환경

일반적으로 C/C++ 네이티브, 안드로이드, 맥/iOS 개발에 익숙한 분이라면, 웹 개발을 시작할 때 당황할 수 있습니다. XCode, Android Studio, Visual Studio 등 IDE에서 제공하는 기본적인 기능조차 설정되어 있지 않죠. 예로 들어, XCode에서 C++개발을 하면, 파일 단위로 기능을 나눠서 구현하고 그 헤더를 추가함으로써 다른 파일에 정의되어 있는 기능들을 사용합니다. 이렇게 파일을 분리해서 개발하면 나중에 필요한 파일만 재사용함으로써 개발 효율성을 높일 수 있겠죠. 또한 변경된 파일만 재빌드해서 빌드속도도 향상됩니다.

그러나 웹 개발 프로젝트를 시작할 때는 간단한 기능도 프로젝트를 시작하는 개발자가 세팅하고 가야 합니다. 이러한 개발 도구들을 많은 분들이 알고 계시는 NodeJS를 통해서 효과적으로 도입하고 사용합니다.

Node JS가 효과적인 이유는 여러가지가 있는데, 첫 번째로, 백엔드와 프론트 엔지니어가 공통의 언어로 작업공간을 공유할 수 있기 때문이고 두 번째로는 NPM 패키지 매니저가 의존성 관리를 너무나 편안하게 만들어 주기 때문입니다. (npm이나 기본적인 Node JS 개념을 이해하지 못하고 있다면, 여기서 좀 어려워질 수 있습니다.)

그렇게 해서 Node JS 기반 위에 개발자들은 하나둘씩 개발도구 패키지들을 배포하기 시작했고, 스트리밍 빌드시스템인 gulp, node module을 클라이언트에서도 사용하게 해주는 browserlify, 테스크 러너인 gulp 등등이 그것입니다. 문제는 어느 개발환경 하나 똑같은 개발의존성으로 구성하는 경우가 드물기 때문에 이 많은 패키지들의 개념들을 이해하고 감당하기가 어려웠던 것 같습니다. 자바스크립트 모듈 번들러인 Webpack이 나오면서 이 모든 기능들을 하나의 패키지에서 사용할 수 있게 되자, 대부분의 개발자들은 Webpack 기반으로 개발환경을 구성하는 추세로 돌아선 것 같습니다.

Webpack

웹팩은 Javascript Module Bundler입니다. 웹팩이 하는 일은 네이티브 C++빌드 환경에서 링커가 하는 역할과 매우 유사합니다. 링커가 의존성 있는 오브젝트 파일들을 모아 하나의 다이나믹 라이브러리 파일로 병합하는 것처럼, 웹팩 또한 여러 의존성 있는 JS파일들을 하나의 파일로 묶어서 출력합니다. (물론, 웹팩은 단순히 JS파일 뿐만 아니라, CSS파일, 이미지 파일들도 로드하지만, 결과적으로는 JS로 변환하기 때문에 이는 아직은 생각하지 않으셔도 됩니다)

웹팩은 이해하는 데 필수적인 개념은 Webpack 공식 홈페이지 문서에 잘 설명되어 있습니다. 바로 Entry, Loader, Plugin입니다.

Entry는 C++의 export API의 개념과 유사합니다. 웹팩이 가장 처음 읽는 파일로, 이 파일을 읽어서 의존성 트리를 그립니다. 이 엔트리를 몇 개 설정하는지에 따라 최종 JS파일 개수가 결정됩니다.

Loader는 각 파일을 병합하기 전에 특정 파일에 처리할 컨버터라고 보시면 됩니다. 예로 들어, Babel Loader는 일반적으로 좀더 상위 버젼의 자바스크립트로 작성된 JS파일을 좀 더 많은 브라우저가 이해할 수 있는 언어로 변경하는 역할을 합니다.

Plugin은 최종적으로 병합된 JS파일을 후처리하는 모듈입니다. 예로 들어, Uglify Plugin은 JS파일의 최종 파일 사이즈를 줄이고 난독화를 하기 위해, 변수명을 이해하기 힘든 명칭으로 변경하고 변수 길이나 필요없는 스페이스를 없앱니다.

(Entry 파일이 무엇이고, 사용하는 Loader, Plugin을 설정하는 것은 .config.js 파일에 정의합니다.)

이처럼 다양한 기능을 제공하는 Webpack을 웹 라이브러리 개발 프로세스에서 매치시켜 보면 다음과 같습니다.

사용된 로더와 플러그인은 아래 간단히 설명합니다.

Mocha

유닛테스트 프레임워크입니다.

Chai

노드와 브라우저용 BDD/TDD Assertion 라이브러리로 Mocha 유닛 테스트 프레임워크와 연동해서 주로 사용합니다.

Karma

테스트 러너로, 현재 호스트 시스템에 설치된 브라우저를 디텍트하고 설정된 브라우저를 실행시켜서 그 위에서 설정된 테스팅 프레임워크로 작성된 테스트 코드를 실행합니다.

ESLint

코드 정적 분석과 코딩 스타일 반영을 위해서 사용되는 툴입니다.

Babel

트랜스파일러로, 다양한 브라우저에 범용적으로 사용될 수 있는 자바스크립트 버젼으로 언어를 번역하는 역할을 수행합니다.

Webpack Banner Plugin

스크립트 파일에 상단에 커멘트로 스크립트 파일에 대한 정보를 일괄적으로 담기 위해서 사용됩니다. 예로 들어, 회사명이나 작성자 정보 등이 있습니다.

JSDoc

자바스크립트의 문서화 툴. 자바스크립트 파일에 문서화 문법에 맞춰 작성된 커멘트를 파싱해서 문서를 출력합니다.

레퍼런스

Webpack Official Website https://webpack.js.org/concepts/

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound