React 기본: 끝말잇기 프로그램 Webpack Build 및 에러 수정

본 내용은 ZeroCho TV 무료 웹강좌를 기본으로 하고 있으며 스스로 발견한 내용들을 추가하여 정리한 글입니다. 

 

 

바로 전시간까지는 끝말잇기 프로그램인 WordRelay.jsx 파일에 코딩을 하였습니다. 이미 이 연습문제는 package.json 및 client.jsx와 webpack.config.js파일은 만들어진 상태이며 끝말잇기 로직이 적용되지 않은 WordRelay.jsx 파일을 이용하여 app.js파일을 만들어내는 webpack을 해 본 상태입니다. 

 

이제 끝말잇기 로직을 적용하였고 webpack.config.js에서 module의 rules 가운데 preset-env의 브라우저도 세팅을 했었습니다. 

 

바로 webpack build를 해보겠습니다. 

 

 

 

지난시간 한국에서  점유율이 5%이상 브라우저를 타겟으로 설정하였더니 Chrome과 Edge는 90번째 버전, ios(애플 아이폰 계열)와 삼성 갤럭시 계열은 14번째 버전을 타겟으로 잡았네요. 

정말 개발자가 된 기분이네요. 하하하

 

그런데 말입니다. 브라우저를 실행해보니 아무것도 보이지 않는 백지상태이네요. 

 

 

 

개발자코드(F12)를 통해 에러메시지를 확인해 보도록 하겠습니다. 

 

 

Reference 에러입니다. c가 정의가 되어 있지 않다고 합니다.  프로그래밍을 한 파일은 WordRelay.jsx이며 이곳에서 c를 이용한 Class Method에서 에러가 있는 것 같습니다. 

 

역시 초보자에게 나타나는 첫번째 실수 오탈자입니다. 

 

C를 반영안함

 

다음과 같이 수정하고 다시 Build 해 보겠습니다. 

 

 

 

 

 

 

에러없이 결과물이 잘 나왔습니다. 한번 맞는 단어와 틀린 단어를 입력하여 결과가 예상대로 나오는지 확인해 보도록 하겠습니다. 

 

또 에러가 나네요. 

 

차근차근 살펴보니 초보자 실수 두번째 CamelCase입니다. 

 

 

e.preventdefault를 e.preventDefault로 바꾸고 다시 webpack build를 해보니 이제 에러가 없어졌습니다. 

 

국가를 입력하니 Good Job이 뜨는 군요.

 

 

틀린단어를 입력하니 Try Again도 잘 나옵니다. 

 

 

 

---

 

 

잘 모르고 왜 처음에 React를 하게 되었는지 아직도 모르겠네요. 갑자기 프로그램을 하고자 했던 이유가 생각이 나지 않고 하얗습니다. 

 

사실 살아가면서 React라는 프로그래밍 방법이 있는지도 몰랐으며 크게 삶에 영향을 미치지도 않았습니다만 나이가 많이 든 이 순간에도 배우고자 하는 욕망이 한 곳에 있었나봅니다. 젊은 시절 머리 회전이 빨라서 이해도가 높았던 시절에는 오히려 하지 않았던 공부를 이제는 거의 굳어버린 뇌활동을 다시 하고자 하니 상당히 진도도 나가지 않지만 포기를 하지 않았으면 합니다. 

 

내 손으로 그래도 사람들이 즐길 수 있는 간단한 프로그램이라도 만들어서 배포하고 싶은마음이 있으며 그 자체가 달성하고자 하는 하나의 목표로 계속 가지고 가기를 스스로에게 부탁해 봅니다.