HTML,CSS,JS 14일차

parameter (파라미터)

파라미터는 개수 관계없이 사용가능 함수(메서드) 이름이 호출될 때 전달 사용

파라미터의 개수가 2개 / 실제 값이 1개 처럼 파라미터의 개수가 불일치하여 받지 못하는 값이 있다면 undefined 처리

값을 받아오지 못하는 파라미터가 undefined 처리가 되는걸 막기위해 기본값을 설정할 수 있음. => optional parameter

모든 파라미터는 arguments라는 프로퍼티를 이용하여 파라미터를 관리 배열로 담겨서 관리

optional parameter는 arguments에 저장되지 않음

optional parameter는 다른 파라미터보다 뒤에 있어야 한다. (가장 끝에 존재가능)

rest parameter : 남는(이외의, 여분의) 파라미터

사용할 파라미터는 일반 파라미터로 배정하고 나머지 파라미터들을 통합하여 하나의 이름으로 배정하는 기법

... : spread 연산자라고 하여, 배열, 객체를 복제하는데도 사용함.

   let oldArr = ['a','b','c','d'];

   let newArr = [...oldArr];  // ... 배열복사 기능도 있음.

 

비표준 속성(non-standard attribute)

html 태그의 종류에 따라 속성들이 제한적. 개발자들이 직접 속성을 만들어서 사용할 수 있는 방법을 제공

너무 과도하면 개발 효율성과 가독성 저하, 적당히 사용하는 것을 권장

data-변수명="${값}"

data-변수명 : 속성명

${값} 이 value로 인지할 수 있도록 설계되어 있음.

읽어 올때 : dataset.변수명 값이 리턴됨.

dataset property를 사용하여 읽어들임

변수명에 대문자는 허용안함.

dataset.Age (인지못함.) dataset.age(인식가능)

대문자를 사용하더라도 소문자로 변환하여 읽기 가능.

 querySelector('css선택자') : 처음 만나는 값을 인지
 querySelectorAll('css선택자') : 모든 값을 인지
 All은 값이 하나더라도 배열로 인지

 

JSON(JavaScript Object Notation) : 자바 스크립트의 객체 표기법

데이터 요청 및 응답처리에 필요한 데이터의 표준 형식을 제공하는 타입

백앤드(서버)언어 종류에 상관없이 데이터를 송수신 단말형식으로 통일

백앤드(서버)에서는 무조건 String 처리 - 화면(javaScript)은 Object로 처리

화면에서 서버로 데이터를 보낼 때 > Object > String => JSON.stringify(jsObject)

서버에서 화면으로 데이터를 받을 때 > String > Object => JSON.parse(StringData)

 

ex)

 

 <script>
       const cake={
            id:'1234',
            type:'donut',
            name:'cake',
            image:{
                url:'img/001.jpg',
                width:'200',
                height:'20'
            },
            thumbnail:{
                url:'img/th/001.jpg',
                width:'20',
                height:'5'
            }
       };
       console.log(cake);
       //cake를 string으로 변환
       let cakeString = JSON.stringify(cake);
       console.log(cakeString);
       //{"id":"1234","type":"donut","name":"cake",
       //"image":{"url":"img/001.jpg","width":"200","height":"20"},
       //"thumbnail":{"url":"img/th/001.jpg","width":"20","height":"5"}}

       //서버에서 온 string => object로 변경
       let stringData = '{"id":"1234","type":"donut","name":"cake","image":{"url":"img/001.jpg","width":"200","height":"20"},"thumbnail":{"url":"img/th/001.jpg","width":"20","height":"5"}}';
       let parseData = JSON.parse(stringData);
       console.log(parseData);

       //콘솔에 key:value 형식으로 출력
       //for in 사용하여 추출 
       // object[keyName] = value 추출
       for(let keyName in parseData){
            if(keyName == 'image' || keyName=='thumbnail'){
                let innerObject = parseData[keyName];
                for(let key in innerObject){
                    console.log(key,":",innerObject[key]);
                }
            }else{
                console.log(keyName,":",parseData[keyName]);
            }
       }
    </script>

 

비동기 통신(asynchronous communication) : AJAX AJAX (Asynchronous Javascript And Xml) : javaScript와 xml을 이용한 비동기 정보교환기법

• 데이터 통신 방식 : 동기, 비동기
• 동기방식(synchronous) 동시에 일어나는 방식 동기 방식으로 요청을 하면 페이지로 리턴동기방식순차적임
• 비동기방식(asynchronous) 동시에 일어나지 않는 방식 비동기 방식으로 요청을 하면 string(json) 으로 리턴(data만 리턴) 순차적이지 않음. 그자리에서 결과가 바로 주어지지 않을 수도 있음.
• 동기와 비동기의 장단점
• 동기방식 : 직관적, 설계가 간단하다 결과가 주어지기 전까지는 아무것도 못하고 페이지가 오기를 대기해야 한다는 단점이 있음.
• 비동기방식 : 설계가 복잡하다 결과가 주어지는데 시간이 걸리더라도, 다른 작업을 할수 있어 효율적임
• 비동기 방식 : AJAX 방식 사용

• async 키워드 : 함수 선언 앞에 붙이는 키워드 (async function(){})
• await 키워드 : 순차적으로 코드가 실행되어야 할 때 사용 순차코드 실행을 보증. 지연로딩, 지연 상황이 발생되면 코드 실행이 순차적으로 진행될 수 있도록 보증한다. 이전 라인의 코드실행이 완료될 때까지 다음라인은 기다릴 수 있도록 하는 기능
• async await : 비동기 통신 키워드
• Promise 객체를 생성 / 이용하여 데이터 통신을 편리하게 할수 있도록 한다.

    <h3>async await 연습</h3>
    <button type="button" id="btn">데이터 불러오기</button>
    <ul id="ul"></ul>
    <script>

        document.getElementById('btn').addEventListener('click',()=>{
            asyncFun().then(result=>{
                console.log(result);
                //여기서 처리
                printData(result);
            })
        })

        function printData(result){
            const ul = document.getElementById('ul');
            let str = '';
            for(let key in result){
                str += `<li>${key} : ${result[key]}</li>`;
            }
            ul.innerHTML = str;
        }

        async function asyncFun(){
            try {
                const resp = await fetch('https://jsonplaceholder.typicode.com/todos/1');
                const result = await resp.json(); //body에 내가 요청한 데이터를 싣어줌 => json() 형태로 리턴
                console.log(resp);
                console.log(result);
                return result;
            } catch (error) {
                console.log(error);
            }finally{
                console.log("await finish");
            }
        }
    </script>