REACT-NATIVE8 리액트 네이티브 07 - 파이어베이스 로그인 적용 먼저 파이어베이스로 이동하고 다음 순서에 따라 프로젝트를 생성해 줍니다. https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 프로젝트가 생성되면 다음 순서대로 설정을 시작합니다. 먼저 터미널에 파이어베이스를 설치하고 다음 코드 내용을 집어넣을 자바스크립트 파일을 루트 폴더에 만듭니다. firebase.js // Import the functions you need from the SDKs you need imp.. 2023. 11. 14. 리액트 네이티브 06 - 라우터 설정 리액트에서는 `react-router-dom`을 이용하여 라우터를 구현하였지만 네이티브에선 추가 라이브러리를 설치해야 합니다. https://reactnavigation.org/docs/getting-started/ React Navigation reactnavigation.org 위 링크가 공식문서이고 이제 먼저 설치해봅시다. npm install @react-navigation/native @react-navigation/native-stack expo install react-native-screens react-native-safe-area-context 아래의 명령어는 expo cli를 설치하여야 가능하기에 우선 설치해야 합니다. npm install -g expo cli 다음과 같은 경고가 떴.. 2023. 11. 10. 리액트 네이티브 05 - Redux 적용 Redux Toolkit을 사용할 것이고 Redux 스토어에서 관리되는 상태 및 상태 변경을 정의하는 Redux 슬라이스(slice)를 먼저 생성합니다. todoSlice.js import { createSlice } from "@reduxjs/toolkit"; // 1 const todoSlice = createSlice({ name: "todo", initialState: { currentId: 4, todos: [], }, // 2 reducers: { addTodo: (state, action) => { state.todos.push({ id: state.currentId++, text: action.payload.trim(), state: "todo", // 'todo' or 'done' });.. 2023. 11. 3. 리액트 네이티브 00 - 번외(Git Bash) 회사 노트북으로 개발을 공부하고 있었는데... 퇴사를 하게 돼서 집에 다시 세팅을 해야 했습니다. 이사해서 집 구조상 무선 랜카드로 와이파이를 잡았는데 기존의 이용하던 우분투는 랜카드로 와이파이 잡지 못해서 다시 윈도우로 세팅을 시작했습니다. https://git-scm.com/ Git git-scm.com 우선 Window 환경에선 기본 터미널이 PowerShell로 정해져 있고 개발 환경에 맞는 Node 명령어와 Git 명령어를 사용하기 위해선 Git Bash를 설치하고 이 터미널을 사용해야 합니다. 전부 기본 옵션으로 설치하고 터미널을 다시 키면 다음과 같이 Git Bash 터미널이 생깁니다. 하지만 위와 같이 기본값을 설정하지 않으면 매 번 터미널을 열 때마다 Git Bash 터미널을 선택해야 해.. 2023. 10. 30. 리액트 네이티브 04 - svg 사용하기 리액트 네이티브는 일반적으로 svg를 지원하지 않기에 사용할 수 있게 추가 설정을 해야합니다. svg 요소나 속성들을 사용할 수 있게 해주며 npm install react-native-svg --save svg 파일을 import할 수 있게 해줍니다. npm install -D react-native-svg-transformer https://github.com/kristerkari/react-native-svg-transformer GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would in Import SVG files in your.. 2023. 10. 22. 리액트 네이티브 03 - Todo App 구조 잡기 확장 프로그램 추천(시작하기 전) 리액트 코드 스니펫 리액트 코드를 빠르게 작성할 수 있게 도와준다. (물론 네이티브도) 파일을 만들고 위와 같이 `rnfes`를 치고 엔터를 누르면 기초 틀이 잡힌 네이티브 코드가 나온다. 코드 문법 체크 위와 같이 코드 오타도 물결 표시로 체크받을 수 있다. 진작에 알았다면 ~ Core Components 최대한 네이티브 Core Component를 많이 활용할 것이며 다음의 공식 문서 링크에서 그 종류를 확인할 수 있다. https://reactnative.dev/docs/components-and-apis Core Components and APIs · React Native React Native provides a number of built-in Core Co.. 2023. 10. 15. 리액트 네이티브 02 - Expo 세팅 Expo 프로젝트 다운로드 npx create-expo-app FirstProject 이렇게 프로젝트를 생성하려 했으나... 위와 같은 에러가 발생했다... 대충 저 경로에 npm 파일을 감지하지 못해서 생기는 것 같다. 그래서 C드라이브에 nodejs 폴더로 가 npm 파일을 복사해서 옮겼다. Node.js 버전 이슈 그리고 다시 Expo 프로젝트를 설치했는데 위와 같은 에러가 떴다... 휴 노드 버전의 문제인 것 같다. https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in .. 2023. 10. 8. 리액트 네이티브 01 - 기초 React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션 빌드하기 위한 오픈 소스 프레임워크 장점 1. 네이티브 렌더링의 효율성과 WebView의 한계 WebView를 사용하는 다른 크로스 플랫폼(Cordova, Ionic 등)과는 다르게 실제 호스트 플랫폼의 표준 렌더링 API를 사용하여 렌더링 WebView는 웹 브라우저 컴포넌트를 앱에 임베딩하는 것으로 성능 문제가 생기거나 Native에서 사용하는 기본 UI 요소나 애니메이션 등을 Javascript, HTML 및 CSS 조합으로 모방하기엔 한계 존재 React Native는 마크업 요소를 실제 네이티브 요소로 변환해 사용 2. 웹 개발자로서의 이점과 네이티브 UI 활용 React에서 사용하는 것.. 2023. 10. 7. 이전 1 다음
