전체 글
-
'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. 객체나 배열에 조건부 할당하기 객체나 배열을 생성할 때 한 가지 정도가 조..
-
NextJS Image 태그 height auto로 사용하기Next.js 2022. 1. 11. 14:38
이 글은 NextJS 12 버전을 기반으로 작성되었습니다. 2023.08.04 - [Next.js] - Next.js Image 태그 height auto로 사용하기 (update 13 version)업데이트 된 내용은 이 글에서 확인하시기 바랍니다. NextJS 10 버전이 나오며 가장 눈에 띄었던 것은 개인적으로 Image 태그였다. Vercel로 배포하게 되면 cdn역할까지 해주며 큰 사용성을 보여주는 역할을 했는데, 생각보다 많이 사용하지만 NextJS Image태그(이하 Image 태그)에서는 사용하기 어려운 것이 있다. Public 이미지의 경우 width, height를 사용하지 않아도 사이즈가 가변적으로 잘 들어가지만 실제 서비스를 할 경우 외부에서 이미지를 가지고 오는 경우가 더욱 많기에..
-
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..
-
폴더 별 다른 Github 계정 설정하기Git 2021. 12. 16. 18:24
해당 글은 Mac OS를 기반으로 작성하였습니다. 먼저 폴더별로 다른 계정으로 설정하려면 gitconfig의 설정을 변경하여야 한다. git config --list --show-origin 대부분의 Mac의 경우 ~ 경로에 있다. 이제 해당 config를 수정하기 전에 설정하려는 계정만큼 파일을 만들어 준다. .gitconfig-personal vim ~/.gitconfig-personal [user] email = personal@personalMail.com name = personalGithubName .gitconfig-company vim ~/.gitconfig-company [user] email = company@companyMail.com name = companyGithubName 이제..
-
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를 안 해주는 경우..