전체 글
-
Lazy initialization로 useState 최적화하기Tip 2022. 6. 27. 17:43
react로 프로젝트를 만들 때면 생각보다 초기값을 넣어주고 해당 값이 앱을 재 실행하기 전까지 변하지 않는 경우가 많다. 평소라면 이런 초기값 할당은 큰 문제가 없다. 하지만 초기값으로 복잡한 값을 할당하거나 한 경우 reRender를 실행할 때마다 해당 함수가 계속 재 실행되게 되어 불필요한 낭비가 발생한다. 이를 해결하는 것은 무척 간단하다. const getLocalData = () => window.localStorage('cacheCount'); // 평소 [count, setCount] = useState(getLocalData()); // Lazy Initialization [count, setCount] useState(()=> getLocalData()); 위와 같이 useState의 ..
-
M1 Mac에서 zsh + oh-my-zsh + p10k 설정하기Tip 2022. 6. 15. 12:02
해당 글은 m1 Mac OS 12.4와 iTerm2 터미널을 바탕으로 작성되었습니다. 1. Zsh의 장점 같은 이름의 파일이 있을 경우 중간자로 파일의 자동완성이 가능하다. ex. aaa-111.txt, aaa-111.pem이 있을 때 txt로 자동완성이 된다! Git의 상태 확인이 가능하다(branch 이름, track 여부 등) 명령어 별 히스토리를 제공한다. cd, vim등의 명령어를 입력한 뒤 위 방향키를 누르면 해당 명령어의 이전 기록을 자동완성시켜줌. 경로 추정이 기능이 있다. cd doc > 탭 > cd Documents 비주얼적으로 더 이쁘다! 2. oh-my-zsh oh-my-zsh은 zsh configuration을 관리하기 위한 프레임워크로 플러그인, 테마를 적용할 수 있어 zsh를 ..
-
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..
-
NextJS Babel에서 SWC로 이사가기 2Next.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)을 활용하기 이 방법은 ..
-
NextJS Babel에서 SWC로 이사가기 1Next.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 적..
-
NextJS Image태그를 활용한 스켈레톤(Skeleton)처리Next.js 2022. 4. 21. 18:18
스켈레톤(Skeleton)의 필요성 개인적인 생각으로 웹에서 사용자 관점에서 가장 완성도가 떨어져 보이는 요소는 과도한 Layout Shift라고 생각한다. 그렇기에 프로젝트를 진행할 때 스켈레톤 적용에 무척 긍정적이며 더 나아가 꼭 적용해야 되는 요소라고 생각한다. NextJS Image에서의 처리 방법 그런 점에서 NextJS의 Image태그에는 loading을 blur 처리할 수 있다. 하지만 외부에서 가지고 오는 동적 이미지의 경우 blur 처리하기 위해서는 blurDataURL속성을 입력하라고 되어 있다. 그리고 해당 내용에 대해 NextJS의 공식 Docs에서는 plaiceholder를 사용하는 것을 추천한다. 내가 사용할 방법은 아니지만 해당 방법의 로직을 간단하게 설명하자면 이런 방식이다...
-
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..