개발 메모장 개발 메모장

next

• 웹 성능 최적화 기법

  Tip 2024. 7. 1. 15:10

  웹 성능 최적화(Web Performance Optimization, WPO)는 빠르고 원활한 사용자 경험을 보장하기 위해 필수적입니다.이는 사용자 유지와 SEO에 매우 중요합니다.웹 성능을 향상하기 위한 주요 기법과 모범 사례를 소개합니다.웹 성능 최적화를 위한 주요 기법1. HTTP 요청 최소화페이지에서 HTTP 요청을 요구하는 요소의 수를 줄이면 로드 시간을 크게 단축할 수 있습니다.CSS와 JavaScript 파일을 결합하고, 이미지에는 CSS 스프라이트를 사용합니다.2. 이미지 최적화이미지를 품질 손실 없이 압축하고 크기를 조정하여 로드 시간을 줄입니다.TinyPNG나 ImageOptim과 같은 도구를 사용하고, WebP와 같은 최신 형식을 채택합니다.3. 브라우저 캐싱 활용웹사이트의 일부를 캐..

  Read More
• Webview를 위한 핀치 줌(pinch zoom) 구현하기

  Tip 2024. 2. 24. 12:53

  핀치 줌은 모바일 웹 또는 앱에서 자주 사용되는 기능 중 하나입니다. 사용자는 두 손가락을 화면에 대고 벌리거나 모으는 동작을 통해 화면을 확대하거나 축소할 수 있습니다. 이러한 인터랙션은 보다 세밀한 화면 조작을 가능하게 하며, 사용자 경험을 크게 향상합니다. 해당 기능은 일반적인 앱의 경우 구현하기 간단하지만 웹기반 웹뷰에서는 특정 영역(주로 이미지)을 확대 시 다른 부분들도 같이 확대되며 다른 페이지 이동 시 화면 비율이 이상해지는 등의 문제가 발생할 수 있습니다. 기본 핀치 줌 구현 핀치 줌 기능을 구현하기 위해서는 먼저 터치 이벤트를 적절히 처리할 수 있어야 합니다. 기본적인 구현 방법은 다음과 같습니다. 사용자가 화면을 터치하는 순간부터 터치가 끝나는 순간까지의 이벤트를 감지합니다. 두 손가락..

  Read More
• Cypress vs Playwright E2E 테스트 프레임워크 비교

  React 2024. 2. 13. 14:07

  웹 애플리케이션 테스팅은 개발 과정에서 중요한 부분입니다. Cypress와 Playwright는 모두 자동화된 브라우저 테스팅을 위한 현대적인 프레임워크입니다. 이 글에서는 Cypress와 Playwright를 비교하고, 어느 상황에서 각각을 사용하는 것이 더 적합한지 비교해 보겠습니다. Cypress Cypress는 개발자와 QA 엔지니어 사이에서 인기 있는 엔드투엔드 테스팅 프레임워크입니다. 사용의 용이성과 설정의 단순함으로 많은 사랑을 받고 있습니다. 장점 쉬운 설치 및 설정: Cypress는 설정이 매우 간단하며, 사용하기 쉽습니다. 실시간 리로딩: 테스트 코드를 변경하면 자동으로 테스트가 재실행됩니다. 디버깅 용이: 실패한 테스트에 대해 자세한 오류 로그와 스크린샷, 비디오 녹화 기능을 제공합니..

  Read More
• Javascript ES10 문법정리

  JS & TS 2023. 11. 8. 16:48

  ECMAScript 2019 (ES10)은 개인적으로 정말 많이 사용하는 flatMap이나 trimStart, trimEnd와 같은 내용이 업데이트된 버전입니다. IE를 제외하고 대부분의 브라우저가 지원하기 때문에 지금도 쉽게 사용해 볼 수 있습니다. 1. Array.flat() 및 Array.flatMap() 이전: 중첩된 배열을 결합하고 펼치는 것은 종종 사용자 정의 함수나 루프가 필요했습니다. 이후: flat() 및 flatMap()을 사용하면 이 작업을 간단하게 수행할 수 있습니다. // 이전 const nestedArray = [1, [2, [3, 4], 5]]; const flattenedArray = [].concat.apply([], nestedArray); // flattenedArray..

  Read More
• Next.js 14버전 정리

  Next.js 2023. 11. 1. 16:18

  Next.js 13 버전 이후로 호불호가 늘어나는 느낌이 강한 Next.js의 14 버전이 출시되었습니다. 14 버전은 13 버전 때처럼 엄청난 변화내용이라기보다는 13.5 버전의 뒤이은 13.6 버전에 가깝다는 느낌이 드는 업데이트였습니다. 1. Next.js 컴파일러: Turbocharged 이제부터 Next.js는 개발 환경에서 빠른 성능을 제공하기 위해 Rust 기반 컴파일러 'Turbopack'를 사용합니다. 이로 인해 개발 서버의 시작 속도가 최대 53.3% 향상되고 Fast Refresh를 통한 코드 업데이트 속도도 최대 94.7% 향상되었습니다. 이는 특히 큰 애플리케이션 및 모듈 그래프에서 빠른 성능 향상을 의미하며, 'next dev --turbo'를 사용하면 보다 빠르고 안정적인 성능..

  Read More
• KeystoneJS로 간단하게 Admin페이지와 Headless CMS 만들기

  Tip 2023. 9. 6. 18:09

  KeystoneJS는 GraphQL을 기반으로 하는 CMS(Content Management System) 프레임워크입니다. React, Node.js, GraphQL을 기반으로 하며, GraphQL API를 통해 데이터를 관리하고, 웹사이트와 모바일 앱을 개발할 수 있습니다. 1. KeystoneJS의 주요 특징 GraphQL 기반의 API: KeystoneJS는 GraphQL을 기반으로 하는 API를 제공합니다. GraphQL은 구조화된 데이터를 효율적으로 조회할 수 있는 API 표준입니다. React 기반의 UI: KeystoneJS는 React를 기반으로 하는 UI를 제공합니다. React는 빠르고 유연한 UI 프레임워크입니다. Node.js 기반의 백엔드: KeystoneJS는 Node.js를 ..

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