-
[React 기초] React 간단 예제 - 구구단 게임 : 자바스크립트컴퓨터 알아가기/React 2023. 12. 22. 19:30728x90반응형
React를 하면서 React자체가 자바스크립트라고 하니 자바스크립트를 복습하지 않고서는 React 이해가 힘들것 같네요. 개발자로 취업할 것도 아니고 시간이 날때마다 취미로 편하게 공부할려고 하니 천천히 복습을 하곤 합니다만 코딩이 취미가 될지는 아직도 모르겠네요.. 그냥 마치 수학문제를 푸는 느낌이라고나 할까요..
역시 본 내용 또한 기본은 제로초 TV의 무료강좌를 기본으로 하고는 있습니다만 글로 옮기기까지 많은 코딩에 대한 착오들이 발생하고 시간이 엄청 걸리긴 합니다.
구구단 게임을 만들어 보고자 합니다. React로 하기전에 과거에 한번이라도 따라해봤던 자바스크립트로 해봐야 그 이후 React에 대한 개념도 잡힐것 같아 새로운 마음으로 해 보는데 이미 머리속에는 많은 내용둘이 지워져 있더군요.
다시 시작해 봅니다.
▒ 구구단 게임 : 자바스크립트
일단 구구단 게임에 대한 자바스크립트 구조를 먼저 공부해 보도록 하겠습니다.
기본 HTML 태그안에 자바스크립트 명령어를 이용하여 꾸밀수는 있지만 효율적인 측면에서 HTML태그 내용은 HTML에서 만드는게 훨씬 낫다는 결론을 얻었습니다.
그러나 참고로 기본 HTML 구문에 자바스크립트를 이용하여 태그를 만드는 방법을 알고는 가기 위하여 팁으로 정리를 해봅니다.
1. 기본 구문에 자바스크립트로 태그 만들기
우선 아주 기본적인 HTML태그를 만듭니다.
<body>태그 안에는 아무것도 없고 자바스크립트 링크만 있습니다.
이제 자바스크립트 파일에서 <div>태그를 하나 만들고 'Hello JS'라는 문장까지 만드는 과정을 보도록 하겠습니다.
상기 내역을 조금 더 설명하면
① 자바스크립트에서 document는 window라고 보면 됩니다. HTML 활성화를 위해 document를 사용하며 <body>태그 활성화를 시키는 과정입니다
② <body>태그내 <div>태그를 만드는 과정입니다.
③ 만들어진 <div>태그에 문장을 쓰기 위한 명령어이며
④ 이를 화면에 삽입시키는 명령어인 append( ) 함수입니다.
일단 가장 기본적인 자바스크립트와 HTML 관계이니 기억해 두는게 필요할 듯 합니다.
2. 자바스크립트로 구구단 게임 만들기
여기서는 CSS는 적용하지 않고 기본적인 자바스크립트 구문에 충실해 볼 예정이며 React에서 CSS까지 조금 반영을 해 볼 생각입니다.
일단 다음과 같은 결과물을 만들어 볼 예정입니다.
상기 결과물을 보고 구조를 고민해 볼때 다음과 같이 설계할 수 있을 듯 합니다.
사실 저같은 초보자는 어떤 형태로 코딩이 될지 순서도를 그려보고 그에 맞는 프로그램을 짜는게 맞습니다. 순서도를 그림으로 할지 아니면 순서의 흐름을 나열할지는 개인별 취향에 따라 달라 지겠지반 확실한 것은 바로 머리속으로 생각하면서 코딩이 나오지는 않습니다.
결과물을 가지고 고민해 볼때 체크포인트는 다음과 같습니다.
① 크게 4개의 <div>구간 필요
② 그 중 한 곳은 input창과 button 필요
③ 구구단 게임이므로 매 화면마다 랜덤하게 숫자 출제 필요 : 첫번째 <div>태그
랜덤 숫자와 문자열 같이 나타냄
④ input창은 type은 숫자입력하며 직접 입력하기전 후에는 value값은 빈칸
⑤ button의 type을 submit으로 명시함으로 기본 폼 제출동작을 방지
⑥ 이에 따라 input과 button을 form태그로 만들면서 submit이 되는 addEventListner함수로 대응
상기 흐름에 따라 다음과 같이 만들 수 있습니다.
상기 내용은 참고하고 있는 강의에도 없더군요. 예전 버전만 있는 것 같아 조금 애 먹었습니다만 결과적으로 공부는 많이 되었네요.
반응형'컴퓨터 알아가기 > React' 카테고리의 다른 글
[React 기초] React 간단 예제 - 구구단 게임 : Hooks 및 CSS 적용 (2) 2023.12.26 [React 기초] React 간단 예제 - 구구단 게임 : React Hooks (0) 2023.12.25 [React 기초] React 간단 예제 - 버튼 클릭하기 : 함수 Component (0) 2023.12.21 [React 기초] React 간단 예제 - 버튼 클릭하기 : Class형 Component (2) 2023.12.20 [React 기초] React 간단 예제 - 버튼 클릭하기 : 자바스크립트 이벤트클릭 (1) 2023.12.18