본문 바로가기

전체 글

 (81)
[칭찬일기 개발기 #3] Routing 최대한 단순한 UI로 MVP 제품을 만들어 출시하려한다. 피그마로 대~~~충 그려본 UI... iPhone8(375 * 667)을 기준으로 해보니 엄청 짧게 느껴지지만 작은 기기로 먼저 개발하고 큰 기기 대응하는게 개인적으로는 좀 더 수월했던 것 같다. 원래 iPhone8에는 safeArea가 없지만 그냥 넣어봤다.. 느낌 보려고 Routing은 하단 메인 탭 / 세팅화면 크게는 이렇게 2개로만 구성이 된다. 메인 탭에서 첫째 탭은 칭찬 input과 출첵용 달력 둘째 탭은 칭찬한 것을 list로 보여주는 화면 설정화면은 로그인 / 일기 export 정도로만 생각하고 있다. 일단 배포 후에 하나씩 develop할 생각. --- Navigation Stack별로 Navigation 파일을 따로 만들어 관리하..
[칭찬일기 개발기 #2] 폴더 구조 expo cli로 프로젝트 생성시 최초 Directory 내가 주로 작업할 코드 관련 파일들만 따로 src폴더로 묶었다. App.tsx파일도 src안으로 옮겼는데 그러면 오류가 발생한다. package.json에 entry 파일 경로가 node_modules/expo로 정의되어있기때문..! "main": "node_modules/expo/AppEntry.js" 그래서 해당 js파일을 수정했다. ``` // AppEntry.js import registerRootComponent from 'expo/build/launch/registerRootComponent'; // as-is // import App from '../../App'; // to-be import App from '../../src/Ap..
[칭찬일기 개발기 #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..
Lambda@Edge를 통한 Dynamic OG Tags, SEO End user에게 데이터가 가는 중간 과정 각각에 lambda@edge를 통해서 관여할 수 있습니다. Viewer Request - End User로부터 CloudFront로 요청이 도착한 직후 Origin Request - CloudFront에서 Origin Server로 요청을 보내기 직전 Origin Response - Origin Server에서 보낸 응답이 도착한 직후 Viewer Response - CloudFront에서 End User로 Response 보내기 직전 주의사항 버지니아 북부(us-east-1) 리전에서만 배포 가능 로그는 CloudWatch에 쌓임. But, us-east-1에 쌓이는 것이 아니고 접속한 각 region에서 쌓입니다. (ex. 서울 region에서 접속했을 ..
React와 Angular의 DOM DOM이란? Document Object Model HTML, XML 문서의 프로그래밍 interface(API) document BOM중의 하나 document.querySelector('.woot'); DOM 구성 - Render Tree 그렇다면, SPA에서 상태가 변할 때 DOM은 어떤 방식으로 변경될까? [ virtual DOM vs incremental DOM ] virtual DOM React, Vue에서는 DOM의 html 요소가 바뀔 때, 새로운 virtual DOM을 만들어 놓고 기존의 virtual DOM과 비교해서 (diffing) 필요한 부분만 바꿔준다. 컴포넌트의 렌더링 결과를 값으로 받을 수 있고, 이를 테스트나 디버깅 등에 사용할 수 있다. virtual DOM을 사용하기에,..
[Android] Notification - 알림 띄우기 https://developer.android.com/training/notify-user/build-notification?hl=ko 알림 만들기 | Android 개발자 | Android Developers 알림은 사용 중이 아닌 앱의 이벤트에 관한 짧고 시기적절한 정보를 제공합니다. 이 페이지에서는 Android 4.0(API 레벨 14) 이상의 다양한 기능을 사용하여 알림을 만드는 방법을 설명합니다. Android developer.android.com 위의 안드로이드 공식 문서에 알림 띄우는 부분이 잘 정리가 되어 있어서 구체적인 방법에 대한 블로깅은 생략하고자 합니다. 여기서는 알림을 띄울 때 삽질 했던 부분에 대해서 남기고자 합니다. 제가 겪었던 문제는 2가지가 있습니다. 1. 알림들이 여러..
[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 설치 및 코드 작성 웹 빌드 및 배포 앱 빌드 버전 관..

티스토리툴바