Tip
-
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", // (선택사항) 해당 스니펫을 사용할 수 있는 파일형식을 입력한다. } } 크게 위와 같은..
-
'Window & typeof globalThis' 형식에 '*' 속성이 없습니다. ts(2339) 해결하기Tip 2022. 2. 8. 11:36
typescript를 하다 보면 많이 겪게 되는 에러로 kakao map이나 cypress처럼 기존 window에 없는 객체 값에 접근하게 될 경우 발생하는 에러이다. 이 에러의 경우 무척 간단하게 해결이 가능하다. 일단 root폴더에 임의의 선언 파일을 생성한다. // window.d.ts declare global { interface Window { Cypress: unknown; } } 위와 같이 선언을 하면 Cypress에 접근할 때 에러가 나는 것을 방지할 수 있다. 위의 예시는 간략하게 한 것이고 만약 type을 알고 있다면 해당 type으로 작성해 주면 더 탄탄한 선언이 가능해진다.
-
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은 아무리 많은 양..
-
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. 객체나 배열에 조건부 할당하기 객체나 배열을 생성할 때 한 가지 정도가 조..
-
Redux Toolkit Dependency cycle ErrorTip 2021. 12. 16. 19:09
Redux Saga에서 Redux Toolkit(이하 RTK)으로 바꾸며 큰 만족을 했지만 cycle에러를 피하기 어렵다는 단점이 있다. 이런 것은 Duck's Pattern의 고질적인 문제이기도 한데, 내가 이 문제를 해결한 방법을 공유하려고 한다. 이 문제가 발생하는 경우에 대해 먼저 설명하자면. // aReducer ... const aSlice = createSlice({ name: 'aSlice', initialState, reducers: { testReducer(state, action){ // func contents } }, extraReducers: (builder) => builder .addCase() ... }) export { testReducer } = aSlice.action..
-
VSCode ESLint, Prettier 자동 수정 적용안될 때Tip 2021. 12. 8. 17:05
vscode에 eslint와 prettier을 설정하는 방법에 대해서는 많은 글들이 있기에 세팅에 대해 아주 간략하게 설명한다. vscode의 확장을 눌러 eslint와 prettier을 설치한다. 그 뒤로 프로젝트마다 설정할 경우. eslintrc,. prettierrc 등을 이용해 수정해 사용하면 된다. 하지만 여기서 내가 안 된 상황은 2가지였다. prettier가 아예 작동을 하지 않는 경우 windows의 경우 ctrl + , / mac의 경우 cmd + , 버튼을 눌러 설정을 연다 검색창에 editor default formatter를 검색해 나온 항목을 Prettier로 변경해 주는 것으로 간단하게 해결되었다. Prettier의 동작은 잘되는데 eslint의 auto fix를 안 해주는 경우..
-
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으로 변경되기 때문에 성능상의 큰 차이는 없을 것이다...