melius

Firebase 호스팅 시작하기 https://firebase.google.com/docs/hosting/quickstart Firebase 호스팅을 설정하기 전에 먼저 Firebase 프로젝트 생성해야 함 https://firebase.google.com/docs/web/setup/ * 호스팅만 하려면 앱까지 만들필요는 없음 1단계 Firebase CLI 설치 $ npm install -g firebase-tools 2단계 Firebase 로그인 Google에 로그인, 다음 명령어 실행 $ firebase login 3단계 프로젝트 초기화 $ firebase init Hosting 선택 (옵션은 나중에 수정가능) 연결할 Firebase 프로젝트를 선택 4단계 로컬 호스팅 테스트 index.html 파일..

https://threejs.org/ https://github.com/mrdoob/three.js/ Three.js는 WebGL를 이용한 3D 그래픽 라이브러리이다. 주요 구성요소는 아래와 같다. 1. Mesh (Object) Mesh 객체는 3D 화면을 구성하는 물체(Object)로서, Mesh 객체를 만들기 위해서는 형상정보(Geometry)와 재료정보(Material)를 정의해야한다. Mesh 객체가 만들어지면 설정값을 통해서 3D 공간상의 위치와 자세를 결정할 수 있다. let cubeGeometry = new THREE.BoxGeometry(2, 2, 2); let cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); let c..

https://reactjs.org/docs/react-component.html http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React 컴포넌트는 라이프 사이클을 가지며, 라이프 사이클에 따라 호출되는 메소드들이 있다. 생성 생성시에 호출되는 메소드는 아래와 같으며, 한번만 호출된다. 메소드 호출시기 및 기능 constructor(props) 객체 생성시 초기 state 설정, 입력된 props를 이용하여 state 설정가능 componentWillMount() DOM에 마운트되기 전 static getDerivedStateFromProps(props, state) props 입력시 입력된 props를 이용하여 state 변경, 반환값은..

하위요소 및 텍스트 노드 조작 하위요소 및 텍스트 노드를 읽고/쓰기가 가능하다. 문장 설명 $("div").html() 하위요소 읽기 $("div").html("hi") 하위요소 쓰기 $("div").text() 텍스트 노드 읽기 $("div").text("hi") 텍스트 노드 쓰기 See the Pen bGdwJjX by melius102 (@melius102) on CodePen. 태그 속성(Attribute)과 요소 속성(Property) 조작 attr와 prop의 동작은 기본적으로 일치하나, form 요소들은 사용자의 조작을 통해서 태그 속성값과 요소의 속성값이 다를 수 있다. 문장 설명 $("img").attr("alt") HTML 태그의 속성(Attribute) 값 읽기 $("img").att..

jQuery CDN https://code.jquery.com/ window.onload BOM의 window.onload 이벤트 핸들러와 동일한 코드는 아래와 같다. $(document).ready(function () {}); // or $(function() {}) Selector jQuery 선택자는 기본적으로 CSS 선택자와 같다. 선택자 설명 $("*") 전체선택 $("div") div 요소 선택 $("#id-name") id 선택 $(".class-name") class 선택 반환값은 jQuery이며, 선택된 요소를 배열의 형태로 가지는 유사배열이다. 즉, $("div")[0]은 HTMLElement 객체를 반환한다. 선택자 설명 $("div").parent() 부모요소 선택 $("div")..

CDN Links https://reactjs.org/docs/cdn-links.html React를 실행하기 위해서는 아래와 같이 관련 js 파일을 읽어 들여야 한다. React Element React 프로그램의 기본구조는 아래와 같다. React.createElement() 메소드는 구성할 DOM의 요소로 사용될 React Element를 생성하는 함수로서, 첫번째 인자는 태그종류, 두번째 인자는 태그속성, 마지막은 자식요소이다. React.createElement( type, [props], [...children]) JSX React.createElement() 메소드를 이용하여, DOM을 구성하는 것은 가독성이 매우 떨어진다. JSX문법을 이용하면 HTML과 같이 작성이 가능하다. JSX를 사..

https://github.com/theturtle32/WebSocket-Node https://github.com/theturtle32/WebSocket-Node/blob/master/docs/index.md websocket는 Node.js에서 WebSocket 통신을 가능하게 해주는 모듈이다. 설치 $ npm install websocket WebSocket 서버 실행 const WebSocketServer = require('websocket').server; const http = require('http'); const port = 3000; let server = http.createServer(function (req, res) { res.writeHead(404); res.end(); }..

https://github.com/websockets/ws https://github.com/websockets/ws/blob/master/doc/ws.md ws는 Node.js에서 WebSocket 통신을 가능하게 해주는 모듈이다. 브라우저에서는 Web API인 WebSocket 객체를 사용한다. 설치 $ npm install ws WebSocket 서버 실행 express 모듈을 이용하여 서버를 실행하는 방법은 아래와 같다. const express = require("express"); const WebSocket = require("ws"); const app = express(); app.set('port', process.env.PORT || 3000); const server = app.li..