[클라우딩 어플리케이션 엔지니어링 TIL] 240417 - React Native 캠핑앱 만들기 프로젝트 (1)

Intro

---

데브코스 마지막 개인프로젝트가 시작되었다.

16일부터였는데 강의 듣느라 17일 저녁부터 시작..

이번엔 Figma로 UI 디자인이 주어졌기 때문에 이번 개인 프로젝트 목표는 최대한 디자인과 똑같이 구현하는 데에 있다.

주어진 디자인을 똑같이 구현하는 것이 프론트엔드 개발자의 능력 중 하나라고 생각하기 때문이다...!

 

 

프로젝트 진행상황

---

코딩테스트 강의와 Nodejs express 강의를 듣다가 다시 React Native를 하려니 순간 어떻게 했더라...? 기억이 안났다.

이전에 React Native 공부하면서 기록해 놓은 것들 다시 보면서 프로젝트를 시작했다.

 

프로젝트를 진행하기 앞서,

저번 프로젝트에서도 사용했던 툴인 Linear를 사용해 개발해야 할 사항들을 나열하고 이슈 관리를 하였다.

 

https://linear.app/docs/get-the-app

Download Linear – Linear Docs

 

 

react-native 프로젝트 세팅

npx react-native@latest init SNSProject

 

 

가장 먼저 구현할 것은 페이지 라우팅 기능이었다.

그러기위해 react-native-navigation 라이브러리를 설치했다.

react-native navigation

# 기본 설치
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npx pod-install ios

 

페이지 라우팅 기능을 사용하기 위해 App.js에 다음과 같이 NavigationContainer 태그를 사용했다.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Router from './src/router';

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Router />
    </NavigationContainer>
  );
}

export default App;

 

 

다음 페이지로 이동할 때 페이지를 쌓아 올리는 식으로 구현되는 스택 네비게이터를 사용하기 위해 추가 라이브러리도 설치했다.

# navigation stack
npm install @react-navigation/native-stack

const Router = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="MainTab" component={MainTab} />
    </Stack.Navigator>
  );
};

 

 

하단 탭을 사용하기 위한 라이브러리도 설치했다.

npm install @react-navigation/bottom-tabs

const MainTab = () => {
  return (
    <Tab.Navigator
      tabBar={renderTabBar}
      screenOptions={{
        headerShown: false,
      }}>
      <Tab.Screen name="camping" component={HomeTab} />
      <Tab.Screen name="community" component={CommunityPage} />
      <Tab.Screen name="article" component={ArticlePage} />
      <Tab.Screen name="settings" component={SettingsPage} />
    </Tab.Navigator>
  );
};

 

 

 

이슈 사항

---

ios pod 초기화

모든 설치가 완료된 후, ios에서 pod install을 해주어야 하는데 pod install을 진행했음에도 제대로 적용되지 않거나 오류로 앱이 열리지 않은 일이 가끔 발생했다.

이전에 pod의 캐시가 남아있어서 발생한 문제일 수도 있기 때문에 이럴 경우엔 pod 캐시를 지우고 초기화를 한 후 다시 pod install을 진행해야 한다.

pod deintegrate
pod cache clean --all
pod install

 

 

bottom tab bar UI

 

위처럼 굴곡있는 박스를 구현하고 싶어서 박스 두 개를 붙여 왼쪽 오른쪽에 border-radius를 적용해보는 식으로 구현을 했는데 원하는 대로 나오지 않아 멘토님께 여쭤보니 굴곡이 2개가 아닌 3개이기 때문에 박스를 이어붙이는 식으로는 구현이 어렵다고 하셨다.

SVG로 가져와 처리하셨다고 하는데 react-native에서 SVG를 쓰려면 또 추가 라이브러리가 필요해서 일단 중요한 개발부터 끝내고 진행하려고 한다.

 

 

 

 

추후 진행사항

---

4/18 TODO

• 공공데이터 API 불러오기
• Home 화면 구현하기
• Article 화면 구현하기