style.display
-
[React 기초] React 간단 예제 - 버튼 클릭하기 : 자바스크립트 이벤트클릭컴퓨터 알아가기/React 2023. 12. 18. 19:30
React를 작동하게 만드는 하나의 덩어리 즉 Component가 중요하다고 볼 수 있습니다. Component를 만들어 가는 방법중 Class형으로 하거나 함수로 하는 경우가 있는데 간단한 예제를 통해 이해를 해 보고자 합니다. 본 내역은 제로초 TV의 React 강좌를 기본으로 공부하면서 필요시 다양한 강의를 보면서 내용을 업데이트 하고 있습니다. 사실 그동안 블로그 내용에 설명이 너무 많아 저 또한 잘 안 찾을 것 같은 느낌이라 이제부터는 핵심적인 내용만 담으려 노력해 보고자 합니다. ▒ 다양한 버튼 클릭 동작 (자바스크립트 복습) 리액트는 자바스크립트를 기본으로 하는 프로그램입니다. 따라서 자바스크립트를 알고 리액트를 공부하여야 합니다. 자바스크립트에서 많이 사용되는 이벤트클릭에 대해 이해를 해 ..
-
JavaScript 입문 : textRPG 만들기 - 롤플레이 대상(헌터와 사냥감) 초기 설정, 초기화면, 일반메뉴 화면, 사냥메뉴 연결 구조 설정컴퓨터 알아가기/JavaScript 2022. 9. 5. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간까지 만들어야 할 순서도와 기본적인 프레임인 HTML과 JS 기본구조를 만들었습니다. 이 과정은 훈련화 되어야 하기에 거의 공장에서 일련의 과정을 거쳐가는 것 처럼 연습하고 있습니다. 이제는 기본프레임하에 자바스크립트 공부를 본격적으로 시작해 볼 예정인데 순서도를 기억해 보면 시작하여 헌터의 이름을 입력하고 일반메뉴 (사냥을 가기위한 모험편, 휴식편, 종료)의 화면이 필요하고 모험편으로 들어갔을때는 실질적인 사냥편을 구성해야 합니다. 이러한 큰 설계측면에서 연결구조를 볼 예정입니다. 1. 헌터와 사냥감 초기 설정 이 단계에서는 헌터와 사냥감의 능력치를 초기 세팅해 줍니다. 초기 세팅된 능력치로 상호간 공격을 할 수 있기때문에 사냥..
-
JavaScript 입문 : textRPG 만들기 - 기본포맷 (HTML/CSS, JS)컴퓨터 알아가기/JavaScript 2022. 9. 4. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 전체적인 순서도는 지난시간 미리 만들어는 보았는데 RPG형태이다 보니까 고려할 사항들이 많습니다. 먼저 기본적인 HTML / CSS 부분과 결국 상호작용을 할 수 있는 JS 부분을 고려해야 합니다. 1. 기본컨셉 전체적인 흐름에 대해 공부를 할 생각으로 이번장에서는 CSS를 특별히 다루지는 않습니다만 링크는 생성을 해 두고 향후 CSS와 연계되서 할 수 있는 부분이 나온다면 별도 적용하고자 합니다. HTML에서 첫번째 화면은 헌터의 이름을 입력알 수 있는 태그를 사용하고 입력후 클릭하면 화면이 바뀌어서 게임이 시작되는 개념으로 만들고자 합니다. 게임이 시작되는 화면은 크게 5개의 태그로 구성하고자 하며 이 구성에는 일반메뉴와 사냥메뉴를 ..