개발 메모장 개발 메모장

web

• 웹 성능 최적화 기법

  Tip 2024. 7. 1. 15:10

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

  Read More
• 웹 접근성 개선을 위한 가이드

  Tip 2024. 6. 21. 13:25

  웹 접근성은 장애를 가진 사람들이 웹 사이트를 쉽게 사용할 수 있도록 보장합니다.여기에는 시각, 청각, 운동 및 인지 장애가 있는 사람들이 포함됩니다.윤리적 책임을 넘어, 웹 접근성은 법적 요구 사항을 충족하고 비즈니스 이점을 제공합니다.1. 웹 접근성의 중요성웹 접근성은 윤리적 이유뿐만 아니라 법적 요구 사항을 충족하고 비즈니스 기회를 확장하는 데도 중요합니다.예를 들어, 미국의 ADA(Americans with Disabilities Act)는 웹 접근성을 규제합니다.2. 웹 접근성의 주요 원칙1) 인식 가능성(Perceivable)정보는 사용자가 인식할 수 있는 방식으로 제공되어야 합니다. 예를 들어, 시각 장애인을 위해 이미지나 비디오에 텍스트 대체 설명을 제공합니다.2) 운영 가능성(Operab..

  Read More
• react-native-async-storage 그만 사용하기(feat. react-native-mmkv)

  React Native 2023. 8. 18. 13:35

  react-native-async-storage React Native에는 다양한 Key-Value Storage 라이브러리가 있습니다. 그리고 그중 react-native-async-storage는 React Native에서 가장 기본적으로 제공되는 Key-Value Storage 라이브러리입니다. react-native-async-storage는 비동기적으로 데이터를 저장하고 불러옵니다. 즉, 데이터를 저장하거나 불러올 때 다른 작업이 중단되지 않습니다. react-native-async-storage는 사용하기 쉽고, 다양한 플랫폼을 지원합니다. 하지만, 성능이 그다지 좋지는 않습니다. react-native-mmkv react-native-mmkv는 react-native-async-storage..

  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
• 내가 Front-End를 끝내고 체크하는 리스트

  Tip 2021. 8. 26. 19:00

  FontEnd 개발을 끝내고 QA까지 어느 정도 마무리하면 최적화라는 벽을 맞이한다. 그 상황에서 자주 사용하는 것들을 정리하려 한다. 1. The Front-End Checklist - ✨ Your best Front-End Tool ✨ (frontendchecklist.io) ✨ Your best Front-End Tool ✨ 🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers! Follow the rules and deliver the best of your work in a generated report! frontendchecklist.io 이 사이트를 이용해 완전하진 않지만 내..

  Read More