"permissions": [

"activeTab" ,

"storage",

"background",

"tabs",

"alarms",

"notifications"

], -> 권한기능얻을것들

"icons": { "16": "doge16.png",

"32": "doge32.png",

"48": "doge48.png",

"128": "doge128.png" },->아이콘

 

"content_scripts": [

{

"matches": ["*://*.dogdrip.net/*"],

"js": ["dogdrip.js"]

}

], ->동작 사이트 결정

 

"background": {

"scripts": ["background.js"],

"persistent": false-> 백드라운드 유지 옵션

}, ->백그라운드 돌것들

 

 

 

"content_security_policy": "script-src 'self' https://code.jquery.com https://cdnjs.cloudflare.com/ https://stackpath.bootstrapcdn.com; object- src 'self'", ->CDN 크로스도메인 허용목록

 

 

 

 


'오락기 > Chrome' 카테고리의 다른 글

message  (0) 2018.10.12
storage  (0) 2018.10.12

메시지 패싱

 

Popup에서 content.js background 보낼때 사용했다.

 

Popup-> background

#popup

let port = chrome.extension.connect({

// name: "Sample Communication"

})

// console.log(set)

port.postMessage(set)

port.onMessage.addListener(function(msg) {

// console.log("message recieved" + msg);

})

#background

chrome.extension.onConnect.addListener( (port) => {

// console.log("Connected .....")

port.onMessage.addListener( (msg) => {

~~~

});

 

})

 

 

 

Tab으로 보내기

#popup

chrome.tabs.query({}, tabs => {

tabs.forEach( tab => {

chrome.tabs.sendMessage(tab.id, type);

})

})

 

#content

chrome.runtime.onMessage.addListener(msgObj => {

type = msgObj

})

 

 

 

 

 

 

 

 


'오락기 > Chrome' 카테고리의 다른 글

manifest  (0) 2018.10.12
storage  (0) 2018.10.12

chrome.storage.sync.get( (result) =>{

// console.log(result)

if(result.block != undefined || result.block != null){

if(result.blockMemo ==undefined || result.block == null){

result.blockMemo = []

}

if(result.block.length !== result.blockMemo.length){

// console.log(result.block)

// console.log(result.blockMemo)

concatList(result.block , result.blockMemo)

}

drawGrid(result)

}

})

 

브라우저 쿠키에 저장하는 방식인거같다.

 

Sync local 두가지 형태로 저장  조회가 가능하다.

 

Get set으로 조회 저장한다.

 

chrome.storage.sync.set( {'interval' : check }, () => {

// console.log('set to ' , check)

})

 

 

콜백 방식으로하기때문에 코딩시 주의해야한다.

 

 

내경우엔 다름과같이 처리함

 

 

processStorage(callBack , member , {member : member , memo : memo })

 

const processStorage = (callback , addMember , memo) =>{

chrome.storage.sync.get( (items) => {

callback('block', items['block'] , addMember )

callback('blockMemo', items['blockMemo'] , memo )

})

}

const callBack = (key, val , addMember ) =>{

if(val == null || val == undefined ) {

val = []

}

val.push(addMember)

if(key == 'block'){

chrome.storage.sync.set( {'block' : val }, () => {

// console.log('set to data :' , val)

})

}else if(key == 'blockMemo'){

chrome.storage.sync.set( {'blockMemo' : val }, () => {

// console.log('set to data :' , val)

})

}

}

 

 

아직 이벤트부분을 사용못해봤따

 

Events

onChanged

Fired when one or more items change.

addListener

chrome.storage.onChanged.addListener(function callback)

 

출처: <https://developer.chrome.com/apps/storage>

 

 

 

 

 


'오락기 > Chrome' 카테고리의 다른 글

manifest  (0) 2018.10.12
message  (0) 2018.10.12

우선 먼지 확인해보면 

Refs and the DOM 

Refs provide a way to access DOM nodes or React elements created in the render method. 

In the typical React dataflow,props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. 

When to Use Refs 

There are a few good use cases for refs: 

  • Managing focus, text selection, or media playback. 

  • Triggering imperative animations. 

  • Integrating with third-party DOM libraries. 

Avoid using refs for anything that can be done declaratively. 

For example, instead of exposingopen() and close() methods on a Dialog component, pass an isOpen prop to it. 

 

 

 케이스는 컴포넌트에 있는 node width 받아와서 작업하는데 사용함 

 

constructor(props) { 

super(props) 

this.style 

this.gantt 

this.today = new Date() 

this.prevMonth = { display: "none"} 

this.nextMonth = { display: "none"} 

this.ref = React.createRef() 

this.state = { 

mouseEvent : false , 

} 

 

 

 

return <div  

className={className} id={isToday ? "today" : "otherDay" }  

onMouseOver={(event=>this._overEvent(event) }} 

onMouseOut={(event=> { this._outEvent(event 

}} 

onClick={(event=> { dayOnclick(event , this) } } 

onMouseDown={(event=>dayOnMouseDown(event , this) 

// this.gantt = <span>&nbsp;</span> 

}} 

onMouseUp={(event=>dayOnMouseUp(event , this 

// this.gantt = <span>&nbsp;</span> 

}} 

style={this._customStyle() } 

ref={this.ref} 

>  

 

 

 

 React.createRef()<-- 16.3부터 바뀐점들 

 

let nextWidth = this.ref.current.clientWidth+'px' 

this.prevMonth = { display: "inline" } 

this.nextMonth = { display: "inline" , 

left : nextWidth} 

 

가로길이 받아와서 이걸로 스타일 변경함 

 

 

 

 

마지막 next버튼의 위치를 이걸로 결정함 

 

 

해상도가 바뀌어도 그위치 그대로여야함 

 


'오락기 > react' 카테고리의 다른 글

react 용 bootstrap  (0) 2018.09.28
Route  (0) 2018.08.17
PropTypes  (0) 2018.08.17
노마드 코더님 영화 사이트 클론코딩  (0) 2018.08.17
lifecycle  (0) 2018.06.21

오브젝트 병합이다.

Json 형태의 데이터를 병합할수잇어서 좋은거같다.

 

let style

if(this.state.mouseEvent){

style = { backgroundColor: "lightgray" }

style = Object.assign(style, {fontSize : "20px"})

} else {

style = { backgroundColor: "white" }

}

return style

 

 

이런식으로 사용가능

 


'오락기 > js' 카테고리의 다른 글

로컬 이미지 브라우저에 바로 표시 DataURI  (0) 2018.09.28
날찌비교  (0) 2018.09.28
nodelist event  (0) 2018.09.28
Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17



Html

 

<h3>로컬에 있는 이미지를 바로 브라우저에 표시</h3>

<img id="preview" src="" width="700" alt="로컬에 있는 이미지가 보여지는 영역">

<a id="download" download="thumbnail.jpg" target="_blank">

    <img id="thumbnail" src="" width="100" alt="썸네일영역 (클릭하면 다운로드 가능)">

</a>

<input type="file" id="getfile" accept="image/*">

 

 

 

 

Css

 

img {

    margin: 1em 0;

    display: block;

    background: rgb(240, 240, 240);

    border: 1px solid rgb(0,0,0);

}

 

Js

 

var file = document.querySelector('#getfile');

 

file.onchange = function () {

    var fileList = file.files ;

   

    // 읽기

    var reader = new FileReader();

    reader.readAsDataURL(fileList [0]);

 

    //로드 한 후

    reader.onload = function  () {

        //로컬 이미지를 보여주기

        document.querySelector('#preview').src = reader.result;

       

        //썸네일 이미지 생성

        var tempImage = new Image(); //drawImage 메서드에 넣기 위해 이미지 객체화

        tempImage.src = reader.result; //data-uri를 이미지 객체에 주입

        tempImage.onload = function() {

            //리사이즈를 위해 캔버스 객체 생성

            var canvas = document.createElement('canvas');

            var canvasContext = canvas.getContext("2d");

           

            //캔버스 크기 설정

            canvas.width = 100; //가로 100px

            canvas.height = 100; //세로 100px

           

            //이미지를 캔버스에 그리기

            canvasContext.drawImage(this, 0, 0, 100, 100);

            //캔버스에 그린 이미지를 다시 data-uri 형태로 변환

            var dataURI = canvas.toDataURL("image/jpeg");

           

            //썸네일 이미지 보여주기

            document.querySelector('#thumbnail').src = dataURI;

           

            //썸네일 이미지를 다운로드할 수 있도록 링크 설정

            document.querySelector('#download').href = dataURI;

        };

    };

};

 





'오락기 > js' 카테고리의 다른 글

Object.assign()  (0) 2018.10.12
날찌비교  (0) 2018.09.28
nodelist event  (0) 2018.09.28
Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17

> , < , <=, >=같은 연산자 사용이 가능합니다.


==, !=, ===, !==같은 연산자를 쓰시려면 date.getTime()으로 시간으로비교 해야함



var d1 = new Date();
var d2 = new Date(d1);

console.log(d1 == d2);   // prints false (wrong!)
console.log(d1 === d2);  // prints false (wrong!)
console.log(d1 != d2);   // prints true  (wrong!)
console.log(d1 !== d2);  // prints true  (wrong!)
console.log(d1.getTime() === d2.getTime()); // prints true (correct)


'오락기 > js' 카테고리의 다른 글

Object.assign()  (0) 2018.10.12
로컬 이미지 브라우저에 바로 표시 DataURI  (0) 2018.09.28
nodelist event  (0) 2018.09.28
Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17

Ex)

let el = document.querySelectorAll('.day')

NodeList.prototype.addEventListener = (event, func) => {

this.forEach((content, item) => {

content.addEventListener(event, func)

})

}

 

el.addEventListener("mouseover", (e) =>{

console.log(e , "오버")

})

el.addEventListener("mouseout", (e) =>{

 console.log(e, "아웃")

})


'오락기 > js' 카테고리의 다른 글

로컬 이미지 브라우저에 바로 표시 DataURI  (0) 2018.09.28
날찌비교  (0) 2018.09.28
Array map  (0) 2018.08.17
fetch 와 XMLHttpRequest방식  (0) 2018.08.17
jQuery ajax  (0) 2017.04.19

const {

Button,

ButtonGroup,

} = Reactstrap;



}

componentDidMount(){

// 42 제작 = 7*6

// 시작

// console.log(new Date( this.year , this.today.getMonth() , 1).toLocaleDateString())

//

// console.log(new Date( this.year , this.today.getMonth()+1 , 0).toLocaleDateString())

//토요일=6

}

componentWillUnmount() {

}

_prevMonth = () => {

let dt = new Date(this.state.now)

dt.setMonth(dt.getMonth() - 1)

this.setState({

now : dt

})

}

_today = () => {

this.setState({

now : new Date()

})

}

_nextMonth = () => {

let dt = new Date(this.state.now)

dt.setMonth(dt.getMonth() + 1)

this.setState({

now : dt

})

}

_getFirstDate =(today) => {

return new Date( today.getFullYear() ,today.getMonth() , 1)

}

_getLastDate =(today) => {

return new Date( today.getFullYear() ,today.getMonth()+1 , 0)

}

_getDayOfWeek=(day) =>{

return this.days[day.getDay()]

}

_getPrevDay = (date) =>{

let target = new Date(date)

let dayNumber = new Date(date).getDay()

target.setDate(target.getDate()-dayNumber)

return target

}

_getDateformat = (date) =>{

return { yyyy : date.getFullYear(),

MM : date.getMonth()+1,

dd : date.getDate()

}

}

_getDayArray = () =>{

let arr = []

let firstDay = this._getFirstDate(this.state.now)

let preDay = this._getPrevDay(firstDay)

for(let i = 0 ; i < 42 ; i++){

let pushDate = new Date(preDay)

arr.push(this._setData(pushDate))

preDay.setDate(preDay.getDate()+1)

}

return arr

}

_setData = (date) =>{

return {

date : date,

dayOfWeek : this.days[date.getDay()],

isMonth : date.getMonth() == this.state.now.getMonth() ? true : false ,

isToday : date.toLocaleDateString() == new Date().toLocaleDateString() ? true : false

}

}

_getCalendar = () =>{

let list = this._getDayArray()

return list.map( (value , index) => {

return <Day

key={index}

day={value.date.getDate()}

month={value.date.getMonth()+1}

year={value.date.getMonth()}

dayOfWeek={value.dayOfWeek}

isMonth={value.isMonth}

isToday={value.isToday}

></Day>

})

}

_displayHeaderDate = () =>{

let dt = this.state.now

return dt.getFullYear()+' '+ parseInt(dt.getMonth()+1) +''

}

render() {

return (

<div className="outer">

<div className="header">

<h1>{this._displayHeaderDate()}</h1>

<div className="btnGroup" >

<ButtonGroup >

<Button onClick={this._prevMonth} >&lt;</Button>

<Button onClick={this._today} >Today</Button>

<Button onClick={this._nextMonth} >&gt;</Button>

</ButtonGroup>

{/* <button onClick={this._prevMonth}>&lt;</button>

<button onClick={this._today}>Today</button>

<button onClick={this._nextMonth}>&gt;</button> */}

</div>

</div>

<div className="main">

{this.state.now ? this._getCalendar() : '로딩'}

</div>

</div>

)

}

}


'오락기 > react' 카테고리의 다른 글

ref  (0) 2018.10.12
Route  (0) 2018.08.17
PropTypes  (0) 2018.08.17
노마드 코더님 영화 사이트 클론코딩  (0) 2018.08.17
lifecycle  (0) 2018.06.21


두가지 방식으로


//cors허용

// cors모듈 사용

import cors from 'cors'

app.use(cors())

//express 헤더 추가

app.all('/*', (req, res, next) => {

res.header("Access-Control-Allow-Origin", "*")

res.header("Access-Control-Allow-Headers", "X-Requested-With")

next();


}


현재 아래있는 헤더에 추가하는 방식으로 사용중






'오락기 > node' 카테고리의 다른 글

es6의 모듈  (0) 2018.08.17
새로 개발할 모니터링 리액트용 환경구성  (0) 2018.08.17
webpack  (0) 2018.08.17
ejs 익스프레스 자바스크립트 템플릿  (0) 2018.08.17
express routing static dir  (0) 2018.08.17

+ Recent posts