자바스크립트
-
[React 기초] 끝말잇기 게임 (JS복습) : 클릭하면 게임이 시작됩니다!컴퓨터 알아가기/React 2024. 1. 15. 19:30
이 페이지를 실행하면 참가인원수 입력하는 창이 뜹니다. 참고하세요~ 두번째 React를 공부하기 위해서 지난시간 구구단 게임이후 과거 끝말잇기를 자바스크립트로 공부하였습니다. 강좌의 내용을 그대로 베껴가면서 공부하였는데 이는 거의 암기과목처럼 해서 머리에 거의 남지 않은 상태가 되었네요. 결국 React 또한 자바스크립트가 기본이 되어야 하기때문에 복습하고 자신의 것으로 만들어야 합니다. 이번 시간에는 과거 공부한 끝말잇기 게임에 대한 자바스크립트를 간단히 복습하고 넘어가야 할 것으로 보여집니다. 1. 끝말잇기 구조 하나의 프로그램을 만들기 위하여 과거 순서도를 만들어 진행을 한 기억이 있습니다만, 순서도 그리는데 집중했지 하나하나 어떤 코드가 필요한지는 잘 몰랐던 것 같습니다. 그렇다고 초보자들이 머리..
-
[React 기초] React 간단 예제 - 구구단 게임 : 자바스크립트컴퓨터 알아가기/React 2023. 12. 22. 19:30
React를 하면서 React자체가 자바스크립트라고 하니 자바스크립트를 복습하지 않고서는 React 이해가 힘들것 같네요. 개발자로 취업할 것도 아니고 시간이 날때마다 취미로 편하게 공부할려고 하니 천천히 복습을 하곤 합니다만 코딩이 취미가 될지는 아직도 모르겠네요.. 그냥 마치 수학문제를 푸는 느낌이라고나 할까요.. 역시 본 내용 또한 기본은 제로초 TV의 무료강좌를 기본으로 하고는 있습니다만 글로 옮기기까지 많은 코딩에 대한 착오들이 발생하고 시간이 엄청 걸리긴 합니다. 구구단 게임을 만들어 보고자 합니다. React로 하기전에 과거에 한번이라도 따라해봤던 자바스크립트로 해봐야 그 이후 React에 대한 개념도 잡힐것 같아 새로운 마음으로 해 보는데 이미 머리속에는 많은 내용둘이 지워져 있더군요. 다..
-
[React 기초] React 간단 예제 - 버튼 클릭하기 : 자바스크립트 이벤트클릭컴퓨터 알아가기/React 2023. 12. 18. 19:30
React를 작동하게 만드는 하나의 덩어리 즉 Component가 중요하다고 볼 수 있습니다. Component를 만들어 가는 방법중 Class형으로 하거나 함수로 하는 경우가 있는데 간단한 예제를 통해 이해를 해 보고자 합니다. 본 내역은 제로초 TV의 React 강좌를 기본으로 공부하면서 필요시 다양한 강의를 보면서 내용을 업데이트 하고 있습니다. 사실 그동안 블로그 내용에 설명이 너무 많아 저 또한 잘 안 찾을 것 같은 느낌이라 이제부터는 핵심적인 내용만 담으려 노력해 보고자 합니다. ▒ 다양한 버튼 클릭 동작 (자바스크립트 복습) 리액트는 자바스크립트를 기본으로 하는 프로그램입니다. 따라서 자바스크립트를 알고 리액트를 공부하여야 합니다. 자바스크립트에서 많이 사용되는 이벤트클릭에 대해 이해를 해 ..
-
JavaScript 입문 : Canvas 이론 정리 - 마우스이벤트 활용하여 선 그리기컴퓨터 알아가기/JavaScript 2022. 11. 26. 19:30
지난 시간 캔버스 위치(좌표 읽기)에 대하여 조금 깊이 공부를 해 보았습니다. 결국 캔버스의 크기를 임의로 만들어도 전체 화면을 기준으로 수치를 계산하여 빼 줌으로써 정확한 마우스 클릭 지점에 원을 그릴 수 있었습니다. 이제 마우스 이밴트를 통하여 선을 캔버스에 그리는 방법을 공부할 텐데요. 최종 목표는 우리가 흔히 사용하는 그림판을 만들어 보는 겁니다. 관련 강좌는 '1분코딩의 HTML5 Canvas 라이브 강좌'를 기본으로 공부하고 있습니다. 1. 마우스이벤트에 대한 이해 캔버스위에 자유곡선으로 그림을 그린다는 것은 마우스를 클릭해서 움직일때 그려지는 것이고 마우스를 클릭하지 않으면 그림을 그리지 않는 원리입니다. 이때 사용하는 이벤트가 움직이는 것은 'mousemove', 마우스를 누르는 것은 'm..
-
JavaScript 입문 : Canvas Animation III - 마우스를 따라 다니는 원 만들기컴퓨터 알아가기/JavaScript 2022. 11. 9. 19:30
지난 시간 캔버스 클릭이벤트를 활용하여 마우스 클릭마다 캔버스 위에 원을 만들어 보았습니다. 이는 캔버스내 좌표를 읽어내는 방식을 응용한 것으로 좀 더 다양하게 응용이 가능합니다. 한번 이 원이 마우스가 움직일때마다 따라다니는 코드를 공부해 보고자 합니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 지난 시간 다음 그림과 같이 마우스 클릭마다 원을 생성해 보았습니다. 1. 마우스 움직이는 이벤트 (mousemove 이벤트) 이제는 마우스를 움직일때 원이 따라 다니는 코드를 만들 건데요. 그러기 위해서는 mousemove이벤트를 활용해야 합니다. 다음과 같이 작성하고 콘솔을 확인해 보도록 하겠습니다. 위 콘솔을 보게..
-
JavaScript 입문 : Canvas Animation II - 클릭이벤트(PointerEvent)를 이용하여 원 찍어내기컴퓨터 알아가기/JavaScript 2022. 11. 8. 19:30
Canvas Animation 2번째 시간입니다. 지난 시간 초록색 원을 그려 보았고 이제는 마우스 클릭 이벤트를 이용하여 클릭때마다 원을 만들어 볼 예정입니다. 이미 설명 하였듯이 이렇게 미리 만들어 놓은 프로그램(라이브러리)을 이용하는 것이 아니라 순수하게 자바스크립트 언어만으로 결과를 만들어 내는 것을 특히 '바닐라 자바스크립트'라고 불립니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 1. 원 만들기 기본 지난 시간 초록색 원을 만든 전체 코드는 다음과 같습니다. 2. 클릭하면 원 만들어지기 지금부터는 함수를 이용하여 Canvas내 원을 만들고 각 좌표를 확인하는 방법을 공부할 차례입니다. 먼저 위 코드에서..
-
JavaScript 입문 : Canvas Animation I - Canvas 기본속성 이해와 사각형 및 원 만들기컴퓨터 알아가기/JavaScript 2022. 11. 7. 19:30
Canvas 기본에 대해 공부하고 있습니다. 물론 어려운 영역은 아주 어렵겠지요. 기본적으로 Canvas를 만들어 보면서 재미는 느끼고 있습니다. 자바스크립트에서 알아야 될 기본사항 정도만 이곳 저곳 강좌를 보면서 공부하면서 정리해 놓고자 합니다. 그런데 지금부터 공부할 내용은 사실 기초와 기본을 띄어 넘는 느낌이 듭니다. 어떻게든 최종 결과물까지 만들어 보고자 합니다. 화면에서 무지개 색깔이 퍼지는게 너무 보기 좋아서 이런 것을 한번 만들어 보고 싶다는 생각을 가지게 되었네요. 본 Canvas 내역은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부 하였습니다. 이 분은 애니메이션 관련 대단한 개발자인 듯 합니다. 최종 목표는 아래 그림처럼 마우스를 움직이..
-
JavaScript 입문 : 캔버스 (Canvas) 기초 - 마우스 이용 자유 곡선 그리기컴퓨터 알아가기/JavaScript 2022. 11. 6. 19:30
Canvas 기초 두번째 시간으로 이제는 본격적으로 함수를 이용하여 곡선 그리기에 도전을 하고자 합니다. 이 곳에서는 마우스를 사용하며 기본적으로 addEventListener의 마우스 이벤트를 활용하여 진행하고자 합니다. 다음 그림과 같이 자유 곡선 기능을 사용하여 Canvas내 글씨를 써 보는게 오늘 목표입니다. 이 내용은 'developedbyed 유투브 강좌'를 기본으로 응용해 본 것입니다. 캔버스에 마우스를 이용하여 자유 곡선을 만들고자 하면 이벤트를 이용합니다. 마우스를 누르고 그리기 때문에 시작점은 'mousedown'이벤트가 필요하고 그리기를 끝내는 경우는 'mouseup'입니다. 그리고 본격적으로 그려지는 이벤트는 'mousemove'입니다. ① 마우스 이벤트 기본구조 만들기 Canvas..