react
-
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", // (선택사항) 해당 스니펫을 사용할 수 있는 파일형식을 입력한다. } } 크게 위와 같은..
-
NextJS Cypress 설정하기Next.js 2022. 2. 17. 11:56
요즘은 거의 필수가 된 요소가 Testing이다. 지금도 Front단에서의 단위 테스트는 크게 필요하지 않다고 생각하지만, E2E테스트의 경우 Front개발에 있어서도 너무도 편한 요소이기에 간단한 설정에 대해 소개하고자 한다. npm i cypress npm i -D @testing-library/cypress 먼저 당연하게 cypress를 설치해야 하고 Next 등을 사용할 경우 className을 이용해 요소를 선택하는 건 어렵기 때문에 @testing-library/cypress를 설치하면 testId나 내부 글자 등으로 요소를 선택할 수 있기 때문에 설치해 준다. 두 요소의 설치가 끝났다면 base폴더에는 cypress.json, cypress폴더가 생성된 것을 확인할 수 있다. 이제 간단한 기..
-
'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으로 작성해 주면 더 탄탄한 선언이 가능해진다.
-
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..
-
husky + lint-staged를 활용하여 git hook걸기Git 2021. 11. 10. 12:45
이 글에서는 가장 많이 사용하는 git hook인 pre-commit을 기준으로 설명하겠다. 먼저 이 글을 작성하게 된 가장 큰 원인인 husky@4에서 사용하던 아래와 같은 방법을 사용할 수 없게 되면서 였다. // package.json { ... "husky": { "hooks": { "pre-commit": "lint-staged" } } } 일단 나와 같이 husky가 설치되어 있는 사람의 경우 아래를 실행하여 husky의 버전을 올리고 husky를 init 해준다. npm i -D husky@latest // husky@7.0.4 기준 npx husky install 처음 설치하는 사람의 경우 아래를 실행하여 간단하게 설치할 수 있다. npx husky-init && npm install 위의..
-
효과적인 CSS애니메이션 활용CSS 2021. 10. 7. 11:23
개발을 할 때 애니메이션은 필수적인 요소라 해도 과언이 아니다. 하지만 애니메이션을 잘못 사용한다면 애니메이션이 버벅거리는 느낌이 들거나, 사이트 자체가 느려 보이는 효과가 날 수 있다. 이는 애니메이션을 사용할 때 사용한 CSS 속성의 문제인데, 여기에서는 크게 Layout을 다시 그리는(Reflow)와 Paint를 다시 하는(Repaint) 그리고 이 둘 모두를 안 하는 속성이 있다. 우리는 당연히 최대한 다시 그리는 것이 적은 요소를 사용해야 하고, 웬만하면 Reflow와 Repaint를 모두 하지 않는 속성을 사용하는 것이 좋다. 그럼 거두절미하고 3가지 경우에 해당하는 속성들을 보여주겠다. Reflow가 일어나는 대표적인 속성 position width height left top right b..