제품 소개
https://www.notion.so/LinkU-49903f586285465792e2be64d14c1dd4
개요
모바일에서 사파리나 크롬은 북마크가 저장한 뒤에 다시 찾기 불편하고 잊어버리는 경우가 많았고 이를 보완한 앱이 있었으면 좋겠다라고 생각하여 탄생한 앱이다.
지난 59mins에 이어서 사이드 프로젝트로 IOS앱을 만들게 되었다.
작업 내용
0. 기술 스텍
- React-Native
- typescript
- Realm
1. Dicrectory 구조
프로젝트 시작전 늘 고민하는 문제지만 답은 없는 것 같다.
이번엔 atomic design을 적용해보려고 한다.
추가로 index.ts는 파일들을 export 해주는 역할로만 사용했다.
⦁ atomic design
⦁ ./components/index.ts
import Buttons from "./Buttons";
import Modals from "./Modals";
import FlatLists from "./FlatLists";
import Labels from "./Labels";
import Loader from "./Loader";
import Inputs from "./Inputs";
import BottomBlur from "./BottomBlur";
export { Buttons, Modals, FlatLists, Labels, Loader, Inputs, BottomBlur };
2. Realm
Realm은 App.tsx에서 시작시 연결하도록 했고 굳이 redux나 recoil을 사용할 정도가 아니라고 판단되어 Context API에 전달하여 사용하도록 했다.
⦁ ./App.tsx
const [realm, setRealm] = useState(null);
const startLoading = async () => {
try {
const connection = await new Realm.open({
path,
schema: [LinksSchema, CategoriesSchema, SearchSchema],
});
setRealm(connection);
const imageAssets = cacheImages([
require("./assets/img/logo.png"),
require("./assets/img/onBorading/onboarding1.png")
...
]);
await Promise.all([...imageAssets]);
} catch (error) {
console.warn(error);
} finally {
setAppIsReady(true);
}
};
useEffect(() => {
if (isStarted && AppState.currentState === "active") {
requestTrackingPermission();
}
}, [isStarted]);
if (!appIsReady) {
return null;
}
return (
<SafeAreaProvider>
<SafeAreaView
onLayout={onLayoutRootView}
edges={["top", "right", "left"]}
>
<StatusBar/>
<DBContext.Provider value={realm}>
<ThemeProvider
theme={darkMode === "dark" ? darkThemes : lightThemes}
>
<NavigationContainer>
<Navigator />
</NavigationContainer>
</ThemeProvider>
</DBContext.Provider>
</SafeAreaView>
</SafeAreaProvider>
);
3. 반응형 레이아웃
React-Native 반응형 레이아웃은 이번에 작업하게 되었다.
도움을 주는 react-native-responsive-dimensions라는 라이브러리가 있었고 이를 사용하게 되었다.
검수때 확인하니 제플린 사이즈를 최소 디바이스 사이즈 하나만 작업해서 큰 사이즈의 디바이스에선 너무 커보이는 레이아웃들이 있었고 작은 폰트사이즈들은 너무 작아보이는 문제점이 있었다.
이런 부분들은 일부 분기처리해서 작업하긴 했지만 조금 더 좋은 방법이 있는지 확인 해봐야 할 것 같다.
⦁ ./hooks/useResponseSize.ts
import {
responsiveScreenHeight,
responsiveScreenWidth,
responsiveScreenFontSize,
} from "react-native-responsive-dimensions";
const ZEPLIN_WIDTH = 320;
const ZEPLIN_HEIGHT = 568;
export function widthPercentage(width: number): number {
const percentage = (width / ZEPLIN_WIDTH) * 100;
return responsiveScreenWidth(percentage);
}
export function heightPercentage(height: number): number {
const percentage = (height / ZEPLIN_HEIGHT) * 100;
return responsiveScreenHeight(percentage);
}
export function fontPercentage(size: number): number {
// size 뒤에 붙는 비율은 시안에 따라 유동적인듯함.
const percentage = size * 0.16;
return responsiveScreenFontSize(percentage);
}
후기
좋았던 부분
1. 앱 생태계를 겪어본 점
사실 늘 앱을 만들어 보고 싶다라는 생각이 있었다.
IOS앱은 정말 여러 부분들을 신경 쓰면서 작업해야 하는걸 몸소 느꼈다.
그들의 정책들에 맞춰야 하기도 해야하고 서비스 중인 앱들을 참고하면서 어떻게 동작시키면 유저들이 불편함 없이 사용할 수 있을지 고민도 많이 할 수 있었던 값진 시간들이였다.
앞으로 하게 될 외주 프로젝트가 웹앱인데 큰 도움이 될 것 같다.
아쉬웠던 점
1. React-Native의 단점이 와닿았다.
아직 React-Native를 다 파악하지 못해서 일수도 있지만 라이브러리 의존하는게 심했다.
업데이트가 되어지지 않는 라이브러리들은 RN 최신 버전에선 전혀 사용할 수 없었다. 직접 만드려면 네이티브의 모듈을 만들어야 될텐데 네이티브를 모르는 나로써는 새로운 라이브러리를 찾아나서야 했던 기억이 아쉬웠다.
2. 유저의 정보를 알 수 없었던 점이 아쉽다.
59mins는 GA와 서버가 있어서 접속 경로를 확인할 수 있었지만 이번에는 local DB를 사용하여서 app store에서 제공하는 다운로드수, 국가, 실제 사용하고 있는 유저 정도만 확인 가능하였다.
다음 사이드 프로젝트는 서버를 통해 유저 트래킹을 통해 디벨롭 할 수 있도록 만들고 싶다.
앞으로의 계획
앱을 개발하는 내내 뭔가 제한적인 느낌을 지울 수 없었고 간단한 기능들인데 라이브러리에 의존을 해야하는 상황이 빈번해 차라리 네이티브를 배우고 싶다라는 생각이 들었다. (그래서 swift 인프런 강의 결제함 🤣)
올해안으로 토이 프로젝트로 IOS 네이티브앱을 만드는걸 목표로 삼고 공부하려고 한다.
