바르고 뜨겁게

ReactNative - 화면이동 버튼 TouchableOpacityTouchableOpacity을 사용해서 버튼을 만들고, 클릭시 Detail로 이동시킨다. Movies.js import React from "react"; import { Text, TouchableOpacity } from "react-native"; ​ // 모든 화면은 navigation Prop를 가지고 있다. // navigate 이동시 경로를 적지 않아도 자동으로 찾아준다 // (App.js에서 선언된 MainNavigation에 있음) export default ({ navigation }) => Movies navigation.navigate('Detail')}> Go to detail -navigation/MainNav..

ReactNative - Tab Navigation App.js export default class App extends React.Component { ​ render() { } }-navigation/TabNavigation.js import React from "react"; import { Platform } from "react-native"; import { createBottomTabNavigator, createAppContainer } from "react-navigation"; import MoviesScreen from "../screens/Movies"; import TVScreen from "../screens/TV"; import SearchScreen from "../scre..

ReactNative - Assets PreLoad 세팅 App.js import React from 'react'; import { AppLoading } from "expo"; import * as Font from "expo-font"; import { Ionicons } from "@expo/vector-icons"; import { StyleSheet, Text, View } from 'react-native'; ​ export default class App extends React.Component { state = { loaded: false }; ​ handleError = error => console.log(error); // 에러 핸들러 ​ handleLoaded = () => th..

ReactNative - 리액트란? 페이스북에서 공개한 자바스크립트 UI 라이브러리.컴포넌트 단위의 개발이 가능하다.프레임워크가 아닌 라이브러리이기 때문에 다른 환경과 함께 사용이 가능하다. 가상 DOM 사용DOM(Doucument Object Model)은 정적인 UI이기 때문에 자바스크립트로 동적인 수정을 하면 페이지를 다시 그리는 과정에서 많은 시간이 들어간다. React는 가상 DOM을 사용해 변경된 부분만 처리하므로 빠른 처리가 가능하다. 단방향 데이터 흐름 지향.리액트는 기본적으로는 부모>자식 으로 단방향 데이터를 지향하지만 redux등 서브파티 라이브러리를 사용하면 유동성있는 데이터 처리가 가능하다. JSX 사용 권장XML 사용이 가능한 자바스크립트 확장문법. 어플리케이션의 처리 속도가 빠름..

* 깃허브 최초 연결깃 초기화 git init git config --global user.email "" git config --global user.name "" git remote add origin 깃이 감시할 파일 추가 git add . * 공유된 프로젝트 커밋 순서깃헙에 업데이트된 내용을 로컬에 저장 git pull 깃이 감시할 파일 추가 (추가된 파일이 있을시) git add .충돌 내역 확인 후 소스 수정내가 수정한 소스 커밋 git commit -m ""깃헙에 저장 git push origin master* 기타깃허브 아이디 여러개 사용시 꼬여서 레파짓토리 못찾을때 git pull https:// [ gitID ] @github.com/ [ 레파짓토리 주소 ]

props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없습니다.state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있습니다. React Js - Container Presenter Pattern리엑트 컴포넌트 코딩 패턴index.js 에서 Container.js Import Container.jsprop, state 를 통해 받은 데이터를 Presenter.js로 리턴한다.Presenter.js 넘겨 받은 데이터를 출력 한다폴더 구조 사용Home/index.js import HomeContainer from "./HomeContainer"; ​ export default HomeConta..

React Js - Rest API 사용 (Axios)baseURL, headers, timeout 등의 구성 정보를 저장해놓고 사용할 수 있다 설치 yarn add axios사용 import axios from "axios"; ​ const api = axios.create({ baseURL: 'https://api.themoviedb.org/3/', params:{ "api_key": "a4ebc08ace962cf8fe0ad4045337382d", "language": "en-US", } }); ​ // '/' 빼고 넣어야됨, '/' 입력시 절대경로로 인식해서 baseURL에 덮어씌워짐 api.get("tv/popular"); ​ export default api; 출처 : https://academ..

React Js - [SC] 동적인 UI 처리하기 props, withRouter props태그 내에 변수를 넣고 styled에서 받아서 동적인 처리가 가능하다Item이란 태그 내에 current라는 변수를 넣고 styled에서 받아서 동적으로 처리하고 있다. withRouter다른 컴포넌트를 감싸는 컴포넌트로 Router에 정보 전달이 가능하다url path 정보 등 유용한 정보들을 얻을 수 있다. export default withRouter( props => ( {console.log(props)} ) ); import import { Link, withRouter } from "react-router-dom"; 사용{ location: { pathname } } : props 파라미터에서 path..

React Js - Global CSS 설정 + styled resetcss 초기화를 위해 styled-reset 설치styled-components는 local로 동작하기 때문에 global 한 css 를 만들기 위해 GlobalStyles.js 생성설치 yarn add styled-reset사용Components/GlobalStyles.js import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; ​ const globalStyles = createGlobalStyle` ${reset}; a{ text-decoration:none; color:inherit; } *{ box-sizing:boerder..

React Js - styled components따로 css 파일을 만들지 않고 자바스크립트 안에서 css 사용이 가능함벡틱을 이용하여 css를 변수화 시켜서 태그로 사용함css를 컴포넌트안에서만(local) 사용이 가능함단, 익스에선 정상적으로 작동하지 않음설치 yarn add styled-componentslocal 사용Header.js import React from "react"; import styled from "styled-components"; ​ // 자바스크립트 방식의 페이지이동 (href 대신 to 사용) import { Link } from "react-router-dom"; ​ const List = styled.ul` display:flex; &:hover{ background..