[React 기초] 구구단게임 웹팩으로 실행하기

현재까지 이론적으로 공부해 본 웹팩과 관련하여 실제 예제를 가지고 웹팩을 만들고 실행을 해 보도록 하겠습니다. 구구단게임을 기준으로 만들어 보는게 좋을 듯 합니다. 

 

제로초TV와 코딩앙마 강좌를 혼합하면서 공부한 내역을 바탕으로 만들어 보고 에러가 있을 경우 여러가지 루트로 찾아 수정하는 방식을 갖도록 하겠습니다. 

 

1. React 구구단 게임

 

React 구구단 게임은 다음과 같이 함수 콤포넌트를 사용하는 Hooks 위주로 만들어 보았습니다. CSS까지 적용한 내용은 필요시 이전글을 참조 바랍니다. 

 

2023.12.25 - [컴퓨터 알아가기/React] - [React 기초] React 간단 예제 - 구구단 게임 : React Hooks

[React 기초] React 간단 예제 - 구구단 게임 : React Hooks

2023.12.26 - [컴퓨터 알아가기/React] - [React 기초] React 간단 예제 - 구구단 게임 : Hooks 및 CSS 적용

[React 기초] React 간단 예제 - 구구단 게임 : Hooks 및 CSS 적용

 

 

2. Webpack의 각 폴더 구조 

 

지금까지 공부해 온 웹팩 설정 및 실행 폴더를 기준으로 구구단 웹팩을 샐행해 봅니다. 구구단 React 소스 코드가 반영된 곳은 src 폴더에 gugudan.jsx 파일입니다. 

 

참고로 웹팩에서 외부에 배포하는 파일은 dist 폴더안에 있는 3개의 파일만 배포하면 됩니다. 

 

일단 구조는 다음과 같습니다. 

 

 

 

dist폴더안 3개의파일(html, css, js) 만 배포하면 결과가 나오는지 확인해 봅니다. 

 

 

 

작동이 잘 됩니다.