목록Frontend/React (30)

로메오의 블로그

[React Native] Stack navigation 사용하기 2 (2022년 기준)

React 목록 react-native navigation 설치 $ npm install @react-navigation/native --save $ npm install react-native-screens react-native-safe-area-context --save $ npm install @react-navigation/native-stack --save iOS 모듈 설치 $ cd ios $ pod install $ cd .. Android 모듈 설치 ... import android.os.Bundle; public class MainActivity extends ReactActivity { ... @Override protected void onCreate(Bundle savedInstan..
Frontend/React 2022. 10. 12. 14:59
[React Native] Stack navigation 사용하기 (2022년 기준)

React 목록 App.tsx import React from 'react'; import { SafeAreaView, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native'; import {Colors} from 'react-native/Libraries/NewAppScreen'; const App = () => { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; return ( Restaurant App Explore Restau..
Frontend/React 2022. 10. 12. 11:51
[React Native] 프로젝트 생성하기 (2022년 기준)

React 목록 react-native-cli 삭제 $ sudo npm uninstall -g react-native-cli 기존에 설치된 react-native-cli를 삭제합니다. Node, Watchman, JDK, Ruby 설치 $ brew install node $ brew install watchman $ brew tap homebrew/cask-versions $ brew install --cask zulu11 $ brew tap AdoptOpenJDK/openjdk $ brew install --cask adoptopenjdk8 $ rvm install "ruby-2.7.5" $ sudo gem install cocoapods 프로젝트 생성 및 실행 $ cd my/project/folder..
Frontend/React 2022. 10. 10. 17:13
[React.js] Firebase Realtime 데이터베이스 불러오기

Firebase 목록 [REACT.JS] CREATE-REACT-APP 없이 REACT.JS 프로젝트 생성하기 [GIT] GITHUB에 프로젝트 올리기 (GIT COMMAND 사용) [REACT.JS] ROUTER 적용하기 [MULTIPLE ROUTER] [FIREBASE] FIREBASE 데이터 베이스 생성 [REALTIME DATABASE] Firebase에서 생성한 Realtime 데이터베이스를 React.js에서 불러옵니다. query-string 모듈 설치 $ yarn add query-string src/components/About.js import React from 'react'; import { BrowserRouter, Route, Link } from 'react-router-dom..
Frontend/React 2019. 7. 14. 07:05
[React.js] Router 적용하기 [Multiple Router]

[REACT.JS] CREATE-REACT-APP 없이 REACT.JS 프로젝트 생성하기 [GIT] GITHUB에 프로젝트 올리기 (GIT COMMAND 사용) React Rout를 적용해보겠습니다. react-router-dom 설치 $ yarn add react-router-dom 추가 파일 생성 $ mkdir src/components src/css $ touch src/components/Home.js src/components/Profile.js src/components/About.js src/components/OperatingSystem.js src/css/styles.css 다음 폴더를 생성합니다. src/components src/css 다음 파일을 생성합니다. src/component..
Frontend/React 2019. 7. 14. 05:37
[React.js] create-react-app 없이 React.js 프로젝트 생성하기

react.js 프로젝트를 생성할때 create-react-app을 사용하면 매우 편리합니다. 이번 포스트에서 create-react-app으로 프로젝트를 만드는 법과 create-react-app 없이 프로젝트를 생성하는 법을 알아봅니다. create-react-app 설치 $ npm install -g create-react-app ########### 또는 yarn을 사용할때 $ yarn add global create-react-app create-react-app 프로젝트 생성 $ create-react-app first-project create-react-app으로 프로젝트를 생성할때 프로젝트명은 카멜표기법으로 작성할 수 없습니다. firstProject => first-project 프로젝..
Frontend/React 2019. 7. 10. 04:54
Prev 1 2 3 4 Next