220502

동기 프로그래밍은 렉이 걸림

 

javascript는 싱글 쓰레드(일꾼 한명)로 동작함 

 

프로세스 : 우리가 기본적으로 사용하는 프로그램이라는 개념과 같음

쓰레드 : 프로그램 내에서 동작하는 일꾼

(면접 때 많이 물어봄)

 

브라우저에서는 멀티쓰레드로 동작하기도 함.

 

setTimeout(function, second)

function을 second만큼 뒤에 실행함.

 

스택은 쌓이다가 가장 최근의 자료가 사라짐

큐는 선입선출

 

태스크 큐 (task queue)는 업무 임시 저장소와 같은 개념임.

콜 스택에서 실제로 업무가 실행됨.

 

Web API에 저장되는 것들 -> settimeout , setinterval , ajax(비동기의 대명사) 

 

settimeout이 5초 뒤에 실행하라고 명령해도

콜스택이 많이 쌓여있으면 5초 이후에 실행될 수도 있음

=> 따라서 최소한 5초 이후에 실행되겠다는 개념이 됨 

 

콜백함수란? : 파라미터에 함수를 넣고, 함수를 안에서 실행해주는 함수

function intro ( name, callback(파라미터가 함수) ) {

                     callback(name); }

 

애로우 펑션과 같이 많이 씀.

ex) intro("John", name => console.log(`Hi, ${name}`));

ex) intro("John", 27, (name, age) => console.log(`Hi, ${name}, ${age}`));

ex) btn.addEventListener("click", () => { console.log("click!!")});

 

JSON이란?

자바스크립트 객체 형식의 데이터

텍스트로만 이루어짐 (중요)

객체와의 차이 : key값에 쌍따옴표를 해줘야함. -> 백틱을 사용해주면 편함

다른 언어와 호환성이 좋아서 (문자열이 없는 언어는 거의없기때문에)

 최근에 많이쓰는 데이터형태

과거에는 XML에서 현재 JSON으로 옮겨가는 추세

 

rest operator (...변수) : 데이터를 변수안에 모아준다

 

for ( i = 0 ; i < a ; i +=2)  -> i를 2개씩 증가시킴

 

Promise ? (암기하자)

비동기를 다루기 위한 객체 

-> 비동기가 끝날때마다 미리 약속을 해주면서 처리하기 편하게 해줌

 

const ex1 = new Promise(function(resolve, reject) {})

 

resolve , reject 둘다 함수 (resolve는 실행 o reject는 실행x 일때 함수)

 

ex1.then (

      result => alert(result),

      error => alert(error) )

그러면 (then) result가 나오면 성공, error가 나오면 실패

 

ex1.catch ( error => alert(error) ) 

라고 사용할수도있음

 

ex1.then().catch 라고 사용할 수 있는 이유 (프로미스 체이닝)

promise는 결과를 처리하고 다시 promise에서 결과가 나옴

(결과가 반환됨)

 

promise를 사용하는 이유

1. 가독성이 매우 높다 ( .으로 이어서 써줄수있음)

2. 에러처리가 우월하다 ( catch 하나로 모든 에러처리가 가능 )

3. 함수를 동시에 병렬처리 (한번에) 가 가능하다.

 

try - catch 에러핸들링

 

try 구문에서 에러가 발생하면 catch에서 에러핸들링을 하는 구조

 

인터넷에서 로그인 폼 공부해보기.

 

Fetch : http 요청을 간단하게 조작할 수 있는 인터페이스

 

http 상태 코드 404,405 등등을 알수 있는 곳

 

 

 

##실습 

 

비동기 프로그래밍을 하는 이유

- 자바스크립트는 인터프리터 언어라서 시간차로 코드를 실행할 수 없음

시간차로 코드를 실행시키고 싶기 때문에 시간차 코드를 비동기적으로 프로그래밍함

 

 

 

let form = document.querySelector("form")
let input = document.querySelector("#inputColor")
let hexacode = document.querySelector("#hexaCode")

function showHexaCode(e) {

        e.preventDefault();
        fetch("data.json")
            .then(res =>res.json()) // json값을 가져옴
            .then((val) => {
                const foundData = val.find((data) => data.color === input.value)
                hexacode.innerHTML = foundData.value;
            }) 

       
}
    
form.addEventListener("submit",showHexaCode);

 

 

1. fetch 사용해서 json 데이터 가져오기 

2. // 자유롭게 코드를 작성하여, 예시 화면이 구현되도록 해 보세요.
   const inputTag = document.querySelector('#inputColor');
   const formTag = document.querySelector('form')
   const resultTag = document.querySelector('#hexaCode')
   function showHexaCode(e)
   {
       e.preventDefault();
       
       fetch('data.json')
           .then((response)=>response.json())
           .then((value)=>{
               const foundData = value.find((data)=> data.color === inputTag.value)
               
               resultTag.innerText = foundData.value;
               resultTag.style.color = foundData.value;
           })
           
   }
   
   // 자바스크립트 find
   
   formTag.addEventListener("submit",showHexaCode)

    

    
3. promise로 타이틀 바꾸기
   

   //posts 변수를 수정하지 마세요.
   const posts = [
     { title: "Post 1", body: "첫번째 게시글입니다." },
     { title: "Post 2", body: "두번째 게시글입니다." },
     { title: "Post 3", body: "세번째 게시글입니다." },
     { title: "Post 4", body: "네번째 게시글입니다." },
     { title: "Post 5", body: "다섯번째 게시글입니다." }
   ];
   
   //getPosts() 함수를 작성하세요.
   //setTimeout()를 사용해서 1초 후에 posts element를 rendering 합니다.
   //위에 정의된 posts 내의 게시글 제목과 내용을 forEach()을 사용해서 rendering 합니다.
   //rendering 된 게시글을 document.body.innerHTML을 사용해서 html에 띄어줍니다.
   function getPosts()
   {
       let output = "";
       setTimeout(()=>{
           posts.forEach((post)=>{
               output += `<li>${post.title}<br> 내용:${post.body}</li>`
           });
           document.body.innerHTML = output;
       },1000)
   }
   
   //createPost() 함수를 작성하세요.
   //Promise를 생성해서 resolve와 reject를 인자로 받습니다.
   //Promise 내에 setTimeout으로 비동기 처리하는데, createPost()함수에 인자로 받아온 post를 push할 때 에러없이 성공적으로 호출되면(if(!error)) `resolve`를 실행하고, 그렇지 않으면 에러를 받아들이는 `reject`를 2초 후에 실행합니다.
   function createPost(post)
   {
       return new Promise((resolve,reject)=>{
           setTimeout(()=>{
               posts.push(post);
               //이행 혹은 거부를 처리하면 된다
               if(posts.length>5)
               {
                   resolve();
               }
               else
               {
                   reject();
               }
           },2000)
       })
   }
   
   //createPost()를 이용해 데이터를 추가해보세요.
   //title은 "Post N", body는 "N번째 게시글입니다."로 설정하세요.
   
   createPost({title:"Post N",body:"N번째 게시글입니다."}).then(()=>{getPosts()})