항해99 개발일지

01 - 26 일지

카로루딘 2023. 1. 26. 20:18

오전 : 어제 배운 내용 복습

특이사항

비동기 작업의 동기적 표현이 가능한 방법으로 Promise가 있다. 프로미스는 제작 코드(원격에서 스크립트를 불러오는 따위의 시간이 걸리는 일)과 소비 코드(제작 코드의 결과물을 기다렸다가 값을 받아와 쓰는 함수)를 잇는 중간 단계의 코드라고 할 수 있다. 프로미스는 new 연산자로 호출한 프로미스의 인자로 넘어가는 콜백은 '즉시 실행'한다. 성공하면 resolve, 실패하면 reject, 둘 중 하나라도 실행되기 전까지는 then, catch로 넘어가지 못한다. 그러므로 비동기 작업이라도 강제로 대기시키기 때문에 동기적 표현이 가능해진다.

강의를 복습하면서 코드를 써보던 도중 undefined값은 false로 반환된다는 것을 알았다. 이건 꽤 중요할 것 같다. null, NaN도 false를 가리킨다고 한다.

1
2
3
4
5
new Promise (function(resolve){
 
콜백 함수 어쩌구 저쩌구
resolve(return값);
}
cs

프로미스와 Async/await를 쓰는 방법도 있다. 비동기 작업을 하려는 function 앞에 async를 붙이고  function 내에 비동기 작업이 필요한 부분에 도달하면 await를 붙인다. await에 도달하면, 뒤의 내용을 전부 프로미스로 자동 전환한 뒤, await에 있는 내용이 resolve된 다음에야 다음으로 넘어간다고 한다. then하고 비슷한 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Promise (function(resolve){
 
콜백 함수 어쩌구 저쩌구
resolve(return값);
}
 
var 에이싱크 = async function(){
 
var _에이싱크 = async function(a){ 어쩌구저쩌구 + await Promise(a);}
await _에이싱크(ㅁㄴㅇㄹ);
await _에이싱크(ㅁㄴㅇ);
.
.
.
 
}
 
에이싱크();
cs

 

클로저

드디어 클로저를 한다. 어제 뗐어야 하는데 오늘 아침에서야 들어간다. 일정이 조금 늦춰지는데.......팀원들하고 코드 풀이를 너무 많이 했나.....아니야, 경험이 필요했어.

 

클로저는 '함수와 함수가 선언된 어휘적 환경의 조합'이다. 이를 이해하려면 자바스크립트가 어떻게 렉시컬 스코프를 잡는이 이해를 해야 한다. 클로저는 '상태를 안전하게 변경하고 유지하는 목적'으로 쓴다. 가비지 컬랙터가 의도치않게 변경하는 상황을 피해야 하기 때문이다.

렉시컬 스코프는 '함수가 정의된 위치에 의해 결정'된다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const x = 1;
 
function outerFunc() {
    const x = 10;
    //const x 가 10으로 선언되었지만, innerFunc가 정의된 환경에서의 x는
    // 상위에 있는 const x = 1이다.
    innerFunc();
};
 
 
function innerFunc() {
    console.log(x); // 1
};
 
outerFunc();
cs

이 예시를 보면 렉시컬스코프의 작동 원리에 대해 이해하기 쉬울 것이다. x가 아우터펑크 안에서 선언되고, x를 출력하는 이너펑크를 호출했지만 이너펑크는 자신이 선언된 환경에서의 x를 가져오기 때문에 1을 출력한다.

클로저는 외부 함수보다 중첩 함수가 더 오래 살아있을 경우, 중첩 함수는 종료된 외부 함수의 변수를 '계속' 참조할 수 있는데 여기서의 중첩 함수가 바로 클로저이다.

 

오후, 저녁 : 비동기 동기에 대한 이해 공부

특이사항

일단 자바스크립트는 싱글 스레드 언어이다. 이는 동시성을 신경써야 하는 멀티 스레드의 함정을 피하기 위함이며 nodejs같은 환경에서 유사 멀티 스레드를 이미 구현했기 때문이다. 즉 자바스크립트 자체는 싱글 스레드에 동기적 언어이지만 이를 둘러싸고 이용하는 환경은 멀티 스레드에 비동기적 언어(도 지원)인 것이다.

강의에서는 동기와 비동기를 카페에 비유하여 설명하였다. 카페에서 주문을 받고, 그 자리에서 한 잔 한 잔 만들어 주는 것이 동기적 언어의 작동방식, 번호표를 발급해주고 커피가 나오면 그때 번호를 호명해서 다시 손님을 불러와 커피를 건내주는 것이 비동기적 언어의 작동방식이라고 한다. 실제로는 이보다 복잡하겠지만 난 이미 유니티에서 겪어봤으니깐.....초당 평균 60프레임 속에서 따로따로 움직이는 수백 개의 오브젝트는 이제와서 생각해보면 비동기의 대환장 파티가 아니었나 싶다. 잊지 않겠다 코루틴....너도 마찬가지야 DOTween.

그때 당시 나는 대부분의 비동기적 작업, 예를 들어 게임의 무대를 만드는 field 오브젝트가 생성되고, 그 위에 유저가 활용할 interaction 오브젝트를 뿌리는 순서를 아주 넉넉한 시간의 코루틴을 할당해 진행했었다. 뭐, 시간 상으로는 0.03초 차이 정도였지만 하나하나의 로딩이 끝나고 이를 연계할 방법이 없을까 고민했었는데 여기서 답을 찾았군. 동기와 비동기에 대한 사용법은 우리 팀원 전체가 며칠동안 뭐빠지게 들여다본 내용들이 바로 그것이다.

 

프로세스와 스레드의 차이

프로세스는 일반적으로 '실행된' 프로그램을 이야기 한다. 그리고 여기 프로세스 내에서 실행되는 흐름의 단위로 스레드가 있다. 스레드는 프로세스가 받아온 자원의 일부를 할당 받거나 공유하며 프로그램의 수행을 담당한다. 카페 예시에서는 점원이 스레드라고 할 수 있다.