앱개발 (6) 썸네일형 리스트형 [칭찬일기 개발기 #3] Routing 최대한 단순한 UI로 MVP 제품을 만들어 출시하려한다. 피그마로 대~~~충 그려본 UI... iPhone8(375 * 667)을 기준으로 해보니 엄청 짧게 느껴지지만 작은 기기로 먼저 개발하고 큰 기기 대응하는게 개인적으로는 좀 더 수월했던 것 같다. 원래 iPhone8에는 safeArea가 없지만 그냥 넣어봤다.. 느낌 보려고 Routing은 하단 메인 탭 / 세팅화면 크게는 이렇게 2개로만 구성이 된다. 메인 탭에서 첫째 탭은 칭찬 input과 출첵용 달력 둘째 탭은 칭찬한 것을 list로 보여주는 화면 설정화면은 로그인 / 일기 export 정도로만 생각하고 있다. 일단 배포 후에 하나씩 develop할 생각. --- Navigation Stack별로 Navigation 파일을 따로 만들어 관리하.. [칭찬일기 개발기 #1] 기술 스펙 선택 남들과 비교하다보면 끊임없이 작아질 수 밖에 없는데 그러다보면 나를 사랑하기보다 남의 모습을 가진 나를 사랑하고 싶어하게 되는 것 같다. 나 자신을 칭찬하며 나를 돌아보다보면 좀 더 나를 아낄 수 있지 않을까하는 생각에서 시작된 프로젝트.. 기술 스펙 선정 기준은 안해본 것을 해보는게 첫번째고 두번째는 부가적인 작업들을 최소화 하는 것이다..! Framework expo 선택지는 Flutter, React-Native, Expo 이렇게 3개로 두고 고민했다. 일단 Flutter vs RN에서는 React를 시작한지가 오래되지 않아서 새로운 언어보다 react를 좀 더 파보고 싶었다. Flutter는 다음 프로젝트에 꼭 해보는걸로... 그리고 RN vs Expo. 지금 회사에서는 React Native 생.. [React Native] word-break word-break와 같은 부분이 적용이 안되는 이슈! RN에는 CSS와 조금 다르게 스타일이 적용되는 부분들이 있는데요..! 그 중에서 word-break: keep-all을 적용하고 싶은데 안되는 이슈가... 왜 이것도 지원 안해주지? 하는 의문이 들었습니다. 아직 RN 버전이 0.대라 부족한 부분이 많은 것 같긴 합니다. 버전 1.대까지 간다면 생기지 않을까 싶습니다..! 하지만, 뭐든 방법은 있는법..! string을 띄어쓰기를 기준으로 나눈 뒤, flexWrap 속성을 활용하면 됩니다. 이 속성은 나열된 요소들의 총 너비가 부모보다 크면 다음 줄에 이어서 나열하도록 합니다. 이를 바탕으로 컴포넌트를 만들어봤습니다. import React from "react"; import { StyleShee.. [Ionic] DevOps Solution - AppFlow React Native에 Code Push가 있다면, Ionic에는 AppFlow가 있습니다!! 만약 cordova를 사용중이라면 Code Push를 활용하면 되지만, capacitor라면 AppFlow를 활용하면 됩니다! AppFlow 유료 버전을 사용하면 Native 빌드와 배포까지 할 수 있지만, 이 글에서는 무료로 활용할 수 있는 유용한 Live Update에 대해서 설명하고자 합니다! Live Update란, 스토어에 배포하지 않고도 실시간으로 앱을 업데이트 시키는 것입니다. 우선 방법을 순서대로 정리하면, https://ionic.io/appflow 계정 생성 앱 생성 Git, GitLab과 같은 저장소 연결 AppFlow관련 Plugin 설치 및 코드 작성 웹 빌드 및 배포 앱 빌드 버전 관.. Safari에서 유튜브 재생 문제 (저작권 ...) ios 개발에서 웹뷰로 유튜브를 재생할 때, 그리고 로컬에서 safari에서 테스트 할때 '동영상을 재생할수 없음' 이런 비슷한 멘트가 뜨면서 안될 때가 있습니다.. 어떤 영상은 잘 되는데 어떤 영상은 안됩니다. 바로..! 저작권 때문인데요.. 아무데서나 저작권있는 영상을 재생하려 할까봐(??) 이해는 잘 안되지만 그런 문제라고 합니다. (그치만 안드로이드에서는 너무나 잘되는...) 뭐 쨋든! 이를 해결할 수 있는 방법이 있습니다. 여러 방법이 있을 수 있고, 이게 정답이라고는 할 수 없지만 한가지 해결책은 될 수 있을 것 같습니다. 일단 문제의 원인은 localhost에 있습니다. localhost에서는 재생이 안되지만, 도메인에서 접근하면 재생이 됩니다. 그래서 제가 사용한 방법은 한 다리를 거쳐 유.. Ionic 인앱결제 (in app purchase 2) Ionic으로 인앱결제를 해보면서 native에 비해 자료도 적고 가려운 곳을 긁어주는 정보들이 별로 없었습니다. 그래서 이것이 제가 했던 것을 기록하는 의미도 있지만 누군가에게는 도움이 됬으면 합니다. Ionic Code billing.fovea.cc 안드로이드 상품 등록 sandbox IOS 상품 등록 sandbox 계약 들어가기에 앞서, 처음에 저는 코드상으로 상품을 등록하고 결제하는 과정을 전부 할 수 있을 줄 알았습니다. DB만 바꿔주면 상품명과 가격 등의 정보도 바로바로 바꿀 수 있을 줄 알았습니다...ㅠㅠ 그래서 관련 부분을 찾느라 삽질을 했어서, 혹시나 저와 같은 분이 계시다면! 각 플랫폼에 상품을 미리 등록해놓은 다음 그 정보를 바탕으로 결제하는 것이니 참고하시기 바랍니다. 1. Ioni.. 이전 1 다음
