[TIL] 함수 커링, hook, Blob 및 회고

Fact (사실: 무슨 일이 있었나?) Feeling (느낌: 무슨 느낌이 들었나?) Finding (배운 점: 어떤 인사이트를 얻었나?) Future action (향후 행동: 앞으로 무엇을 해야 할까?) Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?)

- 씁.. 회고가 TIL이었음을 지금 깨달음

- 알려준 4F이 회고 기술 중 하나였음

- 괜히 회고가 뭔지 몰라서 찾아봄

 

1. Fact

: 예,, 저는 멍청이 입니다.. Type Scirpt를 공부 하나도 안했는데, Type Script로 개발을 진행하는 사람이 있다? 그 사람이 바로 나예요.. 똑똑이 두 분과 함께 하다보니 감사하게도 Type Script와 RTK-Query, mockupserver로 개발을 진행하게 되었다.. 여러 컨벤션도 완전 철저하다.. 그리고 미리 틀을 잡아놓은 것도 있어서 거기 맞춰서 하나씩 진행하니 개발이 척척 된다 진짜.. 잘 따라가기만 하면 MVP는 금방 완성될각임;; 

문제는 ㅋㅋㅋ 내가 .. 너무.. 모른다는 거다. 혼자서 하라고 했을 때, 할 수 있는가? 그게 중요한 것 같다.. 글애서 새로 배운것들을 하나씩 정리해보려고 한다...

 

2. Feeling

: 안녕하세요, 이번 금쪽이 입니다

: 하지만? 전에 밸런스 게임 중에 '천재 중 나만 바보' 와 '나만 똑똑이' 가 있었다 이 때는 뭐가 더 나은지 전혀 감이 안 잡혔는데, 이번 플젝을 진행해보니 나는 1도 꽤 잘맞는다. 내가 못하는 게 느껴질 수록 좌절하고 바닥만 칠 것 같았는디, 사업단에서 진행했던 멘토링이 꽤 큰 힘을 줬다

머.. 그 두 분이 나보다 잘하는 건 당연한거라;; 여기에서 나는 왜 못하지?! 하는 건 오히려 두 분의 시간을.. 욕보이는.. 그런.. 그래서 걍 나는 못하는 게 당연하다~ 라는 생각으로 최대한 물어보고 따라가려고 노력하고 있다

멘토링 때, 걍 개발은 어제의 나와 비교하는 거고, 결국 꾸준히 공부하면 되는 거고, 3~4년구르면 결국 아는 건 다 비슷비슷해진다고 위로해주셨는디, 이 생각으로 해보려고 한다 이번에 부트캠프 한 것도, 마지막으로 전공을 도전 안 해보면 후회가 남을 것 같아 한 거라^^,, 내가 이것도 못하다니! 나는 바보야! 이렇게 좌절할 필요는 없더라.. 마음이 꽤 편안해짐

 

3. Finding

여기서부터 중요함 ;;

 

1) 커링(Currying)

- 함수와 함께 사용할 수 있는 고급 기술

- Js에만 존재하는 것은 아님. 다른 언어에도 존재

- f(a,b,c) 처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 변환하는 것

- 커링은 함수를 호출하지 않음. 단지 변환할 뿐

- 사용예시

function log(date, importance, message) {
  alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`);
}

- 쿼링 적용

log = _.curry(log);

log(new Date(), "DEBUG", "some debug"); // log(a, b, c)
log(new Date())("DEBUG")("some debug"); // log(a)(b)(c)

//둘의 결과는 같음

- 아래처럼 사용하면 좋음

// logNow 는 log 의 첫 번째 인수가 고정된 partial이 될 것입니다.
let logNow = log(new Date());

// use it
logNow("INFO", "message"); // [HH:mm] INFO message

let debugNow = logNow("DEBUG");

debugNow("message"); // [HH:mm] DEBUG 메세지

- 우리가 코드 간결화를 위해 많이 쓰는 건 이런 경우

const onClickButton = (id:number) => {...}

...

<button onClick={()=>onClickButton(id)} />

- 아래와 같이 사용 가능

const onClickButton = (id:number) = () => {...}

...

<button onClick={onClickButton(id)} />

- 그냥 아래에 쓰던 걸 위로 올린 거임 커링덕분에 그래도 된다~

 

* 참고자료

https://ko.javascript.info/currying-partials

커링

 

2) Hook

- 규칙

(1) 최상위에서만 Hook을 호출해야함

: 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안 됨

: 이러면, 컴포넌트가 랜더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됨

 

(2) React 함수 내에서 Hook을 호출해야함

: 일반적인 Js에서 호출하지 마셈

: Custiom Hook에서 Hook을 호출하셈

 

(3) 위의 두 가지 규칙을 강제하기 위해 ESLint를 사용하세요!

: CRA에 기본적으로 포함되어 있는 플러그인이긴 함

npm install eslint-plugin-react-hooks --save-dev

- React는 어떻게 특정 state가 어떤 useState호출에 해당하는지 알 수 있나?

: React가 Hook이 호출되는 순서에 의존하기 때문! (그래서 순서가 중요한 거였음)

function Form() {
  // 1. name이라는 state 변수를 사용하세요.
  const [name, setName] = useState('Mary');

  // 2. Effect를 사용해 폼 데이터를 저장하세요.
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. surname이라는 state 변수를 사용하세요.
  const [surname, setSurname] = useState('Poppins');

  // 4. Effect를 사용해서 제목을 업데이트합니다.
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}

// ------------
// 첫 번째 렌더링
// ------------
useState('Mary')           // 1. 'Mary'라는 name state 변수를 선언합니다.
useEffect(persistForm)     // 2. 폼 데이터를 저장하기 위한 effect를 추가합니다.
useState('Poppins')        // 3. 'Poppins'라는 surname state 변수를 선언합니다.
useEffect(updateTitle)     // 4. 제목을 업데이트하기 위한 effect를 추가합니다.

// -------------
// 두 번째 렌더링
// -------------
useState('Mary')           // 1. name state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(persistForm)     // 2. 폼 데이터를 저장하기 위한 effect가 대체됩니다.
useState('Poppins')        // 3. surname state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(updateTitle)     // 4. 제목을 업데이트하기 위한 effect가 대체됩니다.

// ...

- 여기서 Hook을 조건문 안에 넣으면,

  // 🔴 조건문에 Hook을 사용함으로써 첫 번째 규칙을 깼습니다
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }
  
useState('Mary')           // 1. name state 변수를 읽습니다. (인자는 무시됩니다)
// useEffect(persistForm)  // 🔴 Hook을 건너뛰었습니다!
useState('Poppins')        // 🔴 2 (3이었던). surname state 변수를 읽는 데 실패했습니다.
useEffect(updateTitle)     // 🔴 3 (4였던). 제목을 업데이트하기 위한 effect가 대체되는 데 실패했습니다.


//  name !== '' 조건은 첫 번째 렌더링에서 true 기 때문에 Hook은 동작합니다. 
//  하지만 사용자가 그다음 렌더링에서 폼을 초기화하면서 조건을 false로 만들 겁니다. 
//  렌더링 간에 Hook을 건너뛰기 때문에 Hook 호출 순서는 달라지게 됩니다.

- 요지랄이 나버림

- 그래서 만약, 조건부로 effect를 실행하고 싶다면, 조건문을 Hook 내부에 넣으면 됨

  useEffect(function persistForm() {
    // 👍 더 이상 첫 번째 규칙을 어기지 않습니다
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

- 뭐.. esLint쓰면 알아서 에러 잡아줄거라 ㄱㅊㄱㅊ

- 참고 자료

https://ko.legacy.reactjs.org/docs/hooks-rules.html

Hook의 규칙 – React

3) new Blob

- 이미지, 사운드, 비디오와 같은 멀티미디어를 다룰 때 사용함

- 대개 데이터의 크기 및 MIME 타입을 알아내거나 데이터 송수신을 위해 작은 Blob 객체로 나누는데에 사용됨

- File 객체도 name과 lastModifiedDate 속성이 존재하는 Blob 객체임

- 생성 : 인수로 array와 options을 받음

const newBlob = new Blob(array, options);

- array

: Blob 생성자 첫번재 인수로 ArrayBuffer, ArrayBufferView, Blob(File), DOMString 객체 또는 이러한 객체가 혼합된 Array를 사용할 수 있음

new Blob([new ArrayBuffer(data)], { type: 'video/mp4' });
new Blob(new Uint8Array(data), { type: 'image/png' });  
new Blob(['<div>Hello Blob!</div>'], {
  type: 'text/html',
  endings: 'native'
});

- 참고 자료

https://heropy.blog/2019/02/28/blob/

Blob(블랍) 이해하기

- 코드보면서 왜 썼는지부터 보고 오겠음

 

+) MIME 타입

: MIME 타입(Multipurpose Internet Mail Extensions 타입)은 파일의 종류와 형식을 식별하기 위해 사용되는 식별자

: MIME 타입은 일반적으로 type/subtype 형식으로 구성

• 텍스트 파일: text/plain
• HTML 문서: text/html
• CSS 스타일시트: text/css
• JavaScript 파일: application/javascript
• JSON 데이터: application/json
• 이미지 파일:
  • JPEG 이미지: image/jpeg
  • PNG 이미지: image/png
  • GIF 이미지: image/gif
• 오디오 파일:
  • MP3 오디오: audio/mpeg
  • OGG 오디오: audio/ogg
• 비디오 파일:
  • MP4 비디오: video/mp4
  • WebM 비디오: video/webm
• PDF 문서: application/pdf
• Microsoft Word 문서: application/msword
• Microsoft Excel 문서: application/vnd.ms-excel

4. Future action

- 씁.. 걍 열심히 하기;; 모르는 거 정리해두고,, 공부해야겠음

- 일단 오늘은 타입스크립트랑.. 그리드 공부하다가 자려고 함;;