개발 메모장 개발 메모장

전체 글

• NextJS Babel에서 SWC로 이사가기 1

  Next.js 2022. 5. 17. 15:27

  ( 이 글은 next@12.1.6, antd@4.20.5 을 기반으로 작성되었습니다. ) NextJS가 12 버전으로 올라가면서 가장 큰 변화는 개인적으로 Babel에서 Rust Complier인 SWC가 나온 것이라고 생각한다. 물론 Babel에서 바로 이동하기에는 지원하는 부분이 거의 없었기에 바로 사용하는 것이 불가능했다. 하지만 이제 NextJS의 버전이 12.1이 되고 내가 사용하는 모든 부분이 대체가 될 수 있도록 변경되었기 때문에 이번에는 Babel에서 SWC로 변경하는 간단한 방법을 소개하려 한다. .babelrc를 제거한다. 사실 이것으로 swc가 활성화되는 기본 요건은 완성되었다. 이제 여기에 내가 사용하던 babel의 요소를 swc에서 활성화시켜주겠다. 1. Minification 적..

  Read More
• NextJS Image태그를 활용한 스켈레톤(Skeleton)처리

  Next.js 2022. 4. 21. 18:18

  스켈레톤(Skeleton)의 필요성 개인적인 생각으로 웹에서 사용자 관점에서 가장 완성도가 떨어져 보이는 요소는 과도한 Layout Shift라고 생각한다. 그렇기에 프로젝트를 진행할 때 스켈레톤 적용에 무척 긍정적이며 더 나아가 꼭 적용해야 되는 요소라고 생각한다. NextJS Image에서의 처리 방법 그런 점에서 NextJS의 Image태그에는 loading을 blur 처리할 수 있다. 하지만 외부에서 가지고 오는 동적 이미지의 경우 blur 처리하기 위해서는 blurDataURL속성을 입력하라고 되어 있다. 그리고 해당 내용에 대해 NextJS의 공식 Docs에서는 plaiceholder를 사용하는 것을 추천한다. 내가 사용할 방법은 아니지만 해당 방법의 로직을 간단하게 설명하자면 이런 방식이다...

  Read More
• 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
• 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..

  Read More
• 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으로 변경하는 것과 같은 부분이 꽤나 복잡해지기 때문에 간편하게 위의 방법을 사용했다. 대부분..

  Read More
• 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폴더가 생성된 것을 확인할 수 있다. 이제 간단한 기..

  Read More
• '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으로 작성해 주면 더 탄탄한 선언이 가능해진다.

  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