'React Tutorial' 태그의 글 목록

React Tutorial +3

Loading..15강 프로젝트 완성1
2019.01.13

뷰어로 보기
Loading..7강 React로 텍스트 파일(Text File) 업로드 및 상세 페이지로 이동하기
2019.01.09

뷰어로 보기
Loading..1. React 앱 구축하기 [리액트(React)로 SNS 웹 사이트 만들기]
2018.12.29

뷰어로 보기

15강 프로젝트 완성

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

뷰어
댓글로
이전글
다음글

728x90

지금까지 강의를 잘 따라오신 여러분들은 다음과 같이 완성된 프로젝트를 확인할 수 있게 될 거예요.

※ 완성된 프로젝트 ※

※ 복습하기 ※

프로젝트를 완성해 나가면서 배웠던 큼직한 요소들에 대해서 복습을 해봅시다!

1) React 및 파이어베이스 호스팅

본 강좌의 핵심이었던 React 개발 및 파이어베이스 호스팅에 대해서 잊으시면 안 돼요. React에서 다루는 각 데이터를 파이어베이스에 저장하고 관리했으며 파이어베이스 호스팅 서비스를 이용해 웹 사이트를 운영할 수 있었어요.

2) 플라스크(Flask) API 서버 구축

이후에 우리는 AWS EC2를 이용하여 플라스크에 워드 클라우드 API를 달아서 구동시켰습니다. 프리 티어를 이용해 무료로 서버를 구축하고, 이에 웹 서버를 올리는 방식으로 효과적으로 API를 구축했답니다.

3) 클라우드 플레어(Cloud Flare) HTTPS 서비스

이후에는 도메인 주소를 생성하고, 클라우드 플레어 서비스를 이용해서 우리의 API 서버에 HTTPS를 입히는 과정을 거쳤어요.

4) 파이어베이스(Firebase)

파이어베이스(Firebase)의 데이터베이스 서비스를 활용하는 방법에 대해서도 공부하는 시간을 가졌습니다.

5) 안드로이드 스튜디오(Android Studio)

우리는 최종적으로 만들어진 웹을 앱 형태로 배포하기 위하여 안드로이드 스튜디오를 이용해 웹 앱을 개발하고, APK 파일을 추출했어요.

728x90

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

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

14강 React 프로젝트를 안드로이드 웹 앱(Web App)으로 배포하기 (0)	2019.01.13
13강 Cloud Flare를 이용한 HTTPS 설치 및 최종 배포 (0)	2019.01.13
12강 AWS EC2에서 플라스크(Flask) 웹 서버 구동시키기 (2)	2019.01.12
11강 워드 클라우드(Word Cloud) 상세 수치 설정하기 (0)	2019.01.12
10강 React와 플라스크(Flask) 연동하기 (1)	2019.01.12

7강 React로 텍스트 파일(Text File) 업로드 및 상세 페이지로 이동하기

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

뷰어
댓글로
이전글
다음글

728x90

1. 텍스트 가지치기 모듈 다운로드

yarn add react-text-truncate

(설치가 안 된다면, 개발 환경을 관리자 권한으로 실행해보세요.)

2. 소스코드 작성하기

▶ ./src/components/Texts.js

import TextTruncate from 'react-text-truncate';
import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
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';
import { Link as RouterLink } from 'react-router-dom';
import Link from '@material-ui/core/Link';

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

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

class Texts extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            fileName: '',
            fileContent: null,
            texts: '',
            textName: '',
            dialog: false
        }
    }

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

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

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

    componentDidMount() {
        this._get();
    }

    handleDialogToggle = () => this.setState({
        dialog: !this.state.dialog,
        fileName: '',
        fileContent: '',
        textName: ''
    })

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

    handleSubmit = () => {
        const text = {
            textName: this.state.textName,
            textContent: this.state.fileContent
        }
        this.handleDialogToggle();
        if (!text.textName || !text.textContent) {
            return;
        }
        this._post(text);
    }

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

    handleFileChange = (e) => {
        let reader = new FileReader();
        reader.onload = () => {
            let text = reader.result;
            this.setState({
                fileContent: text
            })
        }
        reader.readAsText(e.target.files[0], "EUC-KR");
        this.setState({
            fileName: e.target.value
        });
    }

    render() {
        const { classes } = this.props;
        return (
            <div>
                {Object.keys(this.state.texts).map(id => {
                    const text = this.state.texts[id];
                    return (
                        <Card key={id}>
                            <CardContent>
                                <Typography color="textSecondary" gutterBottom>
                                    내용: {text.textContent.substring(0, 24) + '...'}
                                </Typography>
                                <Grid container>
                                    <Grid item xs={6}>
                                        <Typography variant="h5" component="h2">
                                            {text.textName.substring(0, 14) + '...'}
                                        </Typography>
                                    </Grid>
                                    <Grid item xs={3}>
                                        <Typography variant="h5" component="h2">
                                            <Link component={RouterLink} to={"detail/" + id}>
                                                <Button variant="contained" color="primary">보기</Button>
                                            </Link>
                                        </Typography>
                                    </Grid>
                                    <Grid item xs={3}>
                                        <Button variant="contained" color="primary" onClick={() => this.handleDelete(id)}>삭제</Button>
                                    </Grid>
                                </Grid>
                            </CardContent>
                        </Card>
                    );
                })}
                <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="textName" value={this.state.textName} onChange={this.handleValueChange} /><br /><br />
                    <input className={classes.hidden} accept="text/plain" id="raised-button-file" type="file" file={this.state.file} value={this.state.fileName} onChange={this.handleFileChange} />
                    <label htmlFor="raised-button-file">
                        <Button variant="contained" color="primary" component="span" name="file">
                            {this.state.fileName === ''? ".txt 파일 선택" : this.state.fileName}
                        </Button>
                    </label>
                    <TextTruncate
                        line={1}
                        truncateText="..."
                        text={this.state.fileContent}
                    />
                    </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)(Texts);

▶ ./src/components/Detail.js

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

class Detail extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Card>
                <CardContent>
                    {this.props.match.params.textID}
                </CardContent>
            </Card>
        );
    }
}

export default Detail;

▶ ./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';
import Detail from './Detail';

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}/>
                        <Route exact path="/detail/:textID" component={Detail}/>
                    </div>
                </AppShell>
            </Router>
        );
    }
}

export default App;

※ 실행 결과 ※

텍스트 페이지에서 텍스트 파일을 올려서 내용을 확인할 수 있습니다.

[보기] 버튼을 누르면 상세 페이지로 이동됩니다. 현재는 ID 값만 보내도록 처리했습니다.

728x90

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

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

9강 플라스크(Flask)로 워드 클라우드 API 구현하기 (0)	2019.01.11
8강 React에 웹 폰트(Web Font) 적용하기 (0)	2019.01.09
6강 파이어베이스(Firebase)로 React 프로젝트 배포하기 (1)	2019.01.09
5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기 (2)	2019.01.09
4강 Firebase 데이터베이스 구축 및 React와 연동하기 (0)	2019.01.09

1. React 앱 구축하기 [리액트(React)로 SNS 웹 사이트 만들기]

리액트(React) SNS 프로젝트2018. 12. 29. 21:15

뷰어
댓글로
이전글
다음글

728x90

리액트(React)는 라이브러리로서 별도의 사용 방법이 정해져 있습니다. 최신 가장 많이 사용되고 있는 자바스크립트 버전은 ES6입니다. ES6부터는 최신 프로그래밍 트렌드를 따르는 다양한 문법들이 추가되었습니다.

흔히 리액트를 이용해 개발하는 사람들은 그러한 새로운 문법을 사용하기 때문에 웹 브라우저(Web Browser)가 ES6을 지원하지 않는다면 우리가 작성한 웹 사이트가 어떠한 사람에게는 동작하지 않고, 어떠한 사람에게만 동작하는 문제가 생길 수 있습니다. 그래서 바벨(Babel)을 이용하면 우리가 작성한 소스코드를 다양한 웹 브라우저 환경에 구애받지 않고 실행되도록 만들 수 있어요.

또한 최근에는 상당히 복잡한 의존성 트리를 갖추어 다양한 기능을 제공하는 웹 서비스가 많습니다. 말 그대로 자바스크립트(JavaScript)의 복잡성이 생긴 상태입니다. 이러한 복잡성 문제를 해결하기 위해 등장한 개념이 웹팩(Webpack)입니다.

웹팩(Webpack)은 모듈 번들러(Module Bundler)입니다. 그래서 프로젝트의 구조를 분석해 자바스크립트 모듈들을 번들로 묶어서 패킹할 수 있습니다. 실질적으로 웹팩은 특정한 메인 코드에서 출발하여 모든 import 구문 등을 분석하여 의존성을 파악해 로더를 이용해 처리하고 번들로 묶인 자바스크립트 코드 생성합니다.

이러한 웹팩은 Node.js를 이용해서 구동시킬 수 있습니다. 이 때 NPM(Node Package Manager)를 이용해 설치하면 됩니다.

결과적으로 리액트 프로젝트를 만들고자 한다면 웹팩, 바벨 등을 이용해서 직접 프로젝트를 구성해야 합니다. 하지만 이러한 과정은 초보자 분들에게 많은 지식을 요구한다는 점에서 학습에 방해요소로서 작용합니다. 그래서 우리는 CRA(Create React App)이라는 오픈소스를 사용해서 바로 React 프로젝트를 구축하여 실습을 진행해 볼 예정입니다.

※ Node.js와 NPM 설치 ※

과거에는 Node.js를 설치한 이후에 NPM을 추가적으로 설치해야 했습니다. 하지만 현재는 Node.js를 설치하면 자동으로 NPM도 함께 설치가 됩니다. 그래서 Node.js가 설치되어 있지 않으신 분들은 바로 Node.js를 설치하시면 됩니다.

▶ Node.js 설치하기: https://nodejs.org/ko/

저는 최신 버전인 11.6.0 버전으로 설치를 해보겠습니다.

설치는 단순히 다음(Next) 버튼만 눌러도 성공적으로 진행됩니다.

설치 완료에는 버전(Version)을 확인하는 명령어로 정상 설치되었는지 확인하시면 됩니다.

※ CRA(Create React App) 설치하기 ※

NPM 명령어를 이용해서 CRA를 설치할 수 있습니다.

npm install -g create-react-app

※ React 프로젝트 생성하기 ※

저희는 강좌에서 간단한 형태의 SNS 서비스를 만들어 볼 예정입니다. 따라서 특정한 폴더로 이동하여 create-react-app 명령어를 이용하여 SNS라는 폴더를 만들어 보도록 하겠습니다.

보시면 create-react-app는 yarn이라는 패키지 매니저를 이용해 설치됩니다. 그래서 결과적으로 yarn start 명령어를 이용해 프로젝트를 구동시킬 수 있습니다. 만약에 yarn이 없다는 오류 메시지가 출력되는 경우 다음의 명령어로 yarn을 설치할 수 있습니다.

npm install --global yarn

결과적으로 다음과 같이 yarn start 명령어로 앱이 구동되어야 합니다.