Jo_turn story

var Ui = pc.createScript('ui'); Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'}); Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'}); // initialize code called once per entity Ui.prototype.initialize = function() { // create STYLE element var style = document.createElement('style'); // append to head document.head.appendChild(style); s..

// this script can reference html asset as an attribute // and will live update dom and reattach events to it on html changes // so that launcher don't need to be refreshed during development var HtmlHandler = pc.createScript('htmlHandler'); HtmlHandler.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'}); HtmlHandler.prototype.initialize = function() { // create DIV el..

CSS란? Cascading Style Sheets의 약자로 웹페이지 구성요소의 스타일을 정의하는 언어다. //Cascading : 계단식으로, 정의된 것이 있다면 그것이 없다면 다음으로 넘어간다. //Sheets : 문서, 웹페이지 등 로고, 검색창, 버튼 등의 위치와 모양을 정의할 수 있다. CSS를 HTML에 정용하는 세 가지 방법 Inline_HTML 특정 태그에 style 적용 Hello world //h1 태그에 빨간색, 기울임 꼴 적용 HTML 내부에 stylesheet 작성 태그 이용 Hello world Contents here Here too! //보통 Hello world Contents here Here too! h1 { color: red; font-style: italic; } ..

확실한 정보전달을 위하여 codesandbox.io에서 실습할 예정이다. reactjs.org/docs/lists-and-keys.html의 내용을 바탕으로 재정리한다. 이하 자바스크립트는 Js라고 명칭 한다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); //[2, 4, 6, 8, 10] Js에서는 배열을 선언한 뒤 map()을 이용하여 map()의 결과가 담긴 값을 선언할 수 있다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); React에서도 Js..

확실한 정보전달을 위하여 codesandbox.io에서 실습할 예정이다. reactjs.org/docs/conditional-rendering.html의 내용을 바탕으로 재정리한다. 이하 자바스크립트는 Js라고 명칭 한다. Recact에서는 필요한 동작을 캡슐화하는 component를 만들 수 있다. //애플리케이션 state에 따라 일부만 렌더링 할 수 있다. 로그인으로 알아보는 조건부 랜더링 import React from "react"; class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handl..

확실한 정보전달을 위하여 codesandbox.io에서 실습할 예정이다. reactjs.org/docs/handling-events.html의 내용을 바탕으로 재정리한다. 이하 자바스크립트는 Js라고 명칭 한다. React의 요소로 이벤트를 처리하는것은 DOM과 유사하지만, 몇가지 구문 차이가 있다. - 소문자가 아닌 camelCase를 사용한다. - JSX를 이용하여 "문자열"이 아닌 이벤트 핸들러로 함수를 전달한다. 버튼 //HTML Version 버튼 // React Version 또 다른 차이점은 React에서 기본 동작을 방지하기 위해 false를 반환 할 수 없다 preventDefault를 명시적으로 호출해야한다. Click me 새 페이지를 여는 기본 링크 동작을 방지하는 방법_HTML i..

확실한 정보전달을 위하여 codesandbox.io에서 실습할 예정이다. reactjs.org/docs/state-and-lifecycle.html의 내용을 바탕으로 재정리한다. 이하 자바스크립트는 Js라고 명칭 한다. State(상태) 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값. 함수 컴포넌트에서는 사용할 수 없다, 클래스 컴포넌트에서만 사용된다. //16.8 버전 이후 Hooks를 통해 사용할 수 있게 되었다. state를 수정할때는 setState()를 사용해야 한다. state 사용해보기 import React from "react"; function App() { return ( ); } //Comment 컴포넌트 사용 class Introduce extends React.Compo..

확실한 정보전달을 위하여 codesandbox.io에서 실습할 예정이다. reactjs.org/docs/components-and-props.html의 내용을 바탕으로 재정리한다. 이하 자바스크립트는 Js라고 명칭 한다. Props(소품) 컴포넌트를 함수, 클래스 어떤 것으로 선언하든 자체의 props를 수정해서는 안된다. 프롭스는 변할 수 없는 데이터이다. props의 이름을 임의로 지정해줄 수 있다. props를 다룰때는 순수 함수처럼 동작해야 한다. props는 부모로 컴포넌트로부터 자식 컴포넌트로 전달한다. Component 리액트는 Component(구성요소) 단위로 개발을 한다. 하나의 의미를 가진 독립적인 단위 모듈을 사용한다. 코드가 직관적이고 재사용성이 올라간다. 컴포넌트란 하나의 커스텀..

ko.reactjs.org/docs/rendering-elements.html의 내용을 바탕으로 재정리한다. 이하 자바스크립트는 Js라고 명칭 한다. 엘리먼트는 React의 가장 작은 단위이며 화면에 표시할 내용을 기술한다. const element = Hello, world ; 브라우저의 DOM 엘리먼트와 달리 React의 엘리먼트는 일반 객체처럼 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. ***컴포넌트의 엘리먼트와 혼동할 수 있다. 엘리먼트는 컴포넌트의 구성 요소이다 DOM에 엘리먼트 렌더링 하기 HTML 파일 어딘가 태그가 있다고 가정해본다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 "루트"DOM 노드라고 한다. ..

JSX를 코드로 알아보기 전, 확실한 정보전달을 위하여 codesandbox.io에서 실습할 예정이다. ko.reactjs.org/docs/introducing-jsx.html의 내용을 바탕으로 재정리한다. 이하 자바스크립트는 Js라고 명칭 한다. JSX는 Js의 확장 문법이다 const element = Hello, world! ; 여기서 선언된 element는 문자열도, HTML도 아니다. JSX라고하며 Js의 확장 문법이며, Js의 기능을 포함하고 있다. UI가 어떻게 생겨야 하는지 설명하기 위해 리액트와 함께 사용되는 것을 권장한다. JSX는 리액트의 엘리먼트()를 생성한다. 리액트에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 ..