Hello
5 |
6 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/ch3/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch3/.DS_Store
--------------------------------------------------------------------------------
/ch3/cycle/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 |
19 |
--------------------------------------------------------------------------------
/ch3/cycle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cycle",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^15.5.4",
7 | "react-dom": "^15.5.4"
8 | },
9 | "devDependencies": {
10 | "react-scripts": "0.9.5",
11 | "standard": "^10.0.2"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test --env=jsdom",
17 | "eject": "react-scripts eject"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/ch3/cycle/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch3/cycle/public/favicon.ico
--------------------------------------------------------------------------------
/ch3/cycle/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 | -
7 |
- xxx 8 |
- xxx 9 |
- xxx 10 |
40 |
42 |
43 | )
44 | }
45 | }
46 | export default App
--------------------------------------------------------------------------------
/ch3/cycle/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div')
7 | ReactDOM.render(
10 |
,
12 | document.getElementById('root')
13 | )
14 |
--------------------------------------------------------------------------------
/ch3/form_number/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch3/form_number/.DS_Store
--------------------------------------------------------------------------------
/ch3/form_number/build.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const basedir = __dirname
3 |
4 | module.exports = {
5 | entry: path.join(basedir, 'src/index.js'),
6 | output: {
7 | path: path.join(basedir, 'out'),
8 | filename: 'bundle.js'
9 | },
10 | devtool: 'inline-source-map',
11 | module: {
12 | rules: [
13 | {
14 | test: /.js$/,
15 | loader: 'babel-loader',
16 | options: {
17 | presets: ['es2015', 'react']
18 | }
19 | }
20 | ]
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/ch3/form_number/build.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | config=$(cd $(dirname $0) &&pwd)/build.config.js
3 | cd ../.. && webpack --config $config $*
4 |
5 |
--------------------------------------------------------------------------------
/ch3/form_number/number_form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/ch3/form_number/src/NumberForm.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | // 숫자 입력 컴포넌트
3 | export default class NumberForm extends Component {
4 | constructor (props) {
5 | super(props)
6 | this.state = { value: '' }
7 | }
8 | // 값이 변경됐을 때 --- (※1)
9 | doChange (e) {
10 | const curValue = e.target.value
11 | // 숫자 이외의 값을 제거합니다.
12 | const newValue = curValue.replace(/[^0-9]/g, '')
13 | this.setState({value: newValue})
14 | }
15 | // 전송 버튼을 눌렀을 때
16 | doSubmit (e) {
17 | window.alert('전송: ' + this.state.value)
18 | e.preventDefault()
19 | }
20 | // 화면 렌더링 --- (※4)
21 | render () {
22 | // 이벤트를 메서드에 바인딩합니다.
23 | const doSubmit = (e) => this.doSubmit(e)
24 | const doChange = (e) => this.doChange(e)
25 | return (
26 |
32 | )
33 | }
34 | }
--------------------------------------------------------------------------------
/ch3/form_number/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import NumberForm from './NumberForm'
4 |
5 | const st = {textAlign: 'center'}
6 | ReactDOM.render(
7 |
8 |
,
10 | document.getElementById('root')
11 | )
12 |
--------------------------------------------------------------------------------
/ch3/form_simple/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 |
19 |
--------------------------------------------------------------------------------
/ch3/form_simple/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "form1",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^15.5.4",
7 | "react-dom": "^15.5.4"
8 | },
9 | "devDependencies": {
10 | "react-scripts": "0.9.5",
11 | "standard": "^10.0.2"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test --env=jsdom",
17 | "eject": "react-scripts eject"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/ch3/form_simple/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch3/form_simple/public/favicon.ico
--------------------------------------------------------------------------------
/ch3/form_simple/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 |
9 |
11 | )
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/ch3/form_simple/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
34 | this.inchChanged(e)}
36 | value={this.state.inch} />
37 | this.cmChanged(e)}
39 | value={this.state.cm} />
40 |
41 | )
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/ch3/inch_to_cm/src/ValueInput.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | // 숫자 입력 컴포넌트
3 | export default class ValueInput extends Component {
4 | constructor (props) {
5 | super(props)
6 | // 프로퍼티로 초깃값을 설정합니다. --- (※5)
7 | this.state = {
8 | value: this.props.value
9 | }
10 | }
11 | // 값이 사용자에 의해 변경됐을 때 --- (※6)
12 | handleChange (e) {
13 | const v = e.target.value
14 | // 숫자 이외의 값을 제거합니다.
15 | const newValue = v.replace(/[^0-9.]+/g, '')
16 | // 상태에 설정합니다. --- (※7)
17 | this.setState({value: newValue})
18 | // 이벤트를 실행합니다. --- (※8)
19 | if (this.props.onChange) {
20 | this.props.onChange({
21 | target: this,
22 | value: newValue
23 | })
24 | }
25 | }
26 | // 프로퍼티가 변경됐을 때 --- (※9)
27 | componentWillReceiveProps (nextProps) {
28 | this.setState({value: nextProps.value})
29 | }
30 | // 렌더링 --- (※10)
31 | render () {
32 | return (
33 |
38 |
)
39 | }
40 | }
--------------------------------------------------------------------------------
/ch3/inch_to_cm/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import InchToCm from './InchToCm'
4 |
5 | ReactDOM.render(
6 |
50 |
57 |
)
58 | }
59 | // 입력이 제대로 됐는지 출력하는 메시지 --- (※7)
60 | renderStatusMessage () {
61 | // 메시지에 적용할 스타일
62 | const so = {
63 | margin: '8px',
64 | padding: '8px',
65 | color: 'white'
66 | }
67 | let msg = null
68 | if (this.state.isOK) { // OK 때
69 | so.backgroundColor = 'green'
70 | msg = OK
71 | } else { // NG 때(빈 문자열이라면 출력하지 않습니다)
72 | if (this.state.value !== '') {
73 | so.backgroundColor = 'red'
74 | msg = NG
75 | }
76 | }
77 | return msg
78 | }
79 | }
--------------------------------------------------------------------------------
/ch3/input_zip/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import ZipInput from './ZipInput'
4 | ReactDOM.render(
5 |
11 |
20 |
)
21 | }
22 | // 체크박스를 클릭했을 때
23 | doChange (e) {
24 | this.setState({ check: !this.state.check })
25 | }
26 | // 입력 양식을 전송했을 때
27 | doSubmit (e) {
28 | e.preventDefault()
29 | window.alert(this.state.check ? '먹기' : '먹지 않기')
30 | }
31 | }
32 | ReactDOM.render(
33 |
15 |
21 |
)
22 | })
23 | // 입력 양식에 라디오버튼 목록을 지정합니다.
24 | return (
25 |
29 |
)
30 | }
31 | // 라디오버튼을 변경했을 때
32 | doChange (e) {
33 | this.setState({ value: e.target.value })
34 | }
35 | // 입력 양식을 전송했을 때
36 | doSubmit (e) {
37 | e.preventDefault()
38 | window.alert(this.state.value)
39 | }
40 | }
41 | ReactDOM.render(
42 |
20 |
28 |
)
29 | }
30 | // 선택 박스를 변경했을 때
31 | doChange (e) {
32 | this.setState({ value: e.target.value })
33 | }
34 | // 입력 양식을 전송했을 때
35 | doSubmit (e) {
36 | e.preventDefault()
37 | window.alert(this.state.value)
38 | }
39 | }
40 | ReactDOM.render(
41 |
12 |
18 |
)
19 | }
20 | // テキストボックスを変更したとき
21 | doChange (e) {
22 | this.setState({ value: e.target.value })
23 | }
24 | // フォームを送信したとき
25 | doSubmit (e) {
26 | e.preventDefault()
27 | window.alert(this.state.value)
28 | }
29 | }
30 |
31 | ReactDOM.render(
32 |
11 | ')
16 | })
17 | // POST 메서드를 받습니다.
18 | app.post('/', (req, res) => {
19 | const s = JSON.stringify(req.body)
20 | res.send('POST: ' + s)
21 | })
--------------------------------------------------------------------------------
/ch5/express_test/post-test.js:
--------------------------------------------------------------------------------
1 | // 익스프레스를 실행합니다.
2 | const express = require('express')
3 | const app = express()
4 | app.listen(3000, () => {
5 | console.log('서버 실행 완료 - http://localhost:3000')
6 | })
7 | // GET 메서드라면 입력 양식을 응답합니다.
8 | app.get('/', (req, res) => {
9 | res.send('')
13 | })
14 | // POST 메서드를 받습니다.
15 | app.post('/', (req, res) => {
16 | res.send('POST되었습니다.')
17 | })
--------------------------------------------------------------------------------
/ch5/express_test/post-upload.js:
--------------------------------------------------------------------------------
1 | // 익스프레스를 실행합니다.
2 | const express = require('express')
3 | const app = express()
4 | // multer 사용 준비 --- (※1)
5 | const multer = require('multer')
6 | const path = require('path')
7 | // 업로드 대상 디렉터리를 지정합니다. --- (※2)
8 | const tmpDir = path.join(__dirname, 'tmp')
9 | const pubDir = path.join(__dirname, 'pub')
10 | const uploader = multer({dest: tmpDir})
11 | // 서버를 실행합니다.
12 | app.listen(3000, () => {
13 | console.log('서버 실행 완료 - http://localhost:3000')
14 | })
15 | // 업로드 입력 양식을 출력합니다. --- (※3)
16 | app.get('/', (req, res) => {
17 | res.send(
18 | '')
22 | })
23 | // 정적 파일을 제공합니다. --- (※4)
24 | app.use('/pub', express.static(pubDir))
25 | // 업로드를 받습니다. --- (※5)
26 | app.post('/', uploader.single('aFile'), (req, res) => {
27 | console.log('파일을 받았습니다.')
28 | console.log('원본 파일 이름:', req.file.originalname)
29 | console.log('저장된 경로:', req.file.path)
30 | // MIME으로 파일의 형식을 확인합니다. --- (※6)
31 | if (req.file.mimetype !== 'image/png') {
32 | res.send('PNG 이미지만 업로드할 수 있습니다.')
33 | return
34 | }
35 | // TODO: 진짜 PNG인지 확인하게 해보세요. --- (※7)
36 | // 파일을 이동합니다. --- (※8)
37 | const fname = req.file.filename + '.png'
38 | const des = pubDir + '/' + fname
39 | const fs = require('fs')
40 | fs.rename(req.file.path, des)
41 | // HTML을 출력합니다.
42 | res.send('다음과 같은 파일이 업로드 됐습니다.
' + 43 | `
`)
44 | })
--------------------------------------------------------------------------------
/ch5/express_test/pub/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch5/express_test/pub/.DS_Store
--------------------------------------------------------------------------------
/ch5/express_test/static.js:
--------------------------------------------------------------------------------
1 | // 익스프레스를 실행합니다.
2 | const express = require('express')
3 | const app = express()
4 | // 서버를 실행합니다.
5 | app.listen(3000, () => {
6 | console.log('서버 실행 완료 - http://localhost:3000')
7 | })
8 | // 정적 파일을 제공합니다.
9 | app.use('/', express.static('./html'))
--------------------------------------------------------------------------------
/ch5/flux_test/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch5/flux_test/.DS_Store
--------------------------------------------------------------------------------
/ch5/flux_test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/ch5/flux_test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "flux_test",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "start": "serve .",
7 | "watch": "webpack -w",
8 | "build": "webpack"
9 | },
10 | "dependencies": {
11 | "flux": "^3.1.2",
12 | "react": "^15.5.4",
13 | "react-dom": "^15.5.4"
14 | },
15 | "devDependencies": {
16 | "babel-core": "^6.24.1",
17 | "babel-loader": "^6.4.1",
18 | "babel-preset-es2015": "^6.24.1",
19 | "babel-preset-react": "^6.24.1",
20 | "css-loader": "^0.28.0",
21 | "serve": "^5.1.5",
22 | "style-loader": "^0.16.1",
23 | "webpack": "^2.4.1"
24 | },
25 | "keywords": [],
26 | "author": "",
27 | "license": "ISC"
28 | }
29 |
--------------------------------------------------------------------------------
/ch5/flux_test/src/actions.js:
--------------------------------------------------------------------------------
1 | import {appDispatcher} from './appDispatcher.js'
2 | // 이번에 사용할 Action
3 | export const ActionType = {
4 | CHANGE_NAME: 'CHANGE_NAME',
5 | SUBMIT_NAME: 'SUBMIT_NAME'
6 | }
7 | // Action을 생성하고 ... Dispatcher에 정보를 전달합니다.
8 | export const Actions = {
9 | changeName: (name) => {
10 | if (name === null) return
11 | appDispatcher.dispatch({
12 | actionType: ActionType.CHANGE_NAME,
13 | value: name})
14 | },
15 | submitName: () => {
16 | appDispatcher.dispatch({
17 | actionType: ActionType.SUBMIT_NAME})
18 | }
19 | }
--------------------------------------------------------------------------------
/ch5/flux_test/src/appDispatcher.js:
--------------------------------------------------------------------------------
1 | import {Dispatcher} from 'flux'
2 | // Dispatcher를 생성합니다.
3 | export const appDispatcher = new Dispatcher()
--------------------------------------------------------------------------------
/ch5/flux_test/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import {Actions} from './actions.js'
4 | import {nameStore, messageStore} from './stores.js'
5 | // View를 정의합니다.
6 | class AppView extends React.Component {
7 | constructor (props) {
8 | super(props)
9 | this.state = {name: '', message: ''}
10 | // View와 Store를 연결합니다.
11 | nameStore.onChange = () => {
12 | this.setState({name: nameStore.name})
13 | }
14 | messageStore.onChange = () => {
15 | this.setState({message: messageStore.message})
16 | }
17 | }
18 | // View에서는 Action을 던집니다.
19 | render () {
20 | console.log('View.render')
21 | return (React App
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/ch5/router_params/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/ch5/router_params/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 150px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-intro {
18 | font-size: large;
19 | }
20 |
21 | @keyframes App-logo-spin {
22 | from { transform: rotate(0deg); }
23 | to { transform: rotate(360deg); }
24 | }
25 |
--------------------------------------------------------------------------------
/ch5/router_params/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import logo from './logo.svg';
3 | import './App.css';
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 |
17 |
26 | )
27 | // 사용자 목록을 출력하는 컴포넌트 --- (※2)
28 | class UserList extends React.Component {
29 | render () {
30 | const ulist = users.map(e => (
31 |
32 | {e.name}
33 |
34 | ))
35 | return (React App
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/ch5/router_test/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/ch5/router_test/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 150px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-intro {
18 | font-size: large;
19 | }
20 |
21 | @keyframes App-logo-spin {
22 | from { transform: rotate(0deg); }
23 | to { transform: rotate(360deg); }
24 | }
25 |
--------------------------------------------------------------------------------
/ch5/router_test/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import logo from './logo.svg';
3 | import './App.css';
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 |
10 |
17 | )
18 | // 홈 화면에 출력할 컴포넌트를 정의합니다. --- (※2)
19 | const Home = () => (
20 |
29 | )
30 | // 한국어 출력 컴포넌트를 정의합니다. --- (※3)
31 | const HelloKorean = () => (
32 | React App
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/ch5/router_test2/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/ch5/router_test2/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 150px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-intro {
18 | font-size: large;
19 | }
20 |
21 | @keyframes App-logo-spin {
22 | from { transform: rotate(0deg); }
23 | to { transform: rotate(360deg); }
24 | }
25 |
--------------------------------------------------------------------------------
/ch5/router_test2/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import logo from './logo.svg';
3 | import './App.css';
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 |
10 |
21 | )
22 | // 고정 헤더를 정의합니다. --- (※2)
23 | const HelloHeader = () => (
24 |
32 | )
33 | // 고정 푸터를 정의합니다.
34 | const HelloFooter = () => (
35 |
42 | )
43 | // 일본어 출력 컴포넌트를 정의합니다. --- (※4)
44 | const HelloJapanese = () => (
45 |
46 | )
47 | // 영어 출력 컴포넌트를 정의합니다. --- (※5)
48 | const HelloEnglish = () => (
49 |
50 | )
51 | // 스타일을 정의합니다.
52 | const styleHeader = {
53 | backgroundColor: 'orange',
54 | color: 'white',
55 | padding: 8
56 | }
57 | export default HelloApp2
--------------------------------------------------------------------------------
/ch5/router_test2/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/ch5/router_test2/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import HelloApp2 from './HelloApp2';
4 | import registerServiceWorker from './registerServiceWorker';
5 | import './index.css';
6 |
7 | ReactDOM.render(文字認識
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/ch6/handwriting/src/styles.js:
--------------------------------------------------------------------------------
1 | // styles.js
2 | const styles = {
3 | app: {
4 | textAlign: 'center'
5 | },
6 | canvas: {
7 | width: 280,
8 | height: 280,
9 | border: '1px solid silver'
10 | },
11 | predict: {
12 | fontSize: 24,
13 | backgroundColor: 'yellow'
14 | }
15 | }
16 | export default styles
17 |
18 |
--------------------------------------------------------------------------------
/ch6/handwriting/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | module.exports = {
3 | entry: path.join(__dirname, 'src/index.js'),
4 | output: {
5 | path: path.join(__dirname, 'public'),
6 | filename: 'bundle.js'
7 | },
8 | devtool: 'inline-source-map',
9 | module: {
10 | rules: [
11 | {
12 | test: /.js$/,
13 | loader: 'babel-loader',
14 | options: {
15 | presets: ['es2015', 'react']
16 | }
17 | }
18 | ]
19 | }
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/ch6/sns/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch6/sns/.DS_Store
--------------------------------------------------------------------------------
/ch6/sns/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sns",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "node sns-server.js",
8 | "watch": "webpack -w",
9 | "build": "webpack"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "dependencies": {
15 | "express": "^4.15.3",
16 | "nedb": "^1.8.0",
17 | "react": "^15.5.4",
18 | "react-dom": "^15.5.4",
19 | "react-router-dom": "^4.1.1",
20 | "superagent": "^3.5.2"
21 | },
22 | "devDependencies": {
23 | "babel-core": "^6.24.1",
24 | "babel-loader": "^7.0.0",
25 | "babel-preset-es2015": "^6.24.1",
26 | "babel-preset-react": "^6.24.1",
27 | "webpack": "^2.6.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/ch6/sns/public/default.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | border-bottom: 2px solid #c0c0ff;
3 | padding: 8px;
4 | background-color: #f0f0ff;
5 | }
6 |
7 | h2 {
8 | border-bottom: 2px solid #c0c0ff;
9 | padding: 8px;
10 | background-color: #f0f0ff;
11 | }
12 |
13 | input {
14 | width: 280px;
15 | background-color: #fff0f0;
16 | }
17 |
18 | button {
19 | }
20 |
21 | blockquote {
22 | background-color: #f0f0ff;
23 | border-left: 2px dotted #c0c0ff;
24 | margin-left: 2em;
25 | padding: 8px;
26 | }
27 |
28 | textarea {
29 | font-size: 1em;
30 | padding: 8px;
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/ch6/sns/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | WIKI
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/ch6/sns/public/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch6/sns/public/user.png
--------------------------------------------------------------------------------
/ch6/sns/server/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch6/sns/server/.DS_Store
--------------------------------------------------------------------------------
/ch6/sns/server/timeline.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch6/sns/server/timeline.db
--------------------------------------------------------------------------------
/ch6/sns/server/user.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch6/sns/server/user.db
--------------------------------------------------------------------------------
/ch6/sns/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import {
4 | BrowserRouter as Router,
5 | Route, Switch
6 | } from 'react-router-dom'
7 | import SNSUsers from './sns_users'
8 | import SNSTimeline from './sns_timeline'
9 | import SNSLogin from './sns_login'
10 | const SNSApp = () => (
11 |
12 |
21 | )
22 | // DOM의 내용을 메인 컴포넌트로 변경합니다.
23 | ReactDOM.render(
24 | WIKI
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/ch6/wiki/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import {
4 | BrowserRouter as Router,
5 | Route, Switch
6 | } from 'react-router-dom'
7 | import WikiEdit from './wiki_edit'
8 | import WikiShow from './wiki_show'
9 | const WikiApp = () => (
10 |
11 |
16 | )
17 | // DOM의 내용을 메인 컴포넌트로 변경합니다.
18 | ReactDOM.render(
19 |
' + 43 | `
22 |
)
30 | }
31 | }
32 | // DOM의 내용을 변경합니다.
33 | ReactDOM.render(
34 |
23 | Actions.changeName(e.target.value)} />
26 |
27 |
28 | {this.state.message}
29 |
9 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/ch5/router_params/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
10 | 
11 |
13 | Welcome to React
12 |
14 | To get started, edit src/App.js and save to reload.
15 |
18 |
25 |
19 |
20 |
23 |
24 | - {ulist}
46 |
49 | )
50 | }
51 | }
52 | export default CustomerApp
--------------------------------------------------------------------------------
/ch5/router_params/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/ch5/router_params/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import CustomerApp from './CustomerApp';
4 | import registerServiceWorker from './registerServiceWorker';
5 | import './index.css';
6 |
7 | ReactDOM.render({id}: {user.name} - {user.info}
47 | →뒤로가기
48 |
9 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/ch5/router_test/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
10 |
11 |
13 | Welcome to React
12 |
14 | To get started, edit src/App.js and save to reload.
15 |
11 |
16 |
33 |
36 | )
37 | // 일본어 출력 컴포넌트를 정의합니다. --- (※4)
38 | const HelloJapanese = () => (
39 | 안녕하세요
34 | 35 |
40 |
43 | )
44 | // 영어 출력 컴포넌트를 정의합니다. --- (※5)
45 | const HelloEnglish = () => (
46 | こんにちは
41 | 42 |
47 |
50 | )
51 | export default HelloApp
--------------------------------------------------------------------------------
/ch5/router_test/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/ch5/router_test/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import HelloApp from './HelloApp';
4 | import registerServiceWorker from './registerServiceWorker';
5 | import './index.css';
6 |
7 | ReactDOM.render(Hello
48 | 49 |
9 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/ch5/router_test2/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
10 |
11 |
13 | Welcome to React
12 |
14 | To get started, edit src/App.js and save to reload.
15 |
11 |
20 |
13 |
18 |
36 | 인사를 다양한 언어로 출력하는 애플리케이션입니다.
37 |
38 | )
39 | // 한국어 출력 컴포넌트를 정의합니다. --- (※3)
40 | const HelloKorean = () => (
41 | 안녕하세요
こんにちは
Hello
13 |
14 |
19 |
20 |
40 |
54 | )
55 | }
56 | }
--------------------------------------------------------------------------------
/ch6/sns/src/sns_timeline.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import request from 'superagent'
3 | import styles from './styles'
4 | // 타임라인 화면을 정의하는 컴포넌트
5 | export default class SNSTimeline extends Component {
6 | constructor (props) {
7 | super(props)
8 | this.state = { timelines: [], comment: '' }
9 | }
10 | componentWillMount () {
11 | this.loadTimelines()
12 | }
13 | loadTimelines () { // 타임라인 추출 --- (※1)
14 | request
15 | .get('/api/get_friends_timeline')
16 | .query({
17 | userid: window.localStorage.sns_id,
18 | token: window.localStorage.sns_auth_token
19 | })
20 | .end((err, res) => {
21 | if (err) return
22 | this.setState({timelines: res.body.timelines})
23 | })
24 | }
25 | post () { // 자신의 타임라인에 글쓰기 --- (※2)
26 | request
27 | .get('/api/add_timeline')
28 | .query({
29 | userid: window.localStorage.sns_id,
30 | token: window.localStorage.sns_auth_token,
31 | comment: this.state.comment
32 | })
33 | .end((err, res) => {
34 | if (err) return
35 | this.setState({comment: ''})
36 | this.loadTimelines()
37 | })
38 | }
39 | render () {
40 | // 타임라인 데이터를 하나씩 생성 --- (※3)
41 | const timelines = this.state.timelines.map(e => {
42 | return (
43 | 로그인
41 |
42 | 사용자 ID:
43 | changed('userid', e)} />
45 | 비밀번호:
46 | changed('passwd', e)} />
48 |
49 |
53 | 43 | changed('userid', e)} />
45 | 비밀번호:
46 | changed('passwd', e)} />
48 |
49 |
{this.state.msg}
50 | 52 |
44 | 
45 |
49 | )
50 | })
51 | return (
52 |
45 | {e.userid}:
46 | {e.comment}
47 |
48 |
53 |
61 | 62 | 63 |
64 | )
65 | }
66 | }
--------------------------------------------------------------------------------
/ch6/sns/src/styles.js:
--------------------------------------------------------------------------------
1 | const styles = {
2 | error: {
3 | color: 'red'
4 | },
5 | login: {
6 | width: 300,
7 | textAlign: 'left',
8 | marginLeft: 30,
9 | padding: 15
10 | },
11 | timeline: {
12 | borderBottom: '1px solid silver',
13 | padding: 10,
14 | margin: 10
15 | },
16 | tl_img: {
17 | float: 'left',
18 | width: 32
19 | },
20 | userid: {
21 | float: 'left',
22 | color: 'gray',
23 | padding: 5,
24 | margin: 5,
25 | width: 70,
26 | textAlign: 'right'
27 | },
28 | comment: {
29 | float: 'left',
30 | padding: 5,
31 | margin: 5,
32 | width: 300
33 | },
34 | friend: {
35 | padding: 10,
36 | borderBottom: '1px solid silver'
37 | }
38 | }
39 | export default styles
40 |
--------------------------------------------------------------------------------
/ch6/sns/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | module.exports = {
3 | entry: path.join(__dirname, 'src/index.js'),
4 | output: {
5 | path: path.join(__dirname, 'public'),
6 | filename: 'bundle.js'
7 | },
8 | devtool: 'inline-source-map',
9 | module: {
10 | rules: [
11 | {
12 | test: /.js$/,
13 | loader: 'babel-loader',
14 | options: {
15 | presets: ['es2015', 'react']
16 | }
17 | }
18 | ]
19 | }
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/ch6/wiki/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wikibook/nodejs-react/3359e8b4ea8256db2f6fe0df6d994eb4413a9351/ch6/wiki/.DS_Store
--------------------------------------------------------------------------------
/ch6/wiki/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wiki",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "node wiki-server.js",
8 | "watch": "webpack -w",
9 | "build": "webpack",
10 | "build:parser": "pegjs -o src/wiki_parser.js src/wiki_parser.pegjs"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "ISC",
15 | "dependencies": {
16 | "body-parser": "^1.17.2",
17 | "express": "^4.15.3",
18 | "nedb": "^1.8.0",
19 | "react": "^15.5.4",
20 | "react-dom": "^15.5.4",
21 | "react-router-dom": "^4.1.1",
22 | "superagent": "^3.5.2"
23 | },
24 | "devDependencies": {
25 | "babel-core": "^6.24.1",
26 | "babel-loader": "^7.0.0",
27 | "babel-preset-es2015": "^6.24.1",
28 | "babel-preset-react": "^6.24.1",
29 | "pegjs": "^0.10.0",
30 | "webpack": "^2.6.1"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/ch6/wiki/public/default.css:
--------------------------------------------------------------------------------
1 | h2 {
2 | border-bottom: 2px solid #c0c0ff;
3 | padding: 8px;
4 | background-color: #f0f0ff;
5 | }
6 |
7 | blockquote {
8 | background-color: #f0f0ff;
9 | border-left: 2px dotted #c0c0ff;
10 | margin-left: 2em;
11 | padding: 8px;
12 | }
13 |
14 | textarea {
15 | font-size: 1em;
16 | padding: 8px;
17 | }
18 |
19 |
--------------------------------------------------------------------------------
/ch6/wiki/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 타임라인
54 |
55 | this.setState({comment: e.target.value})} />
57 |
58 |
59 | {timelines}
60 | 61 | 62 | 63 |
12 |
15 | 읽어 들이는 중
) 53 | } 54 | if (this.state.jump !== '') { 55 | // 메인 화면으로 리다이렉트 --- (※8) 56 | return
61 |