컴퓨터 알아가기
-
JavaScript 입문 : Canvas 이론 정리 - 애니메이션 (RequestAnimationFrame : x축으로 공 움직이기)컴퓨터 알아가기/JavaScript 2022. 11. 19. 19:30
Canvas에서 놓친 이론에 대하여 항목별로 정리를 하고 있습니다. 그리기 기능을 통하여 셀프체크로 별모양과 스마일 모양을 만들어 보았습니다. 다양한 그림을 스스로 그려본다는 것은 그냥 이론만 공부하는 것 보다는 아무래도 머리속에 자신만의 방법을 익히기에 좋은 것 같습니다. 이제 본격적으로 Animation 에 대해 기본 이론을 정립하고자 합니다. 본 내용은 '1분코딩 HTML5 Canvas 라이브강좌'를 기본으로 하고 있습니다. ▒ ReaquestAnimationFrame( ) 자바스크립트에서 애니메이션을 나타내는 기본적인 방법으로는 requestAnimationFrame( )메소드와 setInterval( )메소드를 활용하는 방법이 있습니다. 두 단어에서 느낄 수 있듯이 첫번째는 프레임을 조정하는 것..
-
JavaScript 입문 : Canvas 이론 정리 - 그리기 (사각형, 선, 원, 별, 스마일)컴퓨터 알아가기/JavaScript 2022. 11. 18. 19:30
캔버스 지원 브라우저와 캔버스 크기 설정에 대해 공부를 해 보았는데 브라우저는 최근에는 대부분 지원이 가능하지만 유저들을 위해 지원여부를 감지하고 표시해 주는 Modernizr 에 대해 확인을 해 보았구요. 크기 설정은 캔버스 자체를 브라우저의 2배로 설정하여 작업하고 CSS에서 100%로 맞추어 주면 고해상도를 나타낼 수 있다고 배웠습니다. 이제는 간단히 그려지는 도형에 대해 기본 순서를 정리해 보겠습니다. 역시 본 내용은 '1분코딩 HTML5 Canvas 라이브 강좌'를 기본으로 하고 있습니다. 1. 사각형 그리기 기본적으로 600 X 400의 캔버스 크기를 만들고 시작 하겠습니다. 도형에 색을 지정하지 않으면 기본색은 검은색입니다. 상기 그림을 정리하면 fillRect는 사각형을 채우는 것이고 fi..
-
React 업데이트 : 클래스 형태 React 복습 - React Component 이용 '좋아요 버튼 동작' : Class 이용, JSX 이용컴퓨터 알아가기/React 2022. 11. 17. 19:30
자바스크립트를 공부하기 전 무작정 React를 공부한 적이 있습니다. 블로그에도 34개의 글도 연재하였구요. 그러다 기초가 없다보니 어느순간 막히더라구요. 그 이후 시간을 내서 자바스크립트를 먼저 조금이라도 알고 가자 생각을 해서 순서를 바꾸었구요. 다시 제로초 TV 강의를 통해 React에 대해 알고자 합니다. 1. React란 사실 React에 대해 여기에 정의하는 것은 부정확하고 무의미하다고 봅니다. 다음 링크를 통해 정확하게 뜻과 내용들을 보면서 공부하는게 맞다고 보여지고요. 저는 리액트론 된 웹게임에 관심이 있기때문에 그 진도만 별도로 나가고자 합니다. React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org) React – 사용자 인터페이스를 만들기 ..
-
JavaScript 입문 : Canvas 이론 정리 - Canvas 기본 구조 및 사이즈 설정에 대한 이해컴퓨터 알아가기/JavaScript 2022. 11. 16. 19:30
Canvas 에 대한 이론 정리를 하고 있습니다. 내 브라우저가 Canavs를 지원하는지에 대하여 Modernizr의 기능을 활용하여 알아 보았구요. 조금 더 기초를 다져보도록 하갰습니다. 이 글은 '1분코딩의 HTML5 Canvas 라이브 강좌'를 기본으로 공부하고 있습니다. 1. Canvas 기본 구조 태그에 id를 지정해서 할 수 있지만 이는 클래스명을 지정해서 할 수도 있다는 말입니다. 또한 캔버스 자체 역시 색이 없기 때문에 약간의 색(#eee)을 넣어주는 것이 좋구요. 그리고 지정된 캔버스 태그를 선택하고 getContext로 연결해 주는 것이 기본이지요. 다음 태그안에 필요한 기본 구조입니다. 태그에 색 #eee를 지정하고 브라우저를 보면 캔버스의 기본 크기는 300 X 150 입니다. 이 ..
-
' '는(은) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다. 오류 환경 수정컴퓨터 알아가기/알아두면 편한 팁 2022. 11. 15. 19:30
React를 포함하여 Node.js가 필요한 경우를 포함하여 각종 실행파일(*.exe)가 VS Code 터미널창을 포함하여 명령 프롬프트 창 등에서 제목과 같이 에러가 나는 경우가 있습니다. 오류를 해결하기 위한 2가지 방법이 있습니다. 둘 다 해봤는데 알아두면 편할 듯 하여 공유하고자 합니다. 저는 Node.js를 설치하고 나서 해당 오류가 다음과 같이 발생이 되었습니다. 2가지 오류 수정 방법을 공유해 드립니다. 1. 삭제 후 재설치 (첫번째 방법) 무슨 말도 안되는 너무 간단한 방법이 아니냐 라는 질문을 할 수도 있습니다. 의외로 이 방법을 하지 않고 있는 환경에서 수정하고자 하는 분들이 많습니다. 저 또한 마찬가지구요. 응용프로그램이 너무 많이 열려있는 상태에서 설치한 원인도 있을 수 있다고 보여..
-
JavaScript 입문 : Canvas 이론 정리 - 모던나이저 사용방법 및 Canvas 지원 브라우저 확인컴퓨터 알아가기/JavaScript 2022. 11. 14. 19:30
Canvas에 대해 어느정도 공부를 하고 내용을 파악해 보았지만 하나의 매뉴얼로 일목요연하게 정리를 해 보고 싶어 졌습니다. 물론 구체적으로 공부할 내용은 엄청 많지만.. 간단히 순서를 정리한 강좌를 기본으로 기초부분에서 놓친 부분이 없나 확인도 할겸 정리를 해보고자 합니다. 관련 내용은 '1분코딩 HTML5 Canvas 라이브 강좌'를 기본으로 정리 하였습니다. 1. Canvas 이론 하나하나 세밀히 공부하고자 하는 분은 Canvas MDN을 링크합니다. 대부분의 강좌도 이것을 베이스로 하더군요. Canvas API - Web API | MDN (mozilla.org) Canvas API - Web API | MDN Canvas API는 JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기위한..
-
JavaScript 입문 : Canvas Animation VI - hue를 통한 무지개 색상으로 마우스 이동시마다 애니메이션 발생컴퓨터 알아가기/JavaScript 2022. 11. 12. 19:30
Canvas를 활용한 애니메이션 6번째 시간입니다. 이제는 다양한 색상을 통하여 마우스이벤트가 발생할 때 마다 아름다운 무지개 꼬리가 따라다니는 과정을 공부하겠습니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 우선 원의 색을 하얀색으로 바꾸어 봅니다. draw( ) 함수에서 적용하면 되겠죠. 1. Color Hue 설정 컬러를 나타내는 방법은 여러가지가 있습니다. RGB숫자와 Hex 코드로 구분하거나 직접 컬러이름을 기입하는 방식으로 지금껏 사용했었는데 Hue 컬러도 있습니다. 간단히 말해 표준 색상을 0도부터 360도까지 표현할 수 있습니다. Hue 컬러를 마우스를 클릭하거나 움직일때 형성되는 입자에 반..
-
JavaScript 입문 : Canvas Animation V - 다양한 사이즈 원 만들고 크기 줄어 들게 만들어서 클릭 이벤트에 연결하기컴퓨터 알아가기/JavaScript 2022. 11. 11. 19:30
지난시간까지 캔버스위 같은 사이즈 (반지름 50)의 초록색 원이 100개 생겼다가 사라지는 효과까지 공부를 해 보았습니다. 이어서 좀 더 효과를 주면서 좀 더 어렵지만 멋있는 애니메이션에 도전을 하고자 합니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 1. 다양한 사이즈 원 만들기 랜덤 사이즈로 만들기 위한 작업은 constructor에서 이미 랜덤 설정을 해 놓았습니다. 원을 그리는 함수에서 반지름이 50으로 되어 있는 부분을 constructor의 내용으로 바꾸어 줍니다. 화면을 보면 1 ~ 6 사이즈의 100개 원이 보입니다. 즉, 사이즈를 수정하고자 하면 constructor를 수정하면 되겠네요. ..