inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Slack 클론 코딩[실시간 채팅 with React]

babel과 webpack 설정하기

웹팩 한가지 질문이 있습니다.

해결된 질문

360

작성자 없음

작성한 질문수 0

1

안녕하세요! 웹팩설정에서 질문이있습니다. 알거같다가도 헷갈려서 질문드려요!

"webpack.config.ts 파일 내에서 const require 방식이 아닌

Import를 사용가능한 이유"가 어느부분때문인가요?

 

 

tsconfig.json 에서 module을 esnext로 최신으로 쓰겠다고 설정했으므로 tsconfig를 웹팩이 먼저 읽어서, 웹팩 파일내부에서도 commonjs방식이아닌 import 방식이 가능한것이라고 이해하면 맞을지 궁금합니다.

 

그런데 이렇게 이해하면 tsconfig-for-webpack-config 파일에서는 또 module을 commonJs 로 해주기때문에  조금 헷갈립니다,, 

 

 

react 웹팩 Socket.io babel typescript 클론코딩

답변 1

1

제로초(조현영)

ts는 무조건 import 문법을 사용해야 합니다. 웹팩은 ts를 js로 변환한 후에 실행되는 겁니다. 이 때 변환은 tsconfig-for-webpack.json 설정대로 변환합니다. js로 변환하면서 require로 변환됩니다. 그래서 노드가 최종적으로는 require 문법으로 해석해서 웹팩을 실행하게 됩니다.

0

Kyo

ts는 import문법을 사용해야하므로 먼저 tsconfig-for-webpack.json설정대로  ts를  js로 변환하는군요! 이해가 됐습니다 정말 감사합니다. 

---

추가로 하나만더 여쭤볼게요!!

공식문서에서 tsconfig-for-webpack.json설정하는 방법말고도 3가지 방법이 있는거같더라구요.

그중에 두번째 방법으로는 "module": "ESNext"를 설정했을때 추가로 ts-node를 설정하는 방법도 있던데, 이렇게하면 tsconfig-for-webpack-config.json를 만들지않아도 되더라고요.

{
  "compilerOptions": {
    "module": "ESNext",
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

 

제로초님은 세번째 방법을 사용한 이유가 혹시 있는지 궁금합니다!

0

제로초(조현영)

강좌만들때는 문서에 저게 없었습니다. ts-node도 저 설정에 따라서 ts를 js로 바꾼 후 실행합니다.

0

Kyo

아아 문서가 달라진 부분이군요! 빠른 답변 너무 감사드립니다.

기본 셋팅과 관련하여

0

92

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

96

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

150

2

useEffect 개수 관리

0

110

2

라이브러리 서치 방법

0

104

2

함수 정의 패턴

0

77

1

npm run dev 에러

0

152

3

npx webpack 후 에러

0

178

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

144

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

178

2

초기세팅중 packge.json 에러떠요

0

156

2

CORS - Access-Control-Allow-Origin 누락 문제

0

431

3

로그인 페이지 무한 새로고침 현상

0

598

2

Module not found: Error: Can't resolve './App' 에러

0

959

1

배포 방법

0

297

2

npm run dev 시 빌드가 매우 느려졌습니다

0

990

2

alias 경로 설정 오류

0

451

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

277

1

제네릭 질문

0

218

2

ts-node 대신 tsx 사용여부

0

373

1

배포 관련 질문

0

247

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

385

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

336

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

247

2