티스토리 뷰


최근 프론트엔드 커뮤니티에서 엄청나게 뜨거운 녀석이 등장했습니다. 1주 동안( 12. 10 ~ 12. 16) github star 4000개 이상을 받은 번들러가 등장한 것인데요.

바로 parcel 입니다. (글 작성한 2017-12-15 일 기준으로 parceljs 사이트가 한글 번역 되었습니다.)



[github trend에서 1주 기준 모습] 무려 4163스타를 한주동안 받았다고 합니다.



Grunt 에서 Gulp로 그리고 최근에는 Webpack 을 쓰고 있는데 또?? 라는 생각이 제일 먼저 들기 시작했습니다.

어떤놈인지 찾아보니 설정없이 Webpack보다 빠른 번들러라고 소개하고 있습니다.


설정이 필요없다고?? 알아서 bundle이 되는건가??

궁금한 생각에 한번 angular-cli 로 생성되는 app을 parcel로 작업해보았습니다.


문서를 읽어봤을때는 Typescript에 대한 내용이 전혀 없었으며, 따로 플러그인이 있다는 내용도 없어서 찾아보니 typescript plugin이 있었습니다.

그럼 Angular를 작동시키는데는 문제가 없다 판단하여 작업을 시작하였습니다.

1. 프로젝트 생성

먼저 angular-cli를 이용해서 angular 프로젝트를 생성하였습니다.

ng new angular-parcel-example --style=scss --routing

angular-cli로 프로젝트를 생성하는 이유는 설정 없이도 angular-cli 에서 제공되는 기능과 얼마나 비슷하게 사용할 수 있을지 궁금했습니다.

2. parcel bundler 설치

그 다음은 parcel를 설치해야 합니다. 전역 설치를 해도 되지만 저는 local 설치로 진행하였습니다.

yarn add parcel-bundler parcel-plugin-typescript@0.2.0-angular.0 --dev
or
npm i parcel-bundler parcel-plugin-typescript@0.2.0-angular.0 --save-dev

3. package.json의 script 명령어 수정

angular-cli로 serve 및 build를 하던 명령어들을 parcel로 변경해야합니다. 아래와 같이 변경하시면 됩니다.

"scripts": {
  "ng": "ng",
  "parcel": "parcel",
  "start": "parcel ./src/index.html",
  "build": "parcel build ./src/index.html"
}

4. index.html 수정

parcel은 웹앱의 진입점(여기선 index.html)에서  상대경로로 불러오는 파일들을 자동으로 bundle하는 방식입니다. 그렇기 때문에 .angular-cli.json 파일에서 설정되었던 main.tspolyfills.tsindex.html에서 불러오는 처리를 추가해야 합니다.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular-parcel"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      ...
    }
  ],
  ...
}

아래와 같이 index.html를 수정해주세요.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularParcel</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <!--해당 부분이 추가-->
  <script src="polyfills.ts"></script>
  <script src="main.ts"></script>
</body>
</html>
여기까지 작업이 되었다면 실행이 가능합니다.
yarn start
or
npm start



문제 없이 성공하였다면 localhost:1234로 접속하여 확인하시면 됩니다.


parcelwebpack과 마찬가지로 hmr이 지원되고 있습니다. hmr의 경우 아무런 설정없이 적용이 되고 있습니다.



여기까지 봤을때는 확실히 parcel 이 주장하는 빠른 빌드zero config(설정없는) 번들러가 충분히 매력적입니다. 

하지만 angular-cli 에서는 다양한 기능을 제공해주고 있습니다. ( serviceWorker / e2e test / generate / enviroment 등) 이러한 기능들을 그대로 설정없이는 무리가 있어보입니다.


그럼 angular-cli에서 webpack 대신 parcel로 변경하면 좋지 않나!? 싶은 생각에 찾아봤습니다.


네 지금 당장은 없다고 합니다.

저는 사실 webpack의 빌드 속도가 느릴만큼 큰 프로젝트를 진행하고 있지 않으니 괜찮습니다.


parcel의 비교대상은 webpack 이지 angular-cli 는 아니긴 합니다.

webpack 과 비교하면 처음 webpack이 어렵게 느껴졌던 설정 부분 없이도 쉽게 bundle이 가능하고 속도 또한 눈에 띄게 빠르다는 점은 매우 좋은 것 같습니다.

하지만 아직 나온지 얼마안되서 문서가 비약한점은 아쉽네요. 특히 플러그인쪽 문서는 너무 빈약합니다.


angular가 아닌 다른 프레임워크나 환경을 구성하는 프로젝트가 있으면 parcel로 다시 작업을 해봐야겠습니다.


이 포스팅의 예시는 github 저장소에 공개된 상태입니다. 관련하여 피드백은 언제나 환영입니다.

댓글
  • 프로필사진 Favicon of http://kjhiar.tistory.com BlogIcon 이쁜 아줌마되기 좋은 정보 감사해요~ 2017.12.16 14:53 신고
  • 프로필사진 Favicon of http://web-front-end.tistory.com BlogIcon 권윤학 감사합니다:) 2017.12.20 09:16 신고
  • 프로필사진 Rony 솔직히 신규 개발 진행시 개발환경 준비가 제일 시간이 오래 걸리는디... 설정이 필요없다면 끝내주것네.. 2017.12.20 09:13 신고
  • 프로필사진 Favicon of http://web-front-end.tistory.com BlogIcon 권윤학 네 맞아요. 물론 그 셋팅도 익숙해지면 빨라지긴 하는데 기술이 매년 변화하고있어 익숙해지니 나오고 그러네요^^;; 2017.12.20 09:18 신고
  • 프로필사진 초보앵귤러개발자 안녕하세요 윤학님!
    angular 포스팅으로 많은 도움을 받는 개발자입니다.
    질문이 있는데, 2가지 정도만 질문 드리고싶어요!

    Angular 에서는 양방향 바인딩을 지원하는데,
    react는 단방향이고. 그래서 react는 상태랑 값 추적이 쉽다 이러는데.
    Angular 에서 양방향 바인딩을 지원하는 이유 또는 장단점이 알고싶어요!

    그리고 마지막 질문으로는, Angualr에서 컴포넌트를 생성했는데,
    A컴포넌트 템플릿에 class name aa가 존재하고,
    B컴포넌트 템플릿에 class name aa가 존재할 경우,
    Angular에서는 CSS를 어떻게 처리 하는지 궁금합니다.(react에서는 해당 컴포넌트의 고유 이름이 추가가 된다고 하는데, 앵귤러도 그런식으로 처리가 될까요?)
    2017.12.20 13:57 신고
  • 프로필사진 Favicon of http://web-front-end.tistory.com BlogIcon 권윤학 안녕하세요.
    먼저 아래의 내용은 개인적인 저의 의견일뿐이니, 비판적으로 이해하고 수용하셨으면 좋겠습니다.

    1. Angular에서 제공되는 양방향 바인딩은 사실 syntax sugar(개발자 편의를 위한) 일뿐 단방향 바인딩으로 구현이 되어 있습니다.

    실제 angular 소스를 보시면 이해가 편합니다.(https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L175)

    지원하는 이유라면 아마 AngularJs(angular1) 때 큰 장점이자 단점이였던게 양방향 바인딩이여서 편의성을 위해 제공한것 같습니다.( angularjs때 양방향 바인딩으로 성능 저하 문제가 컸습니다.)

    이러한 문제때문에 Angular(Angular >= 2)때는 기본적으로는 단방향 바인딩이며, 될 수 있으면 단방향 바인딩으로 처리하시는편이 좋습니다. (무조건은 아닙니다.)

    2. Angular에서 component에 decorator(@Component)에 메타데이터로 styles / styleUrls 항목이 있는데,

    여기에 작성되는 css 코드들은 해당 컴퍼넌트 안에서만 작동되는 캡슐화가 이루어집니다.(관련 공식 문서 https://angular.io/guide/component-styles#style-scope)

    React 같은경우 virtual dom으로 구현되어 말씀하신것처럼 캡슐화가 이루어지며, Angular의 경우 View encapsulation 설정에 따라 처리가 달라집니다. 자세한 내용은 위에 링크드린 문서에 나와있습니다.(댓글로 상세히 설명 못드리는점 양해 부탁드립니다.)

    만약 aa라는 클래스에 대해 전역적으로 처리를 원하실 경우 angular-cli로 생성되는 프로젝트 기준으로 src/styles.(css|sass|scss|less) 파일쪽으로 처리하시는걸 추천드립니다.

    질문으로 원하시는 답변을 해드렸는지 모르겠습니다.

    더 궁금하신 사항 있으시면 facebook
    angular korea user group(https://www.facebook.com/groups/angularkorea/)에 오시면 저보다 고수분들께서 같이 고민하고 답변해드립니다 :)
    2017.12.20 14:20 신고
  • 프로필사진 초보앵귤러개발자 안녕하세요? 윤학님!
    친절한 답변 너무너무 감사드립니다. 오호.. Angular 2 또는 AngularJS를 접해보지 않아서 저런 이슈들이 있었군요.
    해당 컴포넌트로 데코레이터로 메타데이터를 지정하면 캡슐화를 통해서, 같은 class 네임이 있어도 해당컴포넌트에서만 동작이 되는군요..아주좋군.. 감사합니다!
    2017.12.20 14:32 신고
댓글쓰기 폼