본문 바로가기

웹 프론트엔드59

React-Native: 안드로이드 빌드 및 배포하기 React-Native로 몇 개의 앱을 만들어 보았는데 항상 안드로이드 배포를 할 때마다 찾아보고 고생을 많이 한 것 같습니다. 그래서 간단하게 안드로이드 배포시 꼭 필요한 부분만 정리해서 포스팅을 해보았습니다. Release 빌드 준비해야할 것 1. Icon 준비하기 2. 구글 개발자 등록하기 3. keystore 발급하기 4. android/gradle.properties 편집하기 5. release apk 만들기 6. Play Store에 앱 등록하기 1. Icon 준비하기 먼저 기본적으로 안드로이드 앱을 만들고 플레이스토어에 등록하기 위해 준비해야 할 이미지는 아래와 같습니다. 최소 2개의 스크린샷 (측면 최소 320픽셀, 최대 3840픽셀의 JPG 또는 24비트의 PNG) 그래픽 이미지 (102.. 2022. 7. 12.
HTTP : 브라우저에서 axios 요청 보낼시 브라우저 캐시(from disk cache)로 부터 응답 되는 문제 해결하기 최근에 프로젝트를 진행하던 중에, 리소스 요청을 하는 Rest API Request를 날렸을 때 서버로부터 응답이 오는 것이 아니라 이전의 데이터를 반복해서 가져오는 문제가 발생하였습니다. 이를 해결하기 위해 열심히 구글링을 하여 원인을 찾아보았습니다. 문제 원인 문제의 원인은 인터넷 브라우저에서 get 함수를 호출했을 때 동일한 url이면 브라우저 자체에서 캐시 처리가 되어 실제 서버를 호출하지 않는 문제 때문이었습니다. 즉 새로운 요청을 서버로부터 받아와야 하는데 크롬 브라우저 자체의 캐시로 요청을 처리한 것입니다. 브라우저 캐시의 생명주기 위와 같은 이유가 일어나는 이유를 알기 위해서는 브라우저의 캐시 생명주기를 알아야합니다. 보통 웹브라우저가 서버에서 지금까지 요청한 적이 없는 리소스를 요청하게 .. 2022. 6. 21.
JS : blob에 대해 알아보고 data URL을 통해 표현하기 (createObjectURL, removeObjectURL) 웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blob이란? blob은 binary large object의 약자입니다. 이름처럼 바이너리 형태로 큰 객체를 저장하며, 이 객체는 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 나타냅니다. blob의 경우 Chrome에서 954MB 정도의 이진 데이터를 저장할 수 있고, 이는 환경에 따라 다릅니다. blob으로 저장할 수 있는 최대 용량을 구하는 방법에 대해 궁금하신 분들은 아래 링크를 참조해주세요. JS: chrome 브라우저에서 blob 최대 용량 구하기 브라우저에서 blob에 저장할수.. 2022. 4. 8.
JS: chrome 브라우저에서 blob 최대 용량 구하기 브라우저에서 blob에 저장할수 있는 최대 용량을 구하는 방법에 대해 간단하게 알아보겠습니다. 일단 blob에 대한 개념은 아래 링크를 통해 확인해주시면 됩니다. JS : blob에 대해 알아보고 data URL을 통해 표현하기 (createObjectURL, removeObjectURL) 웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blo jw910911.tistory.com Blob 최대 용량 계산 공식 Blob의 최대 용량을 계산하는 공식입니다. OS 환경에 따라 할당할수 있는 Blob 사이즈가 달라지는 것을 확인 할 수 있습니다. 브라우저에서.. 2022. 3. 18.
HTTP: Content-Type 에 대해 알아보자 (application/json, application/x-www-form-urlencoded, multipart/form-data) 웹 개발을 하게 되면 HTTP에 대해 조금 알아두는 것이 좋습니다. 그중에서 Content-Type에 대한 이해가 부족한 것 같아 정리를 해보았습니다. Content-Type Content-Type은 api 연동시에 보내는 자원을 명시하기 위해 보통 사용합니다. Content-Type을 깊게 이해하기 위해서는 HTTP의 request의 구조를 이해하는 것이 좋습니다. HTTP의 Request는 다음과 같이 4개의 파트로 나눌 수 있습니다. 위 그림에서 Message Body에 들어가는 타입을 HTTP Header에 명시해줄 수 있는데 이때 명시해줄 수 있도록 해주는 필드가 바로 Content Type입니다. 예를 들어 api 요청 시 request에 실어 보내는 데이터(body)의 type정보를 표현합니.. 2022. 2. 16.
React Native : 절대 경로 설정하기 (+ 타입스트립트) React Native를 개발하다 보면 절대 경로 설정을 하고 싶을 때가 있습니다. 이때 헤메시는 분들을 위해 간단하게 정리해보겠습니다. 1. babel-plugin-module-resolver 설치하기 먼저 아래와 같은 babel-plugin-module-resolver를 설치하여 줍니다. npm i babel-plugin-module-resolver 2. babel.config.js에서 alias 설정하기 babel.config.js는 기본적인 babel에 대한 설정을 저장하고 있는 config 파일입니다. 기본적으로 React-Native 프로젝트는 다음과 같이 babel.config.js가 구성되어 있습니다. module.exports = { presets: ['module:metro-react-.. 2022. 2. 1.
JS : 모바일 웹앱에서 video 태그 자동재생 구현하기 ( + 추가적으로 IOS safari에서 자동 재생 시 저전력 모드일때 멈추는 문제 예외처리) 모바일 웹앱을 만들때 비디오를 자동 재생하는 부분에서 애를 먹곤 합니다. IOS의 Safari와 안드로이드의 Chrome에 맞춰서 비디오를 자동 재생을 시키려면 몇가지 유의해야 할 점이 있습니다. 이에 대해서 알아보고 추가적으로 IOS Safari에서 저전력 모드일때 자동재생이 막히는 부분에서 예외처리 방법에 대해 알아보겠습니다. 모바일에서 Video 태그 자동재생 보통 모바일에서 비디오 태그를 자동재생 시킬때 필요한 몇가지 속성들이 있습니다. Video 태그에 자동재생, 즉 autoplay를 활성화 시키려면 기본적으로 muted 속성이 필요합니다. muted 속성은 video태그에서 소리를 막아주는 속성값입니다. muted 속성이 필요한 이유는 웹 브라우저를 켰을때 유저가 원하지 않는데 자동재생되며 소.. 2022. 1. 29.
React Native : 텍스트가 넘칠때 사용하면 좋은 flexShrink React Native에서 텍스트가 범위 밖을 넘어가서 고생을 했습니다. Flex 박스 레이아웃을 조금 공부해보니 flex-shink라는 좋은 속성이 있는 것을 알게 되어서 한번 적용해봤습니다. Flex 박스 레이아웃의 flex-shrink flex-shrink는 Flex 부모 레이아웃의 자식들의 영역에 대해서 자식 Box들의 넘치는 부분을 없애줄 수 있는 속성입니다. https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink flex-shrink - CSS: Cascading Style Sheets | MDN flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 .. 2021. 12. 23.
React Native: IOS 14에서 이미지 리소스 패치 안되는 문제 해결 React Native를 개발하던중에 IOS14 에뮬레이터에서 이미지 리소스가 패치가 안되는 문제가 발생했습니다. 문제 원인 https://jeffgukang.github.io/react-native-tutorial/docs/tips/image-error-ios14.html Image is not loading(iOS14) React Native Tutorial For Beginners - 2019 jeffgukang.github.io 문제점을 찾던중에 React Native에 대한 오픈소스 튜토리얼 페이지에서 원인을 찾을 수 있었습니다. 저는 React-Native 버전 0.61.5를 사용하고 있었기 때문에 위 문제가 나타난 것이었습니다. 해결법 해결법은 의외로 간단합니다. npm i -g patch-.. 2021. 12. 14.
React 에서 geolocation API를 hook 으로 만들어 써보기 React에서의 GeoLocation GeoLocation은 GPS 또는 네트워크를 이용하여 현재 위치 정보를 반환하는 API입니다. 즉 웹브라우저에서 현재 내 위치의 위도(latitude)와 경도(longitude)를 알아보고 싶을때 주로 사용합니다. 저는 React 프로젝트에서 해당 기능을 쓰고 싶어서 이를 React로 구현할 수 있는 방법을 찾아보았습니다. GeoLocation의 함수 Geolocation 함수는 보통 Javascript에서 window의 navigator.geolocation 객체를 통해 사용할 수 있는데요, 먼저 GeoLocation의 함수에 대해서 간단히 살펴보면 아래와 같습니다. clearWatch WatchPosition을 멈춘다. getCurrentPosition 현재 위.. 2021. 11. 3.