My Boundary As Much As I Experienced

코드 푸시란?iOS/Android 심사를 거치지 않고 앱에 변경사항을 배포할 수 있는 기능이다.특히 RN의 JavaScript 및 이미지 리소스를 원격으로 업데이트해주는거라 보면 된다.     왜 쓰게 됐나? (내가 업데이트 해야됐던 것)최근 ANTTIME의 SHOP페이지 UI가 전면 개편되었다.(살 수 있는 항목이 늘었고, 아이템 잔량을 체크할 수 있게 되었고,긴 스크롤로 아이템들을 나열했던 방식을 탭으로 정리하였다.) 그런데 바뀐 Daily Free Box UI가 Clickable하지 않아보인다는 내부 의견이 나왔고,이 영역에 액션버튼을 달아주는 UI 패치를 진행하게 되었다. 이렇게 광고보고 무료로 얻을 수 있다는 것을 강조해주며,광고 10번 다 채웠을 시 24H Miner를 수령하세요가 나오고,수령..

오늘 신규앱을 내부 테스트로 임시 출시해봤는데.. 진짜 우당탕탕 문제의 연속이었다.대충 어떤 이슈였고 어떻게 해결했는지를 나열식으로 정리해본다.일단 일어난 현상만을 기록하는 느낌이고, 이 이슈들에 대한 깊은 이해도는 아직 없다는 점 참고 바란다. iOS 빌드 후 Applestore connect에 Distribution 시 겪은 에러× Asset validation failedInvalid MinimumOSVersion. Apps that only support 64-bit devices must specify a deployment target of 8.0 or later. MinimumOSVersion in 'todaysdiary.app/Frameworks/hermes.framework' is ".(..

많은 서비스들이 웹뷰를 쓴다. 특히 껍데기만 네이티브나 크로스플랫폼앱으로 만들고,안의 내용물들은 모두 웹뷰를 쓰기도 한다. 이런 경우 하이브리드앱이라고 부른다.하여튼 수많은 서비스들이 (그 양이 많든 적든) 일정부분 웹뷰를 활용해서 커버하는 부분이 있다.왜 이렇게 다양하게 웹뷰를 활용할까? 하이브리드 앱의 경우: 전체 서비스를 웹뷰로.1. 반응형 웹개발 내용을 앱으로 바로 포팅 가능요새 거의 모든 웹사이트들은 모바일웹 서비스를 따로두기보단 '반응형 웹'으로 여러 해상도를 커버한다.그런데 이를 모바일 앱에 바로 활용한다면? 그냥 앱개발을 따로 하지 않아도 된다는 엄청난 장점이 생긴다. 2. 웹 개발자 돌려쓰기 가능iOS/Android 개발자들 한 무더기 뽑고 웹개발자들도 뽑고... 이러지 않아도 된다.소수..

1. 스크린 이동하며 데이터를 같이 보내고 싶다면?리액트 네이티브 상에서 페이지 이동할 때 useNavigation을 이용해야 된다.import React from 'react';import { View, Text, Button } from 'react-native';import { useNavigation } from '@react-navigation/native';import { HomeScreenNavigationProp } from '../types';function HomeScreen() { const navigation = useNavigation(); return ( Home Screen navigation.navigate('Details') /..

컨셉포트폴리오, 블로그, 아트워크 갤러리 등 모든 것을 종합한 내 개인 사이트를 만들고 있다.이니셜은 BB다. BumangBoard, BumangBackground, BumangBunker, BumangBetter 등...여러 이름으로 대응될 수 있다는 컨셉. 좌측 상단 로고에 호버할때마다 제목이 계속 바뀌게 해야지~ 구조에 대해 매우매우 고민을 많이 했다.사실 대부분의 개발문서나 테크 블로그들은 사이드바가 존재하는 디자인이지만...나는 헤더-탭바 등이 상단에 배치되는 형식에 컨텐츠 중앙정렬 컨셉으로 만들기로 했다. 본문 width를 넓게 쓰는게 인터랙티브나 스크롤 모션 등을 넣었을 때 임팩트가 셀 것이기 때문!그래서 최종 구조는 아래처럼 잡을거다. - 헤더- 배너 (Collapsible)- 탭바 (i..

분명 네비게이션 버튼인데 특이한 동작이 나오는 커스텀 버튼들이 있다?!바텀네비게이션 버튼 중에 일반적인 페이지가 아니라 모달이 나오게 하는 페이지들이 존재한다.  각설하고 이걸 어떻게 구현하는가?1. 바텀탭 네비게이터에 새로운 페이지 추가별거 없다. 새로운 Screen컴포넌트를 네비게이터에 일단 추가한다.ToAddNewDiary라는 컴포넌트를 추가했다. return ( , }} /> // ... );};  2. Null을 반환하는 컴포넌트를 생성하고 만든 페이지에 준다.우리가 만드는건 실제 탭전환을 일으키지 않는다. 탭이 전환되는게 아니라원래 있던 탭에 그대로 있으면서 그 위로 바텀 모달 형식의 페이지가 나와야 하는 것이다.이를 위해 ..

타로를 왜?이 세상에서 몇 천년 동안 이어져 온 킬러 콘텐츠, 바로 운세다.특히 타로카드의 형식은 랜덤 가챠(?)와 운명을 결부시키는 매우 중독적인 포맷이다.사실 본질적으론 78장의 그림카드 중에 몇 개를 뒤집는 거에 불과하지 않나?그런데도 다들 카드를 뽑을 때 진짜 자신의 운을 결정짓는 느낌으로 진지하게 임하는걸 볼 수 있다..(+그리고 오늘의 운세를 보러 하루에 한 번 씩은 다시 방문한다. 이런 리텐션 깡패가 없다..!!!) 그래서 왜 챗봇?타로마스터와 내담자 간의 대화로 진행되는데,이 포맷을 가장 잘 살린게 채팅 형식의 타로앱인 헬로우톡인거 같다.'라마마'라는 라마 캐릭터가 각종 테마와 카드에 대한 멋들여진 해석을 제공해준다. 그런데 라마마가 각각의 카드에 대한 아주 잘 짜여진 스크립트를 제공해주고..

검색기능을 구현하려한다.어떻게 구현해야할까? 구현하려고 하는 스펙을 정리해보자면,프론트1. 검색창과 검색 인풋이 있는 리스트 페이지2. 검색 시 get요청으로 검색어를 쿼리스트링에 포함하여 조회3. 응답을 받아 리스트를 재갱신백엔드1. 프론트의 요청을 받으면 제목, 본문에서  해당 문자열이 포함된 것들을 모두 db조회2. 중복 배열이 있는 것은 제거하고 배열에 담아 프론트에 다시 반환 라고 정리할 수 있을 것이다.프론트엔드 먼저 어떻게 구현했는지 보여주겠다. 잠깐, 프론트에서 get요청이 아니라 post요청이 자연스럽지 않나?라고 생각이 들 수 있다. 나도 처음에 post요청으로 구현할뻔했으니까.프론트 입장에서 body에 정보를 포함하여 서버에 요청보낼 땐 본능적으로 post를 떠올리는게 자연스럽다. 그..

배우게 된 계기사람들이 하도 form 구현 시 React-hook-form이 좋다고 해서언젠가 한 번 써봐야지 했다가 이번에 만드는 초기앱 회원가입에 써보기를 고려하였다. 사실 처음엔 useState와 useEffect가 가장 직관적이지 않나? 이걸로도 충분한데..라는 생각이 지배적이었는데 알고보니 매우 개발자를 편하게 해주는 좋은 라이브러리였다. React-hook-form의 최대 장점: 관리할 상태가 엄청나게 줄어든다.아래는 내가 취업 전 부트캠프 파이널 프로젝트로 했던 코드이다.호텔 예약 매물 양도 플랫폼이 컨셉이었는데, 예약 과정에서 관리해야될 상태들이 너무 많았다.호텔 취소 물품의 1차 가격, 2차 가격, 2차 가격 설정 여부, 계좌등록여부, 은행, 계좌번호, 약관 동의1/2/3/4를 포함해서...

공부하게 된 계기:현재 듣는 express 강의에서 지금까지 App객체로 모든 라우트를 관리하다가페이지 별로 분리하여 router로 분리하는 법을 알려주었다.그리고 학생한테 강의에서 분리하지 않은 로직들도 모두 모듈화해보라는 숙제를 내주어서이를 수행하고 있었는데... passport와 express-session 코드 부분을 분리할 때 조금 애를 먹었다. 왜냐하면 강의에서 이들 라이브러리에 대해 대강 추상적인 설명만 듣고 넘어갔던터라각각의 import/export, 호출 시점, 동작 흐름에 대해 엄밀히 알지 못했기 때문에파일로 분리하기가 힘들었던 것이다. 그래서 이제 엄밀하게 공부해보면서 세션에 대한 이해도를 올렸는데, 이를 설명해보겠다. 1. express-session과 passport의 차이는 무엇..