[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 6회차 미션

패스트캠퍼스 프론트엔드 인강 6일차. 비동기처리의 이해와 삼항연산자를 공부해보았다.

1. 동기적처리와 비동기적처리

동기적처리는 앞선 작업이끝날때까지 다음작업이 기다리는동안 시작하지못한다
앞선 작업이끝나야 비로소 다음 작업이 시작된다.

비동기처리는 동시에 여러 작업을 호출할수있다. 

연산량이 많은 함수를 만들어 테스트를 해보자.

        // 동기처리
        function work(){
            const start = Date.now();
            for(let i = 0; i<1000000000; i++){

            }
            const end = Date.now()
            console.log(end - start + 'ms')
        }

        work() //591ms
        console.log('다음작업')//work()이 591ms동안 끝나야 호출

Date.now()는 현재날자를 숫자형태로 표시해주는 함수이다.

work()함수가 실행된이후에 다음작업이라는 문구가 출력되는것을 확인할수있다.

 

2. setTimeout함수(비동기처리) : 4ms뒤에 ~하겠다. 

비동기처리로 바꿔보기위해서는 setTimeout함수가 필요하다. setTimeout는 백그라운드안에서 수행되기때문에 기존의 코드흐름을 방해하지않는다.

        function work(){
            setTimeout(()=>{
                const start = Date.now();
                for(let i = 0; i<1000000000; i++){

                }
                const end = Date.now()
                console.log(end - start + 'ms')
            },0)//0ms후에진행된다는뜻
        }

        console.log('작업시작')
        work();
        console.log('다음작업')
       

먼저 setTimeout만 사용할경우에는

'작업시작' 문구출력 -> work함수시작(4ms후) for루프가 도는동안 -> '다음작업'문구출력 -> for루프가끝나면 'end-start'ms''출력

 

0은 0ms후에 시작한다는뜻이지만 브라우저에서 최소는 4ms이므로 4ms후에 실행된다고생각하면된다.

 

추가설명 - setTimeout은 webAPI(브라우저)로 이동해서 시간이 더걸림

큐는 웹api로부터온 메시지를 의미(0ms뒤 큐로 이동) 스택이 빌때까지 기다림

3. callback함수(비동기처리) : ~끝나고 이거하겠다

work함수가 다 끝난다음에 어떠한작업을 실행하고싶을때는 callback함수를 이용한다.

        function work(callback){
            setTimeout(()=>{
                const start = Date.now();
                for(let i = 0; i<1000000000; i++){

                }
                const end = Date.now()
                console.log(end - start + 'ms')
                callback(end-start)//앞에작업이 끝난 이후에 콜백함수호출
            },0)//0ms후에진행된다는뜻
        }

        console.log('작업시작')
        work((ms)=>{
            console.log('작업끝')
            console.log(ms+'ms 걸림')
        });
        console.log('다음작업')

비동기작업이 필요할때

4. 삼항연산자

        //삼항연산자 사용전
        const array = [];
        let text = '';
        if(array.length === 0){
            text='배열이비어있음'
        }else{
            text='배열이 비어잇지않음'
        }
        console.log(text)

삼항연산자를 사용하면 코드한줄로 표현이 가능하다

        const array = [];
        let text = '';

        //삼항연산자 사용
        array.length === 0 ? text = '배열이빔' : text='배열안빔'
        console.log(text)
        
        //다른표현방법
        let text = array.length === 0 
        ? '배열이빔' 
        : '배열안빔'
        console.log(text)

삼항연산자는 중첩도 가능하지만 가급적쓰지않도록한다.

 

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스