JavaScript 4주차 스터디 노트

yoon·2022년 5월 8일

동기 / 비동기

동기와 비동기의 차이


동기는 요청을 보낸 후 응답(결과물)을 받아야지만 다음 동작이 이루어지는 방식을 말한다.
모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다.


function func1() {
    console.log('첫번째 펑션!');
    func2();
}

function func2(){
    console.log('두번째 펑션!');
    func3();
}

function func3() {
    console.log('세번째 펑션');
}

func1();
// 출력값은 아래와 같다.
// 첫번째 펑션!
// 두번째 펑션!
// 세번째 펑션! 을 띄우게 된다.

비동기 처리는 왜 필요한가? - 데이터를 서버로부터 받아오는 앱을 만든다고 가정하면,
서버로부터 데이터를 받아와서 해당 데이터를 뿌려줘야 하므로 맨 처음에 서버로부터 데이터를 받아오는 코드가 실행되어야 할 것이다.

비동기로 처리하지 않고 동기적으로 구성을 하게 된다면 데이터를 받아오기까지 기다린 다음에 앱이 실행될 것이고 서버에 가져오는 데이터 양이 늘어날수록 앱의 실행속도는 기하급수적으로 느려진다.

데이터를 가져오기까지 앱이 대기하는 상태가 발생하게 된다. 이런 불편을 없애기 위해서
데이터를 수신하는 코드와 페이지를 표시하는 것과는 비동기적으로 처리를 해야한다.

function func1(){
    console.log('func1');
    func2();
}

function func2(){
    setTimeout(function(){
        console.log('func2');
    }, 0);
    func3();
}

function func3(){
    console.log('func3');
}
func1();
/*
실행결과
func1
func3
func2
*/

Promise 객체

promise는 기본적으로 Callback이 하는일

<Callback함수는 특정 함수에 매개변수로 전달된 함수를 의미한다. 그 콜백함수는 함수를 전달받은 함수안에서 호출된다.>

과 같다. 차이점은 promise는 작업이 끝난 후 실행할 함수를 제공하는 것이 아니라 promise자체 메소드인 .then()을 호출한다.

function add10(a) {
  return new Promise(resolve => setTimeout(() => resolve(a + 10), 100));
} //Promise사용 시 작업이 끝났음을 알려주는 resolve를 인자로 받아들임.
add10(10)
  .then(add10)
  .then(add10)
  .then(add10)
  .then((res) => console.log(res))

Promise는 .then()과 같은 메소드를 연속적으로 사용이 가능한 이점을 가지고 있다. 따라서 callback을 사용했을 때와는 다르게 코드를 작성하고 이해하기가 한결 쉬워졌다.

Event

이벤트 핸들러(리스너)

이벤트 기반 프로그래밍
Javascript는 이벤트를 기반으로 동작한다. 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것이다.

이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로, 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 한다. 따라서 어떤 이벤트가 발생할 때 어떤 작업을 실행할지 미리 등록해 두어야 한다.

이 작업을 '이벤트 리스너(event listener)에 콜백(callback)을 등록한다'고 한다. 이벤트 리스너에 등록된 콜백함수는 이벤트 핸들러(event handler)이다.

이벤트 : click

이벤트 핸들러(event handler) : function (){}

이벤트가 발생했을 때 그 처리를 담당하는 실행 함수
이벤트 리스너(event listener) : onClick

지정된 타입의 이벤트가 발생하면, 이벤트 리스너가 듣고 있다가 이벤트 핸들러를 실행시킨다.

이벤트 처리 방식

<button onclick="handleEvent()">Event</button>

함수를 호출하는 형태

이벤트 객체

이벤트 객체란?
이벤트 객체란 DOM을 이용한 이벤트에 연결된 함수에서 매개변수로 얻을 수 있는 객체다.

이 객체는 발생한 이벤트에 관한 다양한 정보를 가지고 있다.

그리고 이벤트 객체는 다양한 메서드와 프로퍼티를 가지고 있어서

이벤트를 더욱 세심하게 컨트롤할 수 있다.

예시.

<body>
    <button id="test"> 이벤트 객체 테스트 버튼입니다. </button>
</body>
<script>

    let eventObject = document.getElementById('test');

    eventObject.addEventListener('click', function(event){
        console.log("눌렀습니다.");
        console.log("클릭이 이뤄진 X좌표: "+event.clientX);
        console.log("클릭이 이뤄진 Y좌표: "+event.clientY);
        console.log("현재 이벤트 처리 중인 element: "+event.currentTarget);
        console.log("이벤트 핸들러가 호출된 단계: "+event.eventPhase);
        console.log("실행된 이벤트 타입: "+event.type);
    });

</script>

위 코드는 버튼 클릭 이벤트 발생시 콘솔창에 각종 이벤트 객체 관련 정보가 출력되도록 설정한 함수다.

이때 이벤트 리스너의 콜백 함수를 통해 매개변수로 이벤트 객체를 받게 된다.

위 코드를 실행하고 화면 상의 버튼을 클릭하면 콘솔창에 다음과 같이 뜬다.

위 그림처럼 실행됐던 이벤트에 관한 다양한 정보를 얻을 수 있다.

그리고 이외에도 이벤트 객체를 이용하여 다음과 같은 기능을 실행할 수 있다.

preventDefault() - 취소 가능한 이벤트를 취소함

stopImmediatePropagation() - 같은 요소의 다른 이벤트도 막고 상위로 가는 이벤트 전파도 막음

stopPropagation() - 버블링 단계에서 상위로 가는 이벤트 전파 막을 수 있음

preventDefault()

a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다.

preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다.

주로 사용되는 경우는

  1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
<a href="https://plitche.github.io" id="aTag">Plitche 블로그로 이동하기</a>
<script>
  $(document).ready(function() {
      $('#aTag').on('click', function(e) {
          e.preventDefault();	// 이벤트 작동 X
          console.log("https://plitche.github.io")
      })
  });
</script>
  1. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)

객체지향 프로그래밍

클래스

클래스란?

함수가 특정 알고리즘을 포장하는 기술이라면 클래스는 이렇게 만들어진 수많은 변수와 함수 중 연관있는 변수와 함수만을 선별해 포장하는 기술.

객체 단위로 코드를 그룹화하고 코드를 재사용하기 위해서 클래스를 사용한다.

클래스 생성하기

앞에 클래스를 붙여준 뒤 constructor(생성자)를 이용해서 초기화 해준다.
메서드나 프로퍼티를 생성하거나 추가하는 법은 일반 객체를 만들 때와 동일하다.

class Player {
   constructor(name) {
     this.height = 180
     this.name = name
   }

   jump(space) {
     this.height += space
     console.log(`${this.name}이 점프를 하여 ${this.height}가 되었습니다.`)
   }

   run() {
     console.log(`${this.name}이 뛰고 있습니다.`)
   }
 }

클래스 상속받기

클래스를 상속받는 방법은 클래스 이름 뒤에 extends를 붙이고 상속받을 클래스 를 채택하면 됩니다.

일반 함수로 만든 객체와 같이 부모가 가지고 있는 메서드를 사용할 수 있습니다.

 //extends를 사용하여 상속받음
  class BasketBallPlayer extends Player {
    shoot() {
      console.log("Shoot")
    }
  }
  //BasketBallPlayer는 생성자가 없더라도 부모가 있기 때문에 가능하다.
  let basket = new BasketBallPlayer("Jordan")
  //부모가 있는 메서드를 그대로 사용가능
  basket.jump(50)
profile
yoon
이전 포스트

JavaScript 3주차 스터디 노트

다음 포스트

왜지?

0개의 댓글