[React 기초] Webpack 설치 및 실행 : 2탄 - React 웹팩 실행

지난 시간 Webpack을 설치하고 실행하는 기본적인 것을 연습해 보았습니다. 실행 자체는 자바스크립트 기준으로 실행하였으나 지금 공부하고 있는 과목이 React이기 때문에 좀 더 추가 설치가 필요할 것으로 보여집니다. 향후 CSS까지 웹팩으로 진행할려면 기본적으로 모듈에 대한 이해가 필요한데 그 부분을 중점적으로 보겠습니다. 

 

역시 본 내용은 제로초 TV와 코딩앙마 강좌를 복합적으로 공부하면서 정리하는 내용입니다. 

 

▒ React에서의 Webpack

 

지난 시간 실행한 Webpack은  React기준이 아닌 자바스크립트 기준이었습니다. 다시 복습하면 여러가지 폴더를 만들고 설정을 하면서 최종적으로 실행이 되는 곳은 dist폴더에 main.js 파일을 통하여 index.html 파일에서 로딩되는 상황이었습니다.

 

만일 내가 만든 프로그램을 배포한다면 dist폴더만 배포해도 되는데 이 곳에 index.html을 넣어야겠지요. 이럴 경우 사용되는 HTML Plugin이 있는데 이 과정을 들어가기 전 React도 같이 공부해 보고자 합니다. 지난번 사용했던 파일로 계속 사용해 보겠습니다. (따로 따로 만드는게 편할 듯 하지만 공부하기 위한 목적으로 에러가 나면 왜 나는지 또한 파악하는 것이 공부의 일종으로 판단됩니다.)

 

1. 기본 JSX 파일 만들기 (client.jsx)

 

구구단에서 공부 하였듯이 render(  )되는 return 부분에서 HTML과 JS를 사용하기 위해서 Babel을 이용하여 JSX 문법으로 사용 하였습니다. 이런한 작업을 통일할 수 있는 파일을 만들어 봅니다. 습관처럼 관련된 파일들은 src 폴더이서 작업해 봅니다. 연습에 사용될 Component가 필요하기 때문에 임시로 GuGuDan 콤포넌트명을 사용하고 나중에 최종 구구단 게임을 웹팩으로 만들어 보겠습니다. 

 

 

위 내용처럼 react를 불러오기 위하여 require(  )함수를 통해서 react와 react-dom을 불러 왔습니다. 그리고 마지막 줄에는 GuGuDan이라는 Component를 render하기 위한 명령어(여기서는 ver.18)를 사용했구요.

 

주황색 빈 사각형에는 구구단 게임에 대한 코드가 필요한데 이 곳에서 작성해도 되지만 만일 Component가 수많이 있다면 이 곳 한곳에서 작성한다는 작업이 무리가 있고 비효율적이기에 별도의 실제 구구단게임 파일(gugudan.jsx)을 만들어서 작업을 하는 겁니다.

 

이 두개의 파일(clinet.jsx와 gugudan.jsx)를 합쳐서 dist2폴더에 app.js라는 파일을 만들고자 하는 목표입니다. 

 

2. 실행 JSX 파일 만들기 (gugudan.jsx)

 

이제는 실행할 별도의 Component 파일을 만듭니다. 원래 client.jsx 파일내 작성하는 파일이나 분리하여 만들고 나중에 합쳐 줌으로 웹팩의 장점인 필요한 파일만 합쳐서 최종 결과를 낼 얘정입니다. 이렇게 해야 향후 유지 보수 수정이 용이합니다. 

 

여기서는 웹팩 실행을 확인하는 과정이기에 필요 프레임만 만들어 봅니다.

src폴더에서 만듭니다. 만들고 역시 require를 통해 React와 연결 시켜야겠지요.

 

 

중간 const {  Component } = React; 는 코드에서 사용될 Component단어를 생략할 수 있습니다. 마지막 줄은 GuGuDan 콤포넌트를 외부에 보낼 준비가 되었다는 이야기고 이는 client.jsx로 나간다는 이야기입니다. client.jsx에서는 다음과 같이 require를 통해 불러옵니다. 

 

 

 

3. 웹팩 실행을 위한 모듈설치 (webpack.config.js)

 

모듈은 지난시간 학습한 바와 같이 webpack.config.js에서 진행합니다. client.jsx와 gugudan.jsx를 합쳐 dist2폴더에 app.js 하나의 파일을 만들기 위한 작업입니다. 

 

지난시간 JS 웹팩 기본 모듈을 만든 webpack.config.js에서 React용으로 별도 만들어 봅니다. 같은 파일내 사용해도 에러가 나지 않네요.

 

 

잠깐 내용을 설명하자면

 

module을 내보내기 위한 script로서 개발자 모드 (mode: development)와 빨리 개발되는 tool (devtool: eval)을 사용하고 입력되는 entry파일은 client.jsx 이며 출려되는 파일은 app.js로 별도의 dist2 폴더에 만들라는 명령입니다. (자바스크립트는 dist 폴더에 만들었으니 별도 폴더 구분)

 

이제 웹팩을 실행해 보면 dist2 폴더에 app.js라는 통합 파일이 만들어진 것을 볼 수 있습니다. 

 

 

 

이를 실행하기 위해서 index.html의 app.js 경로를 연결 시켜야겠지요.

 

다음 시간에는 좀 더 심화적으로 Module 설치에 대해 알아볼 예정입니다. 

 

이 글을 자세히 읽는 분은 없겠지만 따라해 본다면 반드시 이전글 1탄부터 습득해야 전체를 이해할 수 있습니다.

자바스크립트 웹팩과 React웹팩을 거의 동시에 진행하고 순차적으로 진행하기에 저같은 초보자들은 눈으로 확인하는 것은 절대 실력이 늘지 않습니다.