A Full Stack Develpor

https://www.youtube.com/watch?v=9HcxHDS2w1s 

원래 Bulma의 Carousel을 사용했는데 한번 쯤은 직접 Carousel을 만들어보는 것도 좋다고 생각이 들어서 직접 만들어보려고 한다. 직접이라기보단 평소 즐겨 듣는 개발자의 강의를 보고 따라하면서 프로 개발자들은 어떻게 구현하는지 배워보는 시간을 갖으려 한다. 

HTML

<section aria-label="Newest Photos">
  <div class="carousel" data-carousel>
    <button class="carousel-button prev" data-carousel-button="prev">&lsaquo;</button>
    <button class="carousel-button next" data-carousel-button="next">&rsaquo;</button>
    <ul data-slides>
      <li class="slide" data-active>
        <img src="img/test1.jpg" alt="Nature">
      </li>
      <li class="slide">
        <img src="img/test2.jpg" alt="Nature">
      </li>
      <li class="slide">
        <img src="img/test3.jpg" alt="Nature">
      </li>
    </ul>
  </div>
</section>

HTML이다. 

https://www.youtube.com/watch?v=PasFh_t1mhY&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=4 

function job1() {
	return new Promise(function(resolve, reject){
        setTimeout(function(){
            resolve('resolved ok!')
        }, 2000);
    });
}
job1().then(function(data){
	console.log('data', data);
})

https://www.youtube.com/watch?v=1z5bU-CTVsQ&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=3 

async라는 것은 평범한 함수를 Promise객체를 return 하는 비동기적인 함수로 만들어줄 수 있다. 

await는 그 작업이 끝나는 것을 기다리라는 의미이다. 그리고 return 값을

var something = await timer(1000); 이런식으로 받을 수 있고 

await는 항상 async 함수 내에서 사용해야한다. 

https://www.youtube.com/watch?v=Sn0ublt7CWM&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=2 

동기 vs 비동기

동기 (synchronous)

console.log(1);
console.log(2);
console.log(3);
console.log(4);

이렇게 동시에 실행되는 것을 동기 (synchronous)라고 부른다.

비동기 ()

비동기 (asynchronous)

console.log(1);
console.log(2);
setTimeout(function(){console.log(3)}, 5000); // 5초뒤에 실행되는 것을 의미
console.log(4);

결과는 1, 2, 4가 먼저 출력되고 3이 출력된다. 프로그램이 병렬적으로 실행되는 방식을 비동기(asynchronous)라고 한다. 각자가 자기의 시간표대로 실행된다.

그렇다면 어느 때, 비동기 처리를 해줄까? 어떤 명령을 실행할 때, 그 명령이 언제 끝날지 예측하기 어렵거나 주가 되는 작업이 아닐때 사용한다.

예를들어 서버와 통신을 할 때 사용을 하는데 통신이 언제 끝날지 모르니깐 다른 일도 하면서 통신이 끝나면 진행한다. 

fetch

대표적인 비동기는 fetch로 확인할 수 있다. 

var fetched = fetch('example.com/api/something');

fetched.then(function(result){});
fetched.catch(function(reason){});

위 코드를 살펴보면 fetch는 return 값으로 Promise 객체를 반환한다. 그리고 then과 catch를 사용할 수 있는데 then은 데이터를 가져오는데 성공했을 때, catch는 실패했을 때, 사용할 수 있다. 

then의 result에는 Response객체가 return 된다.

catch의 reason에는 실패 이유가 전달된다.

Nested promise 방식

.then(function(response){
	response.json().then(function(data){
    	console.log('data', data);
    });
})

통신이 성공했을 때, 나오는 response에는 통신 성공에 관련된 데이터들의 정보가 Promise 객체로 담겨져 있다. 즉 response는 Promise 객체인데 그러므로 then을 사용해서 콜백 함수를 실행할 수 있다. 

promise chaining 방식

.then(function(response){
	return response.json();
})
.catch(function(reason){
	console.log(reason);
})
.then(function(data){
	console.log('data', data);
});

https://www.youtube.com/watch?v=TAyLeIj1hMc&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI 

JavaScript에는 first class citizen이라는 개념이 있다. 

변수가 될 수 있는 것, 함수가 다른 함수의 return 값이 될 수 있는 것, 다른 함수의 입력 값이 될 수 있다면 first clas citizen이 될 수 있다.

콜백(Call Back) 함수란? 

const val = function(somthing) {
    return noting;
}

function fn(arg) {
    arg();
}

fn(val);

위의 코드를 살펴보자면 val이라는 함수는 fn이라는 함수의 인자 값으로 쓰여졌다. 즉 val은 지금 당장 실행되진 않지만 다른 함수의 입력 값으로 실행이 되어 나중에 호출 된다고 해서 Call Back함수라고 한다. 즉, val함수는 Call Back함수는 아니지만 다른 함수의 인자 값으로 들어가서 호출이 된다고 하면 Call Back함수라고 한다. 

example)

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

word => word.length > 6는 filter라는 함수의 인자 값으로 들어갔다. 이것을 callback함수라고 한다.

굳이 이름이 없는 함수는 익명 함수로 표기가 된다. 이것이 발전해서 나온 것이 => 에로우 함수이다. 

function callback(element) -> function(element) -> (element) => {}

https://tpl-code-style-guide.readthedocs.io/en/latest/markup/