카테고리

분류 전체보기 (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'에 해당되는 글 4건

  1. 2023.02.15 javascript setTimeout, setInterval
  2. 2023.02.14 javascript Promise Async/Await
  3. 2023.02.13 javascript Promise
  4. 2023.02.12 javascript 연산자 기초

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

javascript 연산자 기초

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

이번 시간에는 javascript의 기본 연산자에 대해서 알아보도록 하겠습니다.

기본 연산자에는 산술, 비교, 논리, 삼항, 비트 연산자가 있으며 실무에서 많이 사용하는 산술 연산자, 비교 연산자, 삼항 연산자를 중점으로 알아보도록 하겠습니다.

 

1. 산술연산자

사칙연산을 위해 필요한 연산자로 아래 표와 같습니다.

표 참고: https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Math

+ 더하기 두 개의 숫자를 더합니다. 6 + 9
- 빼기 왼쪽에 있는 수를 오른쪽 수로 뺍니다. 20 - 15
* 곱하기 두 개의 숫자를 곱합니다. 3 * 7
/ 나누기 왼쪽의 숫자를 오른쪽 숫자로 나눠서 몫을 구합니다. 10 / 5
% 나머지 (또는 모듈로) 왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다. 8 % 3 ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.)
** 지수 왼쪽의 숫자를 오른쪽 숫자만큼 제곱합니다. 5 ** 2 ( 5의 제곱이기 때문에 25를 반환합니다.)

실습:

위의 표를 실습해보도록 하겠습니다. 우선 왼쪽 표와 같이 html 파일을 하나 생성하도록 하겠습니다.

그리고 html 파일을 열어 개발자 도구를 이용하여 콘솔을 확인하게 되면 연산자를 이용한 값이 매핑되어있습니다.

 

왼쪽 표의 코드를 보면 console.log에 6+9에 괄호를 추가하여 (6+9)  형태로 되어있습니다. 만약 console.log("6+9: "+6+9); 를 하게된다면 제일 아래의 결과값으로 69인 string 형태로 나오게 되니 type과 관계가 있으니 참고하시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("6+9: "+(6+9));
        console.log("20-15: "+(20-15));
        console.log("3*7: "+(3*7));
        console.log("10/5: "+(10/5));
        console.log("8%3: "+(8%3));
        console.log("5**2: "+(5**2));
    </script>
</body></html>

 

2. 비교 연산자

비교 연산자는 두개의 값을 비교하여 if문에 비교문으로 많이 사용합니다.

표 참고: https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Math

       
=== 일치 연산자 왼쪽과 오른쪽의 값이 완전히 동일한지 테스트합니다.(타입, 값 포함) 5 === 2 + 4
!== 불일치 연산자 왼쪽과 오른쪽 값이 서로 동일하지 않은지 테스트합니다.(타입, 값 포함)
-> 값과 타입이 하나라도 같지 않으면 false 반환합니다.		 5 !== 2 + 3
== 일치 연산자 왼쪽과 오른쪽의 값이 완전히 동일한지 테스트합니다. -
!= 불일치 연산자 왼쪽과 오른쪽 값이 서로 동일하지 않은지 테스트합니다. -
< ~보다 작음 왼쪽 값이 오른쪽 값보다 작은지 테스트합니다. 10 < 6
> ~보다 큼 왼쪽 값이 오른쪽 값보다 큰지 테스트합니다. 10 > 20
<= ~보다 작거나 같음 왼쪽 값이 오른쪽 값보다 작거나 같은지 여부를 테스트합니다. 3 <= 2
>= ~보다 크거나 같음 왼쪽 값이 오른쪽 값보다 크거나 같은지 여부를 테스트합니다. 5 >= 4

실습:

위의 표를 실습해보도록 하겠습니다. 우선 왼쪽 표와 같이 html 파일을 하나 생성하도록 하겠습니다.

그리고 html 파일을 열어 개발자 도구를 이용하여 콘솔을 확인하게 되면 연산자를 이용한 값이 매핑되어있습니다.

 

5 === 2 + 4 : 5===6이므로 타입은 숫자 형태로 같지만 값이 다르므로 false

5 !== 2 + 3 : 5와 5는 서로 동일하여 조건에 부합하므로 false

10<6 : 10은 6보다 작은값이 아니므로 false

10>20: 10은 20보다 크지 않아 false

3<=2 : 3은 2초과이므로 false

5>=4: 5는 4보다 크므로 true

 

비교 연산자는 실무에서 정말 많이 사용하니 참고하시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("5 === 2 + 4: "+(5 === 2 + 4));
        console.log("5 !== 2 + 3: "+(5 !== 2 + 3));
        console.log("10 < 6: "+(10 < 6));
        console.log("10 > 20: "+(10 > 20));
        console.log("3 <= 2: "+(3 <= 2));
        console.log("5 >= 4: "+(5 >= 4));
    </script>
</body></html>

 

3. 삼항연산자

조건문 if를 대신하여 쉽게 비교하여 사용하는 연산자입니다.

아래와 같이 삼항연산자의 값을 조건식을 작성하여 조건이 true이면 true에 해당하는 함수의 결과가 값이 되고, 조건이 false이면 false에 해당하는 함수의 결과가 값이 됩니다. 실습을 통해 확인하도록 하겠습니다.

 

상항연산자 값 = 조건식 ? f(true) : f(false)

 

실습: 

a값은 2는 1보다 크므로 참인 결과값이 2:1 중 2가 됩니다.

d값은 b는 c보다 작으므로 거짓 값인 ffalse 값인 5가 됩니다.

e값은 c는 b보다 크기 때문에 참인 값인 ftrue 값인 4가 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
     var a = (2>1)? 2:1
     console.log("a: "+a)


     var b = 2;
     var c = 3;
     function ftrue(){
         //함수
         return 4;
      }
     function ffalse(){
         //함수
        return 5;
     }

     var d = (b>c)? ftrue():ffalse()
     var e = (b<c)? ftrue():ffalse()
     console.log("d: "+d)
     console.log("e: "+e)

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

 

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

반응형
저작자표시 비영리 변경금지

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

javascript setTimeout, setInterval  (0) 2023.02.15
javascript Promise Async/Await  (0) 2023.02.14
javascript Promise  (0) 2023.02.13
 

티스토리툴바