24Feb2020 TIL

process.env[key] 환경변수

env는 environment 의 약자 였나보다. 지난 스프린트에 스쳐 지나가는 줄로 있었던 process.env의 의미를 오늘 오피스 아워 시간에 알게 되어 잊지 않기 위해 블로깅을 한다. ~~(지난 블로그들을 자주 봐야 복습을 할텐데^^ 기록만 열심히 하는 편. 언젠가 보겠지)~~

우선 process란 ?

The process object is a global that provides information about, and control over, the current Node.js process. As a global, it is always available to Node.js applications without using require(). (출처 : node.js)

봐도 모르겠다. require() 사용 없이 글로벌로 내장된 함수기 때문에 사용할 수 있다 정도만 이해하겠다. 잘 이해할 수 없으므로 다음에 또 나오면 그 때 이해하겠다.

process.env[key]는 언제 쓸까?

크게 프로그램은 개발단계 - 테스트 단계 - 유저가 쓰는 단계(양산) 세 단계로 나뉜다. 운좋게 3박자가 맞아 동일한 환경에서 사용될 수 있으나, 아닌 경우도 있기 때문에 production / development 환경이냐 분리하여 사용할 수 있다. 예를 들면, development 단계에선 /develop path로 설정하고, production 일땐, /production 이라는 path로 분리하여 사용해야 할 때. 매번 경로를 따로 작성해주는 것이 아니라, 각 환경에 따라 path, 기타 등등을 나눠서 설정해줄 수 있다.

아직은 양산을 해본적이 없어서 이것의 중요성을 체감할 수 없으나, 이후 프로젝트를 진행하게 되면 중요성을 느낄 것 같다. 그 때 더 자세하게 살펴보고 지금은 이런것이 있구나. 왜 하는 구나 정도만 알아두기로 한다. ~~어차피 봐도 안쓰면 모르니까(현실 타협)~~

Error

error의 원인을 잘 표시해주는 것이 좋다. 왜냐면 사용자들이 에러의 원인을 자세하게 추적해주지 않으니까.
error를 잘 기록할 수 있도록 도와주는 application이 존재한다. (e.g.) https://sentry.io/welcome/

Code Splittilng

번들링은 훌륭하지만 여러분의 앱이 커지면 번들도 커집니다. 특히 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 합니다.

번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 “나누는” 것입니다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다.

코드 분할은 여러분의 앱을 “지연 로딩” 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. (출처 : react)

하는 이유 ? 웹 애플리케이션의 속도 향상.

그러나 무엇을, 무엇을 위한, 누구를 위한, 속도 향상인가를 봐야 한다. Network 와 CPU 의 제약을 고려해야 한다. 사용자는 동일한 조건의 네트워크 환경에서 좋은 디바이스를 사용하지 않는다. 인터넷이 팡팡 터지는 사양이 좋은 스마트폰에서 접근 할 수도, 인터넷 연결이 어려운 지역에서 오래된 랩탑을 가지고 접근할 수도 있다.

자바스크립트 코드는 단순히 jpg 파일과 같은 크기를 가지지 않는다. 자바스크립트 코드 자체가 jpg 파일과 동일한 용량을 차지하더라도 많은 CPU 차지나 네트워크를 소모한다. 속도를 빠르게 하기 위해선 파일을 실행할 때 필요없는 부분은 실행하지 않게 하는 것이다.

어떻게 스프리팅하는지는 역시 또 미래의 나에게 맡기기로 한다. 이런 것이 있고 왜 쓰는 구나 정도만 알고 간다. 미래의 나는 좀 더 많은 것을 알아서 이해하지 않을까?

참고자료 :

https://dev.to/thekashey/code-splitting-what-when-and-why-59op

✂️ Code splitting - What, When and Why

WHAT to split, WHEN to split, and HOW to split.

dev.to

inspection 에서 새로운 기능을 알았다!