개발 메모장 개발 메모장

Tip

• Next.js에서 사용하기 좋은 모니터링 툴 3가지

  Tip 2023. 8. 10. 18:05

  Checkly, Axiom, Sentry는 웹 프로젝트를 개발하고 유지 관리하는 데 도움이 되는 툴이다. 모두 무료로 사용할 수 있으며, 유료 플랜을 통해 더 많은 기능을 사용할 수 있다. Checkly Checkly는 성능을 모니터링하는 도구다. Checkly는 URL을 지정해 성능 지표를 그래프로 표시하고, 모니터링할 요청의 빈도와 양을 설정할 수 있으며, 성능 저하를 알림으로 보낸다. Checkly의 주요 기능 웹 애플리케이션의 성능 지표 모니터링 성능 저하 알림 API 테스트 웹 애플리케이션의 성능 테스트 Axiom Axiom은 API를 테스트하는 도구다. Axiom은 API에 요청을 보내고, API의 응답을 검증할 수 있고, API 테스트를 자동화할 수 있다. Axiom의 주요 기능 웹 애플리케..

  Read More
• JavaScript에서 바로 사용하는 Tip 4가지

  Tip 2023. 8. 1. 15:20

  1. Includes를 사용해 || 대체하기. ||는 JS를 활용한 개발을 하다 보면 정말 많이 사용하게 되는 없어서는 안 될 중요한 요소이다. 하지만 많은 것을 비교하는 상황이 된다면 오히려 코드의 가독성을 해치는 요소가 된다. 그럴 때 이 방법을 사용한다면 조금 더 가독성 좋게 사용할 수 있다. // ...other codes if ( isFirstLoading || isSecondLoading || isThirdLoading || isFourthLoading || isFifthLoading ) return 로딩 중... ; if ( [ isFirstLoading, isSecondLoading, isThirdLoading, isFourthLoading, isFifthLoading, ].includes..

  Read More
• IOS Safari WebView 화면 확대 막기

  Tip 2023. 2. 9. 15:08

  IOS10 이하 버전에서는 간단하게 user-scalble를 꺼주는 것 만으로 확대를 막을 수 있었습니다. 하지만 이후 버전부터는 해당 내용으로는 막아지지 않습니다. 이제 적용할 수 있는 방법은 css에서 확대하는 동작 자체를 막아주는 겁니다. touch-action: pan-y; 가로 터치를 막아주어 화면 확대를 못하게 막아주는 방법입니다. 이제 사용자 임의로 확대 축소를 할 수 없기 때문에 모든 게 끝이라고 생각되겠지만 또 변수가 있습니다. 사용자가 설정한 최소 폰트 이하(default 16px)의 input, select를 선택 시 자동으로 확대되는 문제가 있습니다. 이 문제의 경우 input, select의 font-size를 무조건 16px 이상으로 설정하면 되지만 사용자가 임의로 최소 폰트 크..

  Read More
• 개발자에게 유용한 툴

  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..

  Read More
• 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를 사용할 때 가장 많이 사용하는 방법입..

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

  Read More
• 메타 태그 중복 생성 방지하기

  Tip 2022. 10. 27. 16:10

  웹 사이트를 제작할 때 기본적으로 전체 웹 페이지에 적용되는 메타 태그를 동적인 주소와 같은 페이지에 접속했을 때만 변경해야 되는 상황이 있습니다. Next.js의 경우 Head태그를 이용해 간단히 변경하고자 하는 페이지에서 다른 메타 태그를 추가해 줄 수 있지만, 이렇게 될 경우 메타 태그가 중복하여 들어가는 문제가 발생합니다. 이를 해결하는 방법은 무척 간단합니다. 바로 변경이 일어날 수 있는 메타 태그에 key 값을 추가해 주는 것으로 간단하게 해결할 수 있습니다. // app.tsx // posts/[id].tsx 이렇게 설정하면 아래와 같이 간단하게 변경할 수 있다.

  Read More
• window init 느리거나 useEffect 인식 안 되는 라이브러리 사용 팁

  Tip 2022. 9. 2. 15:14

  외부 라이브러리(특히 window에 생성되는)를 이용할 때 useEffect로 가지고 올 수 없는 경우가 존재한다. 이 경우 많은 사람들이 setTimeout 등을 이용해 타이밍을 맞춰주고는 한다. 하지만 이렇게 할 경우 단점이 존재한다. 네트워크가 느린 환경들을 고려해 타임을 여유롭게 잡거나 느린 환경을 고려하지 않아 에러가 발생하는 문제다. 이 문제 해결을 위해 처음 생각한 방법은 반복문을 활용해 retry를 거는 방법이었는데, 이 경우 다른 호출 스택을 반복문이 잡고 있어 다른 호출들이 먹통이 되는 문제가 발생했다. 그래서 내가 선택한 방법은 setInterval을 이용하는 방법이다. setInterval은 setTimeout과 마찬가지로 작업 큐에 작업을 저장하는 방식이기 때문에 다른 호출 스택이..

  Read More