React 의 props 활용하기 - codepen
Posted by 심재운 블로그
https://codepen.io/shimjaewoon/pen/xzOowp?editors=1010<div id="root" />;class Codelab extends React.Component{ render(){ return( <div> <h1>hello {this.props.name}</h1> <div>{this.props.children}</d..
프로그램 강좌 및 데이터베이스 및 다양한 정보 제공
Comments (2)
Comments
Comments
Comments
https://codepen.io/shimjaewoon/pen/xzOowp?editors=1010<div id="root" />;class Codelab extends React.Component{ render(){ return( <div> <h1>hello {this.props.name}</h1> <div>{this.props.children}</d..
https://stackoverflow.com/a/105074function guid() { return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } function s4() { return Math.floor((1 + Math.random()) * 0x10000) .toString(16) .substring(1); } ..
https://www.digitalocean.com/community/tutorials/how-to-use-vue-js-and-axios-to-display-data-from-an-apilist.html<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation..
IFRAME과의 domain 간 통신http://softwareas.com/cross-domain-communication-with-iframes/HTML5 시대의 업데이트 (2011 년 5 월 6 일)이 게시물은 수년에 걸쳐 크게 논평되고 연결되어 왔으며 계속해서 많은 트래픽이 발생하므로이 중 많은 부분이 최신 브라우저와 관련성이 없음을 분명히해야합니다. 한편으로는 보안 정책을 조정하고 강화하여 여기 일부 기술을 더 이상 적합하지 않게 만..
iframe resizer 를 사용할 때 페이지간 이동시 화면 제일 위로 위치하기..https://davidjbradshaw.github.io/iframe-resizer/메인 페이지parentIFrame 을 사용할려면 enablePublicMethods 를 true 로 설정해야 사용 가능 합니다.<!DOCTYPE html><html><head> <meta charset="utf-8..
VueJS 관련 샘플 사이트http://www.vuescript.com/http://vuejsexamples.com/https://vuejsfeed.com/
keyup 에 delay 딜레이 설정하기1. 함수를 별도로 빼서 clearTimeout 함수로 사용하기<input class="title" name="input" /><script type="text/javascript"> var itcdelay = (function () { // Function var itcTimer = 0; return function (callback, ms) ..
react.js 로 gatsby.js 를 활용하여 IIS 환경에 구동시키기reactjs 를 구현함에 있어서 static site generator 를 만들어 보기 위해 gatsby.js 를 사용해 보기로 하였습니다.https://www.gatsbyjs.org/1. node.js 를 설치합니다. (https://nodejs.org/en/download/)2. gatsby 의 cli 를 npm 명령어로 설치합니다.npm install --global g..
nanumsquare.css /* * Nanum Square Web Fonts * Copyright (c) 2010, NAVER Corporation (http://www.nhncorp.com) */@font-face { font-family: "NanumSquareLight"; src: url(/font/NanumSquareL.eot); src: url(/font/NanumSquareL.eot?#iefix) format('embedd..
웹개발하면서 폰트 사이즈에 대한 pt, px, em percent 등 사용하는데 정확하게 비교하는 게 없어서 봤더니 해당 아래 사이트에서 리스트로 잘 보여주네요.https://websemantics.uk/articles/font-size-conversion/PointPixelEmPercentKeywordDefault sans-serif6pt8px0.5em50%Sample7pt9px0.55em55%Sample7.5pt10px0.625em62.5%x-s..
http://도메인?analy=1000 이런식으로 들어오면 자바스크립트로 파싱해서 piwik 에서 처리한다.<script> var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.location.search.substr..
iframeresizer 활용행복얼라이언스부모창<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"><head> <title&g..
보통 비동기 화면을 구현 하는 중에 , 뒤로가기 back 버튼 마우스를 클릭할 때가 있습니다.비동기 화면은 동적으로 랜더링 하므로 브라우저에서 url 주소값을 저장하지 않아 제일 첫페이지로 이동하게 됩니다.따라서 브라우저에 url 주소값을 직접 스크립트로 알려주는 방법이 있는데요.window.history.pushState() 함수를 사용해서 브라우저 히스토리를 조작할 수 있습니다.자세한 내용은 https://developer.mozilla..
package.json 이 존재하는데, 몇년 지난 버전인지라 종속된 모든 컴포넌트를 최신버전으로 한번에 갱신해주는 방법을 찾아 봤습니다.$ npm install -g npm-check-updates$ npm-check-updates -u$ npm install 자세한 내용은 아래 사이트 참고하세요.https://www.npmjs.com/package/npm-check-updates
expo 에서 push notifications tool 을 온라인 화면에서 제공해 주는데요.https://expo.io/dashboard/notifications해당 툴을 테스트로 사용할 땐, push 의 token 값은 애뮬레이터에서 얻을 수 없고 꼭 안드로이드나 아이폰 기기에서 얻을 수 있습니다. import React, { Component } from 'react';import { StyleSheet, Text, View ..
javascript 에서 this 키워드는 기본적으로 전역 객체를 참조합니다. 그래서 this.변수에 값을 할당하면 전역 객체에 할당이 됩니다. 그리고 기본적인 setTimeout 으로 호출하면 기본적으로 this 가 전역객체를 바라봅니다.하지만 object 를 바라보게 this 를 조정할 수도 있는데 이때 bind, appy, call 함수로 object 를 넘기면 전역 객체가 아닌 object 의 객체를 바라봅니다.this.lu..
JavaScript에는 전역 및 지역의 두 가지 범위가 있습니다. 함수 정의의 외부에 선언된 변수는 전역 변수이며 프로그램 전체에서 이 값에 액세스하여 수정할 수 있습니다. 함수 정의의 내부에 선언된 변수는 지역 변수입니다. 이 변수는 함수가 실행될 때마다 만들어지고 소멸되므로 함수 외부의 코드에서 액세스할 수 없습니다. 블록 범위 변수의 특별한 경우를 제외하고는 Java..
VUE.JS 소스이며, 이전 다음 버튼을 누르면 버튼 누른 엑션에 맞게, 이전 다음의 template 에 기재되어 있는 html 을 바인딩 처리 해 줍니다.<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>06-16</title> <script src="https://unpkg.com/vue/dist/vue.min..
Expo 는 말대로 무료이며 오픈소스이고, React 와 JavaScript 를 사용하여 ios 그리고 안드로이드를 native 하게끔 도와주는 것이라고 생각하면 됩니다. 사이트 주소는 https://expo.io/ 입니다. 우선 회원가입을 합니다.로그인을 하면 Tools 라는 메뉴가 있습니다. 이를 선택하시고, 5가지 아이콘 중에 목록중에 XDE 를 선택합니다.화살표에 표기되어 있는 download from github..
https://highlightjs.org/<link rel="stylesheet" href="/path/to/styles/default.css"><script src="/path/to/highlight.pack.js"></script><script>hljs.initHighlightingOnLoad();</script>만약 언어가 c# 이면 html 대신 cs 라고 기재하면 됩니다.<pre&..
select 태그 값 중에 특정 하나의 option 을 비활성화 시켜서 클릭이 안되도록 하는 방법이 있는데요.간단하게 option 의 속성 중 disabled 를 기재하면 글은 보이지만 선택이 되지 않습니다.https://www.w3schools.com/tags/att_option_disabled.asp<select> <option value="volvo" disabled>Volvo</..
엑셀에 너무 많은 데이터가 있는데, 이걸 퍼블리싱 하기엔 너무 노가다? 인지라,,, 이를 한번에 처리해 주는 센스 있는 사이트가 있더군요.https://codebeautify.org/ 여기 사이트인데, 정말 많은 기능을 제공해주는 온라인 사이트 이더군요.그 중에 excel to html 을 선택합니다.나중에 즐겨사용한다면 즐겨찾기로 https://codebeautify.org/excel-to-html 하시면 됩니다.여기서 browser 를 선택하면 ..
https://developers.google.com/youtube/iframe_api_reference?hl=ko유투브 API의 JavaScript 함수를 사용하여, 재생을 위해 동영상을 대기열에 넣거나, 동영상을 재생, 일시중지 또는 중지 및 플레이어 볼륨을 조정, 재생 중인 동영상에 대한 정보들을 가져올 수 있습니다. 또한 플레이어 상태 변경 또는 동영상 재생 품질 변경과 같은 특정 플레이어 이벤트에 대한 응답으로 실행되는 이벤트 리..
http://www.fbrell.com/examples/ Examples Facebook Login 1 - Basic Login 2 - Checking and Tracking Login Status 3 - Requesting Additional Permissions 4 - Putting it all together Graph API 1 - Reading 2 - Readi..
https://github.com/facebookincubator/create-react-appnpm 을 설치하고 나서 react 를 간단하게 실행해 보기 위해서 create-react-app 을 설치하고 프로젝트를 생성합니다.npm start 하면 크롬 새창이 뜨면서 브라우저에 실행이 됩니다.Quick Overviewnpm install -g create-react-app create-react-app my-app cd my-app/ npm st..
https://nodejs.org/en/download/ download 화면에서 mac 환경일 경우 marchintosh installer 를 선택합니다. 현재 시점에는 v6.11.3 버전의 pkg 파일이 다운로드 될 겁니다. 이를 설치 하시면 됩니다. [Homebrew를 통해 설치했을 경우] brew update brew upgrade node npm i..
https://github.com/customd/jquery-numberjQuery 1.6 이상에서 작동이 되며, 2015년 이후로 업그래이드 된 부분은 없네요.jquery-number 은 숫자 형태를 문자형태로 표현해 주는 부분인데, table 에 값이 숫자형태이고 이를 화면에 출력할 때 금액 형태로 콤마를 보여준다던가 소수점을 반올림 한다던가 할 때 유용합니다.Basic number formattingThe number method takes u..
Emitter는 모든 장치를 연결 하는 무료 오픈 소스 실시간 메시징 서비스 입니다. publish-subscribe 메시징 API는 속도와 보안을 위해 제작되었답니다. (IoT, 게임, 앱 및 실시간 웹용 인프라)emitter.io는 MQTT 프로토콜을 기반으로 하고, 메시지 저장을 특징으로하는 분산 형, 확장 성 및 내결함성 publish-subscribe 메시징 플랫폼입니다.낮은 대기 시간, 바이너리 메시징 ..
자바스크립트 만으로 파일을 다운로드 하는 방법을 찾긴 했는데, IE 및 EDGE 브라우저에서 새창 띄우는 부분이 조금 이슈가 있네요.PC 환경의 크롬에서는 잘 되고 있는것을 확인했습니다. 모바일 기기 환경에서는 안되니 참고하시기 바랍니다.참고 사이트 : http://fil.wo.tc/742 var browserName = undefined; var userAgent = navigator.userAgent; switch (true) { ..