UNIST 프로그래밍 동아리 HeXA (http://www.hexa.pro) 내부 React 강의 프레젠테이션 자료의 공개버전
내용
- HTML, Javascript 속성 튜토리얼
- React 소개
- Node.js 설치
https://github.com/kimxogus/react-tutorial
iOS App 개발 with React Native + ClojureScriptCheolhee Han
ClojureScript 와 React Native 를 이용하여, 사물인터넷 기기와 App의 프로토타입 개발한 결과를 시연합니다.
React Native 를 채택까지의 과정을 전개합니다.
왜 Clojure로 개발하는가? 대한 이야기.
소스 저장소
https://github.com/cheolhee/ReactNativeDuckie
iOS App 개발 with React Native + ClojureScriptCheolhee Han
ClojureScript 와 React Native 를 이용하여, 사물인터넷 기기와 App의 프로토타입 개발한 결과를 시연합니다.
React Native 를 채택까지의 과정을 전개합니다.
왜 Clojure로 개발하는가? 대한 이야기.
소스 저장소
https://github.com/cheolhee/ReactNativeDuckie
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
React, Redux를 서비스에 적용, 유지보수하면서
생겼던 문제점들을 해결하기 위한 방안들.
* 대상
- React, Redux를 접하지 않은 분
- React, Redux를 서비스에 적용하고 있는 분
* 내용
- React만으로는 해결되지 않는 문제들
- Flux의 한계
- Redux의 정의 및 서비스 적용
- 코드가 많아짐에 따른 문제를 typescript를 통해 해결
* 실전팁
- Typescript를 사용하여 컴파일 타임에 오류를 감지하자
- 많아지는 dom tree를 high order component를 통해 모듈화하자
- Logical component를 만들어서 control flow를 제어하자
2. 강의 순서
1회차
개발 환경 구성 – SublimeText3, Node.js 설치 (필요시)
HTML, JS 기초
React 소개
Node.js 간단한 실습
2회차
React 튜토리얼
React 예제 작성
HeXA - 기초부2 ReactJS Tutorial
3. HTML
HyperText Markup Language
웹에서의 구조적 문서 작성을 위한 방법 제공
HeXA - 기초부2 ReactJS Tutorial
JAVASCRIPT
웹브라우저내에서 사용되는 객체지향 스크립트 언어
Node.js 등의 런타임 환경을 이용해 브라우저 밖에서도 사용 가능
JAVA랑 1도 상관없음!!
4. 우리의 목적은 뭐다? React!
React를 하기 위한 기본중의 기본만 속성으로 빠르게!
제대로 배우고 싶으면 HeXA 들어오세요! http://www.hexa.pro
일단 코딩부터 해봅시다
HeXA - 기초부2 ReactJS Tutorial
9. 일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”></div>
<div id=“content2” class=“content”></div>
</div>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
1_html.html
10. 일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”>
<div class=“title”></div>
<div class=“description”></div>
</div>
<div id=“content2” class=“content”></div>
</div>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
1_html.html
11. 일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”>
<div class=“title”></div>
<div class=“description”></div>
</div>
<div id=“content2” class=“content”></div>
</div>
<footer></footer>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
FOOTER
1_html.html
12. 일단 써보자 JAVASCRIPT
<footer></footer>
<script>
// 여기에 JS 코드를 삽입해볼겁니다!
</script>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
FOOTER
1_javascript.html
13. 일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav");
console.log(nav);
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
14. 일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav")[0];
console.log(nav);
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
15. 일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav")[0];
console.log(nav);
nav.onclick = function() {
alert("You’ve just clicked nav!");
}
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
16. HTML & JS 끝!
React에 들어가기 앞서…
HeXA - 기초부2 ReactJS Tutorial
17. WEB의 기본 MVC 패턴
Model View Controller
애플리케이션을
세가지의 역할로 구분한
개발 방법론
HeXA - 기초부2 ReactJS Tutorial
출처: 생활코딩
18. MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
19. MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
20. MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
2. Controller는 상품 정보를 Model에 반영
(장바구니에 상품 정보 추가)
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
21. MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
2. Controller는 상품 정보를 Model에 반영
(장바구니에 상품 정보 추가)
3. Controller는 변경된 Model의 정보를
View에 반영한다.
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
23. React는
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
View에만 초점을 맞췄다
MC를 원한다면
Flux, Redux같은 라이브러리,
혹은 Angular같은 MVC프레임워크와
함께 쓸 수 있다.
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
24. React는
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
View에만 초점을 맞췄다
MC를 원한다면
Flux, Redux같은 라이브러리,
혹은 Angular같은 MVC프레임워크와
함께 쓸 수 있다.
HeXA - 기초부2 ReactJS Tutorial
UI 짜기 좋다
34. 단방향 데이터 흐름
Property를 이용한 상위 요소 > 하위 요소의 데이터 흐름
<div id={this.props.content.id} className=“content”>
이벤트를 통해 하위 컴포넌트의 변화를 감지할 수 있다.
: 상위 컴포넌트가 하위 컴포넌트에 이벤트를 추가하여 감지
양방향 데이터 바인딩을 원한다면
다른 라이브러리, 프레임워크를 붙여 쓸 수도 있다.
HeXA - 기초부2 ReactJS Tutorial
35. JSX
JS 코드에 XML을 직접 표현 > 표준 문법으로 컴파일(변환)
var Content = React.createClass({
displayName: “Content”,
render: function() {
return (
React.createElement(‘div’, {id:this.props.content.id, className:“content”},
React.createElement(‘div’, {className:“title”}),
React.createElemtn(‘div’, {className:“description”})
)
);
}
});
HeXA - 기초부2 ReactJS Tutorial
Node.js로!