본문 바로가기

react4

react 앱 firebase 에 배포하기 https://console.firebase.google.com/에 들어가서 앱을 하나 생성한다. 1. 프로젝트 디렉토리에서 firebase tool을 다운 받는다. npm install -g firebase-tools 2. 프로젝트 디렉토리에서 firebase에 로그인 한다. firebase login 3. 프로젝트 디렉토리에서 firebase 를 초기화 한다. firebase init 4. firebase deploy를 사용해서 배포한다. public 디렉토리를 사용할 것이냐는 질문에는 build 라고 답한다. single page app 은 No 로 대답한다. overwrite 404 , index.html 모두 no 로 답한다. 5. 배포 된 웹사이트를 확인하면 된다. 6. 변경사항을 배포하고 싶.. 2019. 10. 16.
리액트 props , state props 와 state 는 리액트 컴포넌트에서 다루는 데이터다. props 부터 살펴보자. 앞의 글에서 app.js 를 통해서 화면을 조작했다. 여기서는 새로운 js파일을 만들것이다. MyName.js 를 만들었다. import React, {Component} from 'react'; class MyName extends Component { render() { return ( hello my name is {this.props.value} ); } } export default MyName; 이것 또한 export한다. app.js 에서 가져다 쓴다. import React, { Component } from 'react';import MyName from './MyName';import './Ap.. 2018. 11. 8.
react js 살펴보기 "리액트 앱 만들기" 글에서 만든 앱의 파일 구조 글 링크 : http://fors.tistory.com/414 리액트를 사용하면 UI를 재사용 가능한 컴포넌트로 분리 할 수 있다고 한다. 화면의 , 같은 여러가지 부분들을 app.js에 작성 할 수 있다는 말이다. 구조는 express.js 를 사용 했을 때 ejs 파일과 약간은 비슷한 느낌이었다. 템플릿 엔진과 비슷하다. app.js 를 살펴보자. 1234567891011121314151617181920212223242526272829import React, { Component } from 'react'; // react 를 importimport logo from './logo.svg';import './App.css'; // logo와 css 를.. 2018. 11. 8.
리액트 앱 만들기 준비물 : node js , yarn , 즐겨쓰는 IDE 1. node js 설치 https://nodejs.org/ko/ 혹시 C 드라이브에 설치 해놓고선 프로젝트는 D드라이브에서 한다면. node 환경변수를 설정해주자. 2. yarn 설치 https://yarnpkg.com/lang/en/ yarn 은 npm 같은 패키지 매니저이다. 그런데 npm 보다 속도가 빠르다고 한다. 3. Visual Studio Code 설치 https://code.visualstudio.com/ create-react-app 설치 create-react-app 은 리액트 앱을 만들어주는 도구이다. 1npm install -g create-react-appcs yarn 으로는 이렇게 한다. 1yarn global add c.. 2018. 11. 7.