Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React 튜토리얼 1차시

3,152 views

Published on

UNIST 프로그래밍 동아리 HeXA (http://www.hexa.pro) 내부 React 강의 프레젠테이션 자료의 공개버전

내용
- HTML, Javascript 속성 튜토리얼
- React 소개
- Node.js 설치

https://github.com/kimxogus/react-tutorial

Published in: Technology
  • Be the first to comment

React 튜토리얼 1차시

  1. 1. ReactAJAVASCRIPTLIBRARYFORBUILDINGUSERINTERFACES
  2. 2. 강의 순서 1회차 개발 환경 구성 – SublimeText3, Node.js 설치 (필요시) HTML, JS 기초 React 소개 Node.js 간단한 실습 2회차 React 튜토리얼 React 예제 작성 HeXA - 기초부2 ReactJS Tutorial
  3. 3. HTML HyperText Markup Language 웹에서의 구조적 문서 작성을 위한 방법 제공 HeXA - 기초부2 ReactJS Tutorial JAVASCRIPT 웹브라우저내에서 사용되는 객체지향 스크립트 언어 Node.js 등의 런타임 환경을 이용해 브라우저 밖에서도 사용 가능 JAVA랑 1도 상관없음!!
  4. 4. 우리의 목적은 뭐다? React! React를 하기 위한 기본중의 기본만 속성으로 빠르게! 제대로 배우고 싶으면 HeXA 들어오세요! http://www.hexa.pro 일단 코딩부터 해봅시다 HeXA - 기초부2 ReactJS Tutorial
  5. 5. 에디터 설치 - SublimeText3 https://www.sublimetext.com/3 Portable version을 다운받는다. 압축을 푼다. 실행한다. 코딩한다. HeXA - 기초부2 ReactJS Tutorial
  6. 6. 코드를 받아오자 • GIT이 있건 없건!! https://github.com/kimxogus/React-web-tutorial 들어갑니다. Star를 누릅니다. (프리미엄 A/S 서비스) Fork를 누릅니다. (다운로드가 빨라집니다. 똑같은 것 같다면 기분탓) Download ZIP을 클릭하여 zip파일을 다운 압축 풀기! HeXA - 기초부2 ReactJS Tutorial
  7. 7. 일단 써보자 HTML <!DOCTYPE HTML> <html> <head> </head> <body> </body> </html> HeXA - 기초부2 ReactJS Tutorial 1_html.html
  8. 8. 일단 써보자 HTML <body> <header> <nav></nav> </header> <div id=“main”></div> </body> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN 1_html.html
  9. 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. 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. 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. 12. 일단 써보자 JAVASCRIPT <footer></footer> <script> // 여기에 JS 코드를 삽입해볼겁니다! </script> </body> HeXA - 기초부2 ReactJS Tutorial HEADER NAV MAIN CONTENT1 CONTENT2 TITLE DESCRIPTION FOOTER 1_javascript.html
  13. 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. 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. 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. 16. HTML & JS 끝! React에 들어가기 앞서… HeXA - 기초부2 ReactJS Tutorial
  17. 17. WEB의 기본 MVC 패턴 Model View Controller 애플리케이션을 세가지의 역할로 구분한 개발 방법론 HeXA - 기초부2 ReactJS Tutorial 출처: 생활코딩
  18. 18. MVC 패턴 예시) 쇼핑몰에서 장바구니에 상품 넣기 HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  19. 19. MVC 패턴 예시) 쇼핑몰에서 장바구니에 상품 넣기 1. 화면(View)에서 상품을 선택하고 장바구니에 넣기 버튼 클릭! HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  20. 20. MVC 패턴 예시) 쇼핑몰에서 장바구니에 상품 넣기 1. 화면(View)에서 상품을 선택하고 장바구니에 넣기 버튼 클릭! 2. Controller는 상품 정보를 Model에 반영 (장바구니에 상품 정보 추가) HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  21. 21. MVC 패턴 예시) 쇼핑몰에서 장바구니에 상품 넣기 1. 화면(View)에서 상품을 선택하고 장바구니에 넣기 버튼 클릭! 2. Controller는 상품 정보를 Model에 반영 (장바구니에 상품 정보 추가) 3. Controller는 변경된 Model의 정보를 View에 반영한다. HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  22. 22. React는 A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  23. 23. React는 A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES View에만 초점을 맞췄다 MC를 원한다면 Flux, Redux같은 라이브러리, 혹은 Angular같은 MVC프레임워크와 함께 쓸 수 있다. HeXA - 기초부2 ReactJS Tutorial VIEW CONTROLLER MODEL
  24. 24. React는 A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES View에만 초점을 맞췄다 MC를 원한다면 Flux, Redux같은 라이브러리, 혹은 Angular같은 MVC프레임워크와 함께 쓸 수 있다. HeXA - 기초부2 ReactJS Tutorial UI 짜기 좋다
  25. 25. React로 짜면 const Header = React.createClass({ render: function() { return ( <header> <nav></nav> </header> ); } }); const Footer = React.createClass({ render: function() { return ( <footer></footer> ); } }); const Content = React.createClass({ render: function() { return ( <div id={this.props.content.id} className=“content”> <div className=“title”></div> <div className=“description”></div> </div> ); } }); const Main = React.createClass({ render: function() { var contents = [ {id:“content1”}, {id:”content2”} ]; return ( <div id=“main”> {contents.map(e=> <Content key={e.id} content={e}/> )} </div> ); } }); const HTML = React.createClass({ render: function() { return ( <div> <Header/> <Main/> <Footer/> </div> ); } }); ReactDOM.render( <HTML/>, document.getElementsByTagName(“body”)[0] ); HeXA - 기초부2 ReactJS Tutorial 코드는 길어졌으나 훨씬 알아보기 쉽다!
  26. 26. React로 짜면 const Header = require(‘./Main’); const Main = require(‘./Main’); const Footer = require(‘./Footer’); const HTML = React.createClass({ render: function() { return ( <div> <Header/> <Main/> <Footer/> </div> ); } }); ReactDOM.render( <HTML>, document.getElementsByTagName(“body”)[0] ); HeXA - 기초부2 ReactJS Tutorial 컴포넌트 별로 따로 관리 > 재사용 가능
  27. 27. HeXA - 기초부2 ReactJS Tutorial
  28. 28. HeXA - 기초부2 ReactJS Tutorial
  29. 29. React의 특징 JSX Virtual DOM 단방향 데이터 흐름 HeXA - 기초부2 ReactJS Tutorial
  30. 30. JSX JS 코드에 XML을 직접 표현 const Content = React.createClass({ render: function() { return ( <div id={this.props.content.id} className=“content”> <div className=“title”></div> <div className=“description”></div> </div> ); } }); HeXA - 기초부2 ReactJS Tutorial
  31. 31. 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
  32. 32. JSX JSX문법이 아닌 일반 JS 문법을 사용할 수도 있으나 변X난 더러운 코드가 좋아! (...)가 아니라면 JSX 쓰는게 바람직하다. HeXA - 기초부2 ReactJS Tutorial
  33. 33. Virtual DOM 빠르고 좋다! HeXA - 기초부2 ReactJS Tutorial 출처: goo.gl/4dKdPz
  34. 34. 단방향 데이터 흐름 Property를 이용한 상위 요소 > 하위 요소의 데이터 흐름 <div id={this.props.content.id} className=“content”> 이벤트를 통해 하위 컴포넌트의 변화를 감지할 수 있다. : 상위 컴포넌트가 하위 컴포넌트에 이벤트를 추가하여 감지 양방향 데이터 바인딩을 원한다면 다른 라이브러리, 프레임워크를 붙여 쓸 수도 있다. HeXA - 기초부2 ReactJS Tutorial
  35. 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로!
  36. 36. Node.js 설치 https://nodejs.org/en/ 다운받는다. 설치한다. Win + R 하고 cmd 입력 후 엔터 node–v 입력 후 엔터 Node.js 버전이 나온다면 성공! HeXA - 기초부2 ReactJS Tutorial
  37. 37. 일단 써보자 JS with Node.js app.js console.log(“Hello HeXA!”); 콘솔 Hello HeXA! HeXA - 기초부2 ReactJS Tutorial
  38. 38. 일단 써보자 JS with Node.js app.js var http = require('http'); var port = 8080; http.createServer(function(req,res) { res.end("Hello HeXA!"); }).listen(port); 브라우저 http://localhost:8080/ Hello HeXA! HeXA - 기초부2 ReactJS Tutorial
  39. 39. 다음 시간엔… Node.js를 활용한 다양한 JSX 컴파일 방법 React의 데이터 바인딩(props, state) 예제를 활용한 React 실습 HeXA - 기초부2 ReactJS Tutorial
  40. 40. 수고하셨습니다 김태현 kgyoo8232@gmail.com HeXA - 기초부2 ReactJS Tutorial

×