카테고리

분류 전체보기 (68)
JAVA-기본 (7)
JAVA-AWT (24)
JAVA-클래스의 중요메소드 (23)
JAVA-람다식 (0)
Android Studio (7)
Python (1)
OpenCV (1)
AWS (0)
webrtc (0)
javascript (4)
처리방침 (1)
rss 아이콘 이미지

Search

'javascript'에 해당되는 글 3건

  1. 2023.02.15 javascript setTimeout, setInterval
  2. 2023.02.14 javascript Promise Async/Await
  3. 2023.02.13 javascript Promise

javascript setTimeout, setInterval

javascript/기본 2023. 2. 15. 00:44 Posted by IT-개발자
반응형

자바스크립트에서 일정 시간을 두고 실행하는 메서드가 있습니다. 바로 setTimeout, setInterval 2개입니다.

  • setTimeout 은 지연 메소드로 ms(millisecond) 단위 뒤에 한번만 콜백 실행
  • setInterval 은 반복 메소드로 ms(millisecond) 단위로 반복해서 실행

실습(setTimeout ): 

setTimeout 에 대해 실습해보도록 하겠습니다. 처음 script를 실행하면서 00:22:34 에서 3초 뒤 실행되어 00:22:37에 시작되었습니다.

실습(setTimeout ): 

setTimeout 에 대해 실습해보도록 하겠습니다. 처음 script를 실행하고 3,5 초뒤 setTimeout 지연함수를 실행되고 init 에서 00:29:36 실행 후 00:29:39, 00:29:41 에 실행되었습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("init: "+new Date())
        setTimeout(() => console.log("3초 후 실행"+new Date()),          3000)
    </script>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("init: "+new Date())
        timerafter3 = () => (setTimeout(() => console.log("3초 후  실행"+new Date()), 3000))
        timerafter5 = () => (setTimeout(() => console.log("5초 후  실행"+new Date()), 5000))
       
        timer3and5 = () => (timerafter3(), timerafter5())
        timer3and5(); //시작 후 3, 5초 후 실행
    </script>
</body></html>

실습(clearTimeout):

그렇다면 이 지연 함수를 어떻게 제거할까요? 실행 중에 중지해야하는 일이 생긴다면 변수에 setTimeout을 매핑하고 clearTimeout을 하여 중지합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("init: "+new Date())
        timerafter3 = (setTimeout(() => console.log("3초 후 실      행"+new Date()), 3000))
        timerafter5 = (setTimeout(() => console.log("5초 후 실      행"+new Date()), 5000))
        timerstop4 = (clearTimeout(timerafter5))
    </script>
</body></html>

 

실습(setInterval):

setInterval에 대해 실습해보도록 하겠습니다. 처음 script를 실행하면서 00:37:13 에서 3초 마다 계속 반복 실행됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("init: "+new Date())
        timerafter3 = (setInterval(() => console.log("3초 후 반복실행"+new Date()), 3000))
    </script>
</body></html>

실습(clearInterval):

그렇다면 어떻게 setInterval을 중지할까요? 위의 코드에서 7초 뒤 한번만 실행하는 setTimeout을 실행하면 3초마다 실행되는 setInterval은 2번만 실행되고 중지되겠죠. 아래의 콘솔을 확인하면 init 이후 2번만 실행되고 clearInterval 된 것을 확인 할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("init: "+new Date())
        timerafter3 = (setInterval(() => console.log("3초 후 반복실행"+new Date()), 3000))
        timerstop3 = (setTimeout(() => clearInterval(timerafter3),7000))
    </script>
</body></html>

여기서 중요한 것은 시간함수는 남발해서 사용하면 메모리 누수 현상이 일어날 수 있습니다. 그러므로 꼭 미사용시에는 clearTimeout, clearInterval 등을 통해 타이머를 삭제하도록 합니다. 만약, setInterval 1초마다 실행되는 함수가 있다면 성능 저하는 피할 수 없습니다.

 

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'javascript > 기본' 카테고리의 다른 글

javascript Promise Async/Await  (0) 2023.02.14
javascript Promise  (0) 2023.02.13
javascript 연산자 기초  (0) 2023.02.12

javascript Promise Async/Await

javascript/기본 2023. 2. 14. 02:35 Posted by IT-개발자
반응형

자바스크립트에서 비동기 처리를 위한 콜백함수 사용 시 콜백 지옥을 해결할 수 있는 것이 Promise입니다. Async/Await 는 비동기 처리 문법으로 가장 최근에 나온 문법으로 ES8에 해당하며 Promise를 쉽게 사용할 수 있도록 합니다.

 

  • Async는 함수 앞에 선언되며 Async의 결과는 Promise 객체로 return 됩니다.
  • Await는 Async와 쌍을 이루어 사용하여 Await를 사용하면 함수앞에 Async를 작성해야 한다.
  • Promise와 차이점은 기존 함수에 Async를 작성하는 것처럼 구성되어 간결하다.
  • 가장 큰 차이점은 비동기 처리에 사용되는 문법이지만 코드 실행을 동기적으로 코딩을 할 수 있는것 입니다.

실무에서 많이 사용되니 실습을 통해 살펴보도록 하겠습니다.

 

실습:

async 를 함수 test앞에 작성하고 console.log("result_promise "+result_promise); 를 확인하면 Object 는 Promise 임을 알 수 있습니다. 그리고 then 함수는 Promise에서 사용하는 것으로 async 는 Promise 객체를 반환하는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        async function test(value) {
           return (value+1);
        }
       
        let result_promise = test();
        console.log("result_promise "+result_promise);
       
        test(1).then((value) => console.log("value:"+value));
    </script>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        const f = async (value) => {
            return value+1;
        }

        f(3).then((value) => console.log(value))
    </script>
</body></html>

실습: 

await 는 비동기 처리에서 동기 형태의 로직을 사용할 수 있게 하는 것으로 해당 로직을 기다리게 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        const timer = () => {
            return new Promise(resolve => setTimeout(resolve, 1000));
          };
         
          async function wait(){
            await timer();
            return "wait";
          };


         async function test(){
            const waitstr = awaitwait();
            return waitstr;
         }
         
         test().then(console.log)
    </script>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        const timer = () => {
            return new Promise(resolve => setTimeout(resolve, 1000));
          };
         
          async function wait(){
            timer();
            return "wait";
          };


         async function test(){
            const waitstr = wait();
            return waitstr;
         }
         
         test().then(console.log)
    </script>
</body></html>

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'javascript > 기본' 카테고리의 다른 글

javascript setTimeout, setInterval  (0) 2023.02.15
javascript Promise  (0) 2023.02.13
javascript 연산자 기초  (0) 2023.02.12

javascript Promise

javascript/기본 2023. 2. 13. 01:11 Posted by IT-개발자
반응형

자바스크립트에서 비동기 처리를 위한 콜백함수 사용 시 콜백 지옥을 해결할 수 있는 것이 Promise입니다.

먼저, 동기(Synchronous)와 비동기(Asynchronous)에 차이에 대해 확인하도록 하겠습니다.

 

동기(Synchronous):

1. 동시에 일어난다는 의미로 직렬적으로 로직을 처리함

2. 직렬적으로 일을 처리하므로 앞의 결과가 처리될 때 까지 뒤에 로직은 대기 후 순차적으로 진행

3. 설계가 직관적임

 

비동기(Asynchronous):

1. 동시에 일어나지 않은다는 의미로 병렬적으로 로직을 처리함

2. 병렬적으로 로직을 처리하므로 앞의 로직이 끝나지 않더라도 진행

3. 설계가 복잡함

 

자바스크립트에서  비동기처리를 위해 Promise를 많이 사용하는데, 콜백 함수를 사전에 살펴보고 Promise의 내용을 확인하도록 하겠습니다.

 

callback 함수:

어떤 함수의 실행이 끝난 뒤 호출되어 사용되는 함수를 의미합니다. 아래의 표를 확인하면 call("test", callback) 함수를 호출하고 call 함수를 처리 후 callback 함수를 처리하는 형태입니다. 주로 자바스크립트에서는 ajax에 success값에 많이 사용됩니다. 이 callback함수가 많아지고 남발되면 코드 관리가 어렵고 콜백지옥에 빠지기 쉽습니다. 이를 해결하기 위해 Promise가 나온 이유입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>

     function callback(){
          console.log("콜백1");
     }


     function call(name, callback){
          console.log("name: "+name)
          callback();
     }

     call("test", callback);

    </script>
</body></html>

 

Promise

아래 그림을 보면 Promise는 pending, fulfilled,reject의 상태를 가지고 있습니다.

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

  • Pending(대기중)
    Promise 객체의 기본상태를 의미하며 비동기 결과가 나오지 않는 초기 상태를 의미합니다.
  • Fullfilled(이행 완료됨)
    비동기 처리가 완료된 상태를 의미합니다.
  • Reject(거부됨)
    비동기 처리가 완료는 되었지만 연산에 실패함을 의미합니다. 

실습: 

minusTest 함수를 호출하며 num 3을 입력합니다. 그 이후 setTimeout 1초(1000millisecond) 후 실행하라는 지연함수를 싱행하고 then 함수를 순서대로 호출하고 있습니다.

then은 primise 작업이 성공했을때, 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        function minusTest(num){
            return new Promise((resolve, reject) => {
                setTimeout(function(){
                    num-=1;
                    if(num>=0)resolve(num);
                    else reject(num);
                }, 1000);
            });
        }
       
        minusTest(3).then((num)=>{
            console.log("then2: "+num);
            return minusTest(num)
        }).then((num)=>{
            console.log("then1: "+num);
            return minusTest(num)
        }).then((num)=>{
            console.log("then0: "+num);
            return minusTest(num)
        }).catch((err) => console.log("err:"+err));
       
    </script>
</body></html>

 

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'javascript > 기본' 카테고리의 다른 글

javascript setTimeout, setInterval  (0) 2023.02.15
javascript Promise Async/Await  (0) 2023.02.14
javascript 연산자 기초  (0) 2023.02.12
 

티스토리툴바