1. 홈 화면 레이아웃 틀 잡기

- 오늘 날짜, 일기, 할일, 일정 영역 생성

 

2. 현재 위치 날씨 정보 출력

- 오늘 앱개발 종합반 4주차 강의 들으면서 날씨 정보 받아오는 방법을 알게 돼서 바로 적용!

- expo-location, openweathermap api 사용

 

3. 홈 화면 오늘 날짜, 요일 출력하기

- 자바스크립트의 Date() 이용

- 날짜를 상태(state)로 관리

 

4. 캘린더 클릭 이벤트

- 캘린더에서 날짜 선택 시 실행되는 onDayPress 내용 수정

- 선택된 날짜를 상태(state)로 관리

 

레이아웃 구성은 앞으로 계속 바뀔 수 있음..

1. VS Code에서 React Native 프로젝트 생성, Expo와 연결

 

2. GitHub에 프로젝트 연결하기 (clone, push)

 

3. StackNavigator 구현하기 (@react-navigation/stack import)

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();
const StackNavigator = () => {
  return(
    <Stack.Navigator>
      //페이지로 만들 컴포넌트 (추후 추가 예정)
      <Stack.Screen name="TodayPage" component={TodayPage}/>
    </Stack.Navigator>
  )
}

export default StackNavigator;

 

4. 하단탭(bottom-tab) 구현하기 (@react-navigation/bottom-tabs import)

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
  return(
    <Tab.Navigator>
      <Tab.Screen name="Today" component={TodayPage}/>
      <Tab.Screen name="Calendar" component={CalendarPage}/>
      <Tab.Screen name="Diary" component={DiaryPage}/>
      <Tab.Screen name="Setting" component={SettingPage}/>
    </Tab.Navigator>
  )
}

export default BottomTabNavigator;

 

5. 일기 목록 페이지 (DiaryPage.js) ScrollView 및 카드 구현

- 일기 카드를 DiaryCard.js를 별도로 만들어서 DiaryPage.js에서 불러오도록 함

 

6. Calendar 추가 (react-native-calendars import)

import { Calendar,CalendarList,Agenda } from 'react-native-calendars';

export default function CalendarPage() {
  return(
    <View style={styles.container}>
      <View style={styles.calendarContainer}>
        <Calendar style={styles.calendar}
          onDayPress={(day) => console.log(dateString)}
        ></Calendar>
      </View>
    </View>
  )
}

 

7. 환경 설정 페이지 (Setting.js) ScrollView 구현

 

 

결과 화면

홈 화면에는 오늘 날짜의 일정, To Do 리스트, 일기가 들어갈 것으로 구상하고 있다.

캘린더 화면에는 캘린더와 선택한 날짜의 일정, 할일이 나올 것으로 일단 영역을 잡아놨다. 

 

일기 목록은 인스타그램의 피드같은 느낌으로 구현할까 생각 중이다.

환경 설정은 폰트나 테마 변경 등 옵션을 좀 더 생각해봐야한다.

 

개발 첫 날인데 생각보다 많은 것을 구현했다.

가장 마음에 드는 부분은 하단탭 기능을 완성했다는 것!

각 기능별 화면 레이아웃은 앞으로 계속 구상해나갈 것이다.

또한 StackNavigation과 Bottom Navigation을 어떻게 한 화면에 담을 수 있을지 고민해봐야한다.

 

프론트엔드 개발자가 되기 위해서는 자바스크립트와 친해져야하는데

프로젝트 개발을 진행하면서 낯설게만 느껴졌던 자바스크립트와 조금씩 친해지는 느낌이 든다ㅎㅎ

현재 스파르타코딩클럽 앱개발 종합반을 수강하면서 React Native를 공부하고 있다.

수업에서 다루는 예제를 통해 학습한 내용을 복습할 겸, 추가적인 공부를 해서

나만의 앱을 만들어보고자 하는 의지가 생겼다.

 

어떤 앱을 만들까 고민하다가 어쩌면 가장 무난하고 실용성있는 앱인 일정 관리 앱을 만들기로 했다!

앱의 기능은 [일정 등록, To Do 리스트 관리, 일기 작성] 등의 기능을 포함할 예정이다.

 

간단해보이면서도 은근 다뤄야할 기술들이 많을 것 같아서

열심히 구글링하면서 필요한 라이브러리를 찾고 적용해보도록 하겠다.

 

GitHub에 해당 프로젝트 파일을 올린 상태이다.

https://github.com/askges20/ScheduleApp

 

askges20/ScheduleApp

React Native Project. Contribute to askges20/ScheduleApp development by creating an account on GitHub.

github.com

VS Code에서 GitHub 연동하기까지 은근 시간이 걸렸다.. push 오류 원인을 찾기가 어려웠다.

 

앞으로 꾸준히 개발하고 커밋해서 내 GitHub 잔디를 파릇파릇하게 물들이도록 해야지ㅎㅎ

+ Recent posts