개발 메모장 개발 메모장

javascript

• VSCode Custom Snippet 만들기

  Tip 2022. 4. 12. 17:22

  Windows와 큰 차이가 없겠지만 해당 내용은 Mac VSCode@1.66.1 버전으로 작성되었습니다. 위와 같은 순서를 입력 시 설정한 이름으로 된 json파일이 생성된다. 이제 이곳에 내가 원하는 스니펫을 생성하면 된다. { "snippetName": { "prefix": "tsc", // 해당 스니펫을 불러올 명령어를 입력한다. "body": [""], // 스니펫을 통해 불러오고 싶은 내용을 문자열로 ','을 구분으로 입력한다. "description": "my typescript snippet" // 해당 스니펫의 설명을 입력한다. "scope": "typescriptreact, typescript", // (선택사항) 해당 스니펫을 사용할 수 있는 파일형식을 입력한다. } } 크게 위와 같은..

  Read More
• JS 유용한 Promise활용

  Tip 2022. 2. 3. 19:19

  ES2015에서 Promise.all, Promise.race가 나온 뒤, ES2020에서 Promise.allsettled가 나왔다. 그리고 Promise.any가 새로 나왔다. 위 4가지를 간단하게 비교해보려 한다. Promise.all([success(), fail()]) // Error Promise.race([fail(), delay(5000)]) // Error Promise.allsettled([success(), fail()]) // success, Error Promise.any([delay(5000), fail()]) // delay 간단하게 비교한다면 위와 같다. 먼저 가장 먼저 나온 all, race에 대해 말하자면, 1. Promise.all Promise.all은 아무리 많은 양..

  Read More
• React 유용한 Tip 3가지 모음

  Tip 2022. 1. 18. 14:36

  1. React props 간편하게 전달하기 react의 compoent를 생성한 뒤 props를 전달하다 보면 반복된 내용을 쓰게 되는 경우가 많다. const {title, name, contnets} = data; const onOtherNameFunc = () => alert('Click!'); // bad // good 2. Map props 효율적으로 전달하기 map을 사용할 때 하나의 id와 같은 하나의 props를 위해 구조 분해 할당을 하기에는 번거로울 때가 있다. // bad {list.map((data) => ( ))} // good {list.map(({ id, ...listData }) => ( ))} 3. 객체나 배열에 조건부 할당하기 객체나 배열을 생성할 때 한 가지 정도가 조..

  Read More
• Javascript concat vs spread vs push 성능에 대해

  Tip 2021. 9. 9. 11:54

  결론부터 말하자면 큰 배열의 경우 concat을 작은 배열의 경우 spread가 효율이 좋다. 그리고 concat은 배열에 배열을 합칠 때, pushs는 배열에 새로운 인자를 합칠 때 그 효율이 좋다. 먼저 concat과 push에 대해 설명하자면 concat의 경우 실행 시 배열을 리턴하고, push의 경우 배열의 총길이를 리턴함으로 성능에 있어서는 push가 더 좋을 수밖에 없다. 위의 이미지에서처럼 대량의 데이터의 경우 concat의 속도가 더 뛰어나다. 심지어 spread의 경우 데이터가 너무 크다면 Maximum call stack size exceeded 에러까지 발생한다. 물론 바벨을 이용한다면 아마 spread는 바벨을 걸쳐 concat으로 변경되기 때문에 성능상의 큰 차이는 없을 것이다...

  Read More