조이 코딩 연구소(Joy Coding Lab.)(수업 및 기타문의 카톡 : jhw2458)

여러분 안녕하세요.

오늘은 Flutter에서 BuildContext에 대해서 공부하고 가도록 하겠습니다.

BuildContext란 무엇인가??

스캣폴드를 포함하지 않은 Context이다.

"A handle to the location of a widget in the widget tree"

"위젯 tree에서 현재 위젯의 위치를 알 수 있는 정보"

어디에 쓰이는걸까?

우리는 코딩할때마다 이것을 보았다.

모든 위젯은 빌드 메스드를 가지고 있다.

빌드메쓰드로 들어오는 인자 값은 컨텍스트는 타입의 컨텍스트의 인자값을 대입한 스캣폴드 위젯을 리턴한다는 뜻이다.

이 BulidContext는 stateless위젯이나 state빌드 메서드에 의해서 리턴 된 위젯의 부모가 된다.

간단하게라도 정리 했습니다.

오늘은 이만.. 조이코딩연구소 장샘 2021.04.25 오후 11시45분..

여러분 안녕하세요.

조이코딩연구소 장샘 입니다.

어제 리스트뷰에 이어서 스낵바를 만들도록 하겠습니다.

스낵바는 뭘까요? 

음식..먹는게 아니라. 

앱 화면의 아래의 잠시 뜨는 팝업 창 같은거에요.

Flutter2.0으로 오면서 Snackbar 사용하는 방법이 바뀌었으니 잘 보도록 하시죠

자 먼저 리스트 뷰에 리스트 타일을 이용하여 하단 메뉴를 더 구성 하도록 하겠습니다.

각 하단별 메뉴를 추가 하였고, 클릭 하였을때 OnTap으로 효과를 주었습니다.

그리고 다음으로 스낵바를 나오도록 버튼을 추가하고 클릭 해보겠습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Appbar',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: MyPage(),

    );

  }

}

class MyPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      // 흰 도화지를 꺼내자.

      appBar: AppBar(

        // App Bar를 만들자

        title: Text('Joy Coidng Lab Menu'), // 앱 바에 글씨를 써준다.

        centerTitle: true, // 가운데로 글씨를 정렬하자.

        elevation: 0.0, //올록이 효과를 없앤다.

        actions: [

          //앱 바에 아이콘 들을 배치하자.

          IconButton(

            // 아이콘 버튼 형태를 만들자.

            icon: Icon(Icons.shopping_cart), //아이콘 쇼핑 카트 아이콘을 넣어보자.

            onPressed: () {

              // 버튼 클릭했을때의 번쩍효과!!

              print('menu button is clicked');

            },

          ), //리딩 속성을 불러 옵니다.

          IconButton(

            icon: Icon(Icons.search),

            onPressed: () {

              print('menu button is clicked');

            },

          ), //리딩 속성을 불러 옵니다.

        ],

      ),

      drawer: Drawer(

        //왼족 햄버거 모양의 메뉴를 만들어보자.

        child: ListView(

          //클릭했을때 리스트 메뉴를 만들자.

          padding: EdgeInsets.zero, //빈공간을 만들지 말자.

          children: [

            UserAccountsDrawerHeader(

              //메뉴 중에 사용자 헤드 메세지 부분을 만들자.

              currentAccountPicture: CircleAvatar(

                // 이미지는 동그랗게 꾸며주고.

                backgroundImage: AssetImage('assets/bonobono.jpg'), //내가 이미지 삽입

                backgroundColor: Colors.white, // 배경은 화이트로~

              ),

              otherAccountsPictures: [

                CircleAvatar(

                  backgroundImage: AssetImage('assets/User.jpg'),

                  backgroundColor: Colors.white,

                ),

                // CircleAvatar(

                //   backgroundImage: AssetImage('assets/bonobono.jpg'),

                //   backgroundColor: Colors.white,

                // ),

              ],

              accountName: Text('JoyCoding'), //사용자 계정에는 이부분을 꼭 써줘야 한다.

              accountEmail:

                  Text('jhwjhw2580@gmail.com'), //사용자 계정에는 이부분을 꼭 써줘야 한다.

              onDetailsPressed: () {

                //리스트 뷰 화면에서 화살표 모양의 오른쪽에 버튼 생성.

                print('arrow is clicked');

              },

              decoration: BoxDecoration(

                //사용자 계정 이미지를 동그랗게 꾸며준다.

                color: Colors.blue[200],

                borderRadius: BorderRadius.only(

                  //사각형 이미지의 아래쪽을 동그랗게 만든다.

                  bottomLeft:

                      Radius.circular(40.0), //40.0은 동그랗게 만들어 주는 상수 값이다. 변경 가능

                  bottomRight:

                      Radius.circular(40.0), //40.0은 동그랗게 만들어 주는 상수 값이다. 변경 가능

                ),

              ),

            ),

            ListTile(

              //왼쪽 끝에 아이콘 배치 하는것.

              leading: Icon(

                Icons.home,

                color: Colors.grey[850], //아이콘의 색을 찐하게 해주는 것.

              ),

              title: Text('Home'),

              onTap: () {

                //onTap은 두번 Touch하거나 쭈욱 눌렀을때 이벤트를 할 수 있는 것.

                print('Home is Clicked');

              },

              trailing: Icon(Icons.add), //오른쪽 끝에 배치하는 것 트레일링.

            ),

            ListTile(

              leading: Icon(

                //왼쪽 끝에 아이콘 배치 하는것.

                Icons.settings,

                color: Colors.grey[850],

              ),

              title: Text('Setting'),

              onTap: () {

                print('Setting is Clicked');

              },

              trailing: Icon(Icons.add), //오른쪽 끝에 배치하는 것 트레일링.

            ),

            ListTile(

              leading: Icon(

                //왼쪽 끝에 아이콘 배치 하는것.

                Icons.question_answer,

                color: Colors.grey[850],

              ),

              title: Text('Q&A'),

              onTap: () {

                print('Question is Clicked');

              },

              trailing: Icon(Icons.add), //오른쪽 끝에 배치하는 것 트레일링.

            ),

          ],

        ),

      ),

      body: Center(

        child: ElevatedButton(

          child: Text('Show Me'),

          onPressed: () {

            ScaffoldMessenger.of(context).showSnackBar(

              const SnackBar(

                content: Text('Flutter2.0 Snack method'),

              ),

            );//<-- 여기가!!! 세미 콜론이야!!!!! 온프레스드!!!!

          },

        ),

      ),

    );

  }

}

자 조금씩 플러터 위젯을 공부하고 있습니다.

서서히 앱의 형태가 나타나기 시작하고 있죠? 이렇게 조금씩이라도 공부해서 하나씩 여러분걸로 만든다면

나중에 완전한 앱을 플러터로 만들 수 있겠죠?

그럼 오늘도 이만.. 조이코딩연구소 장샘 2021.04.24 오후 11시43분...

안녕하세요. 여러분

조이코딩연구소 장샘 입니다.

오늘은 앱 페이지에서 왼쪽 상단 메뉴를 눌렀을 때 내 개인 정보와 항목들이 나오는걸 만들어 볼거에요.

왼쪽 메뉴를 누르면 아래 사진처럼 나오는걸 만들거에요.

자 이제 코딩을 시작해보죠

이 부분은 더 이상 설명이 필요 없겠죠?

실제 리스트 뷰에서 사용자 계정 쪽 이미지와 글씨 등 효과를 주는걸 쉽게 주석 설명을 달아 놨습니다.

실제 코드를 아래에 넣어 드립니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Appbar',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: MyPage(),

    );

  }

}

class MyPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(// 흰 도화지를 꺼내자.

      appBar: AppBar(// App Bar를 만들자

        title: Text('Joy Coidng Lab Menu'),// 앱 바에 글씨를 써준다.

        centerTitle: true,// 가운데로 글씨를 정렬하자.

        elevation: 0.0,//올록이 효과를 없앤다.

        actions: [//앱 바에 아이콘 들을 배치하자.

          IconButton(// 아이콘 버튼 형태를 만들자.

            icon: Icon(Icons.shopping_cart),//아이콘 쇼핑 카트 아이콘을 넣어보자.

            onPressed: () {// 버튼 클릭했을때의 번쩍효과!!

              print('menu button is clicked');

            },

          ), //리딩 속성을 불러 옵니다.

          IconButton(

            icon: Icon(Icons.search),

            onPressed: () {

              print('menu button is clicked');

            },

          ), //리딩 속성을 불러 옵니다.

        ],

      ),

      drawer: Drawer(//왼족 햄버거 모양의 메뉴를 만들어보자.

        child: ListView(//클릭했을때 리스트 메뉴를 만들자.

          padding: EdgeInsets.zero,//빈공간을 만들지 말자.

          children: [

            UserAccountsDrawerHeader(//메뉴 중에 사용자 헤드 메세지 부분을 만들자.

              currentAccountPicture: CircleAvatar(// 이미지는 동그랗게 꾸며주고.

                backgroundImage: AssetImage('assets/bonobono.jpg'),//내가 이미지 삽입

                backgroundColor: Colors.white,// 배경은 화이트로~

              ),

              accountName: Text('JoyCoding'),//사용자 계정에는 이부분을 꼭 써줘야 한다.

              accountEmail: Text('jhwjhw2580@gmail.com'),//사용자 계정에는 이부분을 꼭 써줘야 한다.

              onDetailsPressed: () {//리스트 뷰 화면에서 화살표 모양의 오른쪽에 버튼 생성.

                print('arrow is clicked');

              },

              decoration: BoxDecoration(//사용자 계정 이미지를 동그랗게 꾸며준다.

                  color: Colors.blue[200],

                  borderRadius: BorderRadius.only(//사각형 이미지의 아래쪽을 동그랗게 만든다.

                    bottomLeft: Radius.circular(40.0),//40.0은 동그랗게 만들어 주는 상수 값이다. 변경 가능

                    bottomRight: Radius.circular(40.0),//40.0은 동그랗게 만들어 주는 상수 값이다. 변경 가능

                  ),

                ),

            ),

          ],

        ),

      ),

    );

  }

}

자 오늘도 알차게.. 쉬지 않고 달렸습니다.

꾸준함이 여러분을 성공적인 코딩의 세계로 이끌어 줄거라 확신합니다.

저도 그렇기 때문에 하루도 빠지지 않고 작성하도록 하겠습니다.

오늘도 이만.. 2021.04.23 조이코딩연구소 장샘.

여러분 안녕하세요.

조이코딩연구소 장샘 입니다.

오늘은 App Bar에 버튼들을 만들어 보도록 하겠습니다.

각 버튼을 만들고 아이콘 모양도 넣어보고 Touch를 했을 때 번쩍이는 효과까지 넣어 보도록 할게요.

기본적인 home 위젯인 Mypage를 만들어 주고 Scaffold로 도화지를 꺼내봅니다.

Appbar Icon Menu라는 글씨를 AppBar 중앙에다가 배치 시킵니다.

elevation은 띄움효과였죠? 0.0으로 효과를 없애버리고~

leading이라는 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치시키는 위젯을 불러 옵니다.

그리고 icon의 아이콘 메뉴를 넣어주고, 그리고 버튼을 터치로 눌렀을때 번쩍이는효과! onPressed를 호출!

다음은 action 이라는 건데 이것은 다수의 아이콘 버튼을 오른쪽에 배치할때 사용합니다.

메뉴 형식의 아이콘을 넣고 눌렀을때 번쩍이는 효과를 넣어 줍니다.

생각보다 그렇게 복잡하진 않죠? 

짜잔 우리가 자주 봐왔던 앱의 형태가 조금씩 보이기 시작합니다.

우리가 만들어준 아이콘 바로 아래 그림과 같이 만들어 진거에요.

플러터에서 제공하는 아이콘이 많으니 다양한 형태의 아이콘으로 이쁘게 앱을 만들 수 있을거 같습니다.

소스를 첨부하오니 혹시 필요하신 분은 복사해 놓고 바로 공부 하시기 바랍니다.

감사합니다!! 2021.04.22 조이코딩연구소 장샘. 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Appbar',

      theme: ThemeData(primarySwatch: Colors.red),

      home: MyPage(),

    );

  }

}

class MyPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Appbar Icon Menu'),

        centerTitle: true,

        elevation: 0.0,

        leading: IconButton(

          icon: Icon(Icons.menu),

          onPressed: () {

            print('menu button is clicked');

          },

        ), //리딩속성은 간단한 위젯이나 아이콘들을 왼쪽에 위치해 시킨다.

        actions: [

          //이곳에 한개 이상의 위젯들을 가진다.

          IconButton(

            icon: Icon(Icons.shopping_cart),

            onPressed: () {

              print('search button is clicked');

            },

          )

        ],

      ),

    );

  }

}

여러분 안녕하세요

조이코딩연구소 장샘 입니다.

Flutter2.0을 공부하면서 기본적인 화면 구성 방법과 이미지 넣어보고 정렬까지 해봤습니다.

이제 본격적으로 코딩 공부를 해볼텐데요.

Flutter에서 사용하는 언어 구글에서 만든 Dart 라는 언어 입니다.

언어를 모른다는 가정하에 최대한 쉽게 적어 보도록 하겠습니다.

Dart 언어를 공부 할때 중요한 부분이 바로 Class(클래스)와 Widget(위젯) 입니다.

클래스란 무엇일까요?

뜻 그대로 생각해 보시죠~~

학교?

수업??

사람의 속성 눈,코,입

사람의 기능 : 말하기, 듣기, 걷기, 먹기

자 위의 속성과 기능의 차이를 아시겠습니까?

자 아파트를 클래스로 표현을 해보죠.

아파트의 속성 : 공간, 인테리어, 제품

아파타의 기능 : 주거 목적

저것이 바로 클래스이고 모델하우스에서 한곳의 집만 보여주죠?

그것이 바로 클래스 개념이고 이것들을 마구마구 찍어서 똑같이 만들어 낼수 있는 걸

바로 인스턴스라고 합니다!!!

101호, 102호, 201호, 202호 등등등

객체가 가져야 하는 속성과 기능을 정의한 내용을 담고 있는 역할

프로그래밍 상에서의 객체란

클래스가 정의된 후 메모리상에 할당되었을때 이를 객체라고 함

 
구글에서 Dart를 검색하시면 프로그램을 바로 해볼수가 있습니다.

class Room{

  int size;//멤버 변수

  String funiture;

  int cost;

  Room(int size,String funiture,int cost){//생성자 만들기

    this.size = size;//멤버 변수

    this.funiture = funiture;

    this.cost = cost;

  }

}

int addNumber(int num1, int num2){

  return num1 + num2;

}

main(){

  Room a_101 = new Room(34,'전자렌지',5000000);

  Room a_102 = new Room(23,'에어컨',2500000);

  a_101.size = 10;

  a_101.funiture = '옷장';

  print(a_101.funiture);

  print(a_101.cost);

  print(a_102.cost);

  int a = addNumber(123123,42424);

  print(a);

}

이미지를 추가하기 위하여 일단 왼쪽 종이 모양 아이콘을 누르고

새로운 폴더를 만들어 줍니다.

마우스 오른쪽 버튼을 새로운 폴더 만들기가 있어요

저는 assets라고 폴더를 생성 해봅니다.

폴더를 만드신 뒤 원하는 이미지를 드래그를 하여 assets폴더에 바로 이동 시킵니다. 

그다음에 왼쪽 파일리스트 중 pubspec.yaml 파일로 가봅니다.

그러면 # 주석 처리처럼 활성화가 안되어 있을 겁니다.

이부분을 마우스로 범위를 지정한뒤 ctrl + / 누르면 자동적으로 활성화가 됩니다.

 # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

아래처럼 변합니다. 뿅!!!

그다음에 내가 실제로 불러온 이미지 이름으로 수정해줘야 합니다.

흠.. png 파일은 오류가 발생하네요...

다시 jpg 파일을 다운받아서 했습니다.

이미지를 각 영역에 넣어주고 효과를 주면.

자 그리고 플러터 앱에서 실행했을 때 플러터 앱 위에 debug 띠를 없애는 방법은

플러터 앱을 실행하면 처음 시작 호출되는 위젯 home이 있는 곳에서

      debugShowCheckedModeBanner: false,

로 해주면 사라진것을 알 수 있다.

자 오늘의 정리 들어 갑니다.

1. 플러터 앱 이미지 넣는 방법 
 1) 폴더를 만들어 준다. jpg파일 형태로.. 다른건 왜 안되는지 모르겠네요.
 2) pubspec.yaml에 가서 이미지를 등록시킬 수 있도록 활성화를 시켜준다. 
    활성화 시켜주는 방법은 마우스로 영역을 설정 후에 Ctrl + / 를 누르면 활성화가 된다.
   예)    assets:
    - assets/123.jpg
    - assets/456.jpg

이후에 Ctrl + s를 눌러서 컴파일해보고 오류가 안뜬다면 정상적으로 등록 완료.

3) 이미지를 동그랗게 불러올 수 있는 플러터의 막강한 위젯 기능

CircleAvatar(서클 아바타!!!)를 활용하고

  backgroundImage: AssetImage('assets/456.jpg')를 이용하여 이미지를 넣어준다.
  radius: 60.0,(이미지의 사이즈를 설정해준다.)

4) 플러터 선을 그리는 위젯( 이미지와 이미지 사이의 선을 만들어 주는 위젯 )

   - Divider 이다.

예)    Divider
       height: 60.0, 
       //Divider의 높이를 말하는게 아니라 위와 아래의 위젯의 거리를 표현하는 것이다. 60이면 위30, 아래로 30이다.

       color: Colors.grey[850],  
      thickness: 0.5, //두께
      endIndent: 30.0, //끝에서 부터 어느정도 떨어질것인지 설정하는 것.
 ),

2. 플러터 아이콘 위젯을 이용하여 구현 하자.

플러터 위젯의 Icon은 다양한 형태의 아이콘 위젯을 제공한다. Ctrl + Space를 누르면 항목들이 나온다. 또는 Ctrl 누르고 마우스를 Icon을 클릭하면 나오니 참고 하도록 하자.

 Icon(Icons.check_circle_outline),

 자 지금까지 3번의 걸쳐서 정적인 앱에서 이미지와 텍스트를 이용하여 하나의 플러터 앱 페이지를 만들어 보았습니다.

우리가 한것은 이렇습니다.

앱 페이지의 상단 AppBar에 색을 넣고 글씨를 넣었고

앱 페이지의 메인 Body에 색을 넣고 이미지를 넣고 정렬하고, 글씨를 넣고 정렬하고, 아이콘 위젯을 이용하여 삽입 정렬.

이것이 다다...

너무 많은 것을 공부하고 많은 코딩을 하였는데 허무 한가..

이게 시작이고 이게 반이라고 생각한다.

다양한 알고리즘을 적용하는건 찾아서 적용하고, 기본적인 레이아웃과 정렬, 이미지, 텍스트, 아이콘을 사용했다라는거에

어느정도 자부심을 가져보도록 하자. 

그러면 이만 조이코딩연구소 장샘 2021.04.20 오후 9시8분...

여러분 안녕 조이코딩연구소 장샘 입니다.

오늘도 공부를 시작해 봅니다. 

오늘 할 내용은 아래와 같습니다.

1. 앱의 상단 부분 App Bar를 꾸며준다.
   1) AppBar의 색을 바꿔 준다.
   2) 가운데로 정렬 한다.
   3) 볼록 튀어나온 효과를 없앤다.

2. 앱의 바디 부분을 꾸며준다.
   1) 앱의 바디의 색을 꾸며 준다.
   2) 끌씨를 넣어주고, 글씨에 대한 효과(굵게, 하얀색, 글씨의 간격)을 적용 해본다.
     - Color를 선택할때 Colors.불라 불라 이름을 넣고 마우스 포인트를 올리면 색을 고를 수 있다. 위아래로 스크롤 가능

   3) 텍스트와 텍스트 사이의 샌드박스를 넣어서 각 텍스트의 간격을 넓힌다.
   4) 가로축 정렬을 해준다.
   

import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Joy Coding Lab',

      home: Grade(), // Grade라는 위젯을 실행시킨다.

    );

  }

}

class Grade extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Joy Coding Lab'),

        backgroundColor: Colors.amber[600], // 색을 표현할때 직접 값을 넣어 줄수도 있다.

        centerTitle: true,

        elevation: 0.0,

      ),

      backgroundColor: Colors.amber[700],

      body: Padding(

        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),

        child: Column(

          crossAxisAlignment: CrossAxisAlignment.start, // 가로축 정렬을 하기 위한 위젯이다.

          children: [

            Text(

              'Name',

              style: TextStyle(

                //텍스트의 효과를 줄 수 있따. 마우스포인ㄴ트를 누르면 된다.

                color: Colors.white, //글씨의 색

                letterSpacing: 2.0, //글씨의 간격

              ),

            ),

            SizedBox(

              // 텍스트와 텍스트 사이의 안보이는 박스를 넣어서 간격을 넓혀 주는 것이다.

              height: 10.0,

            ),

            Text(

              'Joy Coding',

              style: TextStyle(

                  color: Colors.white,

                  letterSpacing: 2.0,

                  fontSize: 28.0, // 해당 텍스트의 폰트 사이즈를 변경할때 사용 한다.

                  fontWeight: FontWeight.bold), //해당 텍스트의 굵기를 적용할 때 사용 한다.

            )

          ],

        ),

      ),

    );

  }

}

오늘은 여기까지 조금더 할 수도 있으니...

<Summary>

1. crossAxisAlignment: CrossAxisAlignment.start, // 가로축 정렬을 하기 위한 위젯이다

2.  style: TextStyle(  //텍스트의 효과를 줄 수 있따. 마우스포인트를 누르면 된다.

   color: Colors.white, //글씨의 색

   letterSpacing: 2.0, //글씨의 간격

  fontSize: 28.0, // 해당 텍스트의 폰트 사이즈를 변경할때 사용 한다.

  fontWeight: FontWeight.bold), //해당 텍스트의 굵기를 적용할 때 사용 한다.

         )

3. SizedBox(

              // 텍스트와 텍스트 사이의 안보이는 박스를 넣어서 간격을 넓혀 주는 것이다.

              height: 10.0,

            ),

오늘도 수고 하셨습니다..

반복만이 살길이다. 

조이코딩연구소 장샘 2021.04.20 오후 8시12분

여러분 안녕하세요.

조이코딩연구소 장샘 입니다.

오늘도 플러터 공부 놓치지 않아야 겠죠?

오늘부터 기초 적인 앱을 만들면서 하나씩 플러터에 대하여 학습 하도록 하겠습니다.

플러터 기초를 배워보고, 플러터 정렬, 플러터 캐릭터에 대하여 공부하도록 합니다.

class MyCard extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold( //실제 앱의 하얀색 도화지가 되는 것이다. 도화지를 하나 사왔다고 생각하자.

        appBar: AppBar( //앱의 상단 부분의 바를 만든다.

      title: Text('JoyCodingLab.'), //앱 상단 부분의 바에 Text를 하나 넣는다.

      centerTitle: true, // 앱의 상단 부분의 바의 정렬을 센터로 해준다.

      backgroundColor: Colors.redAccent, //Color의 색을 바꾼다.

      elevation: 0.0, //엘러그레이션 높이라는 뜻이고 앱의 붕떠 있는 느낌의 효과를 나타낸다.

    ));

  }

}

자 여기까지는 잘 따라 오셨나요? 

해당 코드 말고 그 위에있는 코드들은 이전 시간에 코딩을 다 해놨으니 이어서 해주시면 됩니다.

추가적으로 메인 Body에서의 상단, 중간, 하단의 정렬을 표시 한다.

Column을 마우스로 클릭 하면, 왼쪽에 전구 모양이 나타납니다.

전구를 클릭 하면 Wrap with Center가 보이고 클릭 해줍니다. Center 위젯이 Column위젯을 감싸줍니다. 

그러면 Text는 세로로 쓰여졌고, 이것들을 전체가 가운데로 정렬 됨을 알 수 있습니다.

즉, Body에 Center를 하면 전체가 가운데로 일단 정렬을 시키는 것이다. 라고 생각할수 있지만

상위의 Center 위젯과 child의 Column이 만날때는 조금 다릅니다.

mainAxisAlignment:MainAxisAlignment.center 이것이 실제 화면의 상단, 중앙, 하단의 정렬을 해주는 것이다.

<Summary>

1. AppBar의 Text의 정렬은 centerTitle : ture,

2. AppBar의 색을 바꿔주는건 backgroundColor : Colors.redAccent

3. 앱의 붕뜬 느낌효과 elevation : 0.0 ~ 10.0 (엘러그레이션)

4. Main Body에서 텍스트의 위치를 지정할수 있는 방법은 2가지다.

Padding을 이용하여 왼쪽,오른쪽,위,아래를 조절하는 방법

Body의 메인 정렬과, child 정렬을 이용하여 화면 가로 축, 세로축의 정려를 하는 방법

5. 첫번째 방법은

   Body에 Padding을 한뒤 정확하게 해주기위해 Padding 속성 EdgeInserts.fromLTRB를 이용한다.

   그리고 화면의 상단,중앙,하단의 정렬을 할 때 mainAxisAlignment를 사용한다.

   body: Padding(

        // 자 이제 메인 바디 부분을 넣어 보도록 하자.

        // Padding은 Body 내에서 위치를 조절 할 수 있는 위젯입니다.

        //padding: EdgeInsets.fromLTRB(left, top, right, bottom),//정확한 위치를 넣어 주기 위해서 Padding 속성을 불러 옵니다.

           padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),

           child: Column(

          //해당 위젯을 세로 축으로 사용하고.

          mainAxisAlignment:

              MainAxisAlignment.center, //화면 상에서 상단, 중간, 하단 정렬을 해준다.

          children: [Text('Joy'), Text('Coding'), Text('Lab')], //각각의 텍스트를 써준다.

        ),

      ),

    );

6. 두번째 방법은

 Body에 바로 Center를 해주는 것이다.

  body: Center(

        child: Column(

          //해당 위젯을 세로 축으로 사용하고.

          mainAxisAlignment:MainAxisAlignment.center, //화면 상에서 상단, 중간, 하단 정렬을 해준다.

          children: [Text('Joy'), Text('Coding'), Text('Lab')], //각각의 텍스트를 써준다.

<소스 정리>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

import 'package:flutter/material.dart';

void main() => runApp(MyApp()); // runApp 제일 상위 위젯을 호출한다. 기본적인 뼈대를 만드는것이다.

class MyApp extends StatelessWidget {

  //정적인 의미의 뼈대를 만든다.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      //플러터에서 대부분 가지고 있는 머트리얼앱 위젯을 가져온다.

      title: 'JoyCoding', //앱을 총칭하는 앱의 타이틀이다.

      home: MyCard(), // Home 기본적으로 앱이 실행되면 기본적으로 실행되는 초본이다.

    );

  }

}

class MyCard extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      //실제 앱의 하얀색 도화지가 되는 것이다. 도화지를 하나 사왔다고 생각하자.

      appBar: AppBar(

        //앱의 상단 부분의 바를 만든다.

        title: Text('JoyCodingLab.'), //앱 상단 부분의 바에 Text를 하나 넣는다.

        centerTitle: true, // 앱의 상단 부분의 바의 정렬을 센터로 해준다.

        backgroundColor: Colors.redAccent, //Color의 색을 바꾼다.

        elevation: 0.0, //엘러그레이션 높이라는 뜻이고 앱의 붕떠 있는 느낌의 효과를 나타낸다.

      ),

      body: Padding(

        // 자 이제 메인 바디 부분을 넣어 보도록 하자.

        // Padding은 Body 내에서 위치를 조절 할 수 있는 위젯입니다.

        //padding: EdgeInsets.fromLTRB(left, top, right, bottom),//정확한 위치를 넣어 주기 위해서 Padding 속성을 불러 옵니다.

        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),

        child: Column(

          //해당 위젯을 세로 축으로 사용하고.

          mainAxisAlignment:

              MainAxisAlignment.center, //화면 상에서 상단, 중간, 하단 정렬을 해준다.

          children: [Text('Joy'), Text('Coding'), Text('Lab')], //각각의 텍스트를 써준다.

        ),

      ),

    );

  }

}

------------------------------------------------

class MyCard extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      //실제 앱의 하얀색 도화지가 되는 것이다. 도화지를 하나 사왔다고 생각하자.

      appBar: AppBar(

        //앱의 상단 부분의 바를 만든다.

        title: Text('JoyCodingLab.'), //앱 상단 부분의 바에 Text를 하나 넣는다.

        centerTitle: true, // 앱의 상단 부분의 바의 정렬을 센터로 해준다.

        backgroundColor: Colors.redAccent, //Color의 색을 바꾼다.

        elevation: 0.0, //엘러그레이션 높이라는 뜻이고 앱의 붕떠 있는 느낌의 효과를 나타낸다.

      ),

      body: Center(

        child: Column(

          //해당 위젯을 세로 축으로 사용하고.

          mainAxisAlignment:MainAxisAlignment.center, //화면 상에서 상단, 중간, 하단 정렬을 해준다.

          children: [Text('Joy'), Text('Coding'), Text('Lab')], //각각의 텍스트를 써준다.

        ),

      ),

    );

  }

}

그럼 오늘도 공부 참 잘했어요!! 

꾸준한 사람이 성공하리다.

2021.04.20 am 02:10 조이코딩연구소 장샘

1. Flutter 프로젝트 폴더 구성하기

2. 코드의 기본 내용을 알아보자

3. 앱 페이지 기본 구성 공식을 외워보기

4. Flutter 앱 실행을 해보기.

pubspec.yaml

앱을 만들때 버전 환경등 다양한 셋팅을 하는 곳이다.

android 폴더와 ios 폴더는 앱을 배포할때 정보를 갖고 있다고 생각하면 된다.

가장 중요한건 lib 폴더 입니다. 라이브러리 폴더라고도 부를 수 있고요.

앱을 만들때 여기서 거의 대부분의 작업을 진행 할겁니다.

자 우리는 main.dart의 있는 기본 소스 내용을 지우고 시작을 해보도록 하겠습니다.

플러터 머트리얼을 임폴트 해줘야 된다.

이것은 플러터의 위젯이랑 각종 기능들을 사용하기 위해서 무조건 입력을 해줘야 합니다.

import 'package:flutter/material.dart';

void main() => runApp(Myapp())

=> 함수를 호출해오는 것이다.

플러터의 최상위 함수는 runApp 이 호출 될때 위젯=아규먼트 를 들어와야 된다.

Myapp이라는 위젯(우리가 직접 만들어야 되는 위젯)을 불러온다.

클래스와 함수명

main(), runApp() -> 함수

첫글자를 소문자 넣는다 대부분 함수는.

클래스는 대부분 문자로 한다.

서로 결합한것을 앞에는 대문자. 카멜

MyApp() -> 위젯 

이 MyApp 위젯은 처음에 앱을 구동할때 뼈대를 만드는 역활만을 할것입니다. 정적인 위젯입니다.

정적인 의미의 StatelessWidget 를 만들어 줬고, MyApp이라는 우리만의 커스텀 클래스를 만들었습니다.

MyApp은 Container라는 것을 나를 호출한것에 넘겨주게 되는데 이것을 바꿔보도록 합시다.

우리가 필요한건 앱을 만들기 위한 머트리얼 기능을 가진 위젯입니다 이것을 가져 옵시다.

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container( ------>>return MaterialApp

    );

  }

}

MaterialApp 위젯도 반드시 아규먼트를 가져야만 합니다.

플로터의 모든 위젯들은 아규먼트를 가진다고 생각하면 됩니다.

앱을 총징하는 앱의 타이틀을 만들어 보도록 합니다.

MaterialApp은 타이틀이라는 문자열을 아규먼트로 가지고 있습니다.

ctrl + s 저장하고 바로 에뮬레이터 나올 수 있다.

오늘도 여기까지.. 서서히 머리가 아파 오는것 같지만

어색함이 익숙함이 될때까지 반복과 노력만 있을 뿐.

2021.04.19 오후 9시50분! 조이코딩연구소 장샘.

ㅇ

1. Flutter doctor로 문제가 없는 확인 해보자.

2. 비쥬얼 스튜디오 코드로 프로젝트를 만들고 에뮬레이터 실행해보기

3. 안드로이드 스튜디오로 프로젝트 만들고 에뮬리터 실행해보기.

<Flutter doctor 확인하기>

Flutter가 정상적으로 동작되는 확인하기 위한 명령어 이다. Flutter doctor.

하지만 android toolchain 문제가 있네요. 친절하게도 해결하기 위해서는 flutter doctor --android-licenses 하라고 나와있습니다.

계속 그냥 Y를 누른다!! 쭈우우우우욱

완료가 되었으면 다시한번 Flutter Doctor를 실행해 본다.

정상적으로 작동하고 문제가 없다고 난온다!! No issues found!!!!!

---------------------------------------------Flutter doctor 확인하기 끝!! ----------------------------------------------------

2. 비쥬얼 스튜디오 코드로 프로젝트를 만들고 에뮬레이터 실행해보기

비쥬얼 스튜디오 코드를 실행하고 view -> command palette를 클릭 한다.

검색창에 Flutter를 클릭하면 프로젝트 생성하는게 나타난다.

프로젝트를 생성하고 에뮬레이터를 실행해 봅니다.

짜잔 에뮬레이터가 실행 된 것을 볼 수 있습니다.. 첫번째 Flutter 실행 화면 이네요.

3. 안드로이드로 플러터 생성하고 실행해보기

안드로이드 에서 New Flutter Project를 클릭하면새로은 프로젝트를 만들 수 있습니다.

이 프로젝트가 바로 우리 화면에 나올 것이죠.

Flutter Application을 클릭하여 Next!!! 과감히 클릭!!

Project Name은 여러분이 만들고 싶어하는 이름을 쓰면 되고요..

플러터 SDK 경로가 설정이 안되어있을겁니다.

여기를 설정해주셔야 됩니다. 플러터 파일 압축 풀었던 경로 아시죠?

저 경로는 사람마다 다르실거에요. 저는 C드라이브 Project폴더에 압축파일을 풀었거든요.

그리고 패키치 네임 입니다. 이것은 모듬 셋트라고 생각하시면 됩니다.

이름도 그냥 두고 그냥 광클릭 Finish!!!

화면 왼쪽에는 파일들을 보여주고. 오른쪽 화면에는 영어로 된 코딩된 글씨가 쫘악!! 나옵니다.

당장은 우리는 바꾸지 않고 에뮬레이터만 실행해 보도록 해요. 위에 3군데 클릭해서 확인해주세요.

1. SDK 빌드.. 어려우시면 그냥 따라서!!

2. 내가 만들어 놓은 핸드폰 에뮬레이터!! 선택해주시고.

3. 플레이 버튼 클릭!!! 했더니!! 화면이 검은색을 나오시나요?

우리 핸드폰에서 뒤로가기 버튼을 한번 눌러주시면 딱 바로 나옵니다!! 

어때요.. 오늘 저도 여러분도 플러터를 처음으로 실행시켜서 에뮬레이터로 본 날입니다!!

어려울겁니다. 당연히 어려운게 맞고요 누군가 만들고 우리가 공부한다는거 쉬운일은 아닙니다.

하지만 공부를 해야 쉬워지겠죠? 저도 차근차근 해볼테니 여러분도 화이팅 해보시죠. 

그럼 이만 조이코딩연구소 장샘. 2021.04.18 - 오후 12시46분

안녕하세요. 조이코딩연구소 장샘입니다.

본격적으로 구글에서 만든 Flutter(플러터)를 공부를 시작해보려고 합니다.

앱을 개발하기 위해서는 OS를 고려해서 해야 되지만 구글에서 만든 Flutter를 이용하면

안드로이드 OS와 애플 iOS에서 모두 구동이 가능한 앱을 만들수가 있습니다.

Flutter를 하기 위해서는 흔히 알고 있는 Java가 아니라 Dart라는 조금은 생소한 언어를 공부해야 합니다.

저 또한 처음 하는 것이라 기대 됩니다.. 어렵겠지만.. 차근차근 만들어보고 

앱도 만들어 보도록 하죠.

일단 음식을 만들때도 음식을 준비하는것이 가장 중요하듯이

코딩을 하기 위한 환경을 만드는것이 가장 중요하겠죠?

1. 안드로이드 스튜디오 설치

2. 비쥬얼 스튜디오 코드 설치

3. Flutter 다운로드 및 환경설정

3가지를 진행해 주시면 됩니다. 구글에서 검색하시면 바로 설치 가능 합니다.

저는 윈도우10 버전으로 시작하고 있고.

안드로이는 버전 4.1.2를 설치하였습니다. Flutter는 2.0이네요~!

안드로이드 설치 후에는 Configuration에서 Plugin -> Flutter를 설치 해주셔야 됩니다.

물론 Dart도 검색해서 설치 해 주시면 됩니다.

비쥬얼 스튜디오에서는 Extension(ctrl+shift+x)에서 Flutter를 설치해주시면 됩니다.

Flutter를 압축을 풀고 bin 폴더로 가신뒤 폴더의 경로를 복사후에 

윈도우 돋보기에서 시스템 환경변수 클릭 -> 환경변수 클릭 -> 시스템 변수 창에서 Path 를 선택 후 편집

거기서 새로 만들기 후 Flutter Bin 폴더의 경로를 넣어 주시면 됩니다.

자 이렇게 기본적인 설정이 완료 되었습니다. 

이렇게 저지르고 나면 매일매일 얼마나 공부하는지 끄적끄적 기록해보려고 합니다.

그럼 우리 모두 생각을 현실화 할 수 있는 능력을 기를때까지..

모두모두 화이팅.

2021.04.17 오후 11시28일 from 조이코딩연구소 장샘.

여러분 안녕~~!

파주 운정 코딩

JoyCodingLab.

(조이코딩연구소)

장샘 입니다^^!

오늘은 Ozobot과 Goole에서 만든 Blockly가

결합된~!!

OzoBlockly를 이용하여 코딩을 해보도록 하죠.

Ozobot(오조봇)의 기본적인 동작인

Line(선)을 따라서 움직이는것이 기본 동작 입니다.

라인트레이서라고 합니다.

거기에 Color Coding 패턴을 통해서

다양한 형태의 움직을 표현할 수 있고

이를 이용해서 아이들에게 문제해결 능력 및 코딩 능력을

자연스럽게 습득할 수 있게 해주는 툴 입니다.

추가적으로 구글에서 Blockly라는 툴이 있습니다.

저희가 잘 알고 있는 스크래치(MIT)와 유사합니다.

OzoBlockly(오조 블록클리)를 이용하여 직접 Ozobot(오조봇)에

코딩을 해서 내가 원하는 동작을 직접 입력 해보겠습니다.

자 그러면 Let's Go!!

Blockly(오조 블록클리) 접속하여 Get Started를 합니다.

기본적으로 Ozobot Coding은

Ozobot Bit와 Ozobot EVO만 지원이 됩니다.

기존의 Ozobot 1.0은 지원을 안합니다.

기존의 Ozobot1.0으로 교육을 하다가

현재 Bit와 EVO로 제가 넘어온 이유기도 합니다.

자 구성이 어떻게 되었는지 보시죠.

OzoBlockly(오조 블록클리)의 초기 화면입니다.

코딩을 하고 싶은 모델이

bit인지 evo인지 선택을 하게끔 되어 있어요.

그 이유는 bit와 evo의 하드웨어적인 센서 구성이 다르기 때문입니다.

자 일단 bit으로 움직여 볼거니 bit를 선택합니다.

그리고 바로 아래 1,2,3,4,5 숫자가 있죠?

OzoBlockly(오조 블록클리)는 다양한 코딩 블럭을 지원합니다.

그중에 단계별로 나눠서 구성해 놨습니다.

Novice(초보!!)는 3개로 구성 되었네요.

Movement : 움직이는 코딩블럭 모음

Light Effects : Ozobot의 LED를 컨트롤 할 수 있는 모음.

Wait : 잠시 대기 할 수 있는 코딩블럭 모음.

2번의 Beginner(시작단계)에는

Loops가 하나 추가 되었네요.

Loops : Ozobot(오조봇)이 반복적으로 움직일 수 있게 해주는 블럭.

3 단계(중간단계)에는 6개로 구성되어 있네요.

Logic과 Line Navigation

Logic : 비교문

Line Navigation : Line을 따라 움직일 때의 행동 정의

4단계는 꽤나 많은 블럭이 있습니다.

Terminate, Math, Variables, Functions

Terminate : 프로그램(코딩)된 오조봇이 끝나면 할 행동들을 정할 수 있습니다.

Math : 수학적인 기능을 쓰는 곳으로, 난수, 짝수, 홀수 등등을 사용할 수 있습니다.

Functions : 기존에 없는 기능 또는 기존에 기능을 조합해서 만든 새로운 블럭을 말합니다!

Variables : 변수죠!! 카트 기억나시나요?!ㅎ

안나시는 분은 또는 모르는 분은

이거 보시면 이해 99% 장담합니다.

http://jangenjoycoding.tistory.com/25

(아니면 어쩔 수 없고요,,면담하시죠)

자 간단하게 Novice(입문과정)에서~

Movement에 다양한 블럭들을 보시죠.

지그재그 모양으로 갈 수도 있고~

내가 얼마나 이동할지에 대한 상수 값도 표시 되어 있네요.

방향도 함께 정의되어 있습니다.

MIT 스크래치와 비교하자면 이동 스크립트와 비슷합니다.

다음으로는 Light Effects 입니다.

미리 정해진 색 패턴으로 Ozobot(오조봇 비트)의 색을

바꿀 수 있습니다.

이거 또한 MIT 스크래치와 비교하자면 형태의 해당되겠네요.

그리고 WAIT 이건 뭐..그냥 기다림이네요.

구지 비교 스크래치와 비교하자면

제어 스크립트의 X초 기다리기와 같은 기능입니다.

자 그러면 간단하게 코딩을 시작해보도록 하죠.

아주 간단하게 9단계로 꾸며봤습니다.

어떤 의미를 가지냐면~~!!

특별한 의미는 없습니다.

다양한 형태로 움직을 보여드리기 위한 구성이니..ㅎㅎ

자 코딩을 끝냈다면

이제 우리가 만든 블럭을 오조봇에게

넣어야 겠죠???

오조봇은 다른 기기 들과 다른 방법으로

명령어를 넣을 수 있습니다.

FLASHING 기법 입니다.

오조봇이 가지고 있는 라인센서(색을 읽는 센서 입니다)

색의 패턴의 변화를 읽어서 오조봇에서 다운로드를 합니다.

순서를 보시면 1,2,3순서대로 하시면 됩니다.

그전에 일단 화면 밝기를 최대한 밝게 해주세요.

하얀색 바탕의 오조봇이 위치해야 되니

하얀색을 기준으로 색의 변화를 감지하기 때문에

하얀색으로 기준을 잡아야 됩니다.

이런것을 Calibration이라고 합니다.

어떠한 특정 기준 점을 잡는다. 라고 생각하시면 되겠네요.

자 오조봇도 다운을 하기 위해서는 2초동안 전원버튼을

꾹~~!! 누르시면 되요.

옷입은 오조봇 비트..

옆에 버튼이 있습니다.

자 그러면 하얀색 LED가 켜지면 준비가 됩니다.

그때 바로!!! 하얀색 바탕의 오조봇 화면으로

고고고고고고!!!

오조봇의 Calibration이 끝난다면

녹색 LED가 들어옵니다.

그리고 버튼을 한번더 누른다음에 Load Bit를 누르시면

우리가 작성한 Coding 블럭들이

마구마구 들어가는걸 보실 수 있습니다.

혹여나 잘 안되시거나 궁금하신 분을 위하여 영상을 준비했습니다.

Ozobot(오조봇) 다운로드 되는 영상

그리고 기본동작

마지막으로 Blocokly를 이용한 코딩 다운로드 후 동작 영상을

함께 보시죠!!!

자 어떠셨나요?

OzoBlockly 어려운거 같으면서도

Coding의 왠만한 기능은 다 배울 수 있는

아주 좋은 Tool 입니다.

직접 가지고 놀 수도 있고 가르쳐 주셔도 좋은 코딩 툴입니다.

유아 코딩, 초딩 코딩, 중딩 코딩까지

모두다 가능형태로 교육이 가능합니다.

왜냐면 단계가 엄청 많기 때문에 교육의 폭도 넓습니다.

다양한 형태로 즐겁고 제대로 된 소프트웨어 코딩 교육을 원하시는 분은

현)파주 운정 조이코딩연구소 장샘에게 맡겨주시면 해결 되겠죠?ㅎ

기존 학원과 비교 하시면 안됩니다 -0-!ㅎ

그럼 이만 JoyCodingLab.(조이코딩연구소)

장샘은 이만 물러갑니다.!!(_ _)

휘리릭!

뿅!!

긴글을 읽어주셨으면 공감 하트 또는 광고 클릭 한번!?ㅎ

여러분 안녕!!

JoyCodinglab.(조이코딩연구소)

장샘 입니다.!!

너무너무너무 바쁜 나머지 오랜만에 올리네요.

이번 시간에는 S4A와 아두이노를 이용하여

LED를 파도처럼 켜보는 걸 해볼겁니다.

자 준비물 확인해 볼까요?

기본적으로 아두이노가 있어야겠죠~~

회로를 꾸밀 수 있는 브레드 보드.

저항과 스위치~

LED 전구 5개!!!

500옴 저항~~~

회로를 꾸밀 케이블들~

위와 같이 준비만 하면 끝!!

아 컴퓨터는 당연히 준비 -0-!! ㅋ

우리는 스위치를 이용해서

스위치를 눌렀을 때 전기가 통하고

그 전기를 받은 LED들을 순차적으로 켜보는 걸 해볼겁니다.

스위치에는 5V전원을 인가시켜주고(아두이노에 핀이 있죠?)

Input(스위치)를 눌렀을 때만 전기가 흐를 수 있는 문을 열어줘서

전기가 쫙~~~~~~~흐르게 해줍니다.

전체 회로도는 이렇게 꾸며봤습니다.

선이 엄청 많죠~~

위에서 찍은 사진입니다.

일단은 아두이노 스케치 툴을 이용하여 코딩해봤습니다.

자 위와 같이 코딩한 다음 아두이노에 다운로드를 하면!!

이렇게 동작되는걸 볼 수 있습니다^^!!

자 어떻게 다들 잘 보셨나요?

쉽고 잼있는 아두이노 코딩이였습니다.

그럼 조이코딩연구소 장샘은

이만 물러 갑니다^^!

휘리리릭

뿅!!

운정 코딩 문의는 조이코딩연구소 장샘에게!

카톡 : jhw2458

(_ _)

여러분 안녕!!!

JoyCodingLab.(조이코딩연구소)

장샘 이에요.!!

드디어 기다리던 Ozobot bit와!!

Ozobot Evo가 제 손에 들어왔습니다.

기존의 Ozobot보다 성능이 뛰어난 bit와

블루투스를 이용하여 핸드폰으로 코딩이 가능한

Ozobot Evo(아직 한국 정식 수입이 안됨)을

입수하였습니다!!

심지어 아이언맨 팩!!!

학새들이 환장할게 훤히 보입니다 -0-!! 좋아하길..ㅋㅋ

Ozobot bit는 Starter pack으로 구했습니다.

빨리 열어보고 싶지만 이것저것

준비할게 너무 많은 관계로 잠시..대기 ㅎ

Ozobot을 잠시 소개 하자면

기본적으로 라인트레이서 기본기능입니다.

라인을 따라 움직이는 작은 로봇이라고 생각하시면 되요.

그리고 다양한 컬러코드를 활용해 코딩을 물리적으로 하여

여러 가지 명령을 적용할 수 있도록 하고

이를 조합해 보다 입체적인 로봇 구동들이 가능합니다.

결정적으로 컬러코드를 인식함으로써 유턴/좌·우회전 등의

방향 전환과 가·감속, 스핀, 지그재그 주행 등의

속도 및 특정 모션을 구현할 수 있습니다.

집에 도착 한 Ozobot은 하얀색으로 구성되어있는

아주 기본적인 색입니다.

박스안에 잘 고정되어 있네요ㅎㅎ

자 다음은 우리의 2017년 라스베가스 CES에서도 나왔던

Ozobot Evo 어벤져스 팩입니다!!!

기존 Ozobot 2.0 bit보다 다양한 센서가 추가 되었습니다.

아이언맨은 오조봇 악세사리 옷이라고 보시면 됩니다.

그런데 누워서 왔네요 -ㅅ-...

블랙이 뭔가 고급스러워 보이네요.

어차피 아이언맨 옷을 입힐거니 기대해주세요!!

오조봇 3.0 Evo는 타블렛이나 핸드폰과 블루투스를 연결하여

다양한 형태의 동작 코딩을 하여 만들어 낼 수 있어요.

기존 수업은 1.0을 가지고 진행하였는데

이제는 다양한 수업형태로 확장이 가능할거 같네요.

3.0 Evo는 눈높이에 맞는 교육자료도 만들 예정이니

다들 기대해 주세요.

자 조이코딩연구소 학생들은 더욱더

조이하게 코딩 할 수 있도록 다양하게 준비하겠습니다.

그럼 이만 (현) 파주 운정 코딩 장샘은

이만 물러 갑니다.

휘리리릭!!!

뿅!!!!

P.S : 협찬이 아닙니다.^^!

여러분 안녕!!^^

Joy Coding Lab.(조이코딩연구소)

장샘 입니다!!!!

자 아두이노와 스크래치의 만남을

다들 마무리 잘 하셨나요?

이제부터 본격적으로 스크래치를 이용하여

아두이노를 가지고 놀아 봅시다.

그 첫번째로

불을 켜볼거에요.

LED를 점등 하는 방법을 배워 보도록 하죠.

<준비물>

아두이노 우노, 브레드보드, 저항, LED, 연결선

저는 아두이노 우노를 준비했어요.

다른걸 가지고 계신 분들도 상관없어요.

거의다 비슷하거든용~

다음은 브레드 보드라는 거에요.

회로를 꾸미기 위해서는

납땜을해야 되는데

브레드 보드를 이용해서 쉽게

부품들을 뽑았다가 끼웠다가 할 수 있어요.

LED는 하나 준비했어요.

제가 써 놓긴 했지만

전기를 이용해서 하는것이기 때문에

+,-가 구분되어 있어요.

다리가 긴놈이!! 플러스(+)~ 기닌깐 플러스겠죠 ㅎㅎ

다리가 짧은 놈이 마이너스(-)입니다.

나중에 브레드 보드에 끼우실 때 잘 구분해서 해야 되요.!

다음은 저항이라는 겁니다.

이건 전기가 너무 많이 흐르지 않게 도와주는거에요.

자 조금더 쉽게 설명 드리자면

물을 뿌리는 수압이 엄청나게 쎄게 부으면 어떻게 될까요?

안경이 날라갔겠죠?

그래서 그 힘을 조절해줘야 다치지 않을 수 있습니다.

저항이라는 건 그 조절해주는 힘이에요.

LED에 너무 많은 전기를 넣어주면

LED가 다칠 수 있으니 그 힘을 조절해주는걸

저항이라는 놈을 이용해서 해줄거에요.ㅎ

자 전기를 넣어주고 브레드 보드와

아두이노를 연결 해줄 연결선!!

전체적인 준비물 입니다.

자 준비가 완료 되었으면

회로도를 실제로 꾸며 볼게요~!!

자자 보시고 한번 구성해 보세요.

아두이노에는 GND 그라운드라는 곳에

하나를 끼워 놓고

디지털 핀 10번에 하나를 꽂아봐요.

그라운선에는 우리가 봤던 LED의

(-)마이너스 쪽으로 연결 시켜줍니다.

자 위에서 봤을 때의 구성이에요.

10번의 디지털 핀은 LED의 (+)입니다.

자 이제 기본적으로 회로를 꾸며봤으니

우리의 S4A를 실행 시켜봅시다~!

아두이노를 컴퓨터에 열결 후

S4A가 실행이 되면

고래 위에 있는 값들이 마구마구 바뀔꺼에요.

저 값이 바뀌지 않고

계속해서 보드 검색 중이라고 뜬다면

제대로 연결이 안되거에요.

그럴경우 의심해볼 수 있는건

1. USB연결이 잘 안되었다던가?

2. 연결 Port 설정이 잘 안됐다던가?

3. 아니면 S4A용 Firmware를 아두이노에

제대로 다운을 안했던가?

잘 안되시는 분들은

설치 1탄 2탄을 차근차근 다시 해보세용^^!

http://jangenjoycoding.tistory.com/49

자 이제 연결이 되었으면

제어의 클릭되었을 때 블럭을

하나 가지고 옵니다.

그리고 우리가 뭘 할거죠?

LED 불을 껏다 켰다 할거잖아요!

동작으로 가보면 디지털 X번 출력 켜짐과

디지털 X번 출력 꺼짐이 보이실거에요.

그걸 가지고 오고 아두이노의 실제 디지털핀을

우리는 10번으로 연결 했으니

10번으로 둘다 바꿔줍니다.

그리고 제어의 무한반복 루프 블럭을 가지고 옵니다.

계속해서 돌면서 껏다 켰다 할거닌깐용.

컴퓨터의 속도는 엄청나게 빠릅니다.

켰다 꺼짐만 반복하면

제대로 못보겠죠?

그래서 기다리는 블럭을 가지고와서

켜졌다가~2초 쉬고 꺼지고 2초 쉬고를

계속 해서 반복하게 만들거에요.

자 블럭들을 모두 꺼냈으니

조합해서 한번 먼들어 보시고.

실행을 해보세요!!!

모든 절차를 동영상으로 만들어 놨으니

잘 보시고 따라해보세요.

자 오늘은 아두이노와 스크래치와 만난후

처음으로 LED를 켜보는 걸 해봤어요.

어린이 코딩에서도 많이 배우는 강의에요.

시작이 반이라도

화이팅 넘치게 포기 하지말고 고고고!!

그리고 아무리 해도 잘 안된다..

영상을 봐도 모르겠다.

스스로의 고민이 시간은 문제 해결을 하기 위해

중요하지만 적절한 순간의 도움은

한단계 발전하는데 도움이 됩니다.

(현)파주 운정 조이 코딩 연구소의

장샘을 찾아주세요!!

그럼 이만 물러갑니다!

휘리리릭!!!

뿅!!

여러분 안녕!!

Joy Coding Lab.(조이코딩연구소)의

장샘 입니다^^.

아두이이노 스크래치 합체!!

너무 쉽다 !(S4A 설치하는 방법) 2탄 시작합니다.

기존의 1탄을 못보시고 

바로 여기로 오신분이라면~!!

http://jangenjoycoding.tistory.com/49

먼저 1탄을 따라 하시고 오셔야 되요.

무시하시고 2탄 보시면..

어차피 실행이 안될테니~꼭!! 따라하고 오세요!

자 지난시간에는 아두이노와 스크래치를 연결해줄

S4A를 설치하였습니다. 

그런데 연결 하셔도 안되죠?

물론 안되는게 당연한겁니다.

왜냐하면 우리가 구매한 아두이노는

마음속으로(chip)에 스크래치와 

결합될 준비가 안되었기 때문이에요.

결혼을 하려고 해서 집을 사놨는데

여자 또는 남자가 결혼할 마음이 없다면

말짱 도로묵 아니겠습니다.ㅎ

그래서 우리의 아두이노 마음속까지

스크래치를 받아 드릴 수 있도록

Firmware를 다운로드 시켜줘야 됩니다.

Firmware 무엇이냐?!

Software 친구라고 생각하시면 됩니다.

쉽게 어떠한 기계같은거? Chip?? 같은거를

컨트롤 할 수 있는걸 Firmware라고 해요.

이정도만 알아가셔도 일단 충분합니다!

자 본론으로 들어가서 

준비가 되셨다면 먼저 아래 주소 부터 접속해봅시다.

https://www.arduino.cc/

영어로 나와도 당황하지 말고!!

Software를 눌러 주세요~~~

마우스 휠로 스크롤을 조금만 내려서

Download the Arduino IDE가 잘 보이게 해주세요.

자 잘 보이시나요?

오른쪽에 보면 Windows 또는 MAC OS

Linux등등이 있는데 

저는 Window를 사용 중이라서 

위와 같은걸 눌러 주세요.

자 그러면 아두이노 IDE를 다운을 할 수 있는 창이 뜨는데요.

2가지 옵션이 나타납니다.

1. 그냥 다운로드 하겠따~!!무료로~~

2. 자체적으로 기부를 하고 다운로드 하겠다.

본인의 결정으로 다운로드 하십시요!! ㅎㅎ

그리고 압축을 푼 후에

Setup을 진행 합시다!!.

우린 일단 Next잖아요~!

설치할 폴더 위치도 설정 하시고요~

Install 설치하는데 시간이 조금 걸립니다. 

중간 중간에 커피포트가 아닌 LLC포트 설치가 떠요.

괜히 안함을 호기심에 누르지 마시고

설치해 주세요!

USB로 아두이노와 연결을 하기에 설치를 해야함!

또 USB 드라이버네요~ 설치!!

통합 USB 드라이버입니다..꼭 설치..

또 설치~!

익숙한 포트가 나왔네요.

다시 한번 설치!

이부분..제PC에서는 시간이 좀 걸렸습니다.

멈춰있는거 같지만 설치 중이니 인내심을 가지고

기다리시면 Completed가 뜰거에요~!

다 되면 Close~!

아두이노 기본 Tool인 스크래치가 실행 됩니다.

우리가 아는 스크래치랑 이름이 같죠?

이건 정말 언어적으로 코딩을 하는 툴입니다.

기본적으로는 이 툴을 가지고 아두이노를 가지고 놀죠~

센서를 컨트롤하고 알고리즘도 구현을 하고요

하지만, 우린 스크래치 블럭형으로 하고 싶은거잖아요.

자 그러면 맨 처음에 이야기 했던

Firmware를 아두이노 마음에 넣어 줘야죠~

그래야 s4a를 사용할테니~~

먼저 아두이노를 연결해주세요.

자 그리고 아두이노에 넣을 파일을 다운받아 봅시다.

http://s4a.cat/

위 사이트로 접속해서 다운로드를 눌러주세요.

Firmware into your arduino에서

Download our firmware from here를 눌러 주세요~!

다운이 안되시는 분이나 오류가 생기시는 분은

S4AFirmware16.ino

여기서 바로 다운로드 해주세요^^

프로그램에서 파일->열기를 해서

다운 받은 S4AFirmware16.ino 파일을 열어 주세요.

자 열리셨습니까??

여기까지 잘 되셨으면 80% 성공!!

먼저 V체크 표시를 해서

스케치를 컴파일 해봅시다~

컴파일이 뭐냐면 간단하게.

우리가 받거나 만든 파일을 실행하기 전에

정상동작 할지 검사한다고 생각하시면 되요.

또는 컴퓨터내에 실행을 하게 언어를 바꿔주는거!

자자 위와 같이 되셨나요? 오류는 없죠?

자 정상적으로 컴파일이 되었으니

->(화살표)진짜 아두이노에 넣어 봅시다.

->(화살표)이게 다운로드를 해주는 버튼 입니다!

자 다운로드가 되면 위와 같이 되었습니다!!

성공 성공 90%!!

자 이제 S4A를실행 시켜주세요.

연결된 아두이노를 찾는 중입니다.

잠시 기다리다 보면~

동그라미 친 부분의 값이 마구마구 변해요.

실제 아두이노의 값들을 읽어서

값들이 변하는 거에요.

<아두이노 S4A 정상 연결 작동 화면>

"아두이노 스크래치 합체!너무 쉽다!!" 2탄

잘 따라 오셨나요?

S4A 설치부터 아두이노 IDE 설치

그리고 컴퓨터에 연결하여

정상작동이 되는지 확인 하는 시간이였습니다.

이제 아두이노와 스크래치를 만나게 했으니

어떤 동작들을 하게 될지

다음 시간부터 알려드릴게요.

자 그럼 조이코딩연구소의

장샘은 이만 물러갑니다!

휘리리릭!!!

뿅!!

설치 오류나 질문은 언제나 환영이다 아니다?

질문을 사랑합니다

See Ya~!!

밑에 동감 하트를 누르는데까지 걸리는 시간은

단 2초면 됩니다!! 화이팅!

여러분 안녕!!

Joy Coding Lab.(조이코딩연구소)의

장샘 입니다^^.

휴..요즘 너무 바쁜 나머지 연재 할

시간이 부족했습니다..ㅠㅠ

자 오늘 같이 배워 볼 것은 바로!!!

"아두이노"(작은 컴퓨터)와

우리가 배운 스크래치를 합체 해볼거에요.

스크래치 + 아두이노 = ???

과연 무엇일까요?

즉, 작은 컴퓨터에 어떠한 기능을 넣는 것을

우리는 "코딩한다"라고 말을 할 수도 있어요.

그럼 컴퓨터에 어떻게 기능을 넣어??

넣는 방법은 아주 여러 방법이 있지만.

우리가 쉽게 할 수 있는 방법이

스크래치를 이용해서 할 수 있답니다.

그 이름이 바로 "S4A"

S4A(Scratch for Arduino)의 약자 입니다.

조금 더 자세히 알려 드리자면..

스크래치에서 오픈 소스 하드웨어 플랫폼인

(오픈 소스 하드웨어는 누구나 프로그래밍이

가능하도록 만든 도구 라고 생각하시면 되요)

그런 아두이노에 코딩이 가능하도록

만든 프로그램입니다.(스크래치와 비슷한거죠)

그리고 S4A는 아두이노와 연결된 여러 센서들과

제어 시스템을 사용할 수 있도록

스크래치와 비슷한 코딩블록을 제공합니다.

위 내용이 어렵다면 아래 정도만

이해하셔도 무방합니다^^!

기존의 스크래치는 컴퓨터에서만

구동되는 프로그램을 만드는 것이라고 하면

S4A라는 것은 스크래치를 이용하여

아두이노(작은 컴퓨터 = H/W(하드웨어)를

제어 할 수 있게 해줍니다.

자 그러면 한번 만나게 해줄까요?

먼저 준비물 부터 확인해 봅시다.

1. 인터넷이 되는 컴퓨터

2. 아두이노(우노 또는 기타 등등.)

That's All!!

준비가 되셨다면 먼저 아래 주소 부터 접속해봅시다.

http://s4a.cat/

영어로 나와도 당황하지 말고!!

다운로드를 눌러 주세요~~~

자 당신의 컴퓨터가 뭐냐.라고 묻네요

일단 저는 윈도우를 사용하기 때문에

윈도우로 설치 해봅니다.

MAC을 사용하시는 분은

바로 밑에 MAC으로 클릭 해주세요~!!

클릭 하시면 압축 파일을 다운받으라고 할거에요.

압축을 푸신 후에 S4A16.EXE 파일을 실행해 주세요.

자 환영합니다! S4A 설치를 위한 거네요.

동의를 안해주시면 설치가 불가 해요!

설치 되는 폴더 경로도 봐주시고 Next!

이름은 그대로 S4A로 Next!

자주 하실거라면 체크를 하는게 좋겠죠?

바탕화면에 아이콘은 만드는게 좋으니^^!

진짜 설치는 이제 부터 시작이네요!

물 한잔 하고 오시죠

시간은 좀 걸리니..ㅎㅎ

바로 끝났네요.

Launch S4A가 클릭 되어있다면

Finish를 누르면 바로 실행이 될거에요.

만약 체크를 안하셨다면

바탕화면에서 S4A 아이콘을 찾아서 클릭!

짜잔!! 드디어 실행이 되었는데..

흠....이상한점 발견??

영어로...되어있네요~!

당황하지 말고 한국어로 고고고!

화면 상단에 보면 지구본을 클릭!

한국어를 찾아 봅시다..

일단 위에는 없으니..

맨 아래 More... 클릭

....Korean이 없죠??

한국어도 안나오고???

혹시 찾으신분은 그냥 눌러주시면 한글로

바뀔거에요~!

하지만 못찾겠다! 하시는분은

아래와 같은 글씨를 찾아 주세요.

저게 한국어 입니다 -0-!!!

글씨가 깨져서 나오는 문제는

이렇게 해결하신 되요~

자 드디어 한글로 나오는거 까지 확인을 했네요!^^

"아두이노 스크래치 합체!너무 쉽다!!" 1탄

잘 따라 오셨나요?

S4A 설치 하는 방법이 너무 쉬우셨나요?

S4A 설치하는게 사실 아무것도 아닐 수도 있지만

처음 접하시는 분들은

이 또한 어려운 일인거 잘 알고 있습니다.

이제 아두이노를 하면 되냐고요?

그렇게 쉽게 둘이 만나지 않네요 ㅎㅎ

일단 만나기 직전 까지는 성공 했고

아두이노에게

Firmware Download를 해줘야 되요..

Firmware Download가 뭐냐고요?

일단 잊어버리시고!!ㅎㅎ

이 또한 쉽게 다음 시간에 알려드릴게요.

자 그럼 조이코딩연구소의

장샘은 이만 물러갑니다!

휘리리릭!!!

뿅!!

설치 오류나 질문은 언제나 환영이다 아니다?

질문을 사랑합니다

See Ya~!!

안녕 여러분!!

Joy Coding Lab.(조이코딩연구소)의 장샘이에용!!^0^

이 연재는 아무것도 모르는...

나는 문과 계열이에요..

저는 인터넷 쇼핑만 할줄 아는데 아이들이 갑자기..코딩 이야기를..

저는 방과후 교사가 되고 싶은데 코딩인지 해딩인지도

잘 몰라요..

이러분들을 위한 자리이니 나는 좀 한다~~

프로그래밍 난 좀 잘한다 하시는 분은

컴퓨터 오른쪽 맨 위를 보시면~~

X

위 버튼을 눌러주세요!!ㅎㅎㅎ

자 그럼 시작해 볼까요 하기 전에

먼저 질문이 있습니다.

여러분은 어떤것이 궁금하셔서 들어오셨나요?

아두이노??

아니면 코딩이 처음이다?

둘다 모르겠지만 궁금하다?

대환영 입니다!!!

코딩이 궁금하신 분이라면

"읽기만 해도 머리속에 쏙쏙! "

"스크래치를 이용한 코딩 큰 흐름잡기"(1편~16편)

http://jangenjoycoding.tistory.com/4

위 내용을 한번 쭉 읽어 보시고 오시면

스크래치 기본 컨셉과 아두이노에 대한 이해가

조금은 더 쉽지 않을까라는

제 생각!!! 시간 되시면 그냥 쭉 읽어봐 주세요^^!

본격적으로 시작해 보도록 하죠.

아두이노 과연 무엇인가~~?

인터넷 검색을 해보면 이렇게 정의가 되어있습니다.

물리적인 세계를 감지하고 제어할 수 있는 인터랙티브 객체들과 디지털 장치를 만들기 위한 도구로,

간단한 마이크로컨트롤러(Microcontroller) 보드를 기반으로

한 오픈 소스 컴퓨팅 플랫폼과 소프트웨어 개발 환경을 말한다.

?

모르겠고 ㅡㅡ~~~~!!!!

아두이노  = 아주 아주 아주 작은 컴퓨터

이렇게만 알아도 충분해요~~

물론 공부를 더 하고 실제 의미를 잘 이해하면 좋겠죠~

하지만 시작하는데 아두이노는 아주아주아주 작은 컴퓨터야.

이렇게만 해도 충분하다라는 거죠~!

자 그러면 우리 컴퓨터를 한번 비교해보죠.

컴퓨터만 있으면 되는건가요?

화면을 볼 수 있는게 필요 하죠?

모니터라는걸 연결 합니다

화면의 커서를 움직 일 수 있도록 뭐가 필요하죠?

마우스라는걸 연결 합니다.

요즘은 잘 안하지만 컴퓨터 채팅이나 방송을 하려면

무엇을 연결하죠? 마이크와 카메라(캠)을 연결하죠?

아두이노라는 놈도 똑같습니다.

작은 컴퓨터에 우리가 원하는

각종 센서 및 구동 부품(모터, 초음파, 적외선 등등)을

연결하여 우리가 창의력을 더해서 새로운 제품을 만들어 볼 수도 있고~

또는

시중에 나와있는 제품을 유사하게 만들어 볼 수 있습니다

예를들어 드론이나 RC 자동차 이런거겠죠?

자 다시 컴퓨터로 돌아가서~~

컴퓨터는 하나의 기계입니다. 즉 우리가 하드웨어라고 말하죠.

마우스는 뭐라고 부르죠?

쥐라고 부르진 않잖아요~ -0-!!

컴퓨터를 사용하기 위한 구성 부품 또는 도구죠?

모니터도 마찬가지고~ 마이크, 카메라도 포함될테구요.

자 저런것들을 구현하기 위해서는 뭐가 필요하다??

우리가 말로만 듣던 소프트웨어라는 놈이 필요한거에요.

그럼 소프트웨어는 어떻게 만드는건데????

뭐 컴퓨터야 쇳덩이나 플라스틱 같은걸로 덮여있으니

저런 재료로 만들겠거니 그리고 뭐 안에 칩같은게 들어가 있겠지만

소프트웨어는???? 뭐 어쩌라는 것인가???

그게 바로 우리가 말하는 스크래치라는 프로그램을 이용하여

아두이노에 구현을 시켜줄 수 있다라는 겁니다.

미국에 놀러갔다고 칩시다~

식당에서 밥을 먹고 나왔는데

앞사람이 우산을 바꿔서 가지고 가는거에요.

그럼 어떻게 해야되요?? 불러야겠죠?

뭐라고??

야!!!!!!!!!!!!!!저기요!!!!!!!

알아들을까요?

Hey!!! 이렇게 해야 겠죠?

아두이노도 마찬가지 입니다.

이놈도 외국인 같은거에요. 그래서 아두이노가 알아 들을 수 있는

(MIT에서 만든코딩이 가능한 프로그램 : 스크래치 2.0)

언어로 이야기(소프트웨어 --> 스크래치)를 해줘야

동작을 한답니다^^!!

자 어떠신가요?? 아두이노가 뭔지 그리고 뭘 어떻게 해야 될지

궁금증이 100중에 1은 해소 되셨나요?

그럼 성공했네요~ 1도 안됐다면

제가 더 분발하겠습니다.( _ _)..

긴글 읽어 주셔서 감사 드리며

Joy Coding Lab.(조이코딩연구소) 장샘은 이만..

물러갑니다!!

휘리리리릭~~~~~~~~

뿅!!!!!

여러분~~~~안녕!!?

Jang Coding Lab. 장스 조이 코딩 샘 이에용!~!(_ _)/!!

스크래치 코딩 큰 흐름잡기 편으로

읽기만 해도 머리속에 넣는 커리큘럼으로 연재를 했었습니다.

마무리 스토리를 정리를 하는게 좋을 거 같아서요!!

자 각각의 스크립트에서 알앙 될것들

다시한번 리스트로 보시겠습니다!!.

1. 동작 : 수련회 조교
2. 형태 : 카멜레온
3. 소리 : 지휘자
4. 펜 : 헨젤과 그레텔의 빵
5. 데이터 : 카트와 내가 살 리스트들.
6. 이벤트 : 나홀로집에
7. 제어 : 놀이동산
8. 관찰 : 스파이
9. 연산 : 키보드
10. 추가블럭 : 선물상자

수련회 조교를 하던 여러분이 갑작스럽게 직업을 바꿉니다.

카멜레온 처럼 색을 바꾸는 것처럼요.

여러가지 소리를 컨트롤하는 지휘가 되었어요.

기쁜 마음으로 소풍을 가기로 했지요.

장을보러 가기 위해 마트를 정하고 카트를 끌고

사야 될 리스트들을 써서 장을 봤어요~

집에는 혼자 살기에 나홀로집으로 돌아갔습니다.

드디어 다음날 놀이동산에 놀러왔어요!!

첫번째 손님이라고 선물상자를 주시네요.

선물상자에는 키보드가 들어가있었네요~

제가 좋아하는 브랜드 스파이꺼네요!!

기쁜마음으로 놀고 집으로 돌아왔습니다^^!

자 이렇게 기존에 배웠던 스크립트들을 연상할 수 있게

스토리로 만들어 봤어요!! 어떤가요?

기존의 글들을 다 읽으신분들이거나

지금 바로 돌아가셔서 쭉 읽어보신다면

스크립트 코딩의 전반적인 내용을 이해 하실 수 있다고

저는 생각합니다.

배웠던 내용들 한번 보시죠~ㅎㅎ

이게 다는 아니지만 이런형태로 교육을 했을 때

초보자들이 훨씬 더 이해력이 높았거든요!!!

스크래치 코딩 큰 흐름잡기 편 - 읽기만 해도 머리속에 쏙쏙 편.

다음 연재는 큰 흐름을 잡았으니

다음은 뭘까요???

당신이 생각하는 그 이상입니다!!ㅎㅎ

그럼 스크래치 연재 카테고리는 다음에 뵈요^^!!

하지만 문의는 언제든지 가능하다 안하다????

가능하다!!!!!

이상 장스 조이 코딩 샘이였습니다!!

휘리릭!

뿅!!

밑에 공감 하트 한번도 안눌렀으면 한번마잉 ㅋㅋ

어렵지 않아요!!! 딸깍!!! 한번!!! 부탁해요!!

여러분!! 안녕~~~!!!

Joy Coding Lab.의 장~~~샘 입니다^^!!

오늘도 몇몇 분들에게 코딩 교육에 대해서 문의가 있었어요.

특히 초등학교 정식 교과목 채택 때문에

확실히 요즘 부모님들의 관심이 서서히 증가 되는거 같네요.

영어와 수학 뿐만 아니라 다른 과목에도

관심이 갖는 모습이 좋은거 같아요!!^^

자 그러면 코딩의 관심과 함께

저희는 코딩 스크래치 머리속에 넣기 마지막편을

시작해야 될거 같아요!!

오늘 같이 머리속에 넣을 스크립트 코딩은!!

추가블럭 입니다!!

추가 블럭 스크립트는 뭐가 있는지 확인해 볼까요?

단!! 2개!!!

이전 스크립트들과 비교하면 현저히 적네요~!!

와!! 할게 없겠다^^!!

-0-!!!

그럴리가 없죠?ㅋㅋㅋㅋ

추가 블럭 과연 무엇인지 짧지만 스토리로 배워 보시죠.

오늘은 우리가 스크래치 코딩 스크립트 공부를

열심히 한 친구에게 선물을 주려고 해요.

선물은 아직 고르지 않았지만

선물을 포장할 박스는 이미 골랐죠.

선물박스는 누가보더라도 같은 박스에요.

하지만 그 안에 무엇을 넣느냐에 따라

내용물이 달라지죠?

여러분이 선물박스에 안에 넣을 것은

이벤트 스크립트 제어의 10번 반복하기와

제일 처음 배웠던 스크립트 동작의 15도 돌기

이 두가지를 선물 할거에요.

선물 박스에 이름도 정했어요.

"돌았니"라고요.

선물은 받은 친구는 분명 이럴게요.

" 고마워 친구야^^ "

이렇게 행복한 선물 증정을 마치면서

우리는 추가 블럭에 대한 내용을 머리속에 넣었네요.

-0-!!! 그렇죠 언제 배웠는지 모르시겠죠?

그게 바로 제 강의!! 포인트 나도 모르게 배웠다? ㅋㅋ

자 비밀은 선물 박스에요.

스크래치2.0의 추가블럭은 선물박스 입니다.

우리가 앞서 배웠던 다양한 스크립들의 내용들을

하나의 선물박스로 만들수가 있는거에요.

선물 박스 이름도 우리가 만들 수 있고요.

즉, 기존 스크래치2.0의 스크립트 블럭들을 사용하지 않고

나만의 블럭을 만들 수 있는거죠.

위와 같이 단순 레고(스크립트 블럭)이 있다면

어느 누군가는 바로

자신만의 스타일인 햄버거를 표현 할 수도 있고요.

어느 누군가는

자시만의 스타일인 잠수함을 만들 수도 있고요.

코딩의 기초의 마지막 단계가 이 추가블럭을 만드는 거라고 생각해요.

프로그래밍 언어에서는 저런걸 함수라고 표현해요.

자신이 원하는 블럭을 얼마나 잘 만드는지?

문제 해결을 위해서 시간을 어떻게 단축 시킬지?

어떤 조합으로 만들 것인지? 등등

실제 얼마나 쉽게 만들 수 있는지 확인해 볼까요?

먼저 추가 블럭에 들어가셔서

우리의 선물박스의 이름을 적어주세요!!

저는 돌았니? 라고 할거에요.

이상한 생각안하시죠? ㅋㅋㅋ 돌았니?

이건 회전했니? 이거랑 같은 의미에요!!

자 추가 블럭의 돌았니?가 하나 생성되었습니다.

정의하기 돌았니? 라고 되어있죠?

저 뜻은 돌았니?의 정의를 아래에 코딩 블럭으로

꾸며달라는 소리에요.

자 제어 스크립트의 10번 반복학기 블럭을

돌았니? 블럭에 붙여 봅니다.

자 다음으로는 동작 스크립트로 넘어가서!!

15도 돌기를 10번 반복하기 안에다가

넣어 봅니다!

자 언제 돌았니를 실행할건가요?

키보드의 스페이스바를 누르면 실행되게 하고 싶어요.

그래서 이벤트 스크립트의 스페이스 키를 눌렀을 때

블럭을 가지고 옵니다.

자 우리가 스페이스 키를 눌렀을 때 뭘 하고 싶었죠?

우리의 선물 박스를 실행하고 싶었잖아요~

추가 블럭 스크립트로 가시면

우리가 만든 돌았니?블럭을

스페이스 키를 눌렀을 때에 붙여 줍니다.

자 That's all.

End.

다 하신거에요.

이제 뭘 해보면 되죠?

스페이스바를 마구마구 눌러보면 되겠죠? ㅎㅎ

자 마구마구 고양이 돌아버립니다~

중간에 저는 도는 방향을 바꿔서 해보기도 합니다.

즉 오늘의 Key Point는 바로

추가블럭은 = 선물상자

이것만 기억하세요!!

자 어떠세요?

생각보다 쉬우신가요? 아니면 아직 어려우신가요?

쉽다면 이 어려운걸 여러분이 이해 하신거에요.

아직 어려우시다면!! 이게 그만큼 어려운거에요! ㅎㅎ

쉬우신분은 더 깊은내용을~

어려우신 분은 이해할 수 있게

Joy Coding Lab.의 장샘을 찾아주세요 ㅋㅋ

자 길다면 길고 짧다면 짭은 스토리로

전반적인 코딩 스크립트를 머리속에 넣는 연재가 끝났어요.

다음 연재는 어떤걸로 돌아올지 기대해 주시고요.

Joy Coding Lab.의 장스 조이 코딩 샘 이였습니다.

자네 마지막까지 저 밑에 보이는

하트 한번 안눌러 주겠는가?

아무도...답변을 안해주니.. 서러움..ㅠㅠ

ㅋㅋㅋㅋ 그럼 진짜 물러 갑니다.

휘리릭!!!!

뿅!!

여러분 안녕~~!!

Joy Coding Lab.의 장샘이에요^^

스크래치 코딩 연재 잘 따라고 오고 계시나요??~!!

최대한 쉽게 코딩이 무엇인지 가르쳐 드리고 있습니다.

어린아이부터 비전공자 그리고 코딩 강사가 되고 싶은

분들에게 도움이 되길 바랍니다.

저 또한 코딩 스타터들에게 어떤 교육의 방법으로 가르쳐 드려야

쉽게 이해 할 수 있는지 논리 향상은 어떻게 시켜 드릴지

고민을 많이 하고 있어요.

Joy Coding Lab.의 추구하는 목표이기도 하고요~!

자 이번시간에 배울 내용은 연산 스크립트 입니다.

연산 스크립트 코딩까지만 하면

이제 거의다 끝나는거에요!!!

그러면 연산 스크립트의 코딩 블럭이

몇개나 있는 한번 봐 볼까요?

17가지나 있네요!!!

그런데 딱 보더라도 더하기, 뺄쌤,곱하기~~등등

우리가 코딩과 상관없이 알고 있는 사칙연산들이네요~

그래도 우리는 스토리로 만들어

 큰 그림을 만들어 갑시다!!!

오늘은 여러분은 컴퓨터 키보드가 되세요 -0-~!

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그냥..그려려니 하고 읽으세요 -0-!!ㅋㅋ

키보드에는 숫자와 한글 영어가 있어요.

무엇인가 계산(연산)을 할 때 숫자를 이용해서

1. 덧셈, 뺄셈, 곱하기, 나누기, 제곱근(2^²)을 할 수 있어요.

2. 자 눈을 감고 1~9까지 숫자 중에 아무거나 눌러보세요.

(난수라고 합니다. Random Value)

3. 한글과 영어를 조합해서 결합 할 수 도 있고요.

4. 그 글씨가 몇개인지 세어 볼 수 도 있어요.

5. 그리고 흠 또는?? 에이 이렇게 스토리하는건 아니다~!

이런것도 들어 있네요!!

끝 -0-...;;

...여기까지만 하고 마무리를..

알아요...사칙연산은 스토리로

특별히 만들게 없는거 같아요. ㅠㅠ

일단 정리를 그래도 해보죠.

연산이라는 스크립트의 코딩 블럭들은

고양이와 또 다른 스프라이트에게서

필요한 숫자들을 연산 할 수 있는 곳이에요.

고양이가 3+4가 뭔지 말을 할 수도 있고요.

나눗셈을 해줄 수도 있고요.

고양이와 다른 스프라이트들의 말하는 걸 결합할 수도 있고요.

자 오늘의 Key Point!!!

연산 = 키보드

나중에 예제를 통해서 다시한번 해야 될거 같네요~~ㅎ

그럼 오늘은 이만 물러가겠습니다!!

라고 할 줄 알았죠??!!!

자 실제로 연산을 어떻게 사용 되는지

가르쳐 드려야 속이 풀리겠네요!!

무엇을 이용할 거냐???

연산 스크립트의 난수라는 코딩 블럭을 사용해서

덧셈을 해볼거에요.

위에서 보셨듯이 난수란 랜덤으로 나오는 숫자를 말해요

1~10 중에 우리도 모르는 숫자가

선택이 되는거에요!!!

1) 일단 O + O 코딩블럭을 무대에 옮겨주세요.

2) 그리고 난수발생기!! 블럭을 2개를 가지고 옵니다.

3) O+O 동그라미 안에 숫자를 직접 쓰셔도 되지만

난수 코딩블럭 하나씩 넣으셔도 되요~!.

자 + O 이부분이 반짝이죠?

블럭과 블럭이 결합이 되는거에요!!

그리고 나서 난수 + 난수를 덧셈을 해서

우리의 고양이 스프라이트가 말하게 하고 싶어요

어디서 뭘 가지고 와야 되죠??

카멜레온의 살려주세요!! 기억 나시죠??!!

형태 = 카멜레온!!

4) 형태에서 2초동안 말하기 코딩 블럭을 무대로 가지고 오세요!

정말 기초적이지만 모르시는 분들이 생각보다 많아요.

코딩 블럭과 블럭의 결합은 블럭의 맨 앞머리!!

앞 머리를 옮기셔야 같이 결합이 됩니다.

앞머리로 옮기니 반짝이면서 결합을 받아 드리죠??!!!

자 드디어 1~10까지 난수 + 1 ~ 10까지 난수를

고양이가 말하게 할거에요.

실행방법은 우리가 만들어 놓은 코딩 블럭을

마우스로 마구마구 클릭하면!!

우리 고양이가 2초동안 말 할거에요.

저는 "13"이라고 말하지만 다시 누르면

계속 바뀌겠죠? 왜??

1~10까지 난수는 누를때 마다 바뀌닌깐~~

자 연산 어떻게 사용되는지 아시겠죠???

산술 개념도 들어가서 어린아이들에게는

많은 도움이 될거 같아요~!!

그럼 정말 장스 조이 코딩샘은

휘리리릭!!

뿅!!!!

여러분의 하트가 저에게 힘을 줍니다!! ㅎㅎ

여러분 안녕!!!

Joy Coding Lab.의 장샘 입니다^^!!

오늘은 관찰 스크립트 코딩 블럭을 배워 볼거에요.

사실 한국말로 관찰이라고 되어있긴 하지만..

스크래치 2.0 언어를 English로 바꾸면

관찰 -> Sensing 이라고 되어있어요!

둘다 맞는 말이긴 하지만 관찰이라고 부르는게

더 적절할 수 도 있겠네요.

관찰 뭔가 유심히 지켜보겠다 이거겠죠?

Sensing? 뭔가 감지되는건가??

이정도만 일단 이해하고 우리는

뇌에 쏙쏙 넣는 스토리를 읽어 봐야죠~~!!!

먼저 관찰 스크립트는 상당히 많아요~

20가지나 된답니다~~!

이 스크립트 또한 상당히 중요한 내용들이 많아요~!

잘 지켜봐주세요!

자 관찰 스크립트의 스토리 주인공은

바로바로바로!!!

작전명 스파이 입니다!!!

여러분은 이제 스파이가 되셨습니다!

자 적진에 침투해서 악당들이 어떤 일을 하는지 지켜봐야 되고

여러가지 미션들이 있으니 잘 수행하시기 바랍니다.

악당 조직안에는 닉네임 쥐라는 스프라이트가 있습니다.

1. 그 쥐가 경찰에 접촉(닿았는지)했는지? 확인해 봅니다.

종종... 그 쥐라는 놈은

조직에서 보물이 들어있다는 가방들을 만지기도 하는데요.

2. 빨강색, 보라색, 노랑색 가방을 접촉 했는지? 확인해 봅니다.

3. 여러분이 그 쥐까지의 거리가 얼마나 되는지도 확인하시면서

들키지 않게 조심하셔야 됩니다.

그 쥐라는 놈이 다가옵니다.

4. 그 쥐는 항상 돈 좀 있냐라고 묻고 기다리는데요..

5. 저는 항상 그럴때 엉뚱한 대답을 합니다.

내 엄지손가락 눌러봐 라고 합니다.

잠깐!!! 드디어 쥐가 경찰과 접촉을 하려고 하는거 같습니다.

6. 우리의 접촉 무대에 비디오를 켜고

비디오의 투명도를 잘 보이게 바꾸고

음량을 키워 놓고 몰래 듣습니다.

7. 이 녀석들이 얼마나 이야기를 하는지 보고를 해야되니..

타이머로 시간을 재봅니다..1초..2초..60분...

다리 아프게...그만좀 이야기 하지..

8. 잠깐 갑자기 쥐의 친구 다른 스프라이트의 위치가 발견됩니다.

그녀석도 저 방을 들어갔을 때 녹화를 해야겠어요!!

자 모든 임무를 해내셨으니 관찰 스프라이트는 끝이 났네요^^!!!!

자자 글들을 잘 읽어보시고 이제 스크래치2.0을 실행 후

관찰 스크립트 안에 있는 20가지의 코딩 블럭들을 보셔요!

관찰 스프라이트는 어떻게 보면 우리가 앞서 배웠던

이벤트의 한 종류라고 보셔도 될거 같아요.

관찰은 주로 뭔가에 닿았느냐!!!

스프라이트의 위치는?!!!

그리고 중요한 키보드에 있는 무언가를 눌렀느냐?!!

(스페이스바!? 화살표 위 아래? 숫자? 등등)

(이 부분은 향후 스프라이트 이동할 때 중요하게 사용되요)!!

자 오늘도 Key Point로 마무리 해볼까요.

관찰은 뭐다???!!

관찰 = 스파이

긴 글 읽으시느라 고생하셨고,

어렵지만 알면 알수록 잼있는 코딩!!!

이라고 생각하고 꾸준히 저와 함께 끝까지 고고고!!!

그리고 이제 스크래치2.0 코딩의 큰 그림은 거의 다 배워가고 계세요!!

그럼 이만 장스 조이 코딩 샘은 물러갑니다.

코딩 교육과 컴퓨터 관련된 문의는

언제든지 환영인거 아시죠!!?

그럼 휘리리릭!!!

뿅!!!!

밑에 아주 작은 하트가 보일꺼에요.

♡ 하트 안이 비워져 있는 하트를 눌러 주시면

이렇게 변하게 도와주세요^^!!!

여러분 안녕!!!

조이 코딩 연구소의 장샘 입니다~!!

여기저기서~ 코딩과 아두이노 강의를 연재 요청 하시는분들이 너무 많아서^^!!

라기 보다는 ㅡㅡ...

우리 학생들과 여러분들 위해서 연재를 시작해봅니다!!

많은 기대 해주세요~!

자 바로..주문을 했지요!! 바로바로

"아두이노 우노 R3 스타터킷(UNO R3 Starter kit)"

이 글을 읽으시는 분들이라면 아두이노가 뭔지는 알고 오신 분이겠죠?

그래도 Joy Coding Lab.은 쌩쌩쌩 초보들을 우대 하는 곳이니

다음편에서 아두이노 뭔지 부터 시작 하겠습니다^^!

일단 개봉을 해보죠~

우와!!! 바로 보이시는거 보이나요? 파일함 무료 이용권 -0-;;

항상 택배를 시키면 다운로드 쿠폰을 주시네요~

그다지..필요 없으니 Pass!

짜잔 직류전원 장치라는 것과 뽁뽁이를 쌓여있는 박스가 있네요.

직류 전원 장치의 박스 상태는 별로 좋지는 않네요 -ㅅ-...;

다운로드 쿠폰은 정말 엄청 주셨네요.

박스 겉에 바늘 같은게 달려있네요??

바늘이 아니라 "저항" 이라는 거에요.

나중에 어떤 역할을 하는지 알게 되실거에요!!

자 뜯어 봅시다!!!

오호!!!!!!

뭔가 너무 좋아 보여!!ㅠㅠ!!!

뚜겅을 열어보니 Start Kit이라 그런지 다양한 부품들이 가득 합니다!

우리의 주인공 아두이노 kit도 보이고요~

자 대략 펼쳐 보면 이정도???

브레드 보드라는 빵보드라고도 부르죠.

우리 공대가면 1학년때 사용하는 빵보드~!!

저곳에 회로를 쉽게 꾸미기 위한 간이 보드입니다!

나타났네요. 주인공 아두이노 UNO!!!!

이녀석은 작은 컴퓨터에요.

아주 저렴한 컴퓨터!! 그렇게 생각하시면 끝.

자세한 내용은 다음연재에서 ㅎㅎ

이녀석은 아두이노 Proto shield라는 놈입니다~

요녁석은 보드와 보드를 결합하여 여러가지 기능적 모듈들을 연결하는..뭐 그냥 일단 Pass..ㅎㅎ

컴퓨터와 연결하는 케이블도 있구용~

박스 상태가 마음에 들지 않았지만..

우리의 아두이노 전원을 넣어 주는 녀석이니..

어답타도 잘 들어있네요!

초음파 센서랑

ㅣ

Dot matrix 튜브도 있고요~

이건 LCD스크린이에요~!!

만약 구매 하신다면 업체 옵션중에 저 납땜부분을 꼭 추가해서 해주세요.

집에서 하면 납 냄새가 너무 많이 나고 잘 안될수도 있으니!!

이건 적외선 리모콘~~

모터도 들어있고요~ 선풍기도 만들 수 있을거 같고 자동차 바퀴를 만들 수도 있고~

마지막으로 어답터 정보를 저장해 봅니다.

쉽게 고장나는 부품이기도 하닌깐용^^

kC마크가 있는 확인을 해야죠?

정식 인증 받지 못한 너무 저렴한 제품(중국산?) 을 사용하다가

불이 날 수도 있으니 꼭 인증 받은 제품 사기 OK????

자 아두이노 우노 R3 스타터킷을 개봉해봤는데요.

실제 내용물이 뭐가 들었는지 나열해 볼게요.

1. 케이스

2. 아두이노 우노 R3

3. USB 케이블

4. 30 Jumper wires

5. 830 Point BreadBoard

6. 15xled(Red, Green, Yellow)

7. 각종 저항들

8. 가변저항

9. 능동부저

10. 피에조스피커

11. 쉬프트레지스터

12. 적외선 수신기

13. 온도센서

14. 불꽃감지센서

15. 볼 스위치

16. 광센서

17. 버튼 스위치

18. 적외선 리모콘

19. one digital tube

20. four digital tube

21. 8*8 dot matrix tube

22. RGB three color module

23. six 5th battery box

24. 9V 베터리 소켓

자 이렇게 총 24가지로 구성되어 있습니다.

자 과연 이것으로 어떻게 즐겁게 코딩하면서 놀지 지켜 봐주시고요.

함께 놀아주실 거죠?

다음 연재도 기대해 주시고요!!

그럼 이만 장스 조이 코딩 샘은 이만 물러갑니다.

휘리리릭!

뿅!!

여러분의 하트클릭은 항상 감사할 뿐입니다!!

여러분 안녕~~!!

조이 코딩 연구소의 장샘이에요~!

코딩 , 스크래치 관심들이 서서히 많이 지는거 같아요~

방문 해주시는 분들도 많이 지고~

아주아주 좋습니다!!ㅎㅎㅎㅎ

우리나라 소프트웨어의 관심이 많아 질수록

세계적인 IT 업체가 곧 나오지 않을까 싶습니다~!

오늘 머리속에 넣을 스크립트 코딩 블럭은~!!

"제어"

글자만 보더라도 뭔가 제어를 하겠구나 싶죠?

제어 스크립트에는 11가지의 코딩 블럭이 들어있어요^^!

자 머리 속에 넣어 봐야겠죠?~

오늘도 제어를 대체할 스토리를 준비해왔습니다.

바로바로바로!!!!

"놀이동산"

자 그럼 놀이동산으로 떠나 볼까요~~!

오늘은 문을 열자마자 바로 들어가려고 새벽부터 준비하고 갔어요!!

그런데 차가 막혀서 결국 개장시간을 넘겨버렸네요.

그럼...뭐하죠?

1. 줄서서 기다려야죠 ㅡㅡ!!!

자자자 드디어 표를 사서 제가 좋아하는

바이킹으로 도착했습니다!!!

와!! 여기도 사람이 많네요 -ㅅ-;;

푯말이 하나 서있는데 여기서부터..

2. 60분까지 기다려림.....이라고 있네요~

그래서... 사람들이 안타는 놀이기구로 갔더니 바로!! 탔어요^^!!

사람이 계속 없길래..

3. 10번 정도 반복해서 탔죠

그런데 어디선가 웅성웅성 소리가 났어요~~

이벤트를 한다구 합니다!!!

4. 만약에 이벤트에 당첨이 된다면 줄 안서도 되는 바로 탑승권을 드립니다!!

우와!!! 제가 이벤트에 당첨이 되서 더이상 기다리지 않아도 됩니다 ㅎㅎ

스피드한 88?? 빙글빙글 도는

5. 열차를 무제한으로 탔어요!!

다 타고 돌아다는 던 중~~

놀이동산이 정전이 되는 바람에 모든 놀이기구가

6. 모두 멈췄어요

놀이동산에서 보상을 해준다고~!

음료 쿠폰을 나눠주는데~

하필 제앞에서 쿠폰이 떨어진거에요 ㅠㅠ..

7. 결국 관계자가 쿠폰을 복제를 해줘서 나머지 사람들에게 나눠줬어요!

이렇게 오늘도 억지스럽지만 제어 스토리를 마무리 하게 되었네요~~!^^

자 글씨 찐하게 되어있는 부분 보이시죠??

저 부분이 실제 제어 코딩 블럭에서 사용되는 거에요.

제어 코딩 블럭은 스프라이트를 기다리게 하거나~

잠깐 스프라이트??? 스크래치의 고양이 그런것들이 스프라이트죠?!!ㅎ

그리고 어떤 행동을 반복하거나~~

만약 고양이가 어떤 행동을 한다면 또는 안한다면~~!!

마지막으로 자기 자신을 복제 하거나!(쿠폰 기억하세요)

자자 제어 스크립트에서 어떤 일이 벌어지는 이해가 되시나요??ㅎㅎ

자 Key Point 정리 해보시죠!!

제어 스크립트는 뭐라고??

" 놀이 동산 이다"

오늘드 긴글 읽으시느라 고생 많으셨습니다.

이제 기본 스크립트의 큰 흐름은 딱 3가지만 남겨두고 있네요.

관찰, 연산 그리고 추가블럭~!!!

끝까지 스크래치 2.0 연재 잘 봐주시고~~

오늘도 행복하세요~!!

이만 장스 조이 코딩 샘은 물러갑니다.

휘리리리리릭!!

뿅!!

잊지말구!!! 밑에 하트 누르기!!!

여러분 안녕~!!!

조이 코딩 연구소에 장샘 입니다!!

오늘도 오전 오후에..일들이 많아서 핸드폰으로 자격증 소식을 전했어요~

코딩 자격증에 관심 있으신 우리 교사 또는 학생들은 꼭 보세요.

!!!

http://jangenjoycoding.tistory.com/26

자 드디어 스크립트 코딩 블럭을 반이나 강의를 했어요. 

잘 따라오고 있으시죠???

오늘 머리속에 넣어 볼 스크립트 코딩 블럭은 이벤트!!! 입니다.

이벤트??!!!

1+1 이런 이벤트?!!!! 생각나세요?? 

아니면!! 

당신의 잊지 못할 프로포즈 이벤트!!????

흠.. 뭐 그럴 수도 있지만.

정확한 의미는 약간 달라요..ㅎㅎㅎ

자 먼저 아주 살짝 이벤트 스크립트 구성이 어떻게 되어있는지

살펴 보시죠.

오호..총 8개로 되어있네요.

그것만 보시고 끝.

각각의 코딩블럭들을 자세히 보기전에 우리가 해야 될 일이 있잖아요.

스토리~~~

이벤트에 관련된 스토리의 주제는 바로바로!!!

바로바로바로바로!! 두구두구두구!!!

나홀로 집에 입니다!!

명절 및 방학특선으로 우리에게 즐거움을 줬던 케빈!!

나홀로 집에 한편만 보시면 이벤트 스크립트는 끝!!

자자 기억을 되감으며...

가족들이 여행을 간 사이 홀로 남게 된 케빈.

혼자 있는 집에 도둑 2명이 집안에 들어오려고 합니다.

그래서 케빈은 머리를 쓰기 시작했죠.

무엇을 했죠?

함정을 만들어 놓기로 했죠.

첫번째!! 현관문이 열리면 손잡이가 당겨지고

불이 나온다!!!!

결국...휘발류가 가득한 변기에 머리를 넣어서..

폭팔..ㅠㅠ..

계단에 끈적이를 발라 놓고

다른 문으로 들어올 때 

쇳덩이가 떨어지게 해라!!! 

아프겠네요 -0-;!!

마지막으로!!!!

전기가 연결된 손잡이를 잡으면

이제 게임 끝!!!!

케빈이 이겼네요~~~~~

어때요? 대충 감이 오세요?~~ 지금쯤이면 감이 좀 와야 될텐데!!!

뭐 안오면 다시 설명 해야죠 뭐 ㅋㅋㅋ

자 이벤트라는건 어떤 행동을 했을 때 

그 다음에 취해야 될 행동들을 정하는 거에요.

여러분 컨닝 아시죠?? 

의자 밑에 앞발로 2번 치고 그 앞 친구가 발로 차주는 숫자가

그 문제에 답이라는 거!! 

어떤 이벤트를 만든거죠?

1. 내가 친구 발을 차는건 정답을 알려달라는 의미

2. 친구가 내 발을 차는 횟수가 그 문제 정답

하지만 둘다 틀린다는게 함정!!!

컨닝은 좋은게 아니에요~~ 아셨죠?ㅎㅎㅎ

나쁜 컨니으로 우리는 2가지이벤트를 정의 해봤네요.

실제 스크래치 2.0의 이벤트들의 코딩 블럭들을 읽어보세요.

간단히 봐 볼까요? 

뭔가를 클릭 했을 때, 눌렀을 때, 바뀌었을 때

뭔가를 받았을 때

이제 이해가 되시죠???

그런데 말입니다...!!!!

방송하기 ㅡㅡ?????????????????????

저건 도대체 무엇이냐~~~~ 

아웅 멀리 아퍼....

이게 은근 개념을 잡으시는데 어려움을 겪으시더라고요~~!!

이것도 확실히 머리속에 넣어보시죠~!

방송이란???? "말하는거다."

또 다른 표현으로는 다른 기능들을 하는것에 대한 명령이다.

즉..여러분 엄마라고 가정해 보세요.

아이들이 3명이 있는 어머니 이십니다..먼저 대단하시네요.

아이들 중 한명은 놀고, 한명은 티비 보고, 한명은 공부할때

엄마가..방송하는거죠(엄마가 말하는거죠)

집중!!!! 다들 멈춰!!!!! 밥 다됐으니 밥먹으로 와!!

그럼 아이들3명이 모두 반응(이벤트)하는거죠.

왜????

엄마말 씹으면 엄청 혼나닌깐~~(_ _ )( _ _) .

<다소 거친 표현은 이해를 돕기 위함이니..양해 부탁드려요>

Key Point 정리하고 마무리 하시죠.

이벤트는 나홀로 집이다.!

또는 친구와의 컨닝이다!!!

자 오늘도 이렇은 스크립트 이벤트에 대해서 

머리속에 넣어보는 시간을 가져봤어요.!

이해가 90% 됐을 거라 저는 믿어요.

나머지 안된 10%로는 따로 면담 아시죠? ㅋㅋㅋ

책임지고 100% 이해 시켜 드립니다!! 연락 주세요.!

그럼 오늘도 이만 장스 조이 코딩 샘은 물러 갑니다.

휘리리릭~~~~

잠깐!!!

밑에 하트 눌렀어요? 안눌렀어요? 

전 하트를 먹고 사는사람인데 누르기 없기 있기? !!

^^!! 감사힙니다. 휘리릭 뿅!!

여러분 안녕~!!

조이 코딩 연구소의 장샘 입니다~

오늘도 이해하기 쉽고 머리속에 쏙쏙 들어오는

스크래치 강좌를 준비해 왔습니다.

기대 반 의심반~~ㅎㅎ

이번시간에 머리속에 넣을 내용은 바로바로~~~

데이터 스크립트 입니다.!!

데이터 스크립트는 단 2개밖에 없어요~

2개밖에 없으니 먼저 보고 갈까요?

1. 변수 만들기

2. 리스트 만들기

변수.....더러운 수....

아아...아닙니다..

변할 수 있는 수 입니다~ 뭐 일단 그려려니 하고 넘어가죠.

리스트는~ 뭔 리스트 겠죠~ 자세히 볼 것도 없네요.

머리속에 넣는 스토리를 읽어봐야 의미를 알 수 있을거 같네요~

자자 스토리 속으로 고고고!!!

오늘은 여러분 마트에 장을 보러간 사람이 되시는 거에요.

이마트, 롯데마트, 홈플러스, 코스트코 어느마트로 갈지 먼저 결정하고!!

일단 마트를 가면 제일 먼저 하는게 뭐죠?

당연히 먹는거 부터!!!!

마트 오는거 조차도 너무 힘든일이니..ㅋㅋ

흠..뭐 항상 저도 사먹고 싶긴 하지만

그전에~!!!

100원을 가지고 카트를 빼야겠죠~~~

왜!!!? 허리가 아퍼서 끌고 다니면 편하닌깐~ㅋ

아니라~~사고 싶은걸 담아야 되니 카트를 꺼내는거죠~?ㅎ

자 우리의 핵심 키워드가 나왔습니다.

카트~~~~!!! 기억하시면서~!

카트에는 다양한걸 담을 수가 있어요~

우리 아이가 탈 수도 있고 -0-;;;;

어른은 절대 타시면 안되요!

장난감, 컴퓨터, 냉장고, 핸드폰..먹을거 등등

자 저렇게 원하는걸 다 산다면 얼마나 행복하겠어요~

우린 돈을 아끼기 위해서 그래서 장보기 리스트를 만들기로 합니다.

리스트에는 결국 장난감, 컴퓨터, 냉장고, 핸드폰을 사기로 결정했네요.ㅋㅋ

자 또 다시 핵심 키워드가 나왔습니다.

장보기 리스트!!

자 장보기 리스트를 다 정했으니 카트안에다가 넣어야 겠죠?

처음으로 살것은 장난감 몇개?

시험성적..1등 했으니 1개만 사도록...후훗.

자 다음으로 컴퓨터는 아빠가 필요하다고 했으니 0개.

window 쇼핑만 하시라구용~ 메롱~~!!

냉장고는 엄마가 필요하다고 했으니 810리터 1개

핸드폰은 가족 모두 바꾸죠~3개로~!!!

우리 리스트에서 실제 빠진게 뭐였죠?

아빠의 컴퓨터였죠? 그러면 리스트에서 삭제!!

데이터 스크립트를 다 배우셨습니다.

아닌거 같다고요? 한번 스크래치 화면으로 보시죠.

스크래치 2.0을 실행 시켜 주시고요

데이터 스크립트를 클릭하여 주세요.

변수 만들기와, 리스트만들기를 보실 수 있을 거에요.

1. 변수 만들기를 클릭

2. 변수 이름에 저는 이마트 카트, 롯데마트 카트,,4개를 추가했어요

여기에 몇개를 살지 숫자로 담을 거에요.

다음으로는~~!! 리스트 만들기

리스트 만들기는 오늘 살 목록을 만들거에요.

데이터 스크립트 블럭 -> 변수 만들기 또는 리스트 만들기를 누르면 각 항목에 해당되는

코딩 블럭들이 생성이 됩니다.

우리가 위에서 스토리를 만들었던 내용을 잘 기억하고 아래 내용을 봐주세요~!

리스트 만들기에서 오늘 살 목록의 리스트를 만들면

아래의 블럭 코딩에서 리스트를 추가 할 수가 있어요.

조금 헷갈리시나요? 그냥 연습장 종이 리스트에 우리가 살 것을 적은다고 생각하시면 되요.

추가를 하면 왼쪽 하면에 오늘 살 목록으로 4가지가 보이실 거에요.

하지만..우리가 못산게 있었죠? 아빠의 컴퓨터!!! 엄마의 허락을 못받았으니.. 리스트에서 삭제를 해보죠.

리스트 만들기 아래에 있는 코딩 블럭 중에 삭제하기가 있어요.

앞에 있는 "2"라는 숫자는 리스트에서 몇번째를 삭제할 것인지를 써주는 거에요.

그런데 "2"라는 화살표를 누르면 "2"가 안보일 수도 있어요.

그럴땐 직접 "2"라고 입력해주면 되요^^!

그리고 해당 블럭을 클릭하면 오늘 살 목록의 아빠의 컴퓨터가!!!

완전 삭제된 것을 알 수 있을거에요.

자 어떤가요?

데이터 스크립트의 큰 그림은 그려지시나요?

오늘의 Key Point 정리해 보시죠!~~!!

데이터 스크립트 = 카트 와 내가 살 리스트다!!!

1. 변수는 내가 원하는 카트를 만든다

2. 실제 거기에 뭘 담을지는 향후 우리가 결정한다.

3. 리스트는 내가 원하는걸 작성 하고 지울 수도 있다.

오늘은 단순한 스토리만 작성하지 않고 스크래치와 매칭시켜 설명을 조금 더 해봤어요.

사실 이부분은 나중에 하려고 했는데

데이터 스크립트는 코딩을 배우시는데 상당히 중요한 부분이라

머리속에 넣는 스토리와 함께 조금이라도 설명을 해드리는게 좋을 거라고 생각 했습니다.

향후 스스로 새로운 프로그램을 만들거나 문제 해결을 위하여

자주 그리고 잘 사용해야 되는 스크립트니~

잘 기억해 두세요. 뭘? 카트와 살 목록~!

자 오늘도 늦은 밤...아니 새벽1시네요.

그럼 조이 코딩 연구소의 장샘은 이만 물러 갑니다^^!!

아래에 있는 하트♡의 클릭은 제 마음도 뛰게 합니다.!!!!

휘리리리리릭!!!!!!!!

뿅!!!!!

여러분 안녕!!!

조이 코딩 연구소의 장샘 입니다!

오늘은 펜 코딩 블럭을 스토리로 배워 볼거에요.

뭘 배운다고?!!!

"스크래치 2.0 펜  스크립트"

헨젤과 그레텔입니다.

도대체 무슨 관련이 있을까 싶지만..

집을 떠나 숲속으로 가는 중 길을 잃어 버릴까봐

걸어오는 길에 빵조각을 버리면서 떠났어요.

걸어오는 내내 빵을 조금씩 뜯어서 땅에 버렸어요..

하필이면 제가 좋아하는 무지개 빵이였네요.

빵조각을 땅에 버릴때는 몇가지 규칙을 정했어요.

1. 발걸음의 보폭을 정확히 세면서 버렸어요.

2. 버릴때마다 빵의 색을 바꿨어요.

3. 5발자국 걸을때마다 버리고!

4. 그렇게 100발자국을 걸으면 입에 넣었어요.

왜????????? 배고프느닌깐~ㅎㅎㅎ

그렇게 쭉 걸어갔어요. 어디로???

과자 냄새가 나는 곳으로 이끌려 갔지요.

(마녀가 기다리는것도 모른체..ㅠㅠ)

거기다가...집에 돌아가려는데 무지개 빵들을 새가 다 먹어버렸네요..

하지만 무사히 잘 돌아갔어요.

강제 해피앤딩.

펜 스크립트는 끝났어요.

....위 표정과 말을 하고 싶으시죠?

그래도 정말 끝났어요!!이미 다 배우셨어요!!

확인해 볼까요?

오늘의 포인트는 헨젤과 그레텔의 빵이였어요!!

펜 스크립트 코딩 블럭은

스프라이트의 흔적을 남겨주는 기능들로 구성되어 있거든요~~~!!

즉, 스크래치 2.0 기본 주인공인 고양이가

고양이 = 헨젤과 그레텔

펜 코딩 블럭 = 빵(흔적들)

이렇게 기억하시면 되는거에요~~

이제 한번 펜 스크립트 코딩 블럭들을 읽어보세요~~~

흔적의 색을 변하게 하고(무지개빵)

펜 내리기(빵을 땅에 버리기)

펜 올리기(빵을 입에 넣기)

등등등..

1. 펜 스크립트는 헨젤과 그레텔의 빵이다!!

빵빵빵!!!!

자 이걸로 오늘의 연재는 마무리 합니다.

여전히 어처구니가 없고, 강의 내용이 부실하다고 생각하시다면

큰 오산이라는걸 나중에 보여 드리죠 ㅎ

코딩의 시작은 뭐?? 큰 그림이다!

이만 장소 조이 코딩 샘이였습니다.

휘리리릭

뿅!!!

여러분 안녕~

장스 조이 코딩 샘 입니다~~!

연재 되는 내용이 유익하신지 궁금하네요~

교수님이 이해 되니? 물어봤을 때 대답을 해드릴걸 그랬어요.

얼마나 답답하셨을까..ㅎㅎ

대답하는건 부끄러운게 아니라는걸 우리나라 학생들도 빨리 깨닫길 기도 합니다!!

자! 이번 시간에 배울 스크립트는 소리라는 스크립트 코딩 블럭입니다.

소리 스크립트의 코딩 블럭은 총 13개로 구성되어 있습니다.

각각의 항목은 먼저 연재 된 내용을 읽은 후에

스크래치를 실행 시켜서 자세한 항목을 읽어보세요~! 아셨죠?

이번에는 깔끔하고 억지스럽지 않은 이야기를 만들어 볼게요.

 오케스트라 아시죠? 오케스트라 하나로 소리 코딩 블럭은 게임 끝입니다~~~

 여러분은 지휘자가 되는거에요~~~

각각의 구성원들(우린 이걸 스프라이트 라고 하죠)에게 지휘자가 뭘 명령하죠?

 피아노치시는 분은 지금 연주를 하세요!!!

그리고 바이올린 연주할때는 피아노는 연주하지 않기~~~~

 
북은 1/4 박자로 치세요~~

음악이 클라이막스에 왔을때는 음향을 키우시고!!

서서히 빠르게 해주세요!!

오오오오오오!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!빠바밤!!!!!!!

..

..

..

윙크를 하면 3초 뒤에 다같이 음악을 멈추는거에요!

빰빰빰빠빠빠빠 빠빠밤!!!! Stop!

박수~~~!!!!

여러분 다 배우셨습니다. 뭔소리냐고요?? ㅋㅋㅋ

제가 앞서 말씀드리는거 처럼 !

스크래치 프로그램을 실행해서 소리 스크립트에 있는 블럭들을 보세요.

이제 어느 정도 이해가 되실거에요.

소리 스크립트에 있는 블럭들이 무엇을 하는 것인지!

즉, 재생하기, 모든 소리 끄기, 몇박자로 연주 할 것인지~

몇번 악기를 할 것인지~

음향 소리를 몇만큼 바꿀것인지~

비트를 얼마나 느리게 할지 빠르게 할지를 구성하는 곳이거든요~

자!! 지휘자 여러분!! 소리 스크립트에 대해서 기억 해야 될거 정리 해봅시다.

1) 내가 지정했을 때 피아노, 바이올린, 북 등(스프라이트)에서 연주를 시키세요!!

2) 소리가 커질지 작을지 정해주세요!!!!

3) 박자를 어떻게 할지 정해봅시다~비트 주세요~드랍 더 비트~~

이걸로 소리 코딩 블럭도 90% 이해하셨습니다.

이쯤 되면 앞에 내용은 뇌에서 다 사라지셨죠?

저 또한 사라진거 같습니다. -0-...

당연한거니 이쯤 되서 배웠던 스크립트 키워드!!!

다시 한번 정리 해볼까요? 

동작 : 수련회 조교
형태 : 카멜레온
소리 : 지휘자

이렇게 각각의 타이틀만 가지고 가도록 하죠...

나중에 이 모든게 모였을 때 어떤 이야기가 탄생 되는지 한번 지켜봐 주세요..후후훗

자 그럼 이번 시간에도 끝까지 읽어주신 여러분 감사 드리며~

아래에 있는 여러분의 하트 또는 답글이

스크래치 강의 연재의 완성도를 높일 수 있는 원동력이 됩니다.

거짓말 같지만 진짜!! ㅎㅎ

그럼 장스 조이 코딩 샘은 이미 물러갑니다!!

휘리릭~~~~

뿅!!!