앱개발/React Native (3) 썸네일형 리스트형 [칭찬일기 개발기 #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.. 이전 1 다음
