angular도 한번 써보기로 했다. angular는 뭔가 또다른 세상이다. 처음보는 것들이 많다. 하나하나 알아가보기로 했다.
concurrently의 활용
typescript를 하면서도 이런 코드를 봤는데 angular도 typescript를 base로 하고 있어서 그런지 concurrently를 사용하고 있었다. 막연히 watch 같은 건가보다 하고 있었는데 사용하는 것을 가만히 보니 npm start 와 npm run serve 를 param으로 넘겨주고 있었다. 그래서 궁금했다. 찾아보니 concurrently는 동시에 두개의 process를 처리해주는 것이었다. 그래서 watch와 서버를 동시에 실행하도록 하는 것이다. webpack-dev-server같이 이걸 동시에 해주는 대신 이걸 사용하는 것 같다.
lite-server의 활용
watch는 tsc -w로 하면 되는데 서버는 어떤 걸 사용하나 봤더니 lite-server라는 것을 사용하고 있었다. bs-config.json같은 파일은 바로 이 lite-server를 위해서 사용하는 파일들이었다. port, 제공할 파일들, root 같은 것을 적어둔 것이다.
system.js
system.js는 실시간으로 angular를 load해주는 것 같다는 생각을 했는데 실제로 그런 일을 한다. dynamic ES module loader라고 한다.
System.import('main.js').catch(function(err){ console.error(err); });
이런식으로 사용하는건데 ES5까지만 지원하는 것 같다. import xx from ooo에서는 오류가 발생한다. translator를 지정해주면 될 것도 같은데 system.config.js 라는 파일을 만들어서 설정을 해주면 어떻게 될 것도 같다. 예제에서는 typescript를 es5로 전환하니 그런 부분은 설정하지 않은 것 같다.
zone.js
zone.js는 angular v1부터 사용됐다고 하는데... 음... 음... 잘 모르겠다. 뭔지를 모르겠다. 설명을 읽어도 뭔지를 모르겠다.
A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs.
문서에는 이렇게 써있긴한데 그러니까 async task 에서 중간중간 사용할 수 있는데 그게 컨텍스트를 유지하고 있다는 말인건가? 클로저랑 비슷한 말인 것 같은데 실제로 어떤 식으로 사용을 하는지 좀 알아봐야할 것 같다.
지금까지 angular quickstart에서 처음 본 것들을 정리해봤다. 종합적으로 정리하자면 concurrently로 tsc -w와 lite-server를 동시에 실행하면 system.js가 main.js를 로드해준다는 것이다.
이렇게 오늘도 새로운 세상을 한가지 알았다. 그런데 아직 angular 코드는 어떻게 생긴건지 알아보지도 못했다. ;;
