[TIL] 20210817

younoahΒ·2021λ…„ 8μ›” 17일
0

[TIL in 웹데코]

λͺ©λ‘ 보기
6/8

πŸš€ 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 ν”„λ ˆμž„μ„ 변경해봐야겠닀. λŠλ‚€ 것, 배운 것, 잘λͺ» μ•Œκ³  있던 λ‚΄μš©λ“€μ„ λ…ΉμΌμˆ˜ μžˆλ„λ‘ ν•˜κΈ° μœ„ν•΄μ„œμ΄λ‹€.

그리고 μ–ΈλŸ¬λ‹μ΄λΌλŠ” ν‚€μ›Œλ“œκ°€ λ„ˆλ¬΄λ‚˜ μ‹ μ„ ν–ˆλ‹€. μƒˆλ‘œμš΄ λ‚΄μš©μ˜ ν•™μŠ΅μ„ ν•  λ•Œ 기쑴에 λ‚΄κ°€ μ•Œκ³  있던 지식과 μΆœλ™ν•œ 적이 μƒλ‹Ήνžˆ λ§Žμ•˜λ‹€. λŒ€λΆ€λΆ„μ€ μƒˆλ‘œμš΄ ν•™μŠ΅λ‚΄μš©μ„ 받아듀이렀 ν•˜μ§€λ§Œ 기쑴에 λ‚΄κ°€ μ•Œκ³ μžˆλ˜ λ‚΄μš©μ„ μ•„λ¬΄λŸ° κ·Όκ±° 없이 λΆ™μž‘κ³  μƒˆλ‘œμš΄ λ‚΄μš©μ„ κ±·μ–΄ μ°Όλ˜μ λ„ μžˆμ—ˆλ˜ 적이 μžˆλ‹€.

μ΄λ ‡κ²Œ μƒˆλ‘œμš΄ 지식과 기쑴의 지식이 μΆ©λŒν•  λ•ŒλŠ” 두 λ‚΄μš©μ„ μž‘μ„±ν•΄λ΄„μœΌλ‘œμ¨ μ–΄λ–€ 뢀뢄이 잘λͺ» λ§ν¬λ˜μ—ˆλŠ”μ§€ 눈으둜 ν™•μΈν•΄λ³΄λŠ” μž‘μ—…μ„ κ±°μ³λ΄„μœΌλ‘œμ¨ μ œλŒ€λ‘œ 된 ν•™μŠ΅μ„ ν•  수 μžˆμ„ 것 κ°™λ‹€κ³  생각이 λ“ λ‹€.

λ§ˆμ§€λ§‰μœΌλ‘œ "μͺ½νŒ”림을 기회둜 μ‚Όμž" νŒŒνŠΈμ΄λ‹€. 기쑴에 λ‚΄κ°€ 잘λͺ» μ•Œκ³  있던 λ‚΄μš©μ΄ μžˆμ„κΉŒ μ§ˆλ¬Έμ„ λͺ» ν–ˆλ˜ 적이 λ§Žμ•˜λ‹€. κ·Έλž˜μ„œ μ§ˆλ¬Έμ„ ν•  타이밍을 λ†“μ³€λ˜ 적이 μžˆμ—ˆλŠ”λ° 이럴 λ•ŒμΌμˆ˜λ‘ λ‚΄κ°€ μ•Œκ³  μžˆλŠ” λ‚΄μš©μ„ κ³΅μœ ν•˜κ³  ν”Όλ“œλ°±μ„ λ°›μ•„ μˆ˜μ •ν•  수 μžˆλŠ” 절호의 찬슀라고 μƒκ°ν•˜λ‹ˆ λ²Œμ¨λΆ€ν„° μ§ˆλ¬Έμ„ ν•˜κ³  싢은 마음이 μƒ˜μ†ŸλŠ”λ‹€. 🀣

profile
console.log(noah(πŸ• , 🍺)); // true

0개의 λŒ“κΈ€