Node.js and react

Node.js와 React, AngularJS 를 이용한 프론트엔드 개발 실무과정 오라클자바

Node.js 설치 • https://nodejs.org/en/ • 설치 확인 • C:Usersdaman_000>node -v

helloworld.js • 내용: console.log(＂Hello World＂); • 실행방법: C:Usersdaman_000nodejs>node helloworld.js • 결과: Hello World

익명 함수(Anonymous Function) var printstuff = function(stuff) { console.log(stuff); } printstuff("stuff");

전역 객체와 타이머 console.log(__filename); console.log(__dirname); function printstuff() { console.log("This was from setTimeout"); } //setTimeout(printstuff, 5000); 5초후에 실행 setInterval(printstuff, 2000); //2초마다 실행

콜백 함수 function callback() { console.log("Queried the database and delivered data in 5 seconds"); } console.log("User 1 made a request"); setTimeout(callback, 5000); console.log("User 2 made a request"); setTimeout(callback, 5000); …

모듈1 App.js • App.js var athletics = require('./athletics'); athletics.relay(); athletics.longjump();

모듈2 athletics.js function relay() { console.log("This is relay function"); } function longjump() { console.log("This is longjump function"); } module.exports.relay = relay; module.exports.longjump = longjump;

http 모듈로 간단 웹서버 구축 var http = require('http'); http.createServer(function(request, response){ response.writeHead(200, {"Content-Type": "text/plain"}); response.write("Hello World"); response.end(); }).listen(8888);

이벤트 처리 var events = require('events'); var eventEmitter = new events.EventEmitter(); //이벤트를 발생시키는 객체 var ringbell = function() { console.log(“띵동"); } eventEmitter.on('doorOpen', ringbell); eventEmitter.emit('doorOpen');

fs모듈-텍스트파일읽기(비동기처리) var fs = require('fs'); fs.readFile('input.txt', function(err, data){ if (err) { console.log(err); } else { console.log("Async data is " + data.toString()); } });

fs모듈-텍스트파일읽기(동기처리) var fs = require('fs'); var data = fs.readFileSync('input.txt'); console.log("Sync data is " + data.toString()); console.log("This is the end");

fs모듈-스트림읽기 var fs = require('fs'); var readableStream = fs.createReadStream('input.txt'); var data = ''; readableStream.setEncoding('UTF8'); readableStream.on('data', function(chunk) { data += chunk; }); readableStream.on('end', function(){ console.log(data); });

fs모듈-스트림쓰기 var fs = require('fs'); var writeData = "Hello World"; var writableStream = fs.createWriteStream('output.txt'); writableStream.write(writeData, 'UTF8'); writableStream.end(); writableStream.on('finish', function(){ console.log("Write completed"); });

fs모듈-파이프 var fs = require('fs'); var readableStream = fs.createReadStream('in.txt'); var writableStream = fs.createWriteStream('out.txt'); readableStream.pipe(writableStream);

Express 설치 • Npm install express

Express로 서버 작성 //express모듈을 읽어들여 생성 const express = require('express') const app = express() const portNo = 3000 //액세스가 있을 때 처리 app.get('/', (req, res, next) => { res.send('Hello World!') }) //서버 기동 app.listen(portNo, () => { console.log('서버가 기동되었습니다', `http://localhost:${portNo}`) })

Express로 POST송신 • Express기동 • GET메서드로 Web폼 표시 • POST메서드로 전송받음

Express기동 const express = require('express') const app = express() app.listen(3000, ()=>{ console.log('서버기동했습니다 - http://localhost:3000') })

GET메서드로 Web폼 표시 app.get('/', (req, res) => { res.send('<form method="POST">' + '<textarea name="memo">테스트</textarea>' + '<br /><input type="submit" value="송신">' + '</form>') })

POST메서드로 전송받음 app.post('/', (req, res) => { res.send('POST되었습니다') })

Body-parser를 이용한 본문내용 가져오기 // body-parser 유효화 const bodyParser = require('body-parser') app.use(bodyParser.urlencoded({extended:true})) … app.post('/', (req, res) => { const s = JSON.stringify(req.body) res.send('POST되었습니다. 내용:' + s) }) Npm install body-parser

Body-parser를 이용한 본문내용 가져오기

Static 파일 설정 //정적파일을 자동적으로 반환하는 설정 app.use('/', express.static('./html'))

Static 파일 테스트 • Html/index.html <html> <body> <h1>This is static file.</h1> </body> </html>

Fileupload 구현 • Multer 준비 • Npm install multer • Npm install path const multer = require('multer') const path = require('path')

어디에 업로드할지 지정 const tmpDir = path.join(__dirname, 'tmp') const pubDir = path.join(__dirname, 'pub') const uploader = multer({dest:tmpDir})

업로드폼 표시 app.get('/', (req, res) => { res.send( '<form method="POST" action="/"enctype="multipart/form-data">' + '<input type="file" name="aFile" /><br />' + '<input type="submit" value="업로드" />' + '</form>') })

업로드 처리 app.post('/', uploader.single('aFile'), (req, res) => { console.log('파일을 받았습니다') console.log('원파일명:', req.file.originalname) console.log('저장된경로:', req.file.path) //MIME파일형식 체크 if (req.file.mimetype !== 'image/png') { res.send('PNG이미지이외는 업로드안 됩니다') return } const fname = req.file.filename + '.png' const des = pubDir + '/' + fname const fs = require('fs') fs.rename(req.file.path, des) //html 출력 res.send('파일을 업로드받았습니다<br/>' + `<img src="/pub/${fname}" />`) })

업로드 실행결과 원파일명: 7ABCF157-84D2-4D81-83CA- 6695E7604767.PNG 저장된경로: C:Usersdamanmongotmpa1a1fdac69a52c83597c 9b358b3428b3

Hello-react.html <!DOCTYPE html><html><head> <meta charset="utf-8">  <div id="root"></div> <!– 스크립트 정의 ───(※3) --> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ) </script> </body></html>

함수의 사용 // 인사말을 취득해서 DOM에 설정 --- (※4) const root = document.querySelector('#disp') const msg = getGreeting() ReactDOM.render(msg, root) // 인사를 하는 함수 --- (※5) function getGreeting () { // 랜덤한 값을 취득 const r = Math.floor(Math.random() * 3) // 값에 해당하는 메시지 리턴 if (r == 0) return <p>수고하세요</p> if (r == 1) return <p>안녕하세요</p> if (r == 2) return <p>좋은 하루 되세요</p> }

Jsx 임베딩 // 변수의 선언 --- (※1) const item = "SD카드" const value = 12000 // HTML태그안에 변수값을 입력 --- (※2) const msg = <h1>{item} – {value}원</h1> // render()함수로 그림 --- (※3) const elm = document.getElementById("root") ReactDOM.render(msg, elm)

Jsx 스타일 지정 // React로DOM을 변경한다 ReactDOM.render( getDOM(), document.getElementById(＇root＇) ) // 요소를 리턴하는 함수 function getDOM() { // 객체에 스타일 지정 --- (※1) const css1 = { // css스타일 --- (※2) ＂color＂: ＇red＇, ＂background-color＂: ＇#f0f0ff＇, ＂font-size＂: ＇2em＇ } // JSX로DOM을 지정 return ( <div> <p style={css1}>오라클자바교육센터</p> </div> ) }

실습과제 • React로 디지털시계 작성 • 1초마다 실행되는 함수 작성 • setInterval 사용

함수로 컴포넌트 정의 function PhotoText (props) { const url = "img/" + props.image + ".jpeg" const label = props.label const boxStyle = { border: "1px solid silver", margin: "8px", padding: "4px" } return <div style={boxStyle}> <img src={url} width="128"/> <span> {label} </span> </div> }

컴포넌트 이용 const dom = <div> <PhotoText image="pic1" label=＂일본여행-신주쿠＂ /> <PhotoText image=＂pic2＂ label=＂일본여행-카마쿠라＂ /> <PhotoText image=＂pic3＂ label=＂일본여행-시부야＂ /> </div>

화살표 연산자로 컴포넌트 정의 const TitleParts = (props) => ( <div style={{backgroundColor: 'red', color: 'white'}}> <h3>{props.title}</h3> </div> )

클래스로 컴포넌트 정의 class Greeting extends React.Component { render() { return <h1>{this.props.type}</h1> } }

컴포넌트 이용 const dom = <div> <Greeting type="Hello!" /> <Greeting type="Good morning!" /> </div>;

이벤트 정의 // 컴포넌트 정의 class Hello extends React.Component { render () { // 이벤트 정의 const clickHandler = (e) => { window.alert(＇안녕하세요＇) } // 클릭 핸들러 지정 return ( <div onClick={clickHandler}>Click Me</div> ) } }

컴포넌트의 상태 관리 oraclejava 상태를 갖지 않는 컴포넌트 상태를 갖는 컴포넌트 oraclejava oraclejavachecked 상태(state) false true

컴포넌트의 상태관리 • 상태를 갖는 디지털시계 실습 • 상태를 갖는 체크박스 실습

react 에서 state의 의미 • 상태를 가지고 그 상태가 계속 변하는 경우 state를 사용할 수 있다. 초기화 constructor에서 this.state = ... • 상태를 갱신할 때는 • this.setState(...) • 상태를 가져와 랜더링하고 싶을땐 • this.state.state명 • 이와는 반대로 props는 상태가 아니라 속성으로 계속 변하지 않을 때 사용한다.

JavaScript를 외부에서 불러들임 <div id="root"></div>  <script src="temp.js" type="text/babel"></script>

Temp.js // 불러들여질 JavaScript ReactDOM.render( <h1>Hello, World!</h1>, document.getElementById("root") )

Create-react-app 설치 • Npm install –g create-react-app • -g를 붙임으로 모듈을 전역(global)으로 설치

Hello 프로젝트 작성 • Create-react-app hello • Cd hello • Npm start

폴더 구조 • Node_modules : 인스톨된 모듈이 들어가 있음 • Src : 프로그램 소스 코드 • Public : 기본 샘플

App.js 수정 class App extends Component { render() { return ( <div className="App"> <h2>Hello 오라클자바!</h2> </div> ); } }

Hello.js import React from 'react' export class Hello extends React.Component { render () { const msg = this.getGreeting() return msg } getGreeting() { const r = Math.floor(Math.random() * 3); if (r == 0) return <p>오늘도 수고하세요</p> if (r == 1) return <p>안녕하세요</p> if (r == 2) return <p>좋은 하루 되세요</p> } }

Main.js import {Hello} from './Hello'; class App extends Component { render() { return ( <Hello /> ); } }

React 프로그램 공개 • Npm run build • Serve –s build –p 3000

React로 만드는 개인 포트폴리오 사이트 • 실습

SuperAgent를 이용한 ajax처리 • SuperAgent 설치 • Npm install superagent

Fruits.json(public 폴더에 위치) [ {"name": "Apple", "price": 3000}, {"name": "Orange", "price": 2800}, {"name": "Banana", "price": 1300}, {"name": "Mango", "price": 2500} ]

Node.js에 설치 • var request = require('superagent');

Get처리 • request .get(url) .end(function(err, res){ console.log(res.text);//응답 //응답이 JSON인 경우 console.log(res.body);//여기에 parse된 객체가 들어옴 });

Post처리 • request .post(url) .send({name: name, text: text}) .end(function(err, res){ console.log(res.body); });

Test-sagent.js //기능을 읽어들임 const request = require('superagent') //지정된 URL로부터 데이터를 취득 const URL = 'http://localhost:3000/fruits.json' request.get(URL) .end(callbackGet) //데이터를 취득했을 때 처리 function callbackGet(err, res) { if (err) { //취득이 안되었을 때 처리 return } //여기는 취득했을 때 처리 console.log(res.body) }

과일리스트 가져오는 컴포넌트 • 수업시간 참조

Node.js and react

More Related Content

What's hot

Similar to Node.js and react

More from HyungKuIm

Node.js and react