201230_TIL (비동기, 메모이제이션)

🍎 오늘 배운 것

---

✔️ 동기, 비동기 방식
비동기 처리 방법을 배우기에 앞서, 동기와 비동기 방식의 차이점에 대해 먼저 배웠다. 동기(sync)는 현재 실행중인 코드부터 완료하고 다음 코드를 처리하는 방식, 비동기(async)는 현재 실행 중인 코드가 완료된 지와는 상관없이, 바로 다음 코드로 넘어가는 방식이다. 더 나아가서는 Timer API를 통해 비동기를 구현하는 방법에 대해서도 배웠다.

✔️ callback 함수
얼마전에도 callback함수에 대해 배우긴 했었는데, 사용하는데 무리가 없어서 그 때는 그냥 인자로 쓰이는 함수 정도로 이해하고 넘어갔었다. 근데 비동기 방식과 관련된 문제를 풀다보니 callback함수를 활용하는 부분에서 뭔가 막히는 느낌이 들어서 다시 찾아봤다. 전과는 다르게 클로저나 스코프같은 개념도 배워서, 어떤식으로 사용되는지 그때보단 쉽게 이해할 수 있었다. 그래도 이 부분은 다른사람한테도 설명해줄 수 있을 정도로 더 익숙해지게 노력해야겠다💧

✔️메모이제이션
메모이제이션은 결과를 메모리에 저장해둬서 다음에 같은 결과가 나올 때 저장된 결과를 재사용해 빠르게 실행하는 기법이다. 말 그대로 결과를 '메모'해두는 것이다. JavaScript에서도 클로저 개념을 이용하면 메모리제이션을 구현할 수 있다. 반복해서 실행되는 콜백함수가 외부에 있는 저장 공간에 접근할 수 있도록 만들면 된다. 함수가 실행될 때마다 결과를 저장하는 공간을 객체형태로 만들어두고, 함수가 실행될 때마다 이미 저장된 값이 아니면 그 값을 객체에 추가하게 함으로써 메모리제이션을 코드로 작성해보았다.

✔️ 함수(Function) vs 메서드(Method)
콜백함수에 대해 공부하다가, '콜백함수로 어떤 객체의 메서드를 전달해도 호출될 때는 함수로 호출된다'는 말이 있어서 함수와 메서드의 차이점이 뭐였지..?하고 생각하게 되었다. 둘다 코드를 실행하는 기능의 단위라는 공통된 특징 때문에 언제 함수라고 하고, 언제 메서드라고 할지 정확하게 인지하지 못해왔던 것 같다.

함수 : 독립적으로 존재, 처리 후 사용자가 원하는 결과 반환, function() 형태로 사용
메서드 : 클래스에 종속된 함수(클래스 함수), 해당 클래스에 대한 객체가 생성되어야 사용 가능, object.method() 형태로 사용

정리하면, 둘은 class에 종속되어 있는지 여부로 구분되며, 호출 방식도 다르다. 함수가 조금더 포괄적인 개념이다! 사실 지금까지는 그냥 형태만 보고 구분해왔는데 이번기회에 둘이 어떤 점에서 다른건지 명확히 알게 되었다.

 

🍎 기억할 것

---

✔️ 콜백함수 = 클로저
비동기 방식을 사용하면, 함수가 실행되고 특정 시점에 콜백함수가 불려진다. 콜백함수는 자신이 포함된 함수 환경에 접근할 수 있기 때문에, 콜백함수는 클로저라고 할 수 있다!

✔️ reduce 메서드
reduce 메서드 안에 return값이 있어야 다음 누산기(accumulator)에 적용이 된다! return값이 없을 경우에는 undefined가 반환된다!

✔️  Timer API
setTimeout(callback, millisecond) : 일정 시간 후에 함수를 한번 실행
clearTimeout() : 실행중인 setTimeout 종료
setInterval(callback, millisecond) : 일정 시간을 간격으로 함수를 반복 실행
clearInterval(timerId) : 반복 실행 중인 setInterval 종료

 

🍎 더 공부할 것

---

✔️ 데코레이터 패턴
데코레이터 패턴은 좋은 코드 설계를 위한 디자인 방법론인 '디자인 패턴' 중 하나이다. 그 중에서도 기본적인 객체에 추가 기능을 유연하게 동적으로 추가할 수 있는 패턴인데, 기존 객체에 새로운 기능이나 행동을 추가할 때 주로 사용한다고 한다. 클로저와도 관련이 있는 것 같아서 이론과 구현 방법에 대해 알아봐야겠다.

✔️ 메모이제이션, 재귀
찾아보니 메모이제이션 패턴을 재귀를 이용해 구현할 수도 있다고 해서, 재귀에 대해서 공부한 후 다시 코드를 작성해보려고 한다.

✔️ Timer API의 쓰임
setInterval, setTimeout 등의 Timer API를 사용해 비동기적으로 작업들을 처리하는 것이 복잡하지만 더 효율적이라는 것을 알게 되었는데, 그렇다면 이런 효율적인 방식을 언제 어디서 어떤식으로 활용할 수 있는지에 대해서도 궁금해졌다.

✔️ requestAnimationFrame
Javascipt로 동영상 등의 움직이는 애니메이션을 구현하고 싶을 때, 사람이 인지할 수 있는 최대 범위인 16.6ms(1000ms / 60frame)마다 프레임을 찍어내기 위해 setInterval이나 requestAnimationFrame를 사용할 수 있다. 애니메이션이 복잡해지면 부하가 발생할 수 있는데, 이런 경우에는 requestAnimationFrame를 쓰는 것이 좋다. 그리고 애니메이션도 더 부드럽게 동작한다고 한다. 일단 이정도로만 알아두고 시간이 남는다면 어떻게 사용하는 지 좀 더 알아봐야겠다.