node.js를 처음 접하는 개발자를 위한 스터디 자료입니다.
실습 위주로, 간단한 웹 페이지를 만들어 보는 것을 목표로 하며,
express를 활용하기에 앞서, node.js 기본 API만으로 GET/POST 처리 방식을 알아봅니다.
내용의 깊이가 있지는 않으며, 단지 node.js의 입문을 위한 가벼운 수준으로 내용이 구성되었습니다.
node.js를 처음 접하는 개발자를 위한 스터디 자료입니다.
실습 위주로, 간단한 웹 페이지를 만들어 보는 것을 목표로 하며,
express를 활용하기에 앞서, node.js 기본 API만으로 GET/POST 처리 방식을 알아봅니다.
내용의 깊이가 있지는 않으며, 단지 node.js의 입문을 위한 가벼운 수준으로 내용이 구성되었습니다.
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!
MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
제 14회 한국 자바 개발자 컨퍼런스의 커뮤니티 세션에서 공유한 `overview of spring4` 의 발표 자료
스프링 프레임워크는 2004년에 출시된 이후 지금까지 많은 변화를 겪어왔습니다. 기억에 남아 있는 굴직한 변화를 더듬어 보면 버전 2.0은 XML 네임스페이스와 AspectJ 지원, 버전 2.5부터 애노테이션을 활용한 프로그래밍 기능이 추가되었습니다. 그리고 버전 3.0으로 올라가며 Java 5+ 기반으로 코드 구조가 바뀌고 자바 코드 기반 설정 기능이 추가되었습니다. 2013년 12월 13일에 버전 4.0 발표이 발표되었습니다. 주목할 변화는 바로 Java 8 지원과 제거 대상(@Deprecated)으로 선언되었던 많은 클래스와 메소드들이 삭제되었다는 것입니다. 이 외에도 많은 변화가 있습니다. 이번 시간에는 조금 높은 곳에서 내려다보는 느낌으로 무엇이 추가되었고, 어떤게 바뀌었는지 살펴보려고 합니다.
예제코드 : https://github.com/arawn/overview-of-spring4
Session 4 - 최효석 React Hooks 마법. 그리고 깔끔한 사용기
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
7. 콜백 함수
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);
…
11. 이벤트 처리
var events = require('events');
var eventEmitter = new events.EventEmitter(); //이벤트를
발생시키는 객체
var ringbell = function() {
console.log(“띵동");
}
eventEmitter.on('doorOpen', ringbell);
eventEmitter.emit('doorOpen');
12. 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());
}
});
13. fs모듈-텍스트파일읽기(동기처리)
var fs = require('fs');
var data = fs.readFileSync('input.txt');
console.log("Sync data is " + data.toString());
console.log("This is the end");
14. 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);
});
15. 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");
});
16. fs모듈-파이프
var fs = require('fs');
var readableStream = fs.createReadStream('in.txt');
var writableStream = fs.createWriteStream('out.txt');
readableStream.pipe(writableStream);
36. 함수의 사용
// 인사말을 취득해서 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>
}
37. 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)
38. 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>
)
}
48. react 에서 state의 의미
• 상태를 가지고 그 상태가 계속 변하는 경우 state를 사용할 수 있다.
초기화
constructor에서
this.state = ...
• 상태를 갱신할 때는
• this.setState(...)
• 상태를 가져와 랜더링하고 싶을땐
• this.state.state명
• 이와는 반대로 props는 상태가 아니라 속성으로 계속 변하지 않을 때 사용한다.
67. 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)
}