'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 글 목록 (2 Page)

React와 Firebase로 만드는 Word Cloud 웹앱 +15

Loading..5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기2
2019.01.09

뷰어로 보기
Loading..4강 Firebase 데이터베이스 구축 및 React와 연동하기
2019.01.09

뷰어로 보기
Loading..3강 라우터(Router) 활용하기
2019.01.09

뷰어로 보기
Loading..2강 내비게이션 바(Navigation Bar) 만들기
2019.01.09

뷰어로 보기
Loading..1강 리액트(React) 프로젝트 구성 및 깃 허브 연동하기2
2019.01.08

뷰어로 보기

5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기

React와 Firebase로 만드는 Word Cloud 웹앱2019. 1. 9. 05:55

뷰어
댓글로
이전글
다음글

728x90

1. 지난 소스코드 복습하기

2. 소스코드 수정하기

▶ AppShell.js

                        <MenuItem onClick={this.handleDrawerToggle}>
                            <Link component={RouterLink} to="/">
                                홈 화면
                            </Link>
                        </MenuItem>
                        <MenuItem onClick={this.handleDrawerToggle}>
                            <Link component={RouterLink} to="/texts">
                                텍스트 관리
                            </Link>
                        </MenuItem>
                        <MenuItem onClick={this.handleDrawerToggle}>
                            <Link component={RouterLink} to="/words">
                                단어 관리
                            </Link>
                        </MenuItem>

▶ Words.js

import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
    fab: {
        position: 'fixed',
        bottom: '20px',
        right: '20px'
    },
});

const databaseURL = "https://react-example-55161.firebaseio.com/";

class Words extends React.Component {
    constructor() {
        super();
        this.state = {
            words: {},
            dialog: false,
            word: '',
            weight: ''
        };
    }

    _get() {
        fetch(`${databaseURL}/words.json`).then(res => {
            if(res.status != 200) {
                throw new Error(res.statusText);
            }
            return res.json();
        }).then(words => this.setState({words: words}));
    }

    _post(word) {
        return fetch(`${databaseURL}/words.json`, {
            method: 'POST',
            body: JSON.stringify(word)
        }).then(res => {
            if(res.status != 200) {
                throw new Error(res.statusText);
            }
            return res.json();
        }).then(data => {
            let nextState = this.state.words;
            nextState[data.name] = word;
            this.setState({words: nextState});
        });
    }

    _delete(id) {
        return fetch(`${databaseURL}/words/${id}.json`, {
            method: 'DELETE'
        }).then(res => {
            if(res.status != 200) {
                throw new Error(res.statusText);
            }
            return res.json();
        }).then(() => {
            let nextState = this.state.words;
            delete nextState[id];
            this.setState({words: nextState});
        });
    }

    componentDidMount() {
        this._get();
    }

    handleDialogToggle = () => this.setState({
        dialog: !this.state.dialog
    })

    handleValueChange = (e) => {
        let nextState = {};
        nextState[e.target.name] = e.target.value;
        this.setState(nextState);
    }

    handleSubmit = () => {
        const word = {
            word: this.state.word,
            weight: this.state.weight
        }
        this.handleDialogToggle();
        if (!word.word && !word.weight) {
            return;
        }
        this._post(word);
    }

    handleDelete = (id) => {
        this._delete(id);
    }

    render() {
        const { classes } = this.props;
        return (
            <div>
                {Object.keys(this.state.words).map(id => {
                    const word = this.state.words[id];
                    return (
                        <div key={id}>
                            <Card>
                                <CardContent>
                                    <Typography color="textSecondary" gutterBottom>
                                        가중치: {word.weight}
                                    </Typography>
                                    <Grid container>
                                        <Grid item xs={6}>
                                            <Typography variant="h5" component="h2">
                                                {word.word}
                                            </Typography>
                                        </Grid>
                                        <Grid item xs={6}>
                                            <Button variant="contained" color="primary" onClick={() => this.handleDelete(id)}>삭제</Button>
                                        </Grid>
                                    </Grid>
                                </CardContent>
                            </Card>
                            <br />
                        </div>
                    );
                })}
                <Fab color="primary" className={classes.fab} onClick={this.handleDialogToggle}>
                    <AddIcon />
                </Fab>
                <Dialog open={this.state.dialog} onClose={this.handleDialogToggle}>
                    <DialogTitle>단어 추가</DialogTitle>
                    <DialogContent>
                        <TextField label="단어" type="text" name="word" value={this.state.word} onChange={this.handleValueChange}/><br/>
                        <TextField label="가중치" type="number" name="weight" value={this.state.weight} onChange={this.handleValueChange}/><br/>
                    </DialogContent>
                    <DialogActions>
                        <Button variant="contained" color="primary" onClick={this.handleSubmit}>추가</Button>
                        <Button variant="outlined" color="primary" onClick={this.handleDialogToggle}>닫기</Button>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }
}

export default withStyles(styles)(Words);

※ 실행 결과 ※

728x90

저작자표시 비영리 변경금지

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

7강 React로 텍스트 파일(Text File) 업로드 및 상세 페이지로 이동하기 (0)	2019.01.09
6강 파이어베이스(Firebase)로 React 프로젝트 배포하기 (1)	2019.01.09
4강 Firebase 데이터베이스 구축 및 React와 연동하기 (0)	2019.01.09
3강 라우터(Router) 활용하기 (0)	2019.01.09
2강 내비게이션 바(Navigation Bar) 만들기 (0)	2019.01.09

4강 Firebase 데이터베이스 구축 및 React와 연동하기

React와 Firebase로 만드는 Word Cloud 웹앱2019. 1. 9. 03:08

뷰어
댓글로
이전글
다음글

728x90

▶ 구글 파이어베이스 콘솔: https://console.firebase.google.com/

1. 프로젝트 생성하기

2. 데이터베이스 페이지 확인

3. 데이터베이스에 단어(Word) 데이터 구축

(단, 원래는 ID 값으로 0, 1, 2와 같은 단순한 숫자를 넣지 않습니다. 이는 예시 데이터를 구성하기 위해 넣은 것이며, 실제 DB 연동 작업을 마쳤을 때에는 이러한 예시 데이터를 삭제해야 오류가 발생하지 않습니다.)

4. 규칙(Rule) 설정을 통한 외부 접속 허용

5. 단어(Word) API 호출 테스트

▶ ./src/components/Words.js

import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';

const databaseURL = "https://react-example-55161.firebaseio.com/";

class Words extends React.Component {
    constructor() {
        super();
        this.state = {
            words: {}
        };
    }

    _get() {
        fetch(`${databaseURL}/words.json`).then(res => {
            if(res.status != 200) {
                throw new Error(res.statusText);
            }
            return res.json();
        }).then(words => this.setState({words: words}));
    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextState.words != this.state.words
    }

    componentDidMount() {
        this._get();
    }

    render() {
        return (
            <div>
                {Object.keys(this.state.words).map(id => {
                    const word = this.state.words[id];
                    return (
                        <div key={id}>
                            <Card>
                                <CardContent>
                                    <Typography color="textSecondary" gutterBottom>
                                        가중치: {word.weight}
                                    </Typography>
                                    <Typography variant="h5" component="h2">
                                        {word.word}
                                    </Typography>
                                </CardContent>
                            </Card>
                            <br/>
                        </div>
                    );
                })}
            </div>

        );
    }
}

export default Words;

※ 실행 결과 ※

728x90

저작자표시 비영리 변경금지

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

6강 파이어베이스(Firebase)로 React 프로젝트 배포하기 (1)	2019.01.09
5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기 (2)	2019.01.09
3강 라우터(Router) 활용하기 (0)	2019.01.09
2강 내비게이션 바(Navigation Bar) 만들기 (0)	2019.01.09
1강 리액트(React) 프로젝트 구성 및 깃 허브 연동하기 (2)	2019.01.08

3강 라우터(Router) 활용하기

React와 Firebase로 만드는 Word Cloud 웹앱2019. 1. 9. 02:07

뷰어
댓글로
이전글
다음글

728x90

가장 먼저 라우팅 기능을 위해 라이브러리를 설치합니다.

▶ ./src/components/Home.js

import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';

class Home extends React.Component {
    render() {
        return (
            <Card>
                <CardContent>
                    React 및 Firebase 기반의 워드 클라우드 프로젝트
                </CardContent>
            </Card>
        );
    }
}

export default Home;

▶ ./src/components/Texts.js

import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';

class Texts extends React.Component {
    render() {
        return (
            <Card>
                <CardContent>
                    Texts 페이지
                </CardContent>
            </Card>
        );
    }
}

export default Texts;

▶ ./src/components/Words.js

import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';

class Words extends React.Component {
    render() {
        return (
            <Card>
                <CardContent>
                    Words 페이지
                </CardContent>
            </Card>
        );
    }
}

export default Words;

▶ ./src/components/App.js

import React from 'react';
import { HashRouter as Router, Route } from 'react-router-dom';
import AppShell from './AppShell';
import Home from './Home';
import Texts from './Texts';
import Words from './Words';

class App extends React.Component {
    render() {
        return (
            <Router>
                <AppShell>
                    <div>
                        <Route exact path="/" component={Home}/>
                        <Route exact path="/texts" component={Texts}/>
                        <Route exact path="/words" component={Words}/>
                    </div>
                </AppShell>
            </Router>
        );
    }
}

export default App;

▶ ./src/components/AppShell.js

import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import Link from '@material-ui/core/Link';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Drawer from '@material-ui/core/Drawer';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const styles = {
    root: {
        flexGrow: 1,
    },
    menuButton: {
      marginRight: 'auto'
    },
};

class AppShell extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toggle: false
        };
    }
    handleDrawerToggle = () => this.setState({toggle: !this.state.toggle})
    render() {
        const { classes } = this.props;
        return (
            <div>
                <div className={classes.root}>
                    <AppBar position="static">
                        <IconButton className={classes.menuButton} color="inherit" onClick={this.handleDrawerToggle}>
                            <MenuIcon/>
                        </IconButton>
                    </AppBar>
                    <Drawer open={this.state.toggle}>
                        <MenuItem onClick={this.handleDrawerToggle}>
                            <Link component={RouterLink} to="/">
                                Home
                            </Link>
                        </MenuItem>
                        <MenuItem onClick={this.handleDrawerToggle}>
                            <Link component={RouterLink} to="/texts">
                                Texts
                            </Link>
                        </MenuItem>
                        <MenuItem onClick={this.handleDrawerToggle}>
                            <Link component={RouterLink} to="/words">
                                Words
                            </Link>
                        </MenuItem>
                    </Drawer>
                </div>
                <div id="content" style={{margin: 'auto', marginTop: '20px'}}>
                    {React.cloneElement(this.props.children)}
                </div>
            </div>
        );
    }
}

export default withStyles(styles)(AppShell);

※ 실행 결과 ※

728x90

저작자표시 비영리 변경금지

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

6강 파이어베이스(Firebase)로 React 프로젝트 배포하기 (1)	2019.01.09
5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기 (2)	2019.01.09
4강 Firebase 데이터베이스 구축 및 React와 연동하기 (0)	2019.01.09
2강 내비게이션 바(Navigation Bar) 만들기 (0)	2019.01.09
1강 리액트(React) 프로젝트 구성 및 깃 허브 연동하기 (2)	2019.01.08

2강 내비게이션 바(Navigation Bar) 만들기

React와 Firebase로 만드는 Word Cloud 웹앱2019. 1. 9. 00:45

뷰어
댓글로
이전글
다음글

728x90

가장 먼저 material-ui 라이브러리를 설치합니다.

yarn add @material-ui/core

yarn add @material-ui/icons

이후에 내비게이션 바의 틀을 만들 수 있습니다.

▶ ./src/components/Appshell.js

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Drawer from '@material-ui/core/Drawer';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const styles = {
    root: {
        flexGrow: 1,
    },
    menuButton: {
      marginRight: 'auto'
    },
};

class AppShell extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toggle: false
        };
    }
    handleDrawerToggle = () => this.setState({toggle: !this.state.toggle})
    render() {
        const { classes } = this.props;
        return (
            <div className={classes.root}>
                <AppBar position="static">
                    <IconButton className={classes.menuButton} color="inherit" onClick={this.handleDrawerToggle}>
                        <MenuIcon/>
                    </IconButton>
                </AppBar>
                <Drawer open={this.state.toggle}>
                    <MenuItem onClick={this.handleDrawerToggle}>Home</MenuItem>
                </Drawer>
            </div>
        );
    }
}

export default withStyles(styles)(AppShell);

▶ ./src/components/App.js

import React from 'react';
import AppShell from './AppShell';

class App extends React.Component {
    render() {
        return (
            <AppShell/>
        );
    }
}

export default App;

※ 실행 결과 ※

1. 내비게이션 바(Close)

2. 내비게이션 바(Open)

728x90

저작자표시 비영리 변경금지

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

6강 파이어베이스(Firebase)로 React 프로젝트 배포하기 (1)	2019.01.09
5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기 (2)	2019.01.09
4강 Firebase 데이터베이스 구축 및 React와 연동하기 (0)	2019.01.09
3강 라우터(Router) 활용하기 (0)	2019.01.09
1강 리액트(React) 프로젝트 구성 및 깃 허브 연동하기 (2)	2019.01.08

1강 리액트(React) 프로젝트 구성 및 깃 허브 연동하기

React와 Firebase로 만드는 Word Cloud 웹앱2019. 1. 8. 23:51

뷰어
댓글로
이전글
다음글

728x90

1. VSC(Visual Studio Code) 개발 환경을 열어서 특정한 폴더(Folder)를 열어 줍니다.

(이 때 가능하면, 관리자 권한으로 개발환경을 열 수 있도록 합니다.)

2. yarn init 명령어를 통해 패키지(Package) JSON 파일을 생성합니다.

3. yarn add 명령어를 통해 리액트 라이브러리를 설치합니다.

리액트 개발을 위하여 react와 react-dom이 모두 필요합니다.

4. yarn add 명령어를 통해 webpack을 설치합니다.

webpack을 이용해 추후에 앱을 배포할 수 있어요. 또한 webpack-dev-server를 이용해 실시간 로딩으로 빠르게 개발할 수 있습니다.

5. yarn add 명령어를 통해 바벨(Babel)을 설치합니다.

바벨 또한 개발 환경에서 필요하기 때문에 --dev 옵션으로 설치합니다.

6. yarn add 명령어를 통해 웹팩(Webpack) 클라이언트 모듈을 설치합니다.

yarn add --dev webpack-cli

(--dev 혹은 -D라고 옵션을 붙여서 개발 종속성으로 설치합니다.)

7. 소스코드를 작성하기 위해 다음과 같이 프로젝트를 구성합니다.

▶ index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Word Cloud Project</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#E2E2E2">
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

▶ App.js

import React from 'react';

class App extends React.Component {
    render() {
        return (
            <div>
                <h3>Hello World</h3>
            </div>
        );
    }
}

export default App;

▶ main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App/>, document.getElementById('app'));

▶ webpack.config.js

'use strict'
const path = require('path');

module.exports = {
    entry: {
        main: ['./src/main.js']
    },
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, './src'),
            loaders: 'babel-loader'
        }]
    },
    plugins: [],
    devServer: {
        contentBase: './public',
        host: 'localhost',
        port: 8080
    }
}

▶ .babelrc

{
    "presets": ["react-app"]
}

▶ package.json

{
  "name": "ReactProject",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-react-app": "^7.0.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }
}

윈도우의 경우에는 다음과 같은 방식으로 start 및 build에 대한 옵션을 설정합니다.

  "scripts": {
    "start": "set NODE_ENV=development&&webpack-dev-server",
    "build": "set NODE_ENV=production&&webpack -p"
  },

8. yarn start 명령어를 이용해 프로젝트를 동작시킵니다.

9. 실행 결과를 통해 구성된 프로젝트 확인

10. 구성된 프로젝트를 깃 허브(Git Hub)에 올리기

▶ .gitignore 파일 생성 및 소스코드 작성

node_modules
build

11. 깃 허브(Git Hub)에 리포지터리 생성

12. 생성된 리포지터리의 주소 복사

13. 터미널(Terminal)에서 Git 명령어로 소스코드 업로드

git init

git add .

git commit -m "Initialize React Project"

git remote add origin https://github.com/ndb796/ReactWordCloudWebApp-React.git

git push --set-upstream origin master

728x90

저작자표시 비영리 변경금지

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

6강 파이어베이스(Firebase)로 React 프로젝트 배포하기 (1)	2019.01.09
5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기 (2)	2019.01.09
4강 Firebase 데이터베이스 구축 및 React와 연동하기 (0)	2019.01.09
3강 라우터(Router) 활용하기 (0)	2019.01.09
2강 내비게이션 바(Navigation Bar) 만들기 (0)	2019.01.09

안경잡이개발자

5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

4강 Firebase 데이터베이스 구축 및 React와 연동하기

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

3강 라우터(Router) 활용하기

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

2강 내비게이션 바(Navigation Bar) 만들기

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

1강 리액트(React) 프로젝트 구성 및 깃 허브 연동하기

'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글

최근에 올라온 글

최근에 달린 댓글

공지사항

글 보관함

최근에 받은 트랙백

링크

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31