개발 메모장 개발 메모장

mobile

• Next.js에서 페이지 전환 효과 간단하게 적용하기

  Next.js 2023. 9. 4. 17:40

  Next.js는 페이지 전환 효과를 기본적으로 제공하지 않지만, framer-motion 라이브러리를 사용하면 쉽게 적용할 수 있습니다. 1. framer-motion 설치 우선, framer-motion을 설치해야 합니다. 다음 명령어를 실행하여 설치합니다. npm install framer-motion // or yarn add framer-motion 2. 페이지 전환 효과 적용 framer-motion을 설치했으면, 페이지 전환 효과를 _App.tsx 페이지에 적용하면 간단하게 끝납니다. import React from 'react'; import { AppProps } from 'next/app'; import { motion } from 'framer-motion'; import { useRo..

  Read More
• 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
• 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
• 버튼의 크기는 고정한 채 선택 영역만 늘리기

  CSS 2022. 10. 26. 17:00

  프로젝트를 진행할 때 버튼의 사이즈는 무척 중요한 요소입니다. 특히 모바일이나 태블릿의 경우에는 그 중요성이 더 커진다고 생각합니다. 왜냐하면 PC의 경우 작은 사이즈의 버튼이라도 마우스라는 도구를 이용하기 때문에 상대적으로 정확한 위치를 선택하기 편한 반면 모바일이나 태블릿의 경우 선택의 주체가 대부분 손가락이기 때문입니다. 물론 버튼의 사이즈 자체를 키우는 것이 가장 이상적인 방법이지만 그렇지 않은 경우에 자주 사용하는 팁에 대해 설명해 보겠습니다. const Button = styled.button` position: relative; width: 20px; height: 20px; border-radius: 10px; background: tomato; &::after { content: ""; ..

  Read More