Webpack에서 target은 무엇일까? 사실 target은 웹팩 뿐만 아니라 tsconfig에서 설정하는 옵션 중 하나이다. 이렇게 설정해야 하는 이유는 javascript가 어디서 실행되는지에 따라 전역객체가 달라지기 때문이다.
전역객체
node 환경에서는 window가 없다.
javascript는 크게 위와 같이 생겼다. ECMAScript로 공통적인 문법을 공통적으로 사용하고 있으며 실행하는 환경에 따라 전역객체가 달라진다.그렇기 때문에 target 에 따라 맞는 코드를 사용했는지 1차적으로 필터해준다.
버전 호환성
사실상 버전호환성 체크가 제일 중요하다. Node.js, ECMAScript, Web API는 각각 독립적으로 버전을 가지고 있다. 그래서 이 버전을 맞추는 부분이 가장 중요한데 내가 목표로 하는 버전과 범위를 잘 설정해야 한다.
웹인 경우 target 설정
결론적으로 target을 잘 설정하려면 어떻게 해야할까? react-create-app에서 힌트를 얻어보았다.
//webpack.config.js
{
...
target:["browserlist]
...
}//package.json
{
...
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}위와같이 설정한 이유는 무엇일까?
개발 환경
최신 브라우저 지원
개발 환경에서는 주로 최신 브라우저 버전을 사용합니다. 여기서는 "last 1 chrome version", "last 1 firefox version", "last 1 safari version" 같은 설정을 사용하여 개발자가 사용하는 브라우저의 최신 버전만을 대상으로 합니다.
빠른 빌드 시간: 개발 중에는 빌드 프로세스의 속도가 중요합니다. 최신 브라우저만을 대상으로 하면 변환해야 할 코드 양이 줄어들고, 트랜스파일링이나 폴리필(polyfill)을 적게 적용해도 되기 때문에 빌드 시간이 단축됩니다.
디버깅 용이성: 개발자는 보통 최신 브라우저의 개발자 도구를 사용하여 디버깅을 하므로, 최신 브라우저에 최적화된 코드가 디버깅을 용이하게 만듭니다.
프로덕션 환경:
넓은 범위의 사용자 지원
실제 사용자는 다양한 브라우저와 버전을 사용합니다. ">0.2%", "not dead", "not op_mini all" 설정은 상대적으로 넓은 범위의 브라우저를 지원하여, 더 많은 사용자에게 애플리케이션이 제대로 동작하도록 보장합니다.
호환성과 안정성: 프로덕션에서는 애플리케이션이 가능한 한 많은 환경에서 안정적으로 실행되어야 합니다. 따라서 더 넓은 범위의 브라우저와 호환성을 확보해야 합니다.
성능 최적화: 프로덕션 빌드는 보통 코드를 압축하고 최적화하는 과정을 거칩니다. 이는 최종 사용자에게 더 빠른 로딩 시간과 반응성을 제공하기 위함입니다.
운영 환경
넓은 범위의 사용자 지원
실제 사용자는 다양한 브라우저와 버전을 사용합니다. ">0.2%", "not dead", "not op_mini all" 설정은 상대적으로 넓은 범위의 브라우저를 지원하여, 더 많은 사용자에게 애플리케이션이 제대로 동작하도록 보장합니다.
호환성과 안정성
프로덕션에서는 애플리케이션이 가능한 한 많은 환경에서 안정적으로 실행되어야 합니다. 따라서 더 넓은 범위의 브라우저와 호환성을 확보해야 합니다.
성능 최적화
프로덕션 빌드는 보통 코드를 압축하고 최적화하는 과정을 거칩니다. 이는 최종 사용자에게 더 빠른 로딩 시간과 반응성을 제공하기 위함입니다.
결론
위의 이유를 보면 왜 다르게 설정이 되었는지 충분히 납득이 간다. 사실 이미 이렇게 이미 설정이 되어 있었기 때문에 몰라도 넘어갈 수 있었지만 이유를 아니 뭔가 조금 자신감 있게 코드를 작성할 수 있을 것 같다.
