Tip
-
개발자에게 유용한 툴Tip 2022. 12. 7. 17:30
1. Bundle Phobia Bundlephobia | Size of npm dependencies Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle. bundlephobia.com 번들 포비아는 간단하게 NPM 패키지 이름을 입력하는 것으로 간단하게 번들 사이즈부터 다운로드 시간, 구성 요소, 알파벳별 구성요소의 사이즈까지 까지 모두 간단하게 확인할 수 있는 사이트입니다. 이외에도 package.json을 업로드하여 한번에 다양한 패키지를 동시에 확인하는 것 역시 가능합니다. 2. Googl..
-
React에서 조건부 렌더링을 사용하는 5가지 방법Tip 2022. 12. 1. 16:19
React로 개발을 하다 보면 조건부 랜더링을 사용하는 경우가 무척 많이 있습니다. 물론 그 복잡도가 낮을 경우라면 간단하게 삼항 연산자로 처리하면 되지만 복잡해지는 경우도 많기 때문에 이 글에서는 조건부 랜더링을 처리하는 다양한 방법에 대해 소개해 보겠습니다. 1. && 사용하기 조건의 값이 0, false, undefiend가 아닌 경우 render 해 주며, 가장 짧고 간결하게 사용할 수 있습니다. const Test: React.FC = ({ anyProp }) => { ... return ( ... {anyProp && This is Show!!} ... } 2. Ternary operator True or False 형식에서 많이 사용하며 아마 React를 사용할 때 가장 많이 사용하는 방법입..
-
NodeJS 프로젝트 라이브러리 최신버전 자동으로 업데이트 하기Tip 2022. 11. 12. 18:11
npm update 명령어로도 package.json의 dependencies을 업데이트할 수 있습니다. 하지만 npm-check-updates를 사용하면 peer dependencies를 제외하고 의존성을 훼손하지 않는 한도 내에서 최신 버전으로 업데이트를 진행할 수 있습니다. 그림 이제 간단한 사용법을 알아보겠습니다. 1. 설치 npm install -g npm-check-updates 2. 확인 $ ncu Checking package.json [====================] 5/5 100% eslint 7.32.0 → 8.0.0 prettier ^2.7.1 → ^3.0.0 svelte ^3.48.0 → ^3.51.0 typescript >3.0.0 → >4.0.0 untildify
-
메타 태그 중복 생성 방지하기Tip 2022. 10. 27. 16:10
웹 사이트를 제작할 때 기본적으로 전체 웹 페이지에 적용되는 메타 태그를 동적인 주소와 같은 페이지에 접속했을 때만 변경해야 되는 상황이 있습니다. Next.js의 경우 Head태그를 이용해 간단히 변경하고자 하는 페이지에서 다른 메타 태그를 추가해 줄 수 있지만, 이렇게 될 경우 메타 태그가 중복하여 들어가는 문제가 발생합니다. 이를 해결하는 방법은 무척 간단합니다. 바로 변경이 일어날 수 있는 메타 태그에 key 값을 추가해 주는 것으로 간단하게 해결할 수 있습니다. // app.tsx // posts/[id].tsx 이렇게 설정하면 아래와 같이 간단하게 변경할 수 있다.
-
window init 느리거나 useEffect 인식 안 되는 라이브러리 사용 팁Tip 2022. 9. 2. 15:14
외부 라이브러리(특히 window에 생성되는)를 이용할 때 useEffect로 가지고 올 수 없는 경우가 존재한다. 이 경우 많은 사람들이 setTimeout 등을 이용해 타이밍을 맞춰주고는 한다. 하지만 이렇게 할 경우 단점이 존재한다. 네트워크가 느린 환경들을 고려해 타임을 여유롭게 잡거나 느린 환경을 고려하지 않아 에러가 발생하는 문제다. 이 문제 해결을 위해 처음 생각한 방법은 반복문을 활용해 retry를 거는 방법이었는데, 이 경우 다른 호출 스택을 반복문이 잡고 있어 다른 호출들이 먹통이 되는 문제가 발생했다. 그래서 내가 선택한 방법은 setInterval을 이용하는 방법이다. setInterval은 setTimeout과 마찬가지로 작업 큐에 작업을 저장하는 방식이기 때문에 다른 호출 스택이..
-
react-query useInfiniteQuery 데이터 편하게 사용하기Tip 2022. 8. 31. 17:45
(이 글은 react-query@3.19.1을 바탕으로 작성되었습니다) react-query를 사용할 때 useQuery만큼이나 많이 사용하는 것이 useInfiniteQuery이다. 특정 웹 사이트의 경우 useQuery보다 많이 사용한다. 사용 방법 자체도 무척 간편하게 되어 있어서 문서를 확인하고 사용하는데 별다른 제약이 없다. 그런데 데이터가 오는 방식이 특이하다. 만약 데이터를 axios로 받아왔을 때의 형식은 아래와 같다. { data: { posts: [...] } } 이런 데이터 형태는 추가로 받아올 때 역시 동일하다. 나의 경우 react-query를 사용하기 전 redux-toolkit을 사용할 때는 아래와 같은 방법을 사용했다. // lodash 미사용 state.posts = [....
-
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를 ..