제이

이번주에는 비동기 & 동기 호출, Function Method 그리고 '자바스크립트로 할 수 있는 것'이라는 타이틀의 내용들을 학습했습니다. 하루는 이론적인 내용들을 다루었고, 나머지 하루는 강사님 말대로 Casual한 내용을 다루었습니다. 가장 인상 깊었던 부분은 Casual한 부분인 '자바스크립트로 할 수 있는 것'이었네요. 하지만 이론적인 내용 또한 중요하니 간단하게나마 정리해보겠습니다. 

Asynchronous & synchronous Call

비동기(Asynchronous)와 동기(Synchronous)를 설명하기에 앞서 자바스크립트(Javascript)가 가지는 특징에 대해서 알아보겠습니다. 자바스크립트는 기본적으로 싱글 스레드(Single Thread) 언어입니다. 다시 말해, 멀티 스레드(Multy Thread)를 지원하지 않는 언어인데요, 여기서 스레드(Thread)라는 것을 설명할 때 컴퓨터에 비유하면 좋을 것 같습니다. 흔히 RAM과 CPU를 비교할 때 CPU는 하나의 작업을 빠르게 처리할 수 있는 능력에 비유하고, RAM은 얼마나 많은 일을 동시에 진행할 수 있는지에 비유합니다. 스레드라는 것은 RAM에 비유할 수 있겠습니다.(물론 정확하지는 않지만) 멀티스레드는 두가지 이상의 작업을, 싱글스레드는 한가지 작업만을 처리할 수 있는 것을 의미합니다.

다시 본론으로 돌아가서, 동기와 비동기에 대해 수업시간에는 커피 주문하기에 비유했습니다.

동기 호출에 해당하는 좌측의 경우에는 작업1(손님1)이 끝나기 전에는 작업2(손님2)가 진행될 수 없습니다. 반면 비동기 호출(우측)의 경우에는 작업1과 작업2가 동시에 진행됩니다. 멀티스레드를 지원하지 않는 자바스크립트의 기본적인 동작은 좌측과 같기 때문에 특정 상황에서 문제가 발생할 수 있습니다. 예를 들면 사용자가 서버에서 이미지를 요청했을 때 이미지가 로드되기 까지 아무런 동작을 할 수 없는 상황말입니다.

자바스크립트에서 위와 같은 동기 처리의 문제점을 해결하기 위한 비동기 처리의 대표적인 예는 다음과 같습니다.

Function Method
 - .apply(), .call(), .bind()

몇가지 함수 호출의 방법에 대해서 공부했습니다. 이 호출 방법들의 핵심은 this 키워드를 지정시켜 놓음으로써(bind) 싱글스레드라는 특성때문에 this 키워드가 가리키는 객체가 계속해서 바뀌는 문제를 해결하는 것입니다. 어느정도 비동기/동기에 대한 내용의 연장선이라고 볼 수 있겠는데요, 그 이유는 아래의 간단한 예제에서 찾을 수 있습니다.

function Box(w,h){
    this.width = w;
    this.height = h;
    
    this.getArea = function(){
        return this.width * this.height;
    }
    this.printArea = function(){
        console.log(this.getArea());
    }
}

let b = new Box(100,50);
b.printArea(); // 5000

setTimeout(b.printArea, 2000);
//VM766:9 Uncaught TypeError: this.getArea is not a function at Box.printArea (<anonymous>:9:26)
//Box.printArea @ VM766:9
//setTimeout (async) (anonymous) @ VM766:16

setTimeout()을 통해 2초 후에 b.printArea()를 실행하는 예제입니다. setTimeout구문으로 넘어오게 되면 Box내부의 this는 더이상 객체 b가 아닌 window를 가리키게 됨으로 Uncaught TypeError가 발생합니다. 이는 bind를 통해 this를 b객체로 지정한 체로 함수를 호출하여 해결할 수 있습니다. 

setTimeout(b.printArea.bind(b),2000); // 5000

또 한가지, bind()를 통해 커링(currying: '인자 여러개를 받는 함수'를 '인자를 하나를 받는 함수'로 바꾸는 방법)을 구현할 수 있습니다. 

function template(name, money){
    return '<h1>' + name + '</h1><span>' + money + '</span>';
}

let tmplSteve = template.bind(null, 'Steve');
tmplSteve(100);  // <h1>Steve</h1><span>100</span>

let tmplJohnny = template.bind(null, 'Johnny');
tmplJohnny(1000);  // <h1>Johnny</h1><span>1000</span>

자바스크립트로 할 수 있는 것들

코드스테이츠 프리코스를 시작한지 어느덧 7주가 지났습니다. 그동안 계속해서 글을 써보려고 의자에 앉아보기는 했습니다만, 워낙 글재주가 없으니 힘겨워서, 이 핑계 저 핑계를 들면서 지금까지 미뤄왔습니다. 이제는 꾸준히 제가 공부한 내용 혹은 요즘 드는 생각들을 기록해 보려고 합니다. 프리코스를 7주차까지 진행하면서 느낀 점과 어떤 것들을 했는지 간단하게 이야기를 하는 것으로 시작하면 좋을 것 같네요.

Week 1 & 2

1,2 주차에는 기본적인 문법을 공부했습니다. 변수와 타입, 조건문, 함수, 배열, 반복문, 객체. 어떤 언어를 사용하더라도 공통으로 포함되는 내용들입니다. 프로그래밍을 해본 사람이라면 쉽다는 느낌을 받을 수 있는 기간입니다. 다만, Javascript에서 변수를 취급하는 방법이 C나 Java보다 느슨(?)하다는 점이 새로웠네요. 하지만 이게 나중에 저를 더 힘들게 할지 편하게 할지는 아직 잘 모르겠습니다.

'배열 다루기' 파트에서는 배열에 관련된 메소드(Method)들을 배웠습니다. push/pop만 사용할 줄 알았던 저에게는 굉장히 새로웠습니다. 7주차까지 와서 보니 이때 배웠던 map, reduce, filter 등의 메소드들은 자바스크립트를 한다면 필수라고 할 수 있겠네요.

Week 3

처음으로 Pair programming을 해보았고, Git에 관해 공부했습니다. Pair programming을 처음 할 때 굉장히 어색했던 기억이 있네요. 보통 한 화면을 공유하고 그 화면의 주인이 타이핑을 합니다. 다른 사람은 네비게이터라고 해서 문제 해결을 담당하죠. 지금까지 페어를 하면서 느낀 장점은 문제에 접근하는 방법이 사람마다 다르다는 것을 알게 된 점. 단점은 혼자만의 문제일 수 있겠지만, 네비게이터 역할을 맡았을 때 오히려 키보드를 잡았을 때보다 생각을 깊이 하기 힘들다는 점 입니다.

Git은 정말 유용합니다. 개발자들만을 위한, 개발자들만에 의한 단순한 도구라고 생각했습니다. Git이 무엇인지 알게되고 Git-hub를 직접 사용해보기 전까지는요. 아직 100% 활용할 줄은 모릅니다만, 실제로 헌법 개정안 발의에 Git을 이용한 사례를 보면 제가 알지 못하는 사용처가 무궁무진 할 것 같습니다.

Week 4

숫자 다루기(Number/Math Methods), 변수의 전달(Call by reference/Call by value) 그리고 스코프(scope, 변수 유효 범위)에 대해 학습했습니다. 과제를 진행하다 보면 이쯤에서 값이 변해야 할 때 변하지 않거나 그 반대의 경우가 생기는데, 메모리 주소 값(reference)을 전달했느냐, 단순히 값(value)만을 전달했느냐를 고려하지 않았던 경우가 꽤 있었습니다.

스코프는 범위죠. 변수의 유효 범위입니다. 같은 이름의 변수를 선언하더라도 어떤 키워드(let, var, const)로 선언하느냐에 따라 코드가 정상적으로 작동될 수도, 아닐 수도 있습니다. 스코프에 관한 4가지 법칙을 학습했습니다. 

• Local Scope vs Global Scope
• Function Scope(var) vs Block Scope(let)
• 전역변수와 Window 객체
• 선언 없이 초기화된 변수는 전역 변수

Week 5

클로저(closure), 파라미터(parameter), 객체지향, this 키워드에 대해 배웠습니다. 클로저는 외부함수의 변수에 접근할 수 있는 내부함수로, 스코프 체인(Scope chain)이라고도 합니다. 외부에서 함수 안의 변수에 접근하지 못하게 하고, 해당 클로저 함수만을 이용해서 접근하게 할 수 있습니다. 객체지향 프로그래밍은 하나의 모델이 되는 클래스(class)를 만들고 클래스를 바탕으로 한 객체를 만드는 프로그래밍 패턴입니다. 이 모델을 이용하여 HTML 문서를 제어할 수 있습니다. this 키워드는 모든 함수 스코프 내에서 자동으로 설정되는 식별자입니다. C나 Java에서 this를 사용했었습니다. 자바스크립트에서의 this는 약간 다른데, 다른 글에서 좀 더 자세하게 기록해 볼 생각입니다.

Week 6 & 7

프로그래밍 보다는 실무에 가까운 도구들인 HTML, CSS, DOM를 배웠습니다. 과제 Twitter를 진행하면서 프론트앤드 개발 work flow를 간단하게 경험해볼 수 있었습니다. CSS를 이용해 레이아웃을 짜 보았고, CSS Selector를 이용해 문서 객체들을 어떻게 설계하면 좋을지 고민해보는 시간이었습니다.