이미지

이미지 최적화하기 (img 태그 속성 알아보기)

프론트엔드 개발자로서, 웹페이지의 최적화를 위해서 번들링 사이즈를 최소화할 필요가 있다. 오늘날 웹 사이트에서 큰 비중을 차지하는 자바스크립트가 번들링으로 최적화되는 것 처럼, 이미지 역시 최적화할 필요가 있다. 따라서, 이미지 최적화를 위해서 여러 방법을 알아보았다. css의 background-img를 사용하는 것 보다는 html img 태그를 사용하자. 모던 브라우저에서 제공되는 고품질이면서도 용량이 작은 webp나 avif와 같은 최신 이미지 확장자를 사용하자. JPEG는 압축률과 이미지 품질을 조절할 수 있어 복잡한 이미지에 적합하다. 투명 배경을 사용하기 위해서 PNG를 사용할 수는 있지만, 품질이 좋은 만큼 많은 용량을 차지한다. 불필요하게 큰 이미지를 사용하지 않는다. 캐싱을 통해서 여러번..

react-native-image-picker를 사용하여 카메라 사용, 이미지 선택하기

라이브러리를 설치한다. npm i react-native-image-picker 🍪 android 권한 설정 android/app/src/main/AndroidManifest.xml 에 추가한다. 🍩 ios 권한 설정 ios/App_이름/info.plist 에 추가한다. NSPhotoLibraryUsageDescription This app requires access to the photo library. NSMicrophoneUsageDescription This app does not require access to the microphone. NSCameraUsageDescription This app requires access to the camera. 또한, 라이브러리 설치 후 pod ins..