분류 전체보기 327

[Laravel] NCLOUD Object Storage(S3) 업로드

라라벨에서 NCLOUD Object Storage로 파일 업로드 하기 1. s3 라이브러리 설치 composer require league/flysystem-aws-s3-v3 2. env 세팅 # NCLOUD Object Storage NCLOUD_ACCESS_KEY_ID=sdfosdijf... NCLOUD_SECRET_ACCESS_KEY=dijsfid... NCLOUD_DEFAULT_REGION=kr-standard NCLOUD_BUCKET=my_bucket NCLOUD_ENDPOINT=https://kr.object.ncloudstorage.com 3. filesystems.php 세팅 // ncloud 세팅 'ncloud' => [ 'driver' => 's3', 'key' => env('NCLOU..

Laravel 2023.06.09

[크롬 익스텐션] 익스텐션 내 파일 접근하기

익스텐션이 지워졌는지 여부를 확인하기 위한 방법 중 하나로, 익스텐션 내에 있는 파일의 존재여부로 판단하는 방법. 퍼미션 세팅 manifest.json "web_accessible_resources": [ { "resources": ["images/icon16.png"], "matches": ["https://*.mydomain.com/*"] } ] resources 에는 접근할 수 있는 파일들의 목록을 적어준다. 이 때, 경로는 root 기준 matches 에는 접근을 허용하는 도메인을 적어준다. 익스텐션 내 파일 접근 방법 chrome-extension://[크롬 익스텐션ID]/images/icon16.png 위와 같은 형식으로 접근하면 된다. function detectExtension(extens..

Chrome Extension 2023.05.25

[크롬 익스텐션] chrome extension 설치 유무 확인

자신의 크롬익스텐션이 설치되었는지 확인하는 방법 두 가지. 1. cookie 를 이용한 방법 content-script.js // 익스텐션 설치 여부 구분자를 쿠키로 생성 if (document.cookie.indexOf('extension_downloaded') === -1){ // 익스텐션 설치안됨 document.cookie = "extension_downloaded=true"; } 익스텐션설치 여부를 구분할 페이지 if (document.cookie.indexOf('extension_downloaded') != -1){ alert("익스텐션이 설치되었습니다."); } else { alert("익스텐션이 설치되지 않았습니다."); } 2. DOM으로 태그삽입을 이용한 방법ㅇ content-scrip..

Chrome Extension 2023.05.10

[Docker] docker에 selenium 설치

로컬 폴더구조 selenium/ - docker-compose/ - selenium-local/ - selenium/ - Dockerfile docker-compose.yml - selenium-dev/ - selenium/ - Dockerfile docker-compose.yml index.py local과 dev 서버를 분리하여 compose 를 생성해서, local과 dev의 동작을 분리한다. 아래는 로컬 기준 파일임 Dockerfile FROM ubuntu # python 설치 및 셀레늄 사용 시 필요한 프로그램 설치 RUN apt-get update && apt-get install -y \ wget \ vim \ xvfb \ curl \ unzip \ python3 \ python3-pip \..

Docker 2023.05.10

[크롬 익스텐션] url 로 특정 탭 목록 가져와서 url 변경하기

1. 현재 떠 있는 탭 중에, 특정 url이 포함된 탭들을 가져온다. 2. 가져온 탭들을 새로운 url로 리로드 시킨다. (여기에 파라미터 전송 등 응용해서 사용 가능) manifest.json "permissions": [ "tabs", "scripting", "activeTab" ], "host_permissions": [ "https://*.google.com/*", "https://*.tistory.com/*" ] background.js let url = 'www.tistory.com' var count = 0; chrome.tabs.query({url: "https://www.google.com/*"}).then(function(res){ if(res.length > 0) { for(let i..

Chrome Extension 2023.05.08

[크롬 익스텐션] Message Passing 메시지 및 데이터 전달

content script 와 background 간 데이터 전달, content script 와 popup 간 데이터 전달, 이런식으로 웹페이지의 컨텍스트(content script)에서 다른 확장 컨텍스트로 데이터를 전달하는 방법 양방향으로 발신/수신 가능 content-script.js 발신부분 chrome.runtime.sendMessage({ name: 'tom' },function(response) { console.log(response.res); }); background.js 에서 수신하는 부분 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { let resName = request.name; /..

Chrome Extension 2023.05.03

[크롬 익스텐션] 내 웹페이지에서 새탭 띄우고 데이터 전달하기

1. 내 페이지 내에 dispatchEvent 로 이벤트를 발생시킨다. document.dispatchEvent( new CustomEvent('chrome-extension-test', { "detail" : {"name":"123"} }) ); 2. 크롬 익스텐션 content 페이지 내에 이벤트 리스너 등록 ./content-script.js function eventOn() { document.addEventListener('chrome-extension-test', function (e) { let name = e.detail.name; //웹페이지에서 전달한 데이터 window.open('https://www.google.com?name='+name); //새탭으로 크롬창을 띄운다 }); } ..

Chrome Extension 2023.04.27

[React] semantic-ui Button 커스텀 하기

기본 사용 /* index.js */ import {Button} from "semantic-ui-react"; location.href='/'}> 홈 이동 location.href='/'}> 홈 이동 location.href='/'}> 홈 이동 location.href='/'}> 홈 이동 커스텀 /* index.js */ import {Button} from "semantic-ui-react"; location.href='/'}> 홈 이동 /* style.js */ export const BtnWrap = styled.div.attrs(props => ({}))` margin-top: 25px; & .ui.button.btn-1 { color: #fff; padding: 5px 14px; border-..

React 2023.03.22
반응형