원래는 25일에 알게된 것들이 잘 이해가 가지 않아서 피어세션 이후 남는 점심시간에 정리하려고 했는데, 릴레이 프로젝트를 하다보니 생각대로 되지 않아서 미뤄져 주말에 올리게 되었다.

javascript async&await

  • 자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 필수적. 그 비동기 처리에 사용되는 함수 중 하나이다.
  • 다른 함수로는 callback, promise가 있음
  • function 키워드 앞에 async를 붙여 답이 올 때까지 기다리도록 하고, 답이 올 때까지 기다려야 하는 부분에 await을 붙여서 사용한다.
  • (주의) await은 반드시 promise를 반환해야하고, async또한 promise를 반환해야 함.

    promise를 반환해야하는 줄 모르고, await async만 사용했다. 그래서 지난 과제에서 비동기처리가 제대로 되지 않았던 것 같다..ㅠㅠ

  • 다른 비동기 처리 함수에 비해 훨씬 직관적이어서 이해가 쉽다는 장점이 있다.
  • 추후 비동기 처리 함수에 대해 한번에 정리할 예정!

옵저버 패턴

  • 객체의 상태 변화를 관찰하는 관찰자들을 옵저버 객체에 목록으로 등록해 상태 변화가 있을 때 마다 메서드를 통해 객체가 직접 각 옵저버들에게 통보하는 디자인 패턴. 주로 분산 이벤트 핸들링 시스템을 구현하는 데 사용됨.
  • 바뀐 내용을 알아야하는 사용자들에게 한꺼번에 알림을 주어야할 때 사용하면 유용한 디자인 패턴.
  • Observer 역할을 도와줄 인터페이스 객체(Observer), 데이터를 관리하는 주체 객체(Subject), 데이터를 관찰하는 구독객체(Subscribe)가 있다.
  • Subscribe 객체는 Subject를 구독해서 데이터의 변경이 있을 때마다 자신도 알 수 있도록 한다. 이 때, Subscibe 메소드에는 Subcribe 객체가 데이터 변경 시에 실행되어야 할 동작을 callback으로 넘겨준다.
  • 이벤트가 발생하면 Subject 객체는 상속한 Observer 객체의 알림 기능 메소드를 통해 데이터 변경이 있음을 알려 구독 객체로 등록된 객체들에게 모두 알림을 보냄으로서 데이터 변경을 전체에게 알릴 수 있다.
  • 코드 예시 
    class Observer{
	constructor(){
		this.observers = new Set();
	}
	subscribe(observer){ //이때 observer는 callback 함수이다.
		this.observers.add(observer);
	}
	unsubscribe(observer){
		this.observers = [...this.observers].filter(subsriber => subscriber !== observer);
	}
	notify(data){
		this.observer.forEach(observer => observer(data));
	}
}

function Subjector(data){
	this.data = data;
}

Subjector.prototype = Object.assgin(Object.create(new Observer(), {
	updateData(){
		...
		this.notify(updateResult);
	}
}))

class Subscriber{
	constructor(Subject){
		this.subject = Subject;
		this.subject.subscribe(this.callback);
	}

	callback(data){
		...
	}
}

스프레드 오퍼레이터

  • 전개 구문이라고도 하며, 배열을 확장(퍼트려서) 사용할 수 있도록 한다. ...args와 같은 방식으로 사용한다.
  • 배열을 매개변수로 하나씩 넘기고자 할 때 유용한데, 아래 코드로 예를 들어보자. 
    let arr = [1,2,3,4];

function foo(a,b,c,d){};

foo(arr); // a=[1,2,3,4], b,c,d = undefined
foo(...arr); //a=1, b=2, c=4, d=4

    위와 같이 spread를 사용하면 원소별로 나열이 가능해진다. 이 외에도 구조 분해를 활용할 때도 유용하게 사용될 수 있다. 하지만 이렇게 사용할 경우 spread 변수가 처음이나 중간에 위치할 때는 에러가 발생한다는 점을 유의해야한다.

    let arr = [1,2,3,4,5];
let [arr2, arr3, ...arr4] = arr;
  
console.log(arr2);//1
console.log(arr3);//2
console.log(arr4);//[3,4,5]

데이터 변경 방식, immutable

  • 저번 정리에서 어느정도 이해했다고 생각했는데, 막상 immutable하게 데이터를 변경하도록 해보라고 하니 잘 이해하지 못하고 있었다는 것을 알게 되었다.
  • immutable value라고 하면, primitive value(boolean, null, undefined, number, string 등)이 있다. 이 타입을 제외한 모든 데이터는 Object 형태로 표현되는데, 이는 모두 mutable 방식으로 데이터를 변경한다.
  • immutable하게 데이터를 변경할 경우, 값이 변화가 생기더라도 다른 곳에 영향을 주지 않는다. 아래 코드처럼, 함수에서 그 값을 변경하는 행위를 했더라도 실제로 그 값은 변경되지 않는다. 
      a = 123;
  reverse = (num) => {num=321}
  reverse(a);
  a === 123 //true
  • Object를 immutable 하게 바꾸기 위해서는 copy를 사용하는데, copy와 관련해 shallow copy 문제(copy를 해도 참조형태로 copy하게 됨)가 있어 deep copy와 관련된 부분에 대한 이해도 필요하다.
  • 참고

Babel 도구

  • 현재 브라우저는 ES6 문법을 완전히 지원하지 않기 때문에 사용되는 도구. ES6 버전으로 작성된 코드를 낮은 버전으로 변경해 모든 브라우저에서 문제 없이 동작할 수 있도록 ES5 이전 버전으로 트랜스 파일링해준다.
  • 트랜스 파일링
    • 컴파일과 비슷한 개념으로 사용되는데, 차이가 있다.
    • 컴파일의 경우 한 언어로 작성된 코드를 다른 언어로 변환하는 동작이고, 트랜스파일링은 한 언어로 작성된 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것이다.

      예) 트랜스파일링: C++ > C TypeScript > JavaScript CoffeeScript > Javascript
      컴파일링: C# > IL(Intermediate Language)

  • ES6에서 소개된 Arrow function의 경우, Babel로 트랜스 파일링을 거치면 declaration function 형태로 변환되어 동작한다.
  • Babel 외에도 구글 트레이서, 구글 카자, 터미, 폴리필 등의 트랜스파일러들이 존재한다.

페어 프로그래밍

완전한 페어 프로그래밍을 겪어본 것은 아니지만, 각자 연구한 코드를 하나의 컴퓨터로 합치면서 작업을 해보고, 하나의 컴퓨터로 토론하면서 코드를 변경해봤다.

처음엔 모르는 부분들을 검색해봐야되고 하니 좀 보여주기가 부끄러웠는데, 서로 모르는 점이었기도 하고 하다보니 신경이 덜 쓰이게 되었다. 같이 하다보니 어떻게 해야 더 깔끔한 코드를 만들 수 있을지 얘기하면서 코드를 짜게되서 오류가 적다는 장점이 있었던 것 같다.

계속 공부하지 않으면 까먹게된다..

부스트캠프에 들어오기 전에 부스트코스 풀스택 웹 과정을 듣고 있었는데, 팀 프로젝트를 하면서 프론트엔드 개발을 내가 맡게 되었다. 이전에 한 것이 있으니까 어렵지 않게 작성할 수 있을 줄 알았는데 html 태그도 몇개밖에 기억이 안나고, js DOM API는 완전히 잊어버렸다.

있다는 것만 기억하고 쓰는 방법을 까먹어서 다시 강의 스크립트를 보는 대참사가 일어났다. 정말로 계속 공부하지 않으면 다 까먹는 직업인가보다..ㅠㅠ 평생 공부해야할 운명인가.

나는 React 같은 프레임워크를 써본적이 없어서 짧은 시간 개발하느라 결과물이 그렇게 예쁜 편이 아니었는데, 프레임워크로 개발한 다른 팀의 결과물을 보니 굉장했다. 물론 그 팀의 프론트 담당자님의 금손 덕분이기도 했겠지만, 프레임워크의 힘을 새삼 알게되었다.

이번주는 대체적으로 어려운 미션이 많았다. 하지만 리눅스와 친하지 않았던 나에게 리눅스와 친해질 필요성도 느끼게 해주었고, 비동기에 대해서도 어렴풋이만 알고 있었는데 지속적으로 경험을 해보면서 비동기가 무엇인지, 왜 필요한지 점점 확실히 알아가고 있는 것 같다.

내일의 미션은 또 어떤 것일지 벌써 기대 반 걱정 반.
멤버쉽까지 잘 갈 수 있기를 바란다 ;-)