끝말잇기게임
-
[React 기초] 끝말잇기 게임 React로 만들기컴퓨터 알아가기/React 2024. 1. 22. 19:30
바로 지난시간 끝말잇기 게임에 대한 자바스크립트로 과거 공부한 것을 복습해 보았습니다. 이제 이 부분을 React Hooks로 만들어 볼 차례입니다. 지금 참고하고 있는 강좌에서는 좀 더 간단한 예제로 진행을 해서 스스로 만들어 본 자바스크립트를 React로 적용하는 과정에서 많은 시행착오를 겪었내요. 시행착오를 다시 겪지 않기위해 이 곳에 정리해 봅니다. ▒ React 끝말잇기 게임 1. 함수 콤포너트 변수 설정 초보자로서 React를 한다는 것은 어떤 변수가 사용될지에 90%이상 성공확률이 있다고 볼 수 있습니다. 자바스크립트에 사용되었던 변수가 그대로 변수로 된다면 더할 나위 없겠지만 그렇지가 않다는 겁니다. 지난번 자바스크립트로 만든 결과물은 아래와 같았습니다. 위 그림을 기준으로 고민을 해 보면..
-
[React 기초] 끝말잇기 게임 (JS복습) : 클릭하면 게임이 시작됩니다!컴퓨터 알아가기/React 2024. 1. 15. 19:30
이 페이지를 실행하면 참가인원수 입력하는 창이 뜹니다. 참고하세요~ 두번째 React를 공부하기 위해서 지난시간 구구단 게임이후 과거 끝말잇기를 자바스크립트로 공부하였습니다. 강좌의 내용을 그대로 베껴가면서 공부하였는데 이는 거의 암기과목처럼 해서 머리에 거의 남지 않은 상태가 되었네요. 결국 React 또한 자바스크립트가 기본이 되어야 하기때문에 복습하고 자신의 것으로 만들어야 합니다. 이번 시간에는 과거 공부한 끝말잇기 게임에 대한 자바스크립트를 간단히 복습하고 넘어가야 할 것으로 보여집니다. 1. 끝말잇기 구조 하나의 프로그램을 만들기 위하여 과거 순서도를 만들어 진행을 한 기억이 있습니다만, 순서도 그리는데 집중했지 하나하나 어떤 코드가 필요한지는 잘 몰랐던 것 같습니다. 그렇다고 초보자들이 머리..
-
JavaScript 입문 (끝말잇기 게임) : 코드 최적화, 순서도 최적화컴퓨터 알아가기/JavaScript 2022. 2. 7. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 저희같이 초보자들처럼 입문자들은 사실 한 페이지를 따라하는데도 시간이 많이 걸립니다. 특히 젊을때처럼 두뇌회전이 빠를경우는 좀 더 속도가 붙는데 하나하나 이해를 해가면서 할려고 하니 상당히 힘든시점도 있는것은 사실입니다. 하지마 좀 더 힘을 내보도록 하지요. ▒ 순서도 최적화 = 코드 최적화 순서도에서 판단을 요하는 마름모꼴(if문)은 줄여서 좀 더 최적화를 시킬수 있습니다. 원래 순서도를 보면 다음과 같습니다. 아직 스스로의 실력으로 순서도를 최적화 할 수 없지만 동영상 강좌를 통하여 좀 더 최적화를 해봅니다 위 그림을 보면 제시어가 비어있는가 또는 올바른 끝말잇기 인가를 같이 마름모안에 판단으로 묶었습니다. '또는' 이라는 것은 수학..
-
JavaScript 입문 (끝말잇기 게임) : 마무리 하기 - 틀림표시컴퓨터 알아가기/JavaScript 2022. 2. 3. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간까지 사용된 자바스크립트의 필요한 명령어 또는 함수를 기억해 보면 태그를 선택하는 querySelector함수가 있었고 선택한 태그의 동작을 위하여 addEventListener 함수를 사용하였습니다. 글씨를 지정해주는 textContent 속성도 기억이 나네요. 물론 더 자세한 내용들이 있었던걸로 기억하지만 며칠이 지나더라도 핵심적인 내용들이 기억이 난다면 분명 향후 코딩하는데 있어 도움이 되리라 생각됩니다. 지난시간까지 끝말잇기를 위한 순서도는 다음과 같았습니다. 물론 상기 순서도가 정답이라고 말할수 없고 아주 구체적이라고도 말할수 없습니다만, 지속적인 훈련을 통해 스스로 고안해내고 만드는데 의미가 있다고 하겠습니다. 이제는 ..
-
JavaScript 입문 (끝말잇기 게임) : 두번째 제시어부터 코딩하기 (2) - 틀린 단어 판단 및 다음 순서로 넘어가기컴퓨터 알아가기/JavaScript 2022. 2. 2. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간에 이어 끝말잇기 게임에 대한 순서도를 만들고 각 상황에 대해 공부를 하고 있습니다. 한가지 확실한 것은 이러한 과정을 노트에 적어서 머리속으로 이해를 하던지 블로그를 활용하여 연습하면서 기록을 남긴다던지 하면 확실히 좀 더 자기것이 되는 느낌을 가질 수 있습니다. 또한, 이런 저런 시도를 해 보면서 자바스크립트가 반응하는 내용을 느끼면 더욱 도움이 될 수 있다고 경험을 통해 증명이 되는 것 같습니다. 이제는 올바른 단어를 입력했을 경우 그 다음으로 넘어가는 내용을 공부해 보고자 합니다. ▒ 다음사람 표시 올바른 단어를 입력하면 다음사람으로 넘어가서 대기를 해야 하는데 다음 그림과 같이 제시어는 변경되어 있는데 참가자 순서가 1번..
-
JavaScript 입문 (끝말잇기 게임) : HTML 기본구조컴퓨터 알아가기/JavaScript 2022. 1. 20. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. VS Code를 실행하여 프로그래밍 연습을 해봅니다. 1. 사용폴더와 파일만들기 VS Code에서는 언제나 폴더로 만들어 하나의 프로젝트를 진행합니다. 폴더를 만들거나 파일을 만들거나 하는 기준은 폴더내에 연동될 파일들이 있으면 폴더로 만들어 진행합니다. 저는 WordChain이라는 폴더를 생성하고 마우스 우측 클릭으로 VS Code를 열었습니다. 그리고 다음 그림과 같이 New File을 클릭해서 (물론 상단의 메뉴바를 활용해도 됩니다.) word-chain.html이라는 파일을 만듭니다. 웹에서의 Frame을 만드는 역할은 HTML이 한다는 것은 아시죠? 2. VS Code 기본 HTML 테이블 만들기 VS Code를 사하는 이유중 ..