메이크코드 블록 에디터에서 배열에 함수 넣기

아마도 처음 프로그램을 배우는 사람들은 뭔 소리야 할 것이다. 왜냐면 숫자 또는 문자만 넣은 것만 봤기 때문일 거다. 하지만 배열에 다 넣을 수 있다. 그래서 블록에서는 할 수 없어서 자바스크립트 에디터에서 해봤다. 된다.

 

문제는??

문제는 블록 에디터로 변경할 경우 에러가 난다. 어쩌고 저쩌고, 무시하고 블록 에디터로 변경하면 함수 이름들이 다 바뀐다. 원하지 않은 코드들이 추가된다.

 

왜 배열에 함수를??

자유 미션이 마퀸 카트를 만드는 것이다. R/C CAR 기능에 마리오 카트처럼 중간중간에 허스키렌즈로 아이템을 인식하면 랜덤으로 효과를 적용하는 것이다. 그 효과를 적용하기 위해서 여러 개의 함수를 만들어 배열에 넣고 랜덤으로 실행하려고 했다. 새로운 효과가 추가되면 함수 만들고 배열에 넣으면 끝이다. 이렇게 하지 않을 경우 함수를 만들고, 제어문을 추가하고, 자잘한 코드를 추가 또는 수정을 해야 한다. 

 

이번 자유미션은 후자의 방식으로

전부를 스크립트 코드를 쓰지 못하기 때문에 귀찮더라도 후자의 방식으로 해야겠다.

728x90
반응형
블로그 이미지

두리뭉실 두리뭉실:해피파인더그룹

컴퓨터 코치 두리뭉실

댓글을 달아 주세요

 

마이크로:비트를 이용할때 나는 MakeCode(블럭)
또는 파이썬을 사용한다.

 

MakeCode와 파이썬 각각의 장단점이 존재하여
좀더 자유롭게 마이크로:비트를 사용해 보고 싶어서
유튜브에서 자바스크립트를 검색했다.

 

'엘리와 함께하는 드림코딩'

 

프론트엔드 개발자 입문편이기는 하지만! 마이크로:비트를
사용하기에 도움이 많이 된다.

 

아래는 내가 필요한 부분 보기 쉽게 정리한 것이다.

자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js

자바스크립트 01

 

자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)

자바스크립트 02

 

자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+)

자바스크립트 03

 

자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)

자바스크립트 04

 

자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6)

자바스크립트 05

바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6)

youtu.be/_DLhUBWsRtw

 

자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

자바스크립트 07

 

자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 | 프론트엔드 개발자 입문편 (JavaScript ES6 )

자바스크립트 08

 

자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 | 프론트엔드 개발자 입문편 ( JavaScript ES6)

자바스크립트 09

 

자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6)

자바스크립트 10

 

자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6)

자바스크립트 11

 

자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)

자바스크립트 12

 

 

자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)

자바스크립트 13

 

프로그래밍 포기 하지 마세요 (자바스크립트 함수 기본편)

자바스크립트 14

 

 

 

모던 JavaScript 튜토리얼

 

ko.javascript.info

 

동영상을 보고 따라해 봤는데, 변수 & 제어문& 반복문 & 배열에 대한 이해가 부족하다고 느끼면 아래의 게시물들이 도움이 될 수 있다.

 

2020/10/14 - [EDU/자바] - 언어를 본격적으로 배우기 전에! 맛보기 #01 - 문제 인식하고 해결 가능한 방법 찾기

 

언어를 본격적으로 배우기 전에! 맛보기 #01 - 문제 인식하고 해결 가능한 방법 찾기

언어를 본격적으로 배우기 전에 아어렵지 않게 시작했으면 좋겠다는 생각으로 문제를 해결해 보면서 맛보기 형식으로 글을 작성해 볼까 한다. 문제를 해결하면서 알 수 있는 것들은 1. 생각

bonghanwith.tistory.com

2020/10/23 - [EDU/자바] - 언어를 본격적으로 배우기 전에! 맛보기 #02 - 정렬 과정을 노트에 그려 보자

 

언어를 본격적으로 배우기 전에! 맛보기 #02 - 정렬 과정을 노트에 그려 보자

문제 ------------------------------------ 5 30 3 11 8 12 <처리> 8 12 30 * 702 301 80 1000 1 <처리> 80 702 1000 ------------------------------------ 오름차순으로 정렬하기 5 30 3 11 8 12..

bonghanwith.tistory.com

2020/11/20 - [EDU/자바] - 언어를 본격적으로 배우기 전에! 맛보기 #03 - 노트에 정리한 생각을 코드로 작성하기(변수와 비교문 이용하여 오름차순 정렬하기)

 

언어를 본격적으로 배우기 전에! 맛보기 #03 - 노트에 정리한 생각을 코드로 작성하기(변수와 비

문제를 해결하기 위해 노트에 숫자들을 기록하여 사용했듯이 프로그램에서는 '변수'에 숫자를 저장 하여 사용할 수 있다. '변수'란 값을 저장할 수 있는 메모리 공간이다. 각각의 변수에 5, 30, 3

bonghanwith.tistory.com

2020/11/23 - [EDU/자바] - 언어를 본격적으로 배우기 전에! 맛보기 #04 - 짝수만 출력 하기 그리고 생각해 보기

 

언어를 본격적으로 배우기 전에! 맛보기 #04 - 짝수만 출력 하기 그리고 생각해 보기

오름차순으로 정렬을 했으니 짝수를 출력하는 코드를 작성해 보자. '짝수'란, n을 임의의 정수라 할때 2n의 꼴로 표시되는 정수를 말한다. 다른 말로 2로 나누었을때 나머지가 0인 정수이다. 자바

bonghanwith.tistory.com

2020/12/09 - [EDU/자바] - 언어를 본격적으로 배우기 전에! 맛보기 #05 - 배열과 반복문을 이용하여 문제를 해결해 보자

 

언어를 본격적으로 배우기 전에! 맛보기 #05 - 배열과 반복문을 이용하여 문제를 해결해 보자

하단에 코드를 작성하는 풀 동영상이 있다. 동영상을 시청하고 게시물을 본다면 이해에 도움이 될거라 생각한다. 숫자를 6개에서 100개로 늘리면 그만큼 변수와 관련된 코드도 늘어난다. 자바

bonghanwith.tistory.com

2020/12/10 - [EDU/자바] - 언어를 본격적으로 배우기 전에! 맛보기 #06 - 마무리

 

언어를 본격적으로 배우기 전에! 맛보기 #06 - 마무리

#06 - 마무리 본격적으로 언어를 배우기 전에 한번쯤 경험했으면 하는 것들을 만들어 봤다. 내용이 조금 길어지더라도 GIT, TDD, 디버깅도 넣어 볼까라는 생각도 해봤다. 하지만, 변수&비교문&반복

bonghanwith.tistory.com

 

 

728x90
반응형
블로그 이미지

두리뭉실 두리뭉실:해피파인더그룹

컴퓨터 코치 두리뭉실

댓글을 달아 주세요

정보처리기능사 실기 알고리즘 달팽이 형 문제를 마이크로비트 웹에디터이용하여 원리이해해 보려고 한다. 정보처리기능사 실기는 문제 형태는 변하지 않았지만, 작년부터 객관식에서 주관식으로 바뀌었다. 그래서 이해를 못하면 찍지도 못하는 그런 시험이 되었다. 예전 지인에게 알고리즘 알려 주면서 프로그램언어를 이용하면 더 쉽게 이해하지 않을까 생각했었다. 그럼 마이크로비트 웹에디터로 해보자.










































<정보처리기능사 실기 알고리즘 달팽이형 문제> 


<블럭 사진>

플로우차트대로만 만들면으로 확인 할 수가 없어배열에 저장 되는 것을 시각적으로 보기 위해  이미지 변수를 하나 만들어 사용 하고 그 부분만 함수로 만들었다. 그리고 노란색으로 하이라이트 된 부분을 보자! 불록 코딩하면서 전혀 볼 수 없었던 문자들이다. 그렇다. 블록으로 표현 못하는 부분은 저렇게 문자로 표현 된다. 즉 현재 제공된 블록으로는 다 표현을 할 수 없다는 것이다. 그렇지만  처음 생각했던 대로 마이크로비트 웹에디터이용하여 더 쉽게 이해 할 수 있다.

microbit-알고리즘 (4).hex


한단계 한단계 실행하며 확인 하다 보면 금방 이해 될 것이다. 동영상으로 확인~

<실행 동영상>


그럼 한장의 사진을 더 보고 다음 질문생각을 해보자

<자바스크립트 사진>


플로우차트, 블록, 자바스크립트 중 

어느 것이 아이디어를 잘 표현할 수 있을까??

어느 것이 바로 만들 수 있을까??

어느 것이 이해가 쉬울까?? 

어느 것이 눈에 확 들어올까?? 


분명 서로장단점존재 한다. 결국은 거의 대부분 배우고 사용해야 하는데, 어떻게 하면 재미있고 쉽게 할 수 있는지는 눈에 보일것이다



728x90
반응형
블로그 이미지

두리뭉실 두리뭉실:해피파인더그룹

컴퓨터 코치 두리뭉실

댓글을 달아 주세요

본 체험 제품은 element14 의 후원을 받아 아이씨뱅큐㈜ 에서 진행하는 무상 체험단 활동으로 작성한 것입니다.


이번 시간에는 마이크로비트에 대해 개인적인 생각들을 써보려고 한다. 

귀엽다. 첫눈에 작고 앙증맞은 것이 귀엽다. 개인적인 생각이다. 코니가 앞에 있어도 돼지콧구멍시선이 간다^^

<작고 앙증맞고 귀여운 마이크로비트 사진>


재미있다. 코니가 웃으면서 흔들어 주길래 나는 두손으로 흔들어 줬다^^. 돼지콧구멍에서 외계인으로 변신시켜 줬다.

<두손으로 흔들고 있는 마이크로비트>


사진으로 보기엔 아쉽다. 그래 동영상으로 보자

<두손 흔드는 마이크로비트 동영상>   microbit-getting-started (1).hex



간단하고 쉽다. 두손 흔들고 있는 외계인 마이크로비트를 LED로 표현하기 위해서 마이크로비트 홈페이지접속하고, 코드 만들기 페이지로 들어가 블럭을 만들고, 다운로드 하여 마이크로비트에 복사하기만 하면 끝이다. 기본적으로, 따로 따로 제어할 수 있는 25개의 LED 불빛들프로그래밍 가능한 2개의 버튼하드웨어 확장 가능 핀센서와 온도 센서들, 움직임 센서들(가속도 센서와 나침반(자기) 센서), 라디오(Radio)와 블루투스 (Bluetooth)를 이용한 무선 통신 기능이 제공되어 내가 생각한 것들어려움 없이 만들 수가 있다.


재미있는 만보기 - 아래의 기능을 하는 만보기를 만든다고 가정해 보자!(만들어 올릴 예정^^)

 * 버튼을 눌러 만보기의 기능을 시작 

 * 가속도 센서를 이용하여 움직일 때마다 숫자를 증가

 * 특정 숫자에 도달하면 응원하는 음이나 LED로 표현, 

 * 버튼을 눌러 현재 얼마만큼이나 걸었는지 확인

마이크로비트는 당장이라도 뚝딱뚝딱 만들어서 밖으로 나가 제대로 동작하는걸 확인 할 수 있다! C언어 같은 프로그램 언어를 모르더라도 말이다. 만약에 자바 스크립트파이썬을 사용하고 싶다면, 블록코딩에서 아쉬운 몇%를 채울 수가 있어서 더욱 좋다^^.


아래의 사진은 재단 소개페이지다. '마이크로비트 교육 재단은 비용리 조직으로서 전 세계의 어린이들이 학교교육/모둠활동/집에서 컴퓨터과학기술을 활용해 창의성을 키우고 디지털 지식과 활용 능력들을 키울 수 있도록 하는 것을 목표로 하고 있습니다.'  위의 재미있는 만보기의 예처럼 아이디어를 마이크로비트를 통하여 현실로 만들수 있도록 도와 주는게 마이크로비트 교육재단의 목표이다.

<마이크로비트 소개 및 목표 사진>


돈이 많이 든다. 단품으로도 충분히 기능들 활용하여 아이디어를 표현할 수 있다. 그러나 기본으로 제공하는 것 이외에 것들을 마이크로비트로 만들려고 하면 추가적인 확장부품들을 구매를 해야 한다. 이건 다른 개발 보드도 마찬가지 이지만, 솔더링이나 전기, 전자에 대한 지식이 부족한 아이들에겐 이미 만들어져 있는 확장 보드를 구매를 해야 한다. 비싸다 ㅠㅠ. 


금전적인 부분에 있어서 단점(다른 개발 보드도 마찬가지)이 있지만, 마이크로 비트귀엽재미있고 간단하고 쉬워 코딩교육아이디어를 표현 할 수가 있어 좋은 제품이라 생각 한다. 



마이크로비트 공식 구입처 아이씨뱅큐 http://www.icbanq.com/
엘리먼트14 특장점 - 글로벌 전자부품 유통회사, 6만원 이상 무료배송, 60만가지 재고 보유, MOQ 없음한글 웹사이트국내서비스센터 운영(http://kr.element14.com/?CMP=DSP-ODB-KR-JAN2018-BLOG-ICBanQ1-HOMEPAGE)
마이크로비트 공식 카페 : http://cafe.naver.com/bbcmicro
아이씨뱅큐 공식 블로그 : http://blog.naver.com/icbanq


728x90
반응형
블로그 이미지

두리뭉실 두리뭉실:해피파인더그룹

컴퓨터 코치 두리뭉실

댓글을 달아 주세요