TIL_22.05.08

이서현·2022년 5월 9일
0
post-thumbnail

명확한 질문 명확한 답변

  • 컴포넌트 분리할 때 재사용 여부에 따라 나누자

  • useMemo
    메모리제이션된 값을 반환한다,
    복잡한 필터 돌릴 때 사용하면 좋음

  • props 여러개 전달하는 방법?

    props=(...{props1, props2, props3})

    웬만하면 하나씩 넘겨주자

  • useState(true || false)
    나는 항상 값을 하나만 썼는데 이렇게도 사용이 가능하다

  • state에 객체 넣지 말어

  • null 병합 연산자(??)
    널 병합 연산자(??)는 왼쪽 피연산자가 null 또는 undefined일 때
    오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자

const foo = null ?? 'default string';
console.log(foo); // "default string"

const baz = 0 ?? 42;
console.log(baz); // 0

논리 연산자(||)는 왼쪽 피연산자가
null또는 undefined뿐만 아니라 falsy값에 해당할 경우 오른쪽 피연산자를 반환
falsy값: null, undefined, 0, -0, NaN, false, ""

반면 ??는 왼쪽 피연산자가 null이나 undefined일 때만 오른쪽 피연산자를 반환

let count;
let text;

count = 0;
text = "";

let qty = count || 42;
let message = text || "hi!";

console.log(qty);     // 42
console.log(message); // "hi!"
  • 오픈라이브러리에 대해 검색할 때
    git 이슈탭에서 검색해보면 잘 나온다

  • 이미지 압축
    색이 다양하다? jpg
    색이 단조롭다? png

  • setTimeout이 있으면 cleatTimeout도 만들자

  • :root[color="dark"]
    라이트/다크 모드 만들 때 쓰면 개꿀

  • enter 이벤트는 앞으로 onSubmit을 사용하자

<form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form>
  • moment.js 말고 day.js

  • createFuzzyMatcher, 초성 자동완성 검색

  • 기능을 구현하는데 이해하고 있다면 라이브러리 사용하기, 남용 X

  • overflow-x: scroll
    모바일에서 터치로 스크롤 가능

  • localStorage에서 데이터를 저장하고 불러오는 것과 관련한 라이브러리 - store.js

  • mark 태그

    검색결과 페이지에 검색어가 굵게 보이는데, 이럴 때 사용 가능


✨과제(22.05.17 PM4까지)
그립컴퍼니 WebFront(React) 개발 사전 과제

profile
🌿💻💪🧠👍✨🎉

0개의 댓글