전체 글
-
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", // (선택사항) 해당 스니펫을 사용할 수 있는 파일형식을 입력한다. } } 크게 위와 같은..
-
An unexpected error occurred: "packageName: Request failed \"401 Unauthorized\"와 "Couldn't find package "packageName" on the "npm" registry. 해결하기Git 2022. 3. 30. 11:10
가장 먼저 자주 발생하는 에러는 An unexpected error occurred: "packageName: Request failed \"401 Unauthorized\""이다. 이 에러의 경우 해결책 2가지 방법을 정리한다. (ps. 1번부터 차례로 진행하며 해결이 안 될 경우 다음 번호를 진행하면 된다.) 터미널에서 npm login을 실행해 npm login을 진행한 뒤 yarn 또는 yarn install을 실행한다. 깃허브 Auth Key해결 터미널에서 vi ~/.npmrc를 실행해 에디터를 연 뒤 i를 입력해 편집 모드에 진입한다. //npm.pkg.github.com/:_authToken=personalKey를 입력한다. github에 접속해 settings > developer sett..
-
React Native WebView Google Login Authorization Error 403: disallowed_useragent Error 해결법React Native 2022. 3. 23. 19:01
... // Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 const customUserAgent = 'customUserAgent'; ... 가장 간단한 방법은 위와 같이 userAgent를 변경해주는 방법이다. 2016년 구글에서 webview에서 로그인을 막는 것으로 정책이 변경되었기에 기존 userAgent를 사용하면 error가 발생하는 것이다. 다른 방법으로는 chrome custom tab을 이용하는 방법이 있는데 RN에서는 이 부분만 따로 custom tab으로 변경하는 것과 같은 부분이 꽤나 복잡해지기 때문에 간편하게 위의 방법을 사용했다. 대부분..
-
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으로 작성해 주면 더 탄탄한 선언이 가능해진다.
-
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를 사용하지 않아도 사이즈가 가변적으로 잘 들어가지만 실제 서비스를 할 경우 외부에서 이미지를 가지고 오는 경우가 더욱 많기에..