[TIL] 190724

오늘 한 일

• Vue.js 완벽가이드 인프런 강좌 [중간정리 및 스타일링]까지 30% 수강 및 실습.
• 자바스크립트 노랭이 책 [7장 함수표현식] 완독.

공부 내용

axios / Promise

axios는 Promise 객체를 반환하므로 .then과 .catch를 이용하여 비동기 처리를 할 수 있다.

Promise 객체는 ES6에서 정의된 것으로, 콜백함수지옥을 해결해 줄 수 있다.

new Promise로 객체 인스턴스를 만드는 순간 Promise는 대기 상태에 있게 된다. 그리고 http호출을 통해 값을 받아오게 되면 response를 가진 이행 상태가 된다. 그러나 값을 받아오지 못하면 실패 상태가 된다. 이것을 코드로 표현하면 다음과 같다.

new Promise(function(resolve, reject) {
    resolve(); //이행
    reject(); //실패
});

콜백 함수 내에서 resolve()를 실행하면 [이행] 상태가 되고, reject()를 실행하면 [실패] 상태가 된다.

 

자바스크립트에서 this

자바스크립트에서 this는 좀 헷갈리게 작동한다. 객체 내에서는 this는 해당 객체를 가리킨다. 함수 내에서 this는 전역 객체 'window'를 가리키고 'strict'모드라면 'undefined'으로 설정된다. 그러나 또 생성자 함수 내에서 this는 해당 인스턴스를 가리킨다. 

이는 this가 함수 호출과 동시에 생성되어 함수가 실행 중인 컨텍스트에 묶이기 때문이다. 따라서 클로저에서 또는 콜백 함수에서 this값을 제대로 받아오기가 힘들다. 원하는 this값에 접근하려면 외부함수에 변수를 추가하여 var that = this; 와 같이 값을 할당해줘야 한다. 그러면 스코프 체인을 통해 외부 함수의 변수에 접근하여 this값을 가져올 수 있다. 또는 ES6에 정의된 화살표 함수를 이용하면 자동으로 this값이 바인딩 되어 원하는 값을 얻을 수 있다.

 

블록 스코프, 모듈 패턴과 즉시 실행 함수

ES5까지는 블록 레벨 스코프가 없었기 때문에 또, 모듈화를 위해 정의된 명세가 없었기 때문에 이들을 해결할 수 있는 방법으로 '즉시 실행 함수' 또는 '즉시 호출 함수'를 사용했다. (자스 노랭이가 옛날책이어서 ES5 명세를 바탕으로 전개되어있다.) 

(function(){
	//...
})();

위와 같이 익명 함수를 ()괄호로 한번 감싸고 뒤에 호출을 의미하는 ()괄호를 한번 더 적어주면 함수가 정의됨과 동시에 호출된다. 이는 함수 선언과 다르게 함수 표현식이라서 가능한 것이다. 함수 선언의 경우 익명으로 정의가 불가능하고 선언과 동시에 호출하는 것도 불가능하다. 아무튼 이 방식을 사용하면 모든 변수가 전역에 정의되는 것을 해결할 수 있고, 따라서 네이밍 중복도 가능해진다. 또한 그 변수들을 외부에서 접근하지 못하도록 숨기는 것도 가능해서 모듈화가 가능하다. ES6 이전에는 이런식의 모듈 패턴을 사용했다. 이쯤에서 다시한번 읽어보는 common.js vs AMD

또한, for문(이나 {}중괄호를 쓰지만 블록스코프가 먹히지 않았던 다른 여러 부분들)도 즉시 실행 함수로 감싸서 i값을 내부에서만 정의/사용 할수 있도록 하는 것이 가능하다.

느낀점

Vue.js 강의를 실습하면서 내가 몰라서 두려워했던 개념들이 생각보다 어려운 내용이 아니었다는 것을 느꼈다. 물론 사용법을 제대로 익히려면 꽤 걸리겠지만 그래도 비동기 처리(axios)나 컴포넌트 상태 저장(vuex)에 대한 개념이 어느정도 있는 상태에서 들으니 "왜?"라는 물음으로부터 좀 더 자유로워질수 있었다. 예전에 뭣도 모를때 리액트 강의를 들었을 땐, 몰라도 일단 작동되니까 따라적고, 이론을 봐도 기본 배경을 모르니까 반만 이해된 느낌으로 진행했었다. 결국은 리액트로 취직을 실패했었지... 이래서 경험이 중요한가보다.

그리고 자스 노랭이 책 본것도 정리를 하긴 했지만, 책은 혼자 힘으로 읽어내야 하는 것이라서 집중력이 너무 떨어진다. 누군가 책을 읽어주면 좋겠다는 생각을 하다가 사진을 찍으면 글자를 분석해서 음성으로 읽어주는 그런 서비스가 있을것 같아서 찾아봤는데 아직은 오디오북 정도밖에 없는것 같다. 그런데 생각해보니 글자를 분석해서 읽으려면 기계음으로 전달될텐데 그러면 별로 의미가 없을것 같으면서도 언젠가는 나오지 않을까 싶기도 하다. 아무튼 오늘은 여기까지.