[TIL] 2022-1019 (티스토리 복구 경축!)

블로그 플랫폼을 벨로그로 옮길까 하다가, 티스토리가 복구되어 다시 써보려고 한다.
지금까지 작성한 글들이 이 곳에 있다보니 옮기기가 쉽지 않았다...!

🐈오늘 배운 것

✔️기술면접 준비

오늘 준비 시간이 살짝 촉박하고 질문이 많아서 주어진 시간안에 모든 질문을 다 준비할 수는 없었다. 

섹션 4 기술면접 준비 노션 링크

전체 내용을 블로그에 정리하는 것은 내용이 너무 길어질 것 같고...

오늘 좀 몰랐던 부분에 대해서만 간략히 정리하려고 한다.

 

먼저 Node.js 는 일정 부분 멀티 스레딩을 지원한다. 자바스크립트가 싱글스레드 언어이기 때문에 node 도 당연히 싱글 스레드일 것이라고 생각했는데, 일정 부분은 맞지만 libuv 라는 노드 라이브러리가 멀티스레드를 지원하고 이 라이브러리를 통해 비동기 작업을 처리한다고 한다. node 에서도 그냥 웹 api 처럼 비동기를 지원해주는 api가 있겠거니 하고 넘겨짚었었는데, 같이 세션을 진행해주셨던 한 분의 의문제기로 이 내용에 대해서 짚고 넘어갈 수 있었다.

 

그리고 클래스형 컴포넌트와 함수형 컴포넌트의 차이에서... 클래스형 컴포넌트에서는 라이프 사이클 메서드를 사용해 컴포넌트의 생명 주기를 관리한다. 함수형 컴포넌트에서 훅을 사용해 직관적으로 조작할 수 있는 부분을 메서드로 조금 복잡하게 작성해야 하는 것 같다. 지금 당장 알아야 하는 내용은 아닌 것 같지만 실무에서 레거시로 만날 수도 있기 때문에 언젠간 짚고 넘어가야 할 것 같다.

 

그리고 오늘 반응형 웹에 대한 질문이 있었는데, 생각보다 간단한 질문임에도 제대로 생각나지 않아 답변을 할 수 없었다 ㅜ. 반응형 웹이라는 것은 다양한 디바이스 환경에 맞춰서 제작되는 웹을 의미하고, 화면의 크기나 해상도와 관계 없이 사용할 수 있다는 장점이 있다. 다만 컨텐츠가 너무 많을 시에는 성능상에 영향을 줄 수도 있다고 한다. 

✔️함수형 프로그래밍 

인프런 ES6 함수형 프로그래밍 강의로 공부하는 중이다. 스터디를 시작했는데 이번주 분량이 꽤 많아서 후다닥 봐야한다.

오늘 공부한 내용인데 이렇게라도 정리하지 않으면 또 휘발될까봐 정리해보았는데...

이렇게 코드를 보면 어떤 내용인지 느낌이 오는데 막상 이터레이터와 제너레이터에 대해서 설명하라고 하면 명확하게 설명하기가 좀 힘들다. 이런 내용을 배워서 함수형 프로그래밍에 어떻게 적용한다는 것인지 감이 안와서 그런것일지도 모른다. 

그래도 오랜만에 자바스크립트로 돌아가서 반갑고 기분은 좋다.

 

이터러블과 이터레이터 프로토콜

ES6에서 for...of 문은 이터러블을 순회할 수 있는 반복문이다. 이터러블이란 반복 가능한 객체로, 이터레이터라는 값을 활용해 생성되는 value 라는 값으로 이터러블을 반복할 수 있다. ES6에서 이터러블로는 일단 배열, Sets, Maps 같은 것들이 있다. 

// set(이터러블)
const set = new Set([1, 2, 3]);

// set의 이터레이터
cosnt iterator = set[Symbol.iterator]();
console.log(iterator.next()) // { value: 1, done: false }

for...of 문을 사용해서 배열, set, map 같은 이터러블을 돌 수 있는 이유는 기존처럼 key, value 로 접근하는게 아니라 이 이터레이터의 next 메서드가 반환하는 객체의 value 값을 반복하여 출력하기 때문이다.

이러한 방식을 이터러블/이터레이터 프로토콜 이라고 하며, for...of 반복문은 이터러블 프로토콜을 따르고 있다고 표현할 수 있다.

참고로 for...of 로 반복을 할 수 없는 객체는 이렇게 조회해도 이터레이터를 찾을 수 없다. 

console.log({hi: true, hello: false}[Symbol.iterator]); // undefined

사용자 정의 이터러블

이터레이터를 만들 수 있으면 배열이나 맵같은 이터러블 객체가 없어도 이터러블을 만들 수 있다. 

// 이터러블에서 [Symbol.iterator] 키로 이터레이터에 접근할 수 있었기 때문에
// 직접 그 속성을 정의해본다.
const iterable = {
  // 대괄호를 사용하는 이유 : symbol이라서.
  [Symbol.iterator]() {
    let i = 3;
    return {
    // 이터레이터는 next 메서드를 가지고 value를 순회(?)한다.
      next() {
        return i === 0 ? {done: true} : {value: i--, done: false};
      },
      // 이터레이터가 자신의 이터레이터로써 자기 자신을 리턴해야함. 그래야 완벽한 이터레이터이다.
      [Symbol.iterator]() {
        return this;
      },
    };
  },
};

// 위에서 정의된 이터러블에 직접 정의한 키를 실행하면 이터레이터를 생성할 수 있다. 
let iterator = iterable[Symbol.iterator]();

// 이터러블,이터레이터 프로토콜에 의해 이터레이터로도 순회가 가능해진다.
for (const a of iterator) console.log(a); // 3,2,1

제너레이터

제너레이터는 이터레이터이자 이터러블을 생성하는 함수이다.

// 제너레이터 함수는 앞에 * 표시를 붙여준다.
function* generator() {
  // 몇 번의 next로 value를 꺼내줄지 결정한다.
  yield 1;
  // 순회할 값을 나열하여 정의하는 것이라 아래와 같이 정의할 수도 있다.
  if (false) yield 2;
  yield 3;

  // next가 실행되고 마지막에 done이 true가 되면 리턴되는 값이다. 순회할 때 이 값은 출력되지 않는다.
  return 100;
}

// generator 함수의 리턴값은 이터레이터
const iterator = generator();
// 따라서 이터레이터의 next 메서드를 실행할 수 있다.
console.log(iterator.next()); // { value: 1, done: false }

// generator는 well-formed 이터레이터를 리턴한다.
// 이터레이터의 Symbol.iterator 의 리턴값이 자기자신!
console.log(iterator[Symbol.iterator]() === iterator); // true

// generator의 실행 결과값이 이터레이터이자 이터러블이므로, 아래와 같이 for..of 문으로 순회할 수 있다.
for (const a of generator()) console.log(a);

✔️타입스크립트

캐럿마켓 클론코딩을 수강하면서 타입스크립트 부분은 제대로 알지 못해 복습을 하지 못했다. 보다 보니 잘 알고 적용하면 너무 좋을 것 같아서 공부를 시작했다. 

 

void 타입

함수에만 있는 타입인데, 해당 함수가 아무것도 리턴하지 않는다는 것을 의미한다.

// 보통 void 타입을 별도로 지정할 필요는 없다. 
function hello() :void {
    console.log('hi');
}

Call Signatures

함수의 인자 타입과 반환 타입을 미리 정의하는 것이다.

// 먼저 함수의 타입 구조를 정의하고
type Add = (a:number, b:number) => number;

// 그 타입을 함수에 적용할 수 있다.
const add:Add = (a, b) => a + b;

 Overloading

함수가 여러개의 콜 시그니쳐를 가졌을 때 오버로딩이 발생한다.

// 아래와 같이 여러개의 콜 시그니쳐를 가지는 타입이 있을 때
type Add = {
	(a:number, b:number) : number
	(a:number, b:string) : number
}

// 이런 함수를 오버로딩 함수라고 한다.
const add : Add = (a,b) => {
    if(typeof b === 'string') return a
    return a + b
}

실제 이런 식으로 타입을 정의해서 사용하는 일은 별로 없겠지만, 라이브러리에서 많이 사용되는 방식이라서 알아두면 좋다.

🐈feedback

1. 평일에는 알고리즘과 개념 공부에 집중하고, 주말에는 사이드 프로젝트로 구현하는 연습을 하려고 한다. 해야할 일의 흐름이 쭉 이어지는 느낌이라 조금 더 수월하게 진행할 수 있는 것 같다.

2. 집중을 너무 못한다. 집에 들어오면 밥먹고 좀 쉬는데, 차라리 오후에 카페를 가지 말고 저녁 시간에 가는게 훨씬 나은 것 같다.

🐈오늘의 느낀 점

내일이면 대망의 pre 프로젝트가 시작되는 날이다. 한 가지에 몰두하면 너무 몰입해서 힘들어지는 때가 종종 있는데, 그런 어려움을 알기 때문에 이번에는 컨디션을 잘 조절하면서 진행할 수 있을 것 같다. 내일 아이스브레이킹이 힘들까봐 받아둔 자료를 가지고 진행을 해볼까 하는데 ㅎ^ㅎ~ 백엔드 분들은 어떤 분들일지 아쥬아쥬 기대가 된다. 왠지 즐겁게 잘 할 수 있을 것 같은 기대가... ㅎㅎ 아직 뭘 할지 정해진 것은 없지만... 

 

잘 안되더라도 지치지 말고 루틴! 루틴을 꼭 기억하자!