📌 &nbsp폴더명에 대문자 들어가면 설치가 안된다 !&nbsp

프로젝트에서 필요한 라이브러리도 설치 npm install sass classnames react-icons

react 실행 npm run start

TodoTemplate Todoinsert TodoList TodoItem

으로 구성할 계획입니다.

TodoTemplate

todoapp\src\components 폴더 생성 📌 사용자 컴포넌트들은 별도의 폴더를 만들어서 저장하는 것이 관례

하위에 TodoTemplate.js, TodoTemplate.css 생성

import './TodoTemplate.scss';

const TodoTemplate = ({children}) => {
    return(
        <div className ='TodoTemplate'>
            <div className ='app-title'>일정 관리</div>
            <div className ='content'>{children}</div>
        </div>
    );
}

export default TodoTemplate;

클래스 선택자로 설정한 이유는? 엘리먼트를 선택해서 스타일 지정해주려고

.TodoTemplate {
    width: 512px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6rem;
    border-radius: 4px;
    overflow: hidden;

    .app-title {
        background: #22b8cf;
        color: white;
        height: 4rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content {
        background: white;
    }
}

TodoInsert

components\ 하위에 TodoInsert.js, TodoInsert.css 생성하자.

TodoInsert.js

import {MdAdd} from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = ({children}) => {
    return(
        <form className = 'TodoInsert'>
            <input placeholder = '할 일을 추가하세요'></input>
            <button type = 'submit'>
                <MdAdd/>
            </button>
        </form>
    );
}

export default TodoInsert;

> React Icons < 에서 아래의 icon을 사용한다는 뜻

마음에 들지않으면 맘에 드는 것으로 바꾸자.

TodoInsert.scss

.TodoInsert {
    display: flex;
    background: #495057;

    input {
        background: none;
        outline: none;
        border: none;
        padding: 0.5rem;
        font-size: 1.135rem;
        line-height: 1.5;
        color: white;
        flex: 1;
    }

    button {
        background: none;
        outline: none;
        border: none;
        padding: 0.5rem;
        color: white;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1.5rem;
        align-items: center;
        cursor: pointer;
        &:hover {
            background: #adb5bd;
        }
    }
}

TodoList

TodoListItem

TodoList에 들어갈 item 작성

components 하위에 TodolistItem.js, TodolistItem.scss 생성

TodolistItem.js

import {
    MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline
} from 'react-icons/md';

import './TodoListItem.scss';

const TodoListItem = ({children}) => {
    return(
        <div className = 'TodoListItem'>
            <div className = 'checkbox'>
                <MdCheckBoxOutlineBlank/>
                <div className = 'text'>할 일</div>
            </div>
            <div className = 'remove'>
                <MdRemoveCircleOutline/>
            </div>
        </div>
    );
}

export default TodoListItem;

다음의 배열이 있다. let arr = ["SW", "P"];

각 요소에 접근하려면 arr[0], arr[1] 로 접근했었는데,

        let [firstname, secondname] = arr;
        alert(firstname);    // SW
        alert(secondname);    // P

이렇게도 할 수 있다.

다음의 긴 문자열을 쪼개보자.

자바스크립트(JavaScript)란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.

.split()메서드를 사용하면 구분자를 이용하여 여러개의 문자열로 나눠 array 형태로 리턴해준다.

        let[a, , b, c, d] = "자바스크립트(JavaScript)란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.".split(' ')

        alert(a);   // 자바스크립트(JavaScript)란?
                    // 자바스크립트(JavaScript)는
        alert(b);   // 객체(object)
        alert(c);   // 기반의
           alert(d);   // 스크립트

두번째 요소 "자바스크립트(JavaScript)는" 는 건너뛰고 "객체(object)" 가 b에 들어간다.

        let [a, b, c] = "abc";
        alert(a);
        alert(b);
        alert(c);

        entries() 함수 이용
        let user = {
            name : "SWP",
            age : 34
        }

        for (let [key, value] of Object.entries(user)){
            alert(`${key} : ${value}`);
        }

        // '...' 나머지 요소 가져오기
        let [name1, name2, ...rest] = ["정*식", "김*진", "박*규", "박*우"];
        alert(name1);
        alert(name2);
        alert(rest[0]);
        alert(rest[1]);
        alert(rest.length);
        // 꼭 rest 일 필요 없이 필요한 이름을 지어넣자.

구조 분해 할당의 기본값

아무 값도 가지지 않은 배열이 있다.

        let [firstname, surname] = [];

        alert(firstname);   // undefined
        alert(surname);     // undefined

C언어에서 함수의 선언부에 기본값을 주었던 것처럼, 초기화를 해주어야하지 않을까?

        let [firstname = "선우", surname = "박"] = [];

        alert(firstname);   // 선우
        alert(surname);     // 박

어떤 값을 대입하면 다음과 같이 출력이 된다.

        let [firstname = "선우", surname = "박"] = ["SW"];

        alert(firstname);   // SW
        alert(surname);     // 박

객체 분해하기

다음의 객체가 있다.

        let options = {
            title : "menu",
            width : 100,
            height : 250
        }

객체를 분해하는 방법은 배열을 분해할 때와 같다.

        let {title, width, height} = options;
        alert(title);
        alert(width);
        alert(height);

나머지 요소도 똑같이 사용할 수 있다.

        let {title, ...rest} = options;
        alert(rest.width);
        alert(rest.height);

JSON과 메서드

JSON (JavaScript Object Notation)

json 포맷은 다음과 같다.

 {
    "이름": "홍길동",
    "나이": 55,
    "성별": "남",
    "주소": "서울특별시 양천구 목동",
    "특기": ["검술", "코딩"],
    "가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},
    "회사": "경기 수원시 팔달구 우만동"
 }

객체.

const myProfile =  {
    "이름": "홍길동",
    "나이": 55,
    "성별": "남",
    "주소": "서울특별시 양천구 목동",
    "특기": ["검술", "코딩"],
    "가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},
    "회사": "경기 수원시 팔달구 우만동"
 }

객체 데이터를 전송하고싶어.

송신 : 객체를 json 형태의 문자열로 보내자.

        let user = {
            name : "SWP",
            age : 34,
            toString(){
                return `{
                    name:"${this.name}",
                    age:"${this.age}"
                }`;
            }
        }
        alert(user) 

수신 : 문자열(json)을 객체로 바꿔서 사용하자.

객체를 매번 toString()메서드를 통해서 변경해주어야 할까?

JSON.stringify()

• json은 값이나 객체를 나타내주는 범용 포맷이다.
• 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷이다.
• 자바스크립트가 아닌 언어에서도 json을 충분히 다룰 수 있어서 json을 데이터 교환 목적으로 사용하는 경우가 많다.

• JSON.stringify : 객체를 JSON으로 바꾸어준다.
• JSON.parse : JSON을 객체로 바꾸어준다.

        let user = {
            name : "SWP",
            age : 34,
            isadmin : false,
            course : ['javascript', 'node.js', 'react.js'],
        }
        let json = JSON.stringify(user);

전송하지는 못하니 출력해보자.

        alert(json);
        alert(typeof json);

출력결과 : {"name":"SWP","age":34,"isadmin":false,"course":["javascript","node.js","react.js"]} string

이번엔 위의 문자열을 수신했다고 생각하고, json을 객체로 변경해보자.

JSON.parse()

Json.parse() 메서드 사용의 형태는 다음과 같다.

        let value = JSON.parse(문자열);

이전에 수신한 문자열로 객체를 생성해보자.

        let obj = JSON.parse(json);

잘 되었는지 출력해보자.

        alert(obj.name);
        alert(obj.age);
        alert(obj.isadmin);
        alert(obj.course);

출력결과 : SWP, 34, false, javascript,node.js,react.js

D:\node.js\ReactNative>expo init

What would you like to name your app? ... my-app

? Choose a template: » - Use arrow-keys. Return to submit. ----- Managed workflow ----- > blank a minimal app as clean as an empty canvas + [enter]

D:\node.js\ReactNative\helloworld\my-app>expo start

App.js 파일을 약간 수정해보자.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.container}>오! 그래놀라 단백질 바</Text>
      <Text style={styles.container}>오! 그래놀라 단백질 바</Text>
      <Text style={styles.container}>오! 그래놀라 단백질 바</Text>
      <Text style={styles.container}>오! 그래놀라 단백질 바</Text>
      <Text style={styles.container}>오! 그래놀라 단백질 바</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 40,
    textAlignVertical: 'center',
    fontWeight: 'bold',
    color: 'tomato'
  },
});

expo 어플을 설치하고

QR 코드로 연결하면,

package.json 파일 생성

{
    "name" : "hello-world",
    "version" : "1.0.0",
    "main" : "main.js",
    "scripts" : {
        "start" : "electron ."
    }
}

main.js 생성

const {app, BrowserWindow} = require('electron');

function createWindow(){
    let win = new BrowserWindow({
        width : 800,
        height : 600,
        webPreference : {
            NodeIntegration : true
        }
    })

    win.loadFile('./index.html');
}

app.on('ready', createWindow);

index.html 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Electron</title>
    <style>
        body{
            background-image: linear-gradient(45deg, #EAD790 0%, #EF8C53 100%);
            text-align: center;
        }
        button{
            background: rgba(0,0,0,0.40);
            box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
            border-radius: 8px;
            color: lime;
            padding: 1em 2em;
            border: none;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-size: 20pt;
            position: relative;
            top: 40%;
            cursor: pointer;
            outline: none;
        }
        button:hover{
            background: rgba(0,0,0,0.3);
        }        
    </style>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css"/>
</head>
<body>
    <script>
        function sayHello(){
            alert("hello Electron");
        }
    </script>
    <button onclick="sayHello()">sayHello</button>
</body>
</html>

D:\node.js\ELECTRON\helloworld>npm start

this 메서드를 호출한 객체

        let user = {
            name : "John",
            age : 30,
        }
        user.height = 199.9;    // 또는 user[height] = 199.9;
        user.say = function(){
            alert("Annyeonghaseo.");
        }   
        // 동적으로 프로퍼티 추가
        // say : 함수 포인터. 함수의 주소값을 say가 받음.

        let user = {
            name : "John",
            age : 30,
            say(){
                alert(this.name);      // == alert(user.name);
            }
        }

        let admin = user;
        user = null;
        user.say();

• 자유로운 this

        let user = {name : "John"};
        let admin = {name : "Wick"};
  
        function say(){
            alert(this.name);
        }

        user.age = 25;
        user.func = say;
        admin.func = say;

        user.func();    // function say()의 this == user
        admin.func();   // function say()의 this == admin

        user['func']();
        admin['func']();

• 화살표 함수 안에서의 this 일반함수 안에 있는 일반함수의 this는 작동하지 못함.

        let user = {
            name : "Oliver",
            say(){
                function arrow(){
                    alert(this.name);
                }
                arrow();
            }
        };
        user.say();

  화살표 함수 안에서의 this는 자신의 함수 상위에 있는 객체를 가리킨다.

        let user = {
            name : "Oliver",
            say(){
                let arrow = () => {
                    alert(this.name);
                }
                arrow();
            }
        };
        user.say();

객체 -> 메서드 & this -> 화살표 함수 -> 구조분해할당

점 표기법, 대괄호 표기법을 사용한다.

계산된 프로퍼티

• 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우 이를 계산된 프로퍼티(computed property)라고 부른다.

        let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
  
        let bag = {
          [fruit] : 5    // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
        };
        alert(bag.apple);    // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

• [fruit]은 프로퍼티 이름을 변수fruit에서 가져오겠다는 의미이다.

• 사용자 프롬프트에 apple을 입력했다면 bag엔 {apple : 5} 가 할당된다.

단축 프로퍼티

• 실무에서 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 있다.

        function makeUser(name, age){
            return{
                name : name,
                age : age,
            }
        }
        let user = makeUser("SWP", 33);
        alert(user.name);

• 프로퍼티들은 이름과 값이 변수의 이름과 동일

• 프로퍼티 값 단축 구문을 사용하면 코드를 짧게 줄일 수 있다.

        function makeUser(name, age){
            return{
                name,
                age,
            }
        }
        let user = makeUser("SWP", 33);
        alert(user.name);

'in' 연산자로 프로퍼티 존재 여부 확인

• 자바스크립트 객체는 다른 언어와 달리 존재하지 않는 프로퍼티에 접근해도 에러가 발생되지 않고, undefined를 반환한다.

        let user = {};
        alert(user.noSuchProperty === undefined);
        // 반환되는 값 true는 프로퍼티가 '존재하지 않음'을 의미한다.

• undefined와 비교하는 것 이외에도 연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있다.

        "key" in object

        let user = {name : "SWP", age : 33};

        alert("age" in user);    // user.age가 존재하므로 true가 출력된다.
        alert("year" in user);    // user.year는 존재하지 않기 때문에 false가 출력된다.

• in 왼쪽에는 반드시 프로퍼티 이름이 와야한다.

undefined인 value가 존재하는 경우와, 아무값도 존재하지 않는 경우가 헷갈릴 수 있다.

참조에 의한 객체 복사

객체 기본

• 객체의 동작 방식
• 변수에는 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조값이 저장된다.
• 객체는 메모리 내 어딘가에 저장되고 변수 user엔 객체를 참조할 수 있는 값이 저장된다.

        let user = {
          name : "John"
        };

  C에서 배웠던 call by value와 call by reference를 떠올리면 이해하기 쉽다.

        let user = { name : "John" };

        let admin = user;    // 참조값을 복사함

user가 가진 참조값(주소값)을 admin도 가지게 되고, user와 admin 둘 다 name을 참조할 수 있다.

        admin.name = "춘식";
        alert(user.name);

복사된 admin의 참조값에 의해서 '춘식'이로 변경하고 원본 user의 참조값으로 변경된 사항을 확인해보면, 'John'이 이닌 '춘식'이 출력된다.

화살표 함수 기본

자바스크립트 기본

*ES6에 적용된 문법 중 하나 *

• 화살표 함수 : 함수 표현식보다 단순하고 간결한 문법으로 함수를 제작한다.

        let func = (arg1, arg2, ... , argN) => expression

• func는 화살표 우측의 표현식(expression)을 평가하고 평가 결과를 반환한다.

        let sum = function(a, b){
          ...
          return a + b;
        }

  ↓ ↓ ↓ 아래의 화살표 함수로 축약할 수 있다.

        let sum = (a, b) => {
          ...
          return a + b
        }

  ↓ ↓ ↓ 함수의 정의가 단순한 경우,

        let sum = (a, b) => a + b;
        alert(sum(1, 2));    // 3

• (a,b) => a+b; 는 실행되는 순간 표현식 a+b를 평가하고, 그 결과를 반환한다.

인수(argument)가 한 개인 경우 괄호를 생략할 수 있다.

        const dbl = num => num * 2;

인수가 없는 경우

        const nothing = () => alert("없음");

화살표 함수 :

1. function 키워드를 제거하고,
2. 함수의 이름을 변수처럼 사용할 수 있다. (대입)

        let age = prompt("나이를 입력하세요 : ", 20);   // 20 : 디폴트값
        let welcome = (age < 19)?
            function(){ alert("미성년자는 구매할 수 없습니다."); } : 
            function(){ alert("성인입니다."); }

↓ ↓ ↓ 화살표 함수로 바꾸어보자.

        let welcome = (age < 19)?
            () => { alert("미성년자는 구매할 수 없습니다.") } : 
            () => { alert("성인입니다..") }

1. Node.js의 정의

• 공식 홈페이지의 설명
  • Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다.

• Node.js는 서버가 아닌가요? 서버라는 말이 없네요.
  • 서버의 역할도 수행할 수 있는 자바스크립트 런타임.
  • Node.js를 이용해 자바스크립트로 작성된 서버를 실행할 수 있다.
  • 서버 실행을 위해 필요한 http/https/http2 모듈을 제공한다.

* 자바스크립트 런타임이란? : 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻합니다. 따라서 Node.js는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있습니다. 쉽게 말해 Node.js는 자바스크립트 실행기라고 봐도 무방합니다.

2. 런타임

• Node.js : 자바스크립트 런타임
  • 런타임 : 특정 언어로 만든 프로그램들을 실행할 수 있게 해주는 가상머신의 상태 * 가상머신 : 크롬의 V8 엔진을 사용한
  • 따라서, Node.js는 자바스크립트로 만든 프로그램들을 실행할 수 있게 해준다.
  • 다른 런타임으로는 웹 브라우저가 있다.
  • Node.js 이전에도 자바스크립트 런타임을 만들기 위한 시도들이 있었지만, 엔진 속도 문제로 실패했다.

3. 내부 구조

• 2008년 V8 엔진 출시, 2009 Node.js 프로젝트 시작
• Node.js는 V8과 libuv를 내부적으로 포함한다.
  • V8 엔진 : 오픈소스 자바스크립트 엔진 -> 속도문제 개선
  • libuv : Node.js의 특성인 이벤트기반, 논블로킹 I/O 모델을 구현한 라이브러리

1.2 Node.js의 특성

1. 이벤트 기반

• 이벤트가 발생할 때 미리 지정해둔 작업(콜백함수)을 수행하는 방식
  • 이벤트의 예 : 클릭, 네트워크 요청, 타이머 등
  • 이벤트 리스너 : 이벤트를 등록하는 함수
  • 콜백 함수 : 이벤트가 발생했을 때 실행될 함수

2. 논블로킹 I/O

• 논 블로킹 : 오래걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행되게 하고, 나중에 오래걸리는 함수를 실행하는 방식
  • 논 블로킹 방식 하에서 *일부 코드는 백그라운드에서 병렬로 실행된다.
  • *일부 코드 : I/O 작업(파일 시스템 접근, 네트워크 요청), 압축, 암호화 등
  • 나머지 코드는 블로킹 방식으로 실행된다.
  • 따라서, I/O 작업이 많을 때 Node.js의 활용이 극대화된다.

정렬이란

• 임의의 자료 집합을 일정한 기준에 따라 나열하는 것이다.
• 자료의 작은 것을 먼저 나열하는 것을 오름차순이라고 한다.
• 자료의 큰것을 먼저 나열하는 것을 내림차순이라고 한다.
• 정렬의 원리는 레코드의 키들을 비교해보고 순서를 바꿀 필요가 있는 레코드를 정렬이 완료될 때 까지 반복한다.
• 가장 간단한 정렬 알고리즘이 버블 정렬이다.
• 버블 정렬은 레코드의 선두부터 인접 요소를 비교하여 큰 값을 뒤로 보내는 방식으로 정렬한다.

버블정렬 알고리즘 문제

선생님은 학생들을 모두 앞으로 나오게 하여 무작위로 일렬로 세웠다. 키가 들쑥날쑥하여 일정하지 않다. 이제 선생님은 이 학생들의 키를 재고, 키 순서대로인 오름차순으로 번호를 부여하려 한다.

프로젝트를 생성하여 다음의 과정을 거쳐서 키 순서대로 만드는 알고리즘을 작성해보자.

입력한 키 데이터들이, 교환이 수행될 때마다 현재의 키 데이터의 순서를 출력한다.

입력

• 입력할 키 데이터를 프로그램 콘솔 키보드로부터 입력 받는다.
• 입력할 키 데이터는 정수형으로 6개만 입력한다.

출력

• 입력한 키 데이터에 따른 정렬 결과를 프로그램 콘솔 터미널에 출력한다.
• 입력한 키 데이터들이 교환이 수행될 때마다 현재의 키 데이터의 순서를 출력한다.

실행예시

TestCase는 다음과 같다.

입력값 : 143 134 137 132 140 134

다음과 같이 출력한다.

한 줄, 한 줄 해보기

#include <iostream>
using namespace std;

void bubble(int* pArr, int num) {
    cout << "정렬 시작" << endl;
    for (int x = 0; x < num - 1; x++) {
        for (int i = x; i < num - 1; i++) {
            int temp = 0;
            if (pArr[i - x] > pArr[i - x + 1]) {
                temp = pArr[i - x];
                pArr[i - x] = pArr[i - x + 1];
                pArr[i - x + 1] = temp;
            }
        }
        for (int i = 0; i < num; i++) {             // 교환 과정 출력
            cout << pArr[i] << " ";
        }
        cout << endl;
    }
    cout << "정렬된 키 순서" << endl;
    for (int i = 0; i < num; i++) {
        cout << pArr[i] << " ";
    }
}

void main() {
    int* height = 0;
    int num = 0;
    cout << "학생 수를 입력하세요." << endl;        // 배열의 길이 입력
    cin >> num;
    height = new int[num];
    for (int i = 0; i < num; i++) {
        height[i] = 0;
    }
    cout << "학생들의 키를 입력하세요." << endl;    // 키 데이터 입력
    for (int i = 0; i < num; i++) {
        cin >> height[i];
    }
    cout << "입력된 학생들의 키" << endl;            // 입력된 값 확인
    for (int i = 0; i < num; i++) {
        cout << height[i] << " ";
    }
    cout << endl;

    bubble(height, num);
    delete[] height;
}

문제에서는 정수형 데이터 6개를 입력하게 했지만, 역시 일반화 시키는게 재밌을 것 같아서 배열의 길이를 입력받도록 해봤다. 정리하다보니 잘... 해보면 데이터 개수를 미리 입력받지 않고, 무작위로 데이터를 입력한 뒤에 배열의 길이를 잴 수 있지 않았을까?

for문의 기본원리

- for문의 형식

for 변수 in range(시작값, 끝값, 증가값):
    반복할 문장

- for문은 range() 함수와 함께 사용

• 시작값, 끝값, 증가값을 대입

  < 그림. for문의 형식 >

range(0, 5, 1) -> [0, 1, 2, 3, 4] 시작값은 0, 끝 값은 포함되지 않고, 1씩 증가한다.

range 함수의 매개변수 개수에 따른 의미를 알아보자

- for문 소스코드

for num in range(0, 5, 1):
    print(num, ": Programming")

for문의 기본 활용

- 반복문은 지구의 자전 주기와 비슷하다.

- 지구의 한 바퀴 자전이 반복문 1번 수행과 같고, 1번 수행 시 날짜가 1 증가한다.

for i in range(1, 366, 1):
    print(i, "일 지났습니다.")

연습) 1부터 100까지의 짝수의 합

sum = 0
for num in range(2, 101, 2):
    sum += num
print(sum)

연습) 숫자 맞추기?

favorite = int(input('내가 가장 좋아하는 숫자는?'))

start = int(input('범위 시작 값 : '))
end = int(input('범위 끝 값 : '))

for num in range(start, end, 1):
    if (favorite == num):
        print('내가 좋아하는 숫자가 있습니다.')

구구단 출력하기

• 구구단 2단 출력
• 반복되는 포인트 찾기

연습) 구구단 2단

for x in range(1, 10, 1):
    print("2 곱하기", x, "은", 2*x)

for val in range(1,10, 1):
    print("2 곱하기 %d 는 %d" % (val, 2*val)) 
    # 서식문자를 사용한 출력도 해보자

맘대로 추가 연습) 구구단 2단부터 9단까지 출력하기

for x in range(2, 10):
    for y in range(1, 10):
        print(x, "곱하기", y, "는", x * y)
      # print("%d 곱하기 %d 는 %d" % (x, y, x*y))

추가의 추가 연습) 원하는 구구단 출력하기

table = int(input('원하는 단을 입력하세요\n'))

for x in range(1, 10):
        print(table, "곱하기", x, "는", table*x)
        # print("%d 곱하기 %d 는 %d" % (table, x, table*x))

C언어의 기본 구조

#include <stdio.h>

#include <stdio.h>

- <stdio.h>

• .h : 헤더 파일이라 부른다.
• stdio.h 를 포함하겠다는 의미이다.
• stdio.h 를 포함하지 않으면 printf 함수를 사용할 수 없다.
• printf 에 대한 코드가 stdio.h 파일에 선언되어 있기 때문에 include 해야 사용할 수 있다.

stdio.h : Standard Input/Output library (표준입출력 라이브러리)의 약어이다.

• 헤더파일 열어보기. stdio.h에 마우스 커서 올리고 F12

C언어의 기본 구성요소는 함수이다.

• 수학에서의 함수 형태 y = f(x)

• C언어에서의 함수 형태

  int main(공백)
  {
  

}

   \- f( ) : main
   \- x : '공백'에 들어갈 무언가
   \- y : int
   \- 함수의 영역은 '{' 와 '}' 사이에 함수의 정의를 한다.

<br>

- 사용자 정의 함수와 표준 함수를 사용한다.

- <span style="background-color:#A0D9BE">표준함수</span> : 라이브러리에 포함되어있는 함수

- <span style="background-color:#A0D9BE">사용자 정의 함수</span> : 표준함수를 기반으로 **내가 만드는** 함수

## 문장의 끝 세미콜론 ';'
- C언어의 문장들은 마칠때 반드시 세미콜론을 찍어주어야 한다.
- 단, 전처리기는 예외이다.
``` c
#include <stdio.h>

int main() 
{
    printf("hello world\n");
    return 0;
}

• 위의 예문에서 printf() 끝에 세미콜론이 없으면 컴파일러가 return 0;까지 한 문장으로 해석하여 오류가 발생한다.

리턴값에 관하여

    return 0;

• 0 을 return 하는 이유

  • return 값 0 자체의 의미는 없다.
  • 함수의 수행이 끝남을 의미한다.
  • return은 함수 안에서 쓰이기 때문에 return이 보이면 함수가 끝난다고 생각하면 된다.

주석문을 사용하자

- 주석문을 사용하는 이유

• 어떤단어나 문장에 대한 구체적인 부연 설명
• 프로그래밍에서 주석 필수

  초보일수록 코딩에 방해가 되지 않는 선에서 많이 써야한다. 협업할 때도 다른 사람에게 설명해야하니까 잘 써야한다. 나도 잊어버릴 수 있으므로 나를 위해서라도 쓰자.

- 짧은 문장의 주석문 처리

#include<stdio.h>

int main() {
    printf("hello world\n"); //Hello World 문자열을 출력한다.
    return 0;
}

- 주석이 짧은 문장일 경우 '//' 기호를 사용한다.

• 컴파일러가 '//' 뒷 부분은 해석하지 않는다.

- 긴 문장의 주석문 처리

#include<stdio.h>

/*
날짜 : 2022.08.18
작성자 : 박선우
설명 : main() 함수 구현
*/

int main() {
          printf("hello world\n"); //Hello World 문자열을 출력한다.
          return 0;
}

/* 열고
닫음 */ 

• 주석을 기록의 용도로도 쓰기도 하지만,
• 짧은 한 두줄의 코드를 주석 // 으로 막아서 일부 기능만 테스트해보는 용도로도 사용한다.
• 긴 줄의 코드는 툴바에서 찾아 씀 (도움말 아래에)