elevne's Study Note

React Native 활용 앱 개발을 연습하기 위해 아래 링크의 E-commerce App Clone 을 진행해보았다. 링크: https://www.youtube.com/watch?v=cd4v2T-_RE0&list=LL&index=2 우선 첫 번째 시간에는 Walkthrough 스크린에 대한 작업을 진행해주었다. Walkthrough 가 여러 개의 페이지로 구성될 수 있게끔 Animated.FlatList 컴포넌트를 활용하여 작성한다. 우선 React Native Animation 복습을 진행했다. Animation 을 사용하면 오브젝트를 이동하거나, 모양이나 색상을 변경하여 실제 상호작용을 모방할 수 있다. Animated 를 사용하기 위해서는 Animated.Value 를 하나 만들어야한다. Val..

이번에는 Firebase 와 App 을 연결하여 로그인 및 회원가입 기능을 구현해보았다. 우선 firebase 홈페이지에서 간단한 절차를 통해 프로젝트를 생성해주는 과정을 거쳤다. (홈페이지 UI 를 따라가면 쉽게 생성할 수 있다) 그 후 프로젝트 내에 firebase 를 설치해주어야 했다. npm install firebase 그 다음으로 프로젝트 내에 firebase.js 라는 파일을 생성해준 다음, firebase 홈페이지에서 제공해주는 정보를 바탕으로 코드를 입력해주었다. // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; // TODO: Add SDKs for Fir..

이번 시간에는 React Navigation 을 활용하는 방법에 대해 알아보았다. React Navigation 은 React Native 애플리케이션에서 화면을 전환하고 탐색하기 위해 사용되는 라이브러리이다. 이를 사용하면 사용자가 화면 간에 이동할 수 있도록 스택, 탭 또는 드로어 형태의 네비게이션을 구성할 수 있다고 한다. 우선 이를 아래 명령어를 통해서 다운 받는다. npm install @react-navigation/native @react-navigation/native-stack npm install react-native-screens react-native-safe-area-context React Navigation 을 사용할 때 우선 App.js 에서 @react-navigation..

앱에 기능들을 추가해주기 위해 Redux 를 사용한다. 우선 Redux 관련 모듈들을 아래 명령어를 통해 전부 추가해준다. npm install @reduxjs/toolkit react-redux redux --save 그 후 slices 를 담을 slices 폴더, todoSlice.js, store.js 파일을 아래와 같은 구조로 생성해준다. todoSlice.js 는 아래와 같이 작성해준다. const { createSlice } = require("@reduxjs/toolkit"); const todoSlice = createSlice({ name: "todo", initialState: { currentId: 4, todos: [], }, reducers: {} }); export default..

이어서 Redux 에 대해서 알아보았다. 우선 Redux 미들웨어에 대하여 알아보았다. Redux 미들웨어는 액션을 dispatch 전달하고 리듀서에 도달하는 순간 사이에 사전에 지정된 작업을 실행할 수 있게 해주는 중간자라고 한다. Logging, 충돌 보고, 비동기 API 통신, 라우팅 등을 위해 Redux 미들웨어를 사용한다고 한다. 우선 실습으로, 간단한 로깅 미들웨어를 생성해보았다. 우선 아래와 같은 코드를 Index.tsx 파일에 추가해준다. Counter 기능에서 +/- 버튼을 누를 때마다 로그가 찍히게되는 것을 확인해볼 수 있다. 아래를 보면 Middleware 을 추가해주는 것은 함수를 return 하는 함수를 return 하는 함수를 만들어서, 이를 applyMiddleware 메서드에..

Redux 에 대해서 또 복습해보는 시간을 가졌다. 한 줄로 표현하자면, Redux 란 JS 어플리케이션을 위한 상태관리 라이브러리이다. React 에서는 Props 와 State 라는 것이 사용된다. Props 는 properties 의 줄임말로, 구성 요소가 서로 통신하는 방법이다. Props 는 상위 구성 요소에서 아래쪽으로 흐르고, 해당 값을 변경하려면 자식 관점에서 props 를 변경할 수 있으며 부모는 내부 상태를 변경해야 한다. State 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 것이 아닌 하나의 Component 내에서 데이터를 전달할 떄 사용되는 것이다. State 는 Mutable 하고, State 가 변하면 해당 컴포넌트는 자동으로 리렌더링 된다. Redux 는 이러한 S..

React Native 기반 To Do 앱을 만들어보기로 하였다. 우선 원하는 경로로 들어가서 React Native 프로젝트를 아래와 같은 명령어로 생성해준다. create-react-native-app rn-todo 그 후, 우선 아래 이미지와 같이 디렉토리와 컴포넌트들을 생성해준다. 위 컴포넌트 중 MainScreen.js 는 Todo 앱의 메인화면을 담당하게될 컴포넌트이다. 아래와 같은 코드로 작성된다. import { View, Text, SafeAreaView, Platform } from 'react-native' import React from 'react' import { StyleSheet } from 'react-native' import { StatusBar } from 'expo-..

/src/containers 디렉토리에 CounterContainer 컴포넌트를 작성한다. 이 컴포넌트에서는 react-redux 에서 제공하는 connect 함수를 사용하게 된다. connect 함수는 아래와 같은 형식으로 사용된다. connect(mapStateToProps, mapDispatchToProps)(연동할컴포넌트) 위 connect 함수에서 mapStateToProps 는 Redux 스토어 안의 상태를 컴포넌트의 props 로 넘겨주기 위해 설정하는 함수이고, mapDispatchToProps 는 액션 생성함수를 컴포넌트의 props 로 넘겨주기 위해 사용하는 함수이다. 이를 활용한 CounterContainer 컴포넌트는 아래와 같이 작성된다. import { connect } from..