구구단게임
-
[React 기초] React 간단 예제 - 구구단 게임 : Hooks 및 CSS 적용컴퓨터 알아가기/React 2023. 12. 26. 19:30
지난시간까지 만들어 본 구구단 게임관련 CSS를 적용하여 좀 더 시각적으로 만들어 보는 연습을 해 보겠습니다. 아직까지는 HTML 구문에서 React를 사용하기 때문에 태그를 이용하여 만들 수 있습니다. 에서 중점으로 생각했던 포인트는 ① 구구단 게임이 나오는 영역과 바탕영역을 구분해 보고 싶었고 ② 3항 연산자를 사용하여 정답일경우 Green색으로 오답일 경우 Red색으로 구분 이 주된 목적으로 다음과 같이 작성할 수 있을 것 같습니다. 먼저 id가 root인 태그를 id를 하나더 만들어 구분해 줍니다. 이제 태그를 만들어 봅니다. 이는 개인별 취향이 다른 분야로 각자 만들어 보길 권장합니다. 그리고 3항 연산자가 적용될 태그는 id가 result인 곳에서 class이름을 정답과 오답을 구분해서 만들어..
-
[React 기초] React 간단 예제 - 구구단 게임 : React Hooks컴퓨터 알아가기/React 2023. 12. 25. 19:30
구구단 게임은 임의의 랜덤한 두개의 숫자가 화면에 보이면 답을 입력하여 정답 또는 오답을 나타내는 간단한 웹게임입니다. 지난 시간 자바스크립트로 구성을 복습 하였기에 이제 본 목적인 React로 만들어 보도록 합니다. 본 내역은 제로초 TV의 리액트 강좌를 기본으로 하고 있숩니다. ▒ React Hooks 구구단 게임 처음으로 React Hooks라는 말을 사용하는데 사실 함수Component로 되어 있는 React를 React Hooks라고 칭합니다. 1. React Hooks의 기본 구조 이전 시간 Class Component와 함수 Component의 기본구조를 보았습니다. 거기서 차용을 해오면 아래와 같은 기본틀을 기억해야 합니다. 2. React 특성 우리가 만들고자 하는 결과물은 지난시간 자바..
-
[React 기초] React 간단 예제 - 구구단 게임 : 자바스크립트컴퓨터 알아가기/React 2023. 12. 22. 19:30
React를 하면서 React자체가 자바스크립트라고 하니 자바스크립트를 복습하지 않고서는 React 이해가 힘들것 같네요. 개발자로 취업할 것도 아니고 시간이 날때마다 취미로 편하게 공부할려고 하니 천천히 복습을 하곤 합니다만 코딩이 취미가 될지는 아직도 모르겠네요.. 그냥 마치 수학문제를 푸는 느낌이라고나 할까요.. 역시 본 내용 또한 기본은 제로초 TV의 무료강좌를 기본으로 하고는 있습니다만 글로 옮기기까지 많은 코딩에 대한 착오들이 발생하고 시간이 엄청 걸리긴 합니다. 구구단 게임을 만들어 보고자 합니다. React로 하기전에 과거에 한번이라도 따라해봤던 자바스크립트로 해봐야 그 이후 React에 대한 개념도 잡힐것 같아 새로운 마음으로 해 보는데 이미 머리속에는 많은 내용둘이 지워져 있더군요. 다..