사용언어: python3

나의 풀이

def solution(num):
    answer = ''
    if num % 2 == 0:
        answer += 'Even'
    else:
        answer += 'Odd'
    return answer

풀이 및 포인트: +=, -= 사용 가능함,

만들면서 고민했던 부분 : 삭제!

다른 부분은 4주차에 했던 것을 응용하여 했으나, 삭제는 어떻게 내가 지우는 데이터가 DB에서도 정확하게 삭제되게 하지? 에 대해 고민을 많이 했다.

시도1: 숫자를 1부터 차례대로 부여하면 되지 않을까?

// 전역변수 let id = 0;
function makeTodo() {
    id++;
    const todo_give = document.querySelector('.input-text').value;

    fetch('/todo/create', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            content: todo_give,
            id: id
        }),
    })
        .then(response => response.json())
        .then(data => {
            alert(data['msg']);
            window.location.reload();
        })
}

결과: 창이 새로고침 될 때마다 처음부터 다시 읽기 때문에 모든 id가 결국 1이 된다(실패)

시도2: DB에 있는 objectid를 사용하면 되지 않을까?

mongoDB는 각 요소 하나 하나가 id를 가지고 있다. 이를 이용해서 이 id 값을 사용할 수 있을까 싶어 구글링을 한 결과 bson 패키지를 이용하면 쓸 수 있겠다는 생각이 들어 패키지를 다운로드 헀다!

그러나 매개변수 오류라는 메세지와 함께 패키지를 받을 수 없었다...(실패)

시도3: 내가 id를 만들자!

function makeTodo() {
    const todo_give = document.querySelector('.input-text').value;
    const id_give = Math.random().toString(36).substr(2,11);

    fetch('/todo/create', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            content: todo_give,
            id: id_give
        }),
    })
        .then(response => response.json())
        .then(data => {
            alert(data['msg']);
            window.location.reload();
        })
}

여기에 있는 todo_give 변수에 무작위로 생성된 10자를 DB로 보내서 구분을 지었더니 성공했다!!

+)기능은 구현하였으나... 디자인을 어떻게 보기 좋게 하는지 잘 모르겠따 +)fetch 기능을 잘 활용하면 새로고침 없이 만드는 것 또한 가능할 텐데 아직 방법을 잘 모르겠다...ㅠㅠ

모두가 볼 수 있는 사이트는 어떻게 만들면 될까? 크게 두 가지 요건을 충족하면 될 것이다.

1) 접속할 사이트의 주소를 아는 것 2) 언제나 서버가 작동해야 할 것

1번을 만족하기 위해 사이트 주소인 도메인 구입을 하였고, 2번을 만족하기 위해 항상 가동하는 서버를 샀다. 이 두 과정에서 필요한 지식들은 다음과 같다.

내가 산 서버는 운영체제가 ubuntu이기 때문에 Git bash를 통해 linux 명령어로 조작해 주어야 한다!

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다. sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

서버가 끊기지 않고 돌아가게 하려면 다음과 같은 명령어를 통해 설정할 수 있다.

# 아래의 명령어로 실행하면 된다
nohup python app.py &

# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'

# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]

이전 글과 같은 내용을 하였으나, jquery의 ajax 기능 대신 javascript의 fetch기능을 사용해 보았고 어떤 부분이 어떤 역할을 하는지 바뀐 부분만 비교해 보고자 한다.

fetch('/order', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    name_give: name,
                    count_give: count,
                    address_give: address,
                    phone_give: phone
                })
            })//여기서 백엔드로 정보 전달
                .then(response => response.json())//성공하면
                .then(data => {
                    alert(data['msg']);
                    window.location.reload();
                });
        }

    $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, 
                       count_give: count, 
                       address_give: address, 
                       phone_give: phone},//여기서 백엔드로 정보전달
                success: function (response) { // 성공하면
                    alert(response["msg"]);
                    window.location.reload();

                }

데이터를 json 형태로 백엔드로 전달하면, then 과 success에서 결과를 받아 진행한다. 여기에서 전달받은 값(response)을 fetch에서는 json으로 한번 바꿔주는 과정을 거쳐야 하지만, jquery는 자동으로 해주는 것 같다.

fetch에서 JSON.stringify()는 오브젝트를 JSON화 시켜주는 메소드이다. jquery에서는 자동으로 해주는 것 같다. JSON은 통신 규격이기 때문에 바꿔준 것으로 보이며, JSON과 object의 차이는 앞의 key 값이 JSON에서는 따옴표 처리가 된다는 것이다.

    name_receive = request.json['name_give']
    count_receive = request.json['count_give']
    address_receive = request.json['address_give']
    phone_receive = request.json['phone_give']

그리고 백엔드에서 POST한 정보를 읽어오는 과정에도 오류가 있었다. jquery는 request.form으로 읽어와도 문제가 없었지만, fetch로 읽을 땐 keyError가 나서 왜 그런지 찾아봤더니, request를 사용할 땐 정보가 json 형태로 주고 받기 때문에 request.json으로 찾아야 찾아진다는 것을 알 수 있었다.

느낀 점: javascript로만 풀면 '알아서 해줄게' 하는 부분이 적어지는 것은 맞는 것 같다. 그러나 해결하면서 원리를 더 잘 이해하게 된 것 같아 오히려 좋아

짤 출처: https://www.youtube.com/watch?v=MMSvdoXqiMs

목표 : 주문 버튼을 누르면 주문자 목록이 추가되는 기능 만들기

중요하다고 느낀 기술 : HTTP request

흐름 :

1) 클라이언트 측에서 주문서를 작성하여 주문하기 버튼을 누른다.

2) 버튼에 있던 onclick 함수가 작동한다. 이 함수는 POST 메서드로 백엔드 단에 object 형태의 데이터를 전송한다.

        function order() {
            const name = $('#order-name').val();
            let count = $('#order-count').val();
            let address = $('#order-address').val();
            let phone = $('#order-phone').val();
            // 주문하기 API 연결
              $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, count_give: count, address_give: address, phone_give: phone}, //여기서 백엔드로 전송!
                success: function (response) { // 성공하면
                    alert(response["msg"]);
                    window.location.reload();

                }
            })
        }

3) 백엔드 단에 있던 POST 메서드가 프론트 단에서 전송된 정보를 받아 작동한다. 백엔드에서는 object 형태의 데이터를 추출하여 새로운 오브젝트로 만들고, 이를 db에 저장한다.

@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    count_receive = request.form['count_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name': name_receive,
        'count': count_receive,
        'address': address_receive,
        'phone': phone_receive
    }

    db.ordersjq.insert_one(doc)
    return jsonify({'msg': '주문 성공!'}) #성공 메세지를 프론트로!

4.5) 성공 메세지를 백엔드에서 받게되면 프론트엔드에서 success 파트를 실행한다.

        function order() {
            const name = $('#order-name').val();
            let count = $('#order-count').val();
            let address = $('#order-address').val();
            let phone = $('#order-phone').val();
            // 주문하기 API 연결
              $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, count_give: count, address_give: address, phone_give: phone}, 
                success: function (response) { // 성공하면
                    alert(response["msg"]); //응답의 메세지 알림
                    window.location.reload(); //창 새로고침

                }
            })
        }

4) onclick 함수에 있던 새로고침 함수에 의해 페이지가 새로고침 되고, 프론트 단에 ready로 걸려있던 GET 함수가 작동한다. (사실 항상 작동되고 있었지만, 데이터 베이스에 자료가 있을 때 결과가 나타난다.)

        $(document).ready(function () {
            function order_listing() {
            // 주문목록 보기 API 연결

                        $.ajax({
                type: "GET",
                url: "/order",
                data: {}, //여기서 백엔드와 통신!
                success: function (response) {
                    if (response['result'] == 'success') {
                        const orders = response['orders'];
                        for (let i = 0; i < orders.length; i++) {
                            const name = orders[i]['name'];
                            const count = orders[i]['count'];
                            const address = orders[i]['address'];
                            const phone = orders[i]['phone'];

                            const temp_html = `<tr>
                                                <th scope="row">${name}</th>
                                                <td>${count}</td>
                                                <td>${address}</td>
                                                <td>${phone}</td>
                                            </tr>`

                            $('#orders-box').append(temp_html);
                        }
                    }
                }
            })
        }
        });

5) 백엔드 단에 있던 GET 메서드가 작동한다. 데이터 베이스에 저장된 모든 주문자의 정보를 오브젝트 형태로 만들어서 json 형태로 리턴한다.

@app.route('/order', methods=['GET'])
def view_orders():
    orders = list(db.ordersjq.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'orders': orders}) #다시 프론트 success로 전송!

6) 모든 주문자의 정보를 for 문을 돌면서 프론트에서 결과를 보여준다.

결론 : HTTP request를 통해 클라이언트와 서버는 정보를 주고 받는다.

중요한 것 : 주소와 method가 일치할 때 서로 필요한 정보를 주고 받는다.

+)flask는 왜 쓰는 것이며, 무슨 장점을 가지고 있는걸까? +)bs4로는 패키지 다운안되고, BeautifulSoup4로 받으면 받아짐, 또 다른 패키지는 잘 받아짐 도대체 왜????

파이썬 기초문법

#변수 정의, 바로 = 으로 정의한다.
n = 1

#함수 정의, {}로 구분하지 않고 :과 들여쓰기로 범위 구분한다.
def sum(a, b):
    return a+b

패키지를 이용하여 여러가지 기능을 편하게 사용할 수 있다.

DB의 종류에는 sql과 nosql이 있으며, sql은 큰 표를 만들어 내용을 채우는 것이라면, nosql은 한 줄씩 새로운 정보를 추가해 나가는 방법이다. 시작반에서는 nosql을 사용할 예정이다.

import requests
from bs4 import BeautifulSoup

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=D&ymd=20200403&hh=23&rtm=N&pg=1',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

trs = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for tr in trs:
    title = tr.select_one('td.info > a.title.ellipsis').text.strip()
    rank = tr.select_one('td.number').text[0:2]
    artist = tr.select_one('td.info > a.artist.ellipsis').text
    print(rank, title, artist)

request, beautifulsoup 이라는 패키지를 통해서 웹페이지의 특정 부분을 지정하여, 파이선 문법으로 반복하여 긁어오는 작업을 할 수 있었다. 이를 웹 스크래핑이라 부르고, 결과는 DB에 저장 할 수 있다.

API란? : API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 출처: https://ko.wikipedia.org/wiki/API

이를 이용하여 정보를 가공해 사용자가 볼 수 있게 하는 작업을 했다.

이것이 백엔드에서 제공해주는 정보이다.

fetch("http://spartacodingclub.shop/post")
    .then(result => result.json())
    .then(apiData => {
        const articles = apiData['articles'];
        for (let i = 0; i < articles.length; i++) {
            let cardList = document.querySelector('.card-list');
            const comment = articles[i]['comment'];
            const desc = articles[i]['desc'];
            const image = articles[i]['image'];
            const title = articles[i]['title'];
            const url = articles[i]['url'];

            let temp = `<li class="card-item">
                            <figure class="card-image" style="background-image: url(${image});">
                                <img src="${image}" alt="배경화면">
                            </figure>
                            <div class="card-desc">
                                <a href="${url}">${title}</a>
                                <p class="card-text">
                                    ${desc}
                                </p>
                                <p class="card-text-comment">
                                    ${comment}
                                </p>
                            </div>
                        </li>`;
            cardList.innerHTML+=temp;
        }
    });

fetch, then, DOM을 이용하여 정보를 받고(fetch), 다 받았을 때(then) HTML을 조작하여 꾸민다(DOM)

그렇게 해서 사용자가 보기 좋은 결과물을 낸다.

이 아니라 Document Object Model의 약자로서 HTML 문서를 계층화하고 접근할 수 있도록 돕는 인터페이스 이다.

이번 시간에는 자바스크립트를 이용하여 DOM을 사용, 웹사이트에 변화를 주는 연습을 하였다!

.input {
    height: auto;
    line-height: normal;
    padding: .8em .5em;
    font-family: inherit;
    border: 1px solid #999;
    border-radius: 0;
    outline-style: none;
}

.control {
    display: flex;
}

.input {
    flex: 1;
    height: auto;
    line-height: normal;
    padding: .8em .5em;
    font-family: inherit;
    border: 1px solid #999;
    border-radius: 0;
    outline-style: none;
}

제목과 입력창을 감싸는 .control에 display를 flex로 주고, input의 길이를 끝까지 늘일 수 있는 flex를 1로 주면 자동적으로 끝까지 늘어난다! 편-안

promise가 많아지면 또 난잡해지기 때문에 깔끔하게 만들 수 있는 방식인 async와 await을 알아보자!

//async & await
//clear style of using promise ;)

//1.async
async function fetchUser() {
     //do network request in 10secs...
      return 'ellie';
}

const user = fetchUser();
user.then(console.log);
console.log(user);
//함수 앞에 async를 붙혀주면 Promise를 쓴 것과 같은 상태가 된다. 다음은 그대로 결과에 then이나 catch, finally 사용

//2. await
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
    await delay(3000);
      return 'apple';
}

async function getBanana() {
    await delay(3000);
      return 'banana';
}
//await은 Promise가 실행될 때 까지 기다려주는 것을 나타낸다.

async function pickFruits() {
    const apple = await getApple();
      const banana = await getBanana();
      return `${apple} + ${banana}`
}

//3. useful promise APIs
//Promise.all: 여러가지 함수가 병렬적으로 처리된다.
//Promise.race: 전달값 중 가장 빠른 결과 return

원하는 순서대로 결과를 이끌어내기 위해 고안된 콜백함수! 그러나 복잡한 기능을 구현하기 시작하면 콜백함수가 꼬리를 무는 콜백지옥이 발생한다. 이를 해결하기 위한 promise는 어떤 기능인지 알아보도록 하자!

Promise : javascript가 제공하는 콜백함수 대신 간편하게 쓸 수 있는 오브젝트. 성공, 실패에 따른 결과를 알려준다.

//Promise is a JavaScript object for asynchronous operation.
//1. State: 진행되었는지 또는 끝났는지? pending => fulfilled or rejected
//2. Producer vs Consumer

//1.Producer
//when new promise is created, the executer runs automatically.
const promise = new Promise((resolve, reject) => {
    //doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
      resolve('ellie');
    //reject(new Error('no network'))
  }, 2000);
});

//2. Consumers: then, catch, finally
//then: constructor가 완료된 '다음'진행 할 수 있게 해주는 메소드, promise 값이나 또 다른 promise를 받는다.
//catch: 에러가 났을 때 다음 진행을 위한 메소드
//finally: 성공, 실패 여부에 상관없이 마지막에 출력됨.
promise
     .then((value) => {
        console.log(value);
    })
    .catch((value) => {
        console.log(error);
    })
    .finally(() => {
        console.log('finally');
    });

//3.Promise chaining
const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num - 1), 1000);
    });
})
.then(num => console.log(num));

//4. Error Handling
const getHen = () =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('🐓'), 1000);
    });
const getEgg = hen =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${hen} => 🥚`), 1000);
    });
const cook = egg => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} => 🍳`), 1000);
    });

getHen()
    .then(hen => getEgg(hen)) //value를 그대로 전해주는 것이라면 .then(getEgg) 로 표현 가능!
    .then(egg => cook(egg))
    .then(meal => console.log(meal))
    .catch(console.log(meal));
//catch의 순서를 바꾸면서 에러 시 결과를 바꿀 수 있다.

//Callback Hell => promise
class UserStorage {
    loginUser(id, password) {
      return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (
                  (id === 'ellie' && password === 'dream') ||                 (id === 'coder' && password === 'academy')
               ) {
                resolve(id);
            } else {
                reject(new Error('not found'));
            }
        }, 2000);
      });

    }

      getRoles(user) {
      return new Promise => ((resolve, reject) => {
           setTimeout(() => {
            if (user === 'ellie') {
                resolve({ name: 'ellie', role: 'admin' });
            } else {
                reject(new Error('no access'));
            }
        }, 1000);
      });

    }

      const userStorage = new UserStorage();
    const id = prompt('enter your id');
    const password = prompt('enter your password');
    userStorage
         .loginUser(id, password)
        .then(userStorage.getRoles)
        .then(user => alert(`Hello ${userWithRole.name}, you have a ${userWirhRole} role`))
        .catch(console.log)

//확실히 더 깔끔해졌다!

//JavaScript is synchronous.
//Execute the code block in order after hoisting.
//hoisting: var, function declaration

console.log('1');
setTimeout(function() {
    console.log('2');
}, 1000);
console.log('3'); // 132순서대로 보인다. setTimeout()은 asynchronous한 실행방법, 콜백함수: call(불러줘)back(나중에)

//synchronous callback 콜백의 동기적 실행
function printImmediately(print) {
    print();
}
printImmediately(() => console.log('hello'))
//출력
//1, 3, hello, 2
//hoisting에 의해 함수 선언 제일 위로 이동, 차례대로 내려오면서 실행, setTimeout()에 의해 마지막으로 2 출력

//asynchronous callback 콜백의 비동기적 실행
function printWithDelay(print, timeout) {
    setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);
//출력
//1, 3, hello, 2, async callback

//Callback Hell example
class UserStorage {
    loginUser(id, password, onSuccess, onError) {
        setTimeout(() => {
            if (
                  (id === 'ellie' && password === 'dream') ||                 (id === 'coder' && password === 'academy')
               ) {
                onSuccess(id);
            } else {
                onError(new Error('not found'));
            }
        }, 2000);
    }

      getRoles(user, onSuccess, onError) {
        setTimeout(() => {
            if (user === 'ellie') {
                onSuccess({ name: 'ellie', role: 'admin' });
            } else {
                onError(new Error('no access'));
            }
        }, 1000);
    }

      const userStorage = new UserStorage();
    const id = prompt('enter your id');
    const password = prompt('enter your password');
    userStorage.loginUser(id, password, (user) => {
        id,
        password,
        user => {
            userStorage.getRoles(user, (userWithRole) => {
                alert(`Hello ${userWithRole.name}, you have a ${userWirhRole} role`)
            }, 
            error => {
                console.log(error)
            });
        },
        error => {console.log(error)},
    });
}
// 실행은 되지만 콜백지옥이 완성되었다...
//가독성 떨어짐, 로직 이해 떨어짐, 유지보수 어려움 등의 단점이 있다.

JSON이란? : JavaScript Object Notation의 약자로, 자바스크립트의 오브젝트(key, value)을 이용한 체계이다. 주로 데이터 전송 시 사용하며, 언어와 상관없이 사용 가능하다!

//JSON
//JavaScript Object Notation

//1. Object to JSON
//stringify(obj)
let json = JSON.stringify(true);
console.log(json); //true

json = JSON.stringify(['apple', 'banana']);
console.log(json); //["apple", "banana"] 쌍따옴표로 표기(공식)

const rabbit = {
    name: 'tori',
      color: 'white',
      size: null,
      birthDate: new Date(),
      jump: () => {
        console.log(`${name} can jump!`);
    },
}

json = JSON.stringify(rabbit);
console.log(json); //{"name": "tori", "color": "white", "size": json.null, "birthDate": "2021-07-20...",}

json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json); //{"name": "tori", "color": "white", "size": json.null}

json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
      return value
});
console.log(json);// 세밀하게 통제하고 싶을 때 사용

//2. JSON to Object
//parse(json)
json = JSON.stringify(rabbit);
const obj = JSON.parse(json, (key, value) => {
    return key === 'birthDate' ? new Date(value) : value;
});// 콜백함수 reviver을 통하여 세밀하게 구할 수 있다.
console.log(obj); //{name: 'tori',color: 'white',size: null,birthDate: "2021-07-20..."}
obj.jump(); //Error!(메소드 포함 x)

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());
//데이터간 비교 : JSON diff, 
//JSON 정리: JSON beautifier,
//JSON => object: JSON Parser,
//JSON 유효성 검사: JSON Validator

//퀴즈
// Q1. make a string out of an array
{
  const fruits = ['apple', 'banana', 'orange'];
}
let str='';
for (let i=0; i<fruits.length; i++) {
    str.push(fruits[i]);
}
//정답
fruits.join();

// Q2. make an array out of a string
{
  const fruits = '🍎, 🥝, 🍌, 🍒';
}
let arr = [];
for (let i = 0; i < fruits.length; i++) {
    arr.push(fruits[i]);
}

//정답
fruits.split(',');

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
  const array = [1, 2, 3, 4, 5];
}
//1
array.reverse();
//2
let arr = []
for (let i = array.length-1; i > 0; i--) {
    arr.push(array[i]);
}
array.reverse();

//풀이 : reverse는 원래 배열도 바꾼다.


// Q4. make new array without the first two elements
{
  const array = [1, 2, 3, 4, 5];
}

array.shift()
array.shift()

//정답X
const result = array.splice(0, 2);
console.log(result); // [1,2]
console.log(array); // [3, 4, 5]

//정답O
const result = array.slice(2, 5);
console.log(result); // [3, 4, 5];
console.log(array); //[1, 2, 3, 4, 5]

//----------------------------

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

// Q5. find a student with the score 90
{
  for (let student of students) {
   if (Student[score] === 90) return Student;
  }

  //정답
  const result = students.find((student) => return student.score === 90);
}

// Q6. make an array of enrolled students
{
  let arr = []
   for (let student of students) {
   if (Student[enrolled] === true) arr.push(Student);
  }

  //정답
  const result = students.filter((student) => return student.enrolled);
}

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
   let arr = []
   for (let student of students) {
       arr.push(Student[score]);
  }

  //정답
  students.map((student) => student.score)
}

// Q8. check if there is a student with the score lower than 50
{
   for (let student of students) {
       if (Student[score] < 50) return true;
    else return false;
  }

  //정답: 조건이 맞는 몇 개의 결과 
  const result = students.some((student) => student.score < 50);

  //every 조건에 맞는 모든 결과
}

// Q9. compute students' average score
{
   let arr = []
   for (let student of students) {
       arr.push(Student[score]);
  }
 const sum = arr.reduce((a, b) => a + b, 0);
 const average = sum / arr.length;

  //정답
  const result = students.reduce((prev, curr) => prev + curr.score, 0);
   console.log(result / students.length);
}

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
   let str = '';
   for (let student of students) {
       arr.push(Student[score]);
  }

    //정답
  const result = students
      .map((student) => student.score)
      .filter((score) => score >= 50)
      .join();

  console.log(result);
}

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
   let arr = []
   for (let student of students) {
       arr.push(Student[score]);
  }
  arr.sort((a, b) => a - b);

  //정답
    const result = students.map((student) => student.score)
    .sort((a, b) => a - b)
    .join()
    console.log(result);
}

자료구조 : 데이터들을 담은 바구니 범위) 자료구조>오브젝트

'use strict';

//Array
//1.Declaration
const arr1 = new Array();
const arr2 = [1, 2];

//2. Index position
const fruits = ['🍎', '🍌'];
console.log(fruits);//['🍎', '🍌']
console.log(fruits.length);//2
console.log(fruits[0]);//'🍎'
console.log(fruits[1]);//'🍌'
console.log(fruits[2]);//undefined
console.log(fruits.length-1);

//3. Looping over an array
//print all fruits
//a. for
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
//b. for of
for (let fruit of fruits) {
    console.log(fruit);
}
//c. forEach
fruits.forEach((fruit) => console.log(fruit));

//4. Addition, deletion, copy
//push: add an item to the end
//pop: remove an item from the end
//unshift: add an item to the beginning
//shift: remove an item from the beginning
//note!! shift, unshift are slower than push, pop! 앞에서 조작하려면 배열 요소를 많이 움직여야 하기 때문

//splice(시작점, 끝점, 추가데이터1, 추가데이터2...)
//arr1.concat(arr2)
//arr.includes(element) element가 포함됐는지 true, false로 알려줌
//arr.indexOf(element)
//arr.lastIndexOf(element)

//Objects
//one of the JavaScript's data types.
//a collection of related data and/or functionality.
//Neary all objects in JavaScript are instance of Object
//Object = { key : value };

//--------------------------------------

//1. Literals ans properties

const obj1 = {}; //'objective literal' syntax
const obj2 = new Object(); //'object constructor' syntax

function print(person) {
    console.log(person.name);
     console.log(person.age);
}

const ellie = { name: 'ellie', age: 4};
print(ellie);

//with JavaScript magic (dynamically typed language)
//can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);//나중에 키 추가 가능

//can deleter properties later
delete ellie.hasJob;
console.log(ellie.hasJob);

//--------------------------------------

//2. computed properties: 계산된 properties -> ellie['name']
//key should be always string
console.log(ellie.name); //key에 해당하는 값을 정확히 알 때
console.log(ellie['name']); //어떤 key가 필요한지 모를 때 = runtime에서 결정될 때
ellie['hasJob'] = true;
console.log(ellie.hasJob);

//computed properties의 예, 동적으로 키 값 받을 때 유용하게 쓰인다. 보통은 .으로 접근
function printValue(obj, key) {
    console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');

//--------------------------------------

//3. Property value shorthand: property와 value의 이름이 같다면 생략가능
const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};
function makePerson(name, age) {
    return {
        name,
          age,
    }
}
const person4 = makePerson('ellie', 30);
console.log(person4) // {name: 'ellie', age: 30}

//--------------------------------------

// 4. Constructor function
function Person(name, age) {\
    //this = {};
      this.name = name;
      this.age = age;
      //return this;
}

const person5 = new Person('kim', 27);
console.log(person5); //Person {name: 'kim', age: 27};

//--------------------------------------

//5. in operator: property existence check (key in obj)
console.log('name' in ellie); //true
console.log('age' in ellie); //true
console.log('random' in ellie); //false
console.log(ellie.random); //없으므로 undefined

//--------------------------------------

//6. for...in vs for...of
//for (key in obj)
for (key in kim) {
    console.log(key);
}                            

//for (value of iterable)
const array = [1, 2, 3, 4, 5];
for (value of array) {
    console.log(value);
}

//--------------------------------------                            
//Fun cloning
//Object.assign(dest, [obj1, obj2, obj3...])
const user = {name: 'ellie', age: '20'};
const user2 = user;
user2.name = 'coder';
console.log(user);

//old way
const user3 = {};
for (key in user) {
    user3[key] = user[key];
}
console.log(user3); //{name: 'coder', age: '20'}  


//new way
Object.assign(); //https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign        

0:51 클래스(class): 연관있는 속성들을 묶어놓은 것 field와 method가 있다.

class person{
    name; //fields 속성
    age; //fields 속성
    speak; //method 행동
}

3:08 클래스: 붕어빵 틀, 청사진(template, declare once, no data in) 오브젝트: 붕어빵(instance of a class, created many times, data in)

4:30 클래스 선언:

'use strict';
//Object-oriented programming
//class: template
//Javascript classes
//    -introduced in ES6
//    -syntatical sugar over prototype-based inheritance

//1. Calss declarations
class Person {
    //constructor
  constructor(name, age) {
          //fields
    this.name = name;
    this.age = age;
  } 
    //methods
  speak() {
      console.log(`${this.name}: hello!`);
  }
}

//Object 생성
const ellie = new Person('ellie', 20);
console.log(ellie.name); //ellie
console.log(ellie.age); //20
ellie.speak(); //ellie: hello!

8:28 Getter&Setter:

class User {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
          this.age = age;
    }

      get age() {
        return this._age; //callstack exceed 방지
    }

      set age(value) {
          //if (value < 0) {
         //throw Error('age can not be negative');
        //}
        this._age = value < 0 ? 0 : value;
    }
 }

const user1 = new User('Steve', 'Jobs', -1);
console.log(user1.age); //-1 -> Wrong!

사용자가 잘못된 값을 넣지 못하게 하는 것

14:31 public&private fields : 생성자(constructor)를 쓰지 않고 fields 사용가능

15:00 static: field값을 construct에 할당하지 않고 클래스에 할당할 수 있게 한다. 호출 시 할당변수명.필드 가 아닌 클래스.필드 로 호출한다.

18:00 extends: 클래스 상속가능, 필요한 메소드 재정의 가능(overriding), 메소드 재활용+변경은 super.메소드 사용

22:00 instanceof 상속 된지 아닌지 확인가능

23:56 mdn reference

1. 함수는 object이다 → 변수로 함수 사용가능, 변수에 할당가능 등 여러가지 일이 가능하게 함

   10:10 default parameters 기본 매개변수값 지정

   10:20 rest parameters ... 배열로 풀어줌 + for...of & forEach

   12:40 local scope → (확장) → closure, lexical scope 주요개념 : 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다!(변수 사용 범위)

   14:50 return 함수에 작성안하면 (return undefined) 가 생략된 채 작성된다. + early return : 여러개 검사 시 빨리 리턴을 해서 속도 up

   18:00 선언형 함수 ex) function sum() {.. 할당형 함수 ex) const print = function() {... 선언형 함수는 완성되었을 때 제일 위로 올려진다. 그래서 선언 이전에 사용 가능함(호이스팅)

   18:34 callback function 매개변수가 함수인 경우를 의미

   23:17 IIFE Immediately Invoked Function Expression (function hello(){...})() 부르지 않아도 바로 실행가능

   Quiz time

   function calculate(cmd a, b)

   command(add, substract, divide, multifly, remainder)

function calculate(command, a, b) {
    if(command === 'add') return a+b;
    else if(command === 'substract') return a-b;
     else if(command === 'multiply') return a*b;
     else if(command === 'remainder') return a%b;
     else return 'Wrong command!'
}

//정답 : command가 정해져 있다면 switch 문을 쓰는 것이 좋다.
function calculate(command, a, b) {
    switch (command) {
      case 'add':
        return a + b;
      case 'substract':
        return a - b;
      case 'multiply':
        return a * b;
      case 'remainder':
        return a % b;
      default:
        throw Error('unknown command');
    }
}

10:00 or 사용시 무거운 값은 뒤쪽으로 보내라(꿀팁), null 값 false 이기 때문에 null 값 체크시 사용

13:00 0, ''은 == false 시 같은 걸로 취급 그러나 === false는 다른 것이다. null == unidentify : true 이나 null === unidentify : false 이다.

14:45 ternary(?) operator 조건 ? 참 : 거짓

15: 15 switch

switch() {

case a:

//실행결과;

break;

}

typescript 에서 타입 검사 시 사용

3:00 (mutable)let : 변수를 통해 값을 메모리에 저장, 값은 변경가능

5:07 scope: 변수가 적용되는 범위, 보통 블록{} 사이에 쓰면 블록 안에서만 적용된다.

6:17 var: 이전에 쓰던 데이터타입, var hoisting이 일어난다.(비추👎)

7:00 hoisting: 어디에 선언했냐에 상관없이 제일 위로 올라가는 것

9:19 (immutable)constant: 변수를 통해 값을 메모리에 저장, 값 변경 불가능! (favor immutable type always! 항상 변경되지 않는 값을 선호하라!)

11:36 variable types: primitive, single item: number(특별 값: +-Infinity, NaN, bigInt(2^50 이상)), string, boolean, null, undefined(변수는 정의되었지만 값이 지정되지 않았을 때), symbol(map 같은 구조에서 고유한 식별자 필요할 때 사용) object, box-container function, first-class function

26:31 object: 여러 값들을 담아둘 수 있는 요소

const ellie = {name: ellie, age:25}

const로 인해 ellie를 다른 object로 바꿀 수 없지만, ellie.name, ellie.age는 변경이 가능하다!