아이콘 이미지를 넣을 때 png 파일 사용 중 ios에서는 깨짐 현상 없이 정상적으로 렌더 되었지만 안드로이드에서는 흐릿하게 이미지가 깨져 보였다. 구글링 결과 React Native에서 사용하고 있는 fresco에서 android 상 해상도 보다 큰 이미지를 자동으로 줄이는 기능이 있어 이미지가 깨져 보인다고 한다. 해결방법 jp...

Android 버전이 tagetSdkVersion 28 이상일 경우 부터는 WebView에 일반적인 텍스트로 http:// URL 접근이 막혔다. 해결방법 AndroidManifest.xml 에서 application 의 usesClearTextTraffic 속성을 true로 바꿔주어 텍스트 URL 을 무조건 허용하게했다. <manifes...

react-native-webview를 이용하여 모바일 web으로 이동한 후 앱 카드 결제 시 앱 카드 앱 호출이 되지 않는 이슈가 발생하였다. 구글링을 통해 마침내 외부 앱을 실행했다.. 정확한 원리와 이해를 완벽히 한 건 아니지만 내가 시도했던 것들을 아래에 정리해 보았다. android 안드로이드의 경우 intent 호출을 할 수 없기 때문...

앱 업데이트를 할 때 각 스토어의 심사를 받아야 하기 때문에 최소 하루 이상 시간이 소요된다. Microsoft에서 서비스하고 있는 Code Push를 사용하면 스토어의 심사를 받지 않고 빠르게 앱을 업데이트할 수 있다. 하지만 일부 기능이 추가되어 빌드를 해야 하는 경우를 제외한다. 간단하게 javascript 나 스타일같이 간단한 수정을 했을 때...

리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 응용 프로그램으로 네이티브 앱 개발을 위한 자바스크립트 프레임워크이다. 크로스 플랫폼으로 하나의 코드 개발로 ios와 android에서 동일하게 동작시킬 수 있다. 자바스크립트를 기본 언어로 쓰기 때문에 자바나 코틀린 언어에 의존하는 안드로이드 네이티브 앱 혹은 swift 언어에 의존하는...

프론트엔드 netlify 배포 (cors) 프론트엔드와 백엔드의 도메인 주소가 다른 경우 cors 문제가 생기는데 로컬에서 이를 해결하기 위해 프론트 쪽에서 proxy 설정을 해두어 cors 문제를 해결했었다. 하지만 netlify에 배포한 뒤에는 cors 에러가 아닌 계속 404에러가 나타났다. 다시 로컬로 돌아가서 확인해보니 또 cors 문...

관계형 데이터베이스는 현재 가장 많이 사용되고 있는 데이터베이스의 한 종류이다. 관계형 데이터 베이스는 엑셀 시트처럼 행과 열이 있는 표 그래프 형태를 가지고 있다. 하나의 데이터베이스 안에 테이블(table)로 이루어져 있으며, 이 테이블은 키(key)와 값(value)의 관계를 나타낸다. mySQL은 관계형 데이터베이스 중 하나이다. 관계...

react만 사용해도 애플리케이션을 개발할 수 있다. 하지만, 규모가 커지고 구조가 복잡해질수록 컴포넌트의 상태(state) prop으로 넘겨주고 관리하는 일이 귀찮아진다. 리액트로 상태를 관리하면 부모 자식 관계처럼 위에서 아래로 또는 아래에서 위로 상태(state)를 props로 넘겨주어야 한다. 하지만 아래 그림과 같이 redux를 사용하게 ...

페이지 중 누구나 진입이 가능한 페이지와, 로그인한 회원만 진입이 가능한 페이지 또는 로그인 한 회원은 진입하지 못하는 페이지 (예: login 페이지) , 관리자만 진입이 가능한 페이지가 있다. 이러한 인증 들은 어떻게 할 수 있을까? 이런 경우 higher-order component function 을 사용하면 된다. Auth (HOC)...

프론트엔드 서버와 백엔드 서버를 따로 구성하는 경우가 많다. 이렇게 출처(origins)가 다른 경우 보안상 문제로 요청을 주고받을 수 없는 것이 웹 브라우저 기본 정책이다. 하지만 CORS (Cross Origin Resource Sharing)라는 방식을 통하면 서로 다른 출처라도 요청을 주고받을 것이 가능하다. SOP (Same Origin P...