Jump To VB.NET

계속 업데이트 됩니다. ^^

Default Application 설정

http://www.rubicode.com/Software/Bundles.html#RCDefaultApp

행복한 고수되셔요~ ^^

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

VisualStudio Code 를 이용하여 React 로 조그만 예제를 만들면서 정리한 내용...

개인적인 정리 내용입니다. 

React 를 생성하려면 WebPack이 필요하고 별도의 설정이 필요하지만 대신 

facebook 에서 만든 Create-React-App 을 사용하면 

별도의 WebPack 설치와 설정없이도 React 를 개발 할 수 있다.

npm install -g create-react-app

create-react-app movie-app 은 Terminal 에서 실행하는 것이 좋다.

VS Code 에서 실행 시 Error 가 발생한다.

cd movie-app

vscode terminal 에서 

npm start

port 를 바꾸고 싶을 때는 

"PORT=4000 npm start" 

를 입력한다.

propTypes

propTypes 변수에 담아야 한다.

    static propTypes = {

        title:PropTypes.string.isRequired,

        image:PropTypes.string.isRequired

    }

React Life Cycle

Render : componentWillMount() => render() => componentDidMount()

Update : componentWillReceiveProps() => shouldComponentUpdate() = true => componentWillUpdate() => render() => componentDidUpdate()

State 는 state 배열에 담아야 한다.

state 를 변경할 때는 

      this.setState({greeting : 'woojja'}) 와 같이  setState 를 사용하여 값을 변경

state  를 변경하면 render 가 다시 실행된다.

        movies : [

            {

              id:16,

              title:'transformer',

              poster:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsdR9axnghll6mVM3Yae1r7Il0A8yGc_JJynAiH_fCXwSANcRj'

            }, 

            ...this.state.movies // '...' : 기존의 Data 를 유지한다는 의미 

        ]

smart component, dumb component

class component (smart component) : state 를 가짐.

class Movie extends Component{

    render() {

        return(

            ...

        );

    }

}

functional component (dumb component) : state 를 가지지 않는다. Life cycle, render function 도 없고 Props 만 가지며 

단순 Return 만 존재한다.

function MoviePoster({image, title}){

    return(<img src={image} alt={title + ' Poster'} />);

}

functional component 의 Validation Check

MoviePoster.PropTypes = {

    poster : PropTypes.string.isRequired

}

Promise : 새로운 Concept (Asynchronous programming)

=> arrow function 에는 return 의미가 포함되어 있음.

www.npmjs.com/package/react-lines-ellipsis

npm install --save react-lines-ellipsis

import LinesEllipsis from "react-lines-ellipsis"

npm run build

  39.99 KB  build/static/js/main.47ccf7c1.js

  706 B     build/static/css/main.a3112408.css

압축해서 build folder 에 넣음.

Package.json 에 아래 구문을 추가

  "homepage" : "https://github.com/iPeterPan/react_movie_app",

변경했으니 다시한번 

npm run build

Install gh-pages and add deploy to scripts in package.json

npm install --save gh-pages

Package.json 에 아래 구문을 추가

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

특정 branch 를 deploy 하려면

"deploy": "gh-pages -b master -d build",

The predeploy script will run automatically before deploy is run.

If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:

First, change your repository's source branch to be any branch other than master.

Additionally, tweak your package.json scripts to push deployments to master:

Deploy the site by running npm run deploy

npm run deploy

Ensure your project’s settings use gh-pages

Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject",

    "predeploy": "npm run build",

    "deploy": "gh-pages -b master -d build -repo https://github.com/iPeterPan/react_movie_app.git"

  }

행복한 고수되셔요...  ^^

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

이 글은 sachabarbs 님의 글을 번역? 한 것입니다.

https://sachabarbs.wordpress.com/2017/05/15/madcap-idea-part-1-start-of-the-client-side-portion-of-the-web-site/

번역이 매끄럽지 않습니다. 유념하시어 참고만하시기 바랍니다.

• 클라이언트가 사용할 수 있는 web interface 가 있어야 합니다. Client 는 "driver" 가 될수도 탑승하는 "Pickup client(승객)"이 될 수도 있습니다.
• "Pickup Client" 가 사용할 수 있는  web interface 가 있어야 합니다. 그래서 "Pickup Client" 가 선택한 "Pickup Client" 의 위치를 지도에 표시합니다.
• "Pickup Client" 는 Pickup 임무를 요청 할 수 있습니다. 이 경우 "Driver" 가 이 임무에 대한 지역에 있는 입찰자 입니다.
• "Pickup Client" 의 위치는 "Driver" 의 지도상에 보여져야 합니다.
• "Driver" 는 "Pickup Client" 의 임무에 입찰하며, 입찰한 "Driver(s)" 의 위치는 "Pickup Client" 에게 보여져야합니다. 
• 입찰에 참여한 "Driver" 의 수락한 정보는 "Pickup Client" 에게 보내집니다.
• "Pickup Client" 가 "Driver" 를 수락하면 할당된 "Driver(s)" 의 위치만 "Pickup Client" 현재 지도상에 보여집니다.
• "Driver" 에 의해 픽업되어 "Pickup Client" 가 행복하면  "Pickup Client" 는 "Driver" 를 1~10 점으로 평가할 수 있으면 "Driver" 또한 "Pickup Clinet" 를 1~10 점으로 평가 할 수 있습니다.
• "Pickup Client" 가 임무를 "완료"로 표시한 후에만 평가를 할 수 있습니다.
• "Driver" 나 "Pickup Client" 는 항상 자신의 이전 평가를 볼 수 있어야 합니다.