전체 글 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

[React] styled-components 사용 시 클래스 사용

styled-components /* style.js */ export const PageWrap = styled.div.attrs(props => ({}))` color: #1a1a1a; background-color: #ffec9e; `; /* index.js */ import * as Styles from '../styles'; 내용~~~~ 위 형식처럼 style.js 를 import 후 Style. 이후에 export 정의한 스타일명으로 사용 가능하다. 그런데 위 처럼 사용할 때, 여러 페이지에 PageWrap 처럼 동일한 스타일을 적용하면서 일부만 다르게 적용하고 싶을 때는 아래처럼 사용 가능. /* style.js */ export const PageWrap = styled.div.attrs(..

React 2023.03.22

[ChatGPT] API 연동하기

Chat GPT API를 연동해보자. 1. openai.com 에 가입 https://platform.openai.com/ OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com 2. API Key 생성 우측 상단 계정 아이콘 클릭 후, USER 에서 API Key를 발급 받는다. 주의할 점은, 키 생성 직후에 전체 키를 보여주는데, 이 때가 아니면 다시 키를 볼 수 없으니 꼭 적어놓도록 한다. 키를 잊어버리면 재발급 받아야 함. 3. 사용할 API를 선택한다. https://platform.openai.com/examples OpenAI API An API for accessing new AI models..

ChatGPT 2023.03.13

[Laravel] 파일 생성 시 권한 생성

파일 생성하는 방법 Storage 파사드 이용하여 put 메소드로 저장 // filesystems.php 에 세팅되어있는 'root' 경로로 접근하여 해당 파일명으로 생성 Storage::disk('log')->put('2023-03/2023-03-02-back.log', '내용'); 2. fopen 을 이용하여 파일 저장 // storage 내 해당하는 경로에 기존에 파일이 있는경우 덮어쓰기, 없는경우 새로 생성하기 $fp = fopen(storage_path('logs/2023-03/2023-03-02-back.log), 'w+'); fwrite($fp, ''); fclose($fp); 1번으로 생성 시, 파일 권한이 600 으로 생성되므로, shell 접속 시 vi 등으로 파일을 열지 못함 (per..

Laravel 2023.03.02
반응형