개발 메모장 개발 메모장

전체 글

• NextJS에서 react-query SSR 데이터 사용하기

  Next.js 2022. 6. 7. 15:18

  react-query는 개인적으로 요즘 가장 핫한 라이브러리라고 생각한다. redux의 thunkAPI 등을 많이 사용했던 이전의 방식에서 react-query를 통해 get과 post방식의 query를 손쉽게 사용할 수 있으면서 데이터를 손쉽게 cache 할 수 있다는 점에서 무척이나 매력적인 라이브러리라고 할 수 있다. nextJS는 요즘에는 react개발자라면 모두 알 정도로 유명한 프레임워크이다. 그리고 nextJS를 유명하게 만든 가장 큰 요소 중 하나는 SSR이라고 생각하는데, 아쉽게도 react-query의 hook의 경우 SSR이 아닌 CSR방식으로 데이터를 가지고 온다. 이제 본격적으로 react-query의 데이터를 SSR로 사용할 수 있는 2가지 방법에 대해 설명하겠다. 1. Init..

  Read More
• NextJS Babel에서 SWC로 이사가기 2

  Next.js 2022. 5. 20. 12:21

  ( 이 글은 next@12.1.6, antd@4.20.5를 기반으로 작성되었습니다. ) 이전 글에 이어 Babel에서 SWC로 넘어갈 수 없었던 가장 큰 이유를 해결한 방법에 대해 써보겠다. 1편에 썼던 내용 중 styled-components에 대한 swc지원은 가장 빠른 수준으로 작성되었기에 해당 부분에 대해서는 큰 문제가 없었다. 하지만 가장 큰 문제는 내가 즐겨 사용하는 antd의 customize theme를 이용하지 못하는 문제였다. 해당 기능을 NextJS에서 이용하기 위해서는 next-plugin-antd-less라는 플러그인을 사용해야 한다. 이곳에서 문제가 발생했기에 여러 시행착오를 겪어야 했다. 1. antd의 Dynamic Theme (Experimental)을 활용하기 이 방법은 ..

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