본문 바로가기

Frontend/React-Native

 (18)
[React-Native] View, Text, Style React Native에 대해 본격적으로 강의를 시작! 개발환경 시작하기 이제 개발환경 시작하기는 생략하도록 하겠습니다 react_native_01이라는 새로운 프로젝트를 생성하여 진행하였습니다. react-native init react_native_01 에뮬레이터까지 틀어주도록 합시다 프로젝트 구성 분석 프로젝트를 처음 시작했을 때의 화면은 App.js입니다. 왜 그럴까요? 앱을 처음 실행했을 때 시작되는 것은 index.js입니다. index.js App의 main입구 /** * @format */ //앱의 메인 입구 //레지스터리 import import {AppRegistry} from 'react-native'; import App from './App'; import {name as appN..
[React] React기초(props / state) 리액트 네이티브에 들어가기전 마지막 단계 React의 기초에 대해서... props와 state한 100번째 하는 것 처럼 느껴지는데 그만큼 중요하고 기초적인 개념이겠죠?ㅎㅎ.. React란? User Inteface를 개발하기 위한 자바스크립트 라이브러리 화면에 보여지는 것 (버튼/이미지/텍스트) 등 을 구성하는 View를 만들어주는 라이브러리 페이스북에서 개발/관리중 개발 환경 시작하기 React Native project 생성 React_Basic이라는 이름으로 리액트 네이티브 프로젝트를 생성해준다 에러남 react-native init --version0.61.5 (프로젝트명:폴더명) 수정 5/28 23:44) 제대로는 모르겠지만 Xcode? 빅서 업데이트후 에러가 발생했다고 합니다 일단 버전을 ..
[ES6] 기본 문법 + VScode js개발환경 React Native를 위해 알아야할 기본적인 ES6문법 간단한 문법만 연습해 볼 것이기 때문에, VS code를 이용하여 진행 먼저 vscode에 js파일을 돌릴 수 있도록 개발환경을 구축해야한다. VScode를 이용해서 .js 개발환경을 구축 1. code runner설치 2. setting.json 수정 Code > Preferences > Settings json을 검색하면 Edit in settings.json 이라는 것이 보인다 클릭하면 setting.json으로 들어갈 수 있음 { "[json]": { "editor.quickSuggestions": { "strings": true }, "editor.suggest.insertMode": "replace", } } 이렇게 기본으로 되어있던 ..
[ReactNative] 프로젝트 시작및 시뮬레이터 1. 프로젝트 시작 터미널(iTerm)을 이용해 프로젝트 경로로 이동 후 react-native init --version 0.61.5 my_first_app 정상적으로 해당폴더에 생성된 것을 확인 더보기 +)요즘 git도 연습하고 있어서 git add . git commit -m "Add ReactNative Project" git push 근데 git push에서 오류가 나서 .. fetch 후 pull하라고 하길래 그렇게 한 다음에 push해주었다. 여태까지 계속 오류가 났던게 up-stream을 안해줘서 였던 것 같다. git push —set-upstream origin main 이거 한번 해주고 ( 브랜치명인데 원래 나는 지금 혼자써서 main으로 하는중이라... 메인씀 2. IntelliJ에..
리액트 네이티브(ReactNative)란? 리액트 네이티브란(React Native) ? 오픈 소스 모바일 응용 프로그램 네이티브 앱 개발을 위한 자바스크립트 프레임워크 ios와 안드로이드에서 동일하게 동작시킬수 있는 API 앱 Application 앱에는 여러가지 종류가 있는데 다음과 같다. 네이티브 앱 / 웹 앱 / 하이브리드 앱 네이티브 앱 가장 일반적으로 이야기하는 앱 모바일기기에 최적화된 언어로 개발됨 속도가 빠르며, 내부의 파일/주소록/사진 등 고유 정보 사용 변경 가능 안드로이드, ios로 나뉘어짐 웹앱 모바일 웹과 네이티브 앱을 결합한 유형 PC, 스마트폰 기종에 관계없이 사용가능 웹에서 사용하는 언어로 개발 → 접속장애가 발생할 수 있음 하이브리드 앱 네이티브 앱과 웹앱의 장점을 모으고 단점을 보완한 형태의 앱 내부는 웹앱으로 개..
[Silicon Mac M1] 안드로이드 에뮬레이터(Android Emulator)설치 안드로이드 스튜디오는 m1에 지원이 되지만, 에뮬레이터는 아직 정상적으로 작동하지 않는다 그래도 앞으로는 애플이 Intel과 손절했기 때문에 어떻게든 되도록 각 회사들이 열심히 개발해주고 있다.. 안드로이드 에뮬레이터도 초기버전이지만 그래도 어떻게든 지원은 된다. 아직 초기버전이라 다음과 같은 문제점이 있다고 한다 Known issue라고 하는거 보니까 발견되지 않은 issue도 많을듯 ㅎㅎ github.com/741g/android-emulator-m1-preview 741g/android-emulator-m1-preview A place to store preview versions of Android Emulator on Apple Silicon and provide instructions/supp..
[React-Native] Style 연습-웹툰페이지 만들기 여태까지 배운 Props State Style (flex위주) 를 이용해서 네이버 웹툰 페이지 만들기 /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, } from 'react-native'; import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'reac..
[ReactNative] Props 와 State Props React는 다수의 컴포넌트로 이루어져있는 결정체이다. 컴포넌트간 값을 공유하기 위해서 Props객체를 통해 값을 공유한다. php / jsp 에서 GET/POST 방식과 유사 Props를 이용하지 않을 때 class Photo extends Component { render(): React$Node { return ( ); } } const App: () => React$Node = () => { return ( Hello World ); }; Props를 사용했을 때 class Photo extends Component { render(): React$Node { //let 가변적인 내용을 저장하는 변수 let Img = ''; //이미지 링크를 저장해둘 변수 // if (this.prop..
728x90

티스토리툴바