[TIL] 20210817

🚀 intro

어제 새벽 4시가 안되어서 잠에 들었다. 그리고 아침 9시에 기상을 하고 운동을 하고 왔는데 이런 이유에서인지 코어타임 동안 피로감이 몰려왔었다.

잠은 관뚜껑에 들어가면 충분히 잔다. vs 충분한 수면을 해야 양질의 학습을 할 수 있다.

이 둘 사이의 조율을 잘 해야 할 것 같다.🤣

📚 오늘 학습한 내용

명령형 프로그래밍

컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다.

"어떻게" 처리하는지에 대한 묘사

// 예시. 배열의 모든 원소 2배로 만들기 
function double(arr) {
  const res = [];

  for (let i = 0; i < arr.length; i++) {
    if (typeof arr[i] === 'number') { // 원소가 숫자인 자료형일 때만 동작
      res.push(arr[i] * 2);
    }
  }

  return res;
}

console.log(double([1, 'a', 2, 3, 'b'])); // [ 2, 4, 6 ]

예외처리가 추가되는 경우 코드가 지저분해질 수 있다.

선언형 프로그래밍

대표적인 예시가 HTML이다.

"무엇을" 원하는지에 대한 묘사

// 예시. 배열의 모든 원소 2배로 만들기 
function double(arr) {
  return arr.filter(param => typeof param === 'number').map(number => number * 2);
}

console.log(double([1, 'a', 2, 3, 'b'])); // [ 2, 4, 6 ]

예외처리가 추가되어도 명시적으로 선언하기 때문에 간결하다.

컴포넌트는 어떤 방식의 패러다임이 더 좋을까?

• 명령형으로 작성한 컴포넌트

const $button1 = document.createElement('button');
$button1.textContent = 'button1';

const $button2 = document.createElement('button');
$button2.textContent = 'button2';

const $button3 = document.createElement('button');
$button3.textContent = 'button3';

const toggleButton = $button => {
  if ($button.style.textDecoration === '') {
    $button.style.textDecoration = 'line-through';
  } else {
    $button.style.textDecoration = '';
  }
};

document.querySelector('#app').appendChild($button1);
document.querySelector('#app').appendChild($button2);
document.querySelector('#app').appendChild($button3);

document.querySelectorAll('#app button').forEach($button =>
  $button.addEventListener('click', e => {
    toggleButton(e.target);
  })
);

각각의 버튼 요소들을 생성하고 각 버튼요소들을 순회하면 동작을 명령한다. 중복되는 코드가 많다보니 여러가지 컴포넌트를 생성하거나 규모가 커진다면 복잡해질 가능성이 매우높다.

• 컴포넌트를 추상화 하기

function ToggleButton({ $target, text }) {
  const $button = document.createElement('button');
  let isInit = false;

  this.toggle = () => {
    if ($button.style.textDecoration === '') {
      $button.style.textDecoration = 'line-through';
    } else {
      $button.style.textDecoration = '';
    }
  };

  this.render = () => {
    $button.textContent = text;

    if (!isInit) {
      $taget.appendChild($button);
      $button.addEventListener('click', () => {
        this.toggle();
      });
      isInit = true;
    }
  };

  this.render();
}
const $app = document.querySelector('#app');

new ToggleButton({ $taget: $app, text: 'button1' });
new ToggleButton({ $taget: $app, text: 'button2' });
new ToggleButton({ $taget: $app, text: 'button3' });

버튼 컴포넌트를 추상화하여 선언하는 방식이다. 재상용할 수 있기에 코드가 훨씬 간결해젔다.

컴포넌트를 작성할 때는 추상화하여 재상용할 수 있도록 작성하자!

에밀리님 특강 내용 요약정리

TIL 작성 요령

• 단순히 배운것의 나열이 아닌 내가 느낀것, 배운것, 잘못알고 있던 것들에 대한 명확한 공유

느리게 성장하는 케이스

• 기분에 곡선을 좌지우지 하지 말자

  ➡️ 육체, 정신, 마음을 분리해놓고 관찰하여 그에 맞는 액션을 취해보자.

• 언러닝해보자

  ➡️ 새로운 내용을 학습할 때 내가 알던 내용과 부딪히지말고 내려놓으면서 학습해보자.

• 노력없는 맹신

  ➡️ 밥상이 차려져있어도 떠먹는 것은 나의 노력이다.

빠르게 선장하는 케이스

• 공유하는 습관

  ➡️ 학습을 공유했을 때 비로소 진정한 학습이 된다.

• 메타인지

  ➡️ 객관적으로 나를 바라보자.

• 쪽팔림을 기회로 삼자

  ➡️ 잘못 알고 있는 내용을 고칠수 있으며, 쪽팔린 기억 덕분에(?) 학습한 내용이 오랫동안 기억에 남는다.

💬 comment

오늘 에밀리님 특강을 들으면서 많은 부분에 공감도 되고 깨달은 점도 많았다.

특히 나는 TIL을 작성할 때 내가 배운 내용에 대해 나열하는 형태로만 작성했는데 학습하는 과정 속에서 느낀 것, 배운 것, 잘못 알고 있던 것들에 대해 작성해보는 것이 중요하다는 것을 알게 되었다.

첫 번째 Try로는 기존까지 사용했던 TIL 프레임을 변경해봐야겠다. 느낀 것, 배운 것, 잘못 알고 있던 내용들을 녹일수 있도록 하기 위해서이다.

그리고 언러닝이라는 키워드가 너무나 신선했다. 새로운 내용의 학습을 할 때 기존에 내가 알고 있던 지식과 출동한 적이 상당히 많았다. 대부분은 새로운 학습내용을 받아들이려 하지만 기존에 내가 알고있던 내용을 아무런 근거 없이 붙잡고 새로운 내용을 걷어 찼던적도 있었던 적이 있다.

이렇게 새로운 지식과 기존의 지식이 충돌할 때는 두 내용을 작성해봄으로써 어떤 부분이 잘못 링크되었는지 눈으로 확인해보는 작업을 거쳐봄으로써 제대로 된 학습을 할 수 있을 것 같다고 생각이 든다.

마지막으로 "쪽팔림을 기회로 삼자" 파트이다. 기존에 내가 잘못 알고 있던 내용이 있을까 질문을 못 했던 적이 많았다. 그래서 질문을 할 타이밍을 놓쳤던 적이 있었는데 이럴 때일수록 내가 알고 있는 내용을 공유하고 피드백을 받아 수정할 수 있는 절호의 찬스라고 생각하니 벌써부터 질문을 하고 싶은 마음이 샘솟는다. 🤣