typescript와 webpack/babel 웹 브라우저 관계

안녕하세요 이정환입니다. 질문해주신 순서대로 답변드릴게요

1. 바이트코드는 자바스크립트 엔진에 의해 실행됩니다. 이 엔진은 Node.js와 Browser 모두가 가지고 있습니다. 정확한 내부적인 실행 원리는 아래의 아티클을 참고해보시면 좋을 것 같습니다.

https://pks2974.medium.com/v8-%EC%97%90%EC%84%9C-javascript-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC%ED%95%B4%EB%B3%B4%EA%B8%B0-25837f61f551

2-a. tsconfig.json의 target 옵션은, Babel 설정에 의해 덮어씌여질 수 있습니다. 엄밀히는 Babel의 preset-env라는 설정이 존재하는데 이 설정이 최종적으로 코드의 호환성을 결정하게 됩니다.

2-b. 역시 Babel 설정에 덮여씌워질 수 있습니다. 최종 출력은 Babel 설정에 따라 결정된다고 생각하시면 될 것 같습니다.

3. 완전 엄밀히 말씀드리자면 Babel에는 @babel/preset-typescript 라는 옵션이 존재하는데요 이 옵션을 켜게 될 경우 Babel이 TypeScript의 트랜스파일링 과정을 담당하게 됩니다. Create React App은 이 옵션이 켜져 있습니다.
   그러나 한가지 주의하실 점은 트랜스파일링 과정에서 타입 체킹은 TypeScript가 직접 담당하게 됩니다. 따라서 타입 체킹시에는 tsconfig.json의

   compilerOptions의 설정들에 따라 타입 검사가 진행됩니다.

4. 네 가능합니다. Babel을 사용하는 이유는 TS를 JS로 컴파일 하는것 외에도 JSX 형식의 파일을 JS 형식으로 변환하는 등의 역할을 수행합니다. 만약 React를 사용하지 않는 환경이라면 JSX를 사용하지 않으므로 굳이 Babel을 사용할 필요가 없을 수도 있는데요, 이때에는 TypeScript 컴파일러를 통해 직접 TS 코드를 JS로 컴파일 한 다음 Node.js를 이용해 웹에 서빙하면 됩니다.