본문 바로가기
반응형

IT314

10분만에 AI 그리기 서비스 만들기(Stable Diffusion 사용법) AI 서비스 중에 오픈소스로 공개된 Stable Diffusion 을 Colab 으로 연계해서 서비스를 바로 만들어 돌려볼 수 있다 장점10분안에 만들 수 있다로컬환경은 웹브라우저만 띄울 수 있으면 된다 단점colab 제한으로 하루에 100장 정도 만들면 GPU 제한 걸린다waifu diffusion 을 사용해서 img2img 가 아직 안된다(seed 연결로 변화된 이미지 생성이 아직 안됨) 만드는 방법waifu-diffusion 설명 페이지 접속colab 으로 연결사본 복사라이브러리 설치 및 실행서비스 도메인 연결 및 사용 waifu-diffusion 설명 페이지 접속https://huggingface.co/hakurei/waifu-diffusion위 사이트 접속하면 됩니다 colab 으로 연결waif.. 2022. 9. 22.
구글 코랩(colab) 사용제한 구글 코랩(Colab) 은 정말로 좋은 서비스 입니다무료 온라인 쥬피터 노트북 서비스 입니다(브라우저 내에서 Python 스크립트를 실행시키는 서비스) 파이썬 구성이 필요없고무료로 GPU 를 사용할 수 있고 (제한이 있음)공유가 편하다 (깃허브, 구글드라이브로 연결이 자유로움) 무료로 사용하기에도 충분하지만 몇가지 제한 사항이 있기에 작성해놓습니다.(제한 사항은 구글 정책에 의해서 언제든 변경될 수 있습니다) Colab 무료 요금제의 제한사항RAM : 12GB디스크 : 최대 107GBGPU 사용제한 : ?? (어느정도 사용하면 GPU 제한 걸렸다고 할당안해줌, 상한 비공개)90분 규칙 : 조작하지 않고 90분 지나면 리셋12시간 규칙 : 인스턴스가 최장 12시간 지나면 리셋 리소스 모니터를 통해서 RAM.. 2022. 9. 22.
iTerm2 실행속도 느려지면 Mac 용 터미널 서비스로 iTerm2 를 사용하는데iTerm2 - macOS Terminal ReplacementiTerm2 is a replacement for Terminal and the successor to iTermhttps://iterm2.com/실행속도가 점점 느려져서 조금이라도 빠르게 해보려고 합니다 속도측정방법for i in {1..5}; do /usr/bin/time $SHELL -i -c exit; done쉘에서 해당 명령어 실행시켜서 쉘의 실행속도를 체크합니다 속도가 느려지는 원인파악zsh의 zprof 를 추가한다~/.zshrc 를 열어서 첫 줄에 `zmodload zsh/zprof` 를 추가한다# ~/.zshrc zmodload zsh/zprof #쉘을 재실행한다 exec zs.. 2022. 9. 21.
Node.js 기본 정보 링크 설치방법Best Practicegoldbergyoni/nodebestpracticesFollow us on Twitter! @nodepractices 📗 Comprehensive 10 hours course on Node.js testing & quality best practices Read in a different language: CN , BR , RU ( ES, FR, HE, KR and TR in progress!) 🎉 Node.js best practices reached 40k stars: Thank you to each and every contributor who helped turning this project into what it is today!https://github.com/.. 2022. 9. 20.
Vue.js 기본정보 링크 📚Vue 기본Vue 인스턴스 Icon LibrariesVue-AwesomeVue UniconsVue Material DesignVuetify Vue Frontend 참고 사이트vue 로 만든 Admin 관리 페이지 https://github.com/caiya/vuejs-admin/blob/master/src/main.jsVuex에서 Store 활용방법Vue.js 에서 axios 통신 https://ux.stories.pe.kr/138?category=770389Vue Backend 참고 사이트AWS IAM 관리 js https://gist.github.com/intxparts/40fbff470c27d8f35a9b103bf34b9c31AWS IAM manager js https://github.com/ne.. 2022. 9. 20.
React 개발환경설정 1. 리액트 앱 생성npx create-react-app test-mocha2. 모카 설치# yarn 으로 설치 yarn add mocha --dev # npm 으로 설치 npm install mocha --save-dev3. 모카용 assertions 설치# yarn 으로 설치 yarn add chai chai-enzyme enzyme enzyme-adapter-react-16 cheerio --dev # npm 으로 설치 npm install chai chai-enzyme enzyme enzyme-adapter-react-16 cheerio --save-dev4. Babel 설치, 리액트 앱 용 Babel preset 설치# Commonjs 를 위한 babel 설치 # yarn 으로 설치 yarn a.. 2022. 9. 20.
환경변수설정 서버리스 환경에서 개발을 하면 여러 환경에서 실행이 되는데 중요한 정보들을 소스에서 분리 시켜서 관리 한다그럴때 사용하는 정보가 환경변수 (process.env) 이다 환경변수를 시스템 환경별로 관리하는 방법을 알아본다로컬PCdirenv : 폴더별로 환경변수를 설정하는 라이브러리cross-env : CLI 에서 환경변수를 설정하고 스크립트를 실행개발환경file 과 AWS ssm 으로 관리한다 : 환경변수를 file 에서 찾고 없으면 ssm 으로 찾는다file : config/dev.env.jsonssm : AWS Secrets Manager# serverless.yml custom: ssm: ${ssm:/aws/sampleApplication/${opt:stage, self:provider.stage}/.. 2022. 9. 20.
테스트도구 테스트 프레임워크mocha : https://mochajs.org/ jest : https://jestjs.io/ (facebook 에서 만든 테스트 프레임워크로 React 와 많이 사용)mocha구조describe( describe( it( ) it( ) ) describe( it( ) it( ) ) )Hookbefore() : 전체 테스트 전 => 테스트 전에 기본 세팅을 설정하는 용도 beforeEach() : 각 단위테스트 직전 afterEach() : 각 단위테스트 직후 after() : 전체 테스트 후 => before 에서 설정한 것들을 반환하는 용도assertion 라이브러리chai : 많이 사용하는 assertion library https://www.chaijs.com/Should : .. 2022. 9. 20.
앱 버전관리 Semantic Versioning Semantic Versioning소스 버전 Number 체계 에 대한 관리 방법이다MAJOR.MINOR.PATCHAPI 가 기존 버전과 호환되지 않으면 MAJOR version 변경호환이 되면서 기능이 추가 되면 MINOR version 변경버그 수정되면 PATCH version 변경공식문서Semantic Versioning 2.0.0한글번역본 Uploaded by N2T 2022. 9. 20.
코랩(colab) 한글 설치하기 코랩(colab)사용시 그래프에서 한글 깨지는 원인코랩의 운영체제는 리눅스한글폰트 설치가 되어 있지 않은 상태 해결방법한글폰트 설치코랩 런타임 다시 시작matplotlib 에서 한글폰트 설정 한글폰트 설치!sudo apt-get install -y fonts-nanum !sudo fc-cache -fv !rm ~/.cache/matplotlib -rf 코랩 런타임 다시 시작코랩내의 런타임 메뉴에서 런타임 다시 시작 matplotlib 에서 한글폰트 설정import platform, matplotlib from matplotlib import rc # '-' 기호 제대로 보이기 matplotlib.rcParams['axes.unicode_minus'] = False # 윈도우 if platform.syst.. 2022. 9. 15.
React Native 4가지 팁 키보드 숨기기 import {Keyboard} from 'react-native' Text 컴포넌트 내에 줄 바꿈\n 뉴라인 사용하면 됩니다{`Hi,\nMy Name Is Bora!`}로그 남기기console.log("data")Android:npx react-native log-androidiOS:npx react-native log-iosComponents 숨기고 보이고React Hook 에서 사용할 때const [showComponent, setShowComponent] = useState(false) return( {showComponent && (Hello)} {setShowComponent(true)}}>Click me )React Hook 없이 사용{this.state.isHidden ? :.. 2022. 9. 14.
Hexo 사이트 next 테마 적용 기존에 skyksit.com 을 운영하는데 Hexo 로 만들고 icarus 테마를 사용하고 있었다 지금은 Hexo + next 테마로 변경했다 next 테마를 선택하지 않은 이유 - 구글 애드센스를 지원하지 않는다 next 테마의 단점 해소최근 업데이트를 통해서 정식지원은 아니고 injection 할 수 있게 되었다 icarus 테마의 단점 발생 - 업데이트가 잘 되지 않는다 (오픈소스 최대 단점) - 다크모드를 지원하지 않는다 일단 Hexo 도 6.2.0 까지 업데이트 된 상태이고 오픈소스이다 보니 버려지는 기능과 테마들도 마구잡이고 생기는 마당에업데이트가 잘 안되는 테마를 유지할 이유가 없다 그리고 테마 변경은 생각보다 쉬워졌다 (과거에 테마를 copy 하던 방식이 아니라 npm 설치 방식으로 변경되.. 2022. 9. 8.
Babel+Webpack 설정방법 Babel ?자바스크립트 컴파일러로 최신 자바스크립트를 표준 자바스크립트로 변환해준다 (Transpiler) ES6 문법을 CommonJS 로 변환해서 모든환경에서 실행될 수 있게 해준다 ES6 모듈은 Chrome 61, FireFox 60, Safari 10.1, Edge 16 이상에서 사용할 수 있다NodeJS 는 CommonJS 밖에 인식을 못하기 때문에 Babel 을 사용해야 소스를 ES6 문법으로 사용할 수 있다babel 의 처리 방식은 polyfill 과 transform-runtime 방식이 있음polyfill : 구현체 전체 js 파일을 사용 - 사용하지 않는 기능도 변환transform-runtime : 실제 작업자가 사용한 기능에 대해서만 변환babel-polyfill 과 babel-p.. 2022. 8. 30.
VueX 사용법 정리 Vuex란Vuex 공식사이트Vuex 는 vue 의 상태관리 라이브러리 입니다일반적인 vue 에서 상태관리는 State 에 데이터를 저장하고 Actions 으로 State 를 변경합니다단순한 경우에는 사용이 가능하지만여러 Vue 가 상태를 공유해야 할 경우 ( 예 ) 로그인 여부, 로그인 아이디 ) 유지보수 하기 어려워집니다Vuex 는 일반 vue 의 상태관리를 확장해서 Mutations 라는 개념이 추가 되었습니다 (Actions 이 State 를 직접 변경하지 않고 Mutations 을 호출해서 State 를 변경하는 방법)Mutations 으로 변경하면 Vuex 가 State 를 관리해줍니다 단순한 Vue APP 은 Vuex 를 사용하지 않고 단순한 상태관리나 글로벌 이벤트 버스를 사용하고중대형 규모.. 2022. 8. 30.
이미지 pixel 로 변경 하는 서비스 (도트 이미지) ドット絵こんばーたイラストとかをドット絵っぽく変換するんだよhttps://app.monopro.org/pixel/ 이미지를 16비트 비트맵 이미지로 전환해주는 사이트 입니다 사진을 도트 그래픽으로 변환해줍니다 4MByte 이내 이미지 업로드 해서 변환하면 됩니다 소스도 깃허브로 공개되어 있으니 서버에 설치도 가능합니다 https://github.com/tsutsuji815/pixel_convert 파일 사이즈 4메가 이내16칼라도트사이즈 1~4개 Uploaded by N2T 2022. 8. 30.
Javascript 함수형 예제 const capitalizeWithoutSpaces = (str) => str .split('') .filter((char) => char.trim()) .map((char) => char.toUpperCase()) .join('');1. 배열에서 가장 작은 값 구하기const getSmallest = (arr) => { let smallest = Number.POSITIVE_INFINITY; for (const num of arr) { if (num arr.reduce((smallest, num) => Math.min(smallest, num));2. 배열.. 2022. 8. 30.
node 환경변수 관리하는 방법 cross-env ?모든 OS 환경에서 CLI 로 환경변수를 설정할 수 있다 테스트 하거나 배포할 때 환경을 설정하는 용도로 사용한다설치# npm npm i -s cross-env # Yarn yarn add cross-env사용cross-env NODE_ENV=production node src/index.js cross-env NODE_ENV=development node src/index.js cross-env NODE_ENV=localhost node src/index.js참조사이트kentcdodds/cross-envRun scripts that set and use environment variables across platforms Most Windows command prompts will .. 2022. 8. 29.
여러 버전의 node 설치관리(nvm) nvm : Node Version Manager여러 버전의 node 를 설치하고 사용할 버전을 선택할 수 있는 라이브러리 입니다nvm-sh/nvmnvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on these platforms: unix, macOS, and windows WSL. To install or update nvm, you should run the install script.https://github.com/nvm-sh/nvm윈.. 2022. 8. 29.
Git 명령어 정리 소스코드 관리를 위한 분산 버전 관리 시스템이다유사 프로그램은 SVN (Subversion) 이 있다공식문서Git 공식사이트Git 한국어 설명서Pro Git 서적 - 한글판 원격 repository 연결## origin connected to a remote repository git remote add origin ## returns a list of the remote repository git remote -v ## unconnected to a remote repository git remote remove origin ## change remote alias name git remote rename 상태확인git status git status --short git status -sb변경적용##.. 2022. 8. 26.
Git Commit Message 정리 커밋구분 리스트Copy of Untitled커밋구분설명FEAT(feature)개선 또는 기능 추가BUG(Bug Fix)버그 수정DOC(Documentation)문서 작업TST(Test)테스트 추가/수정BLD(Build)빌드 프로세스 관련 수정(yml)PERF(Performance)속도 개선CLN(Cleanup) 코드 정리 / 리팩토링커밋메시지 예제수정Copy of Untitled문장형식설명예제Fix AA를 수정합니다Fix stat cacheFix changelog entryFix broken executor search pathFix A in BB의 A를 수정합니다Fix calculation in process.uptime()Fix build warning in node_report.ccFix error.. 2022. 8. 26.
RESTful API 설계를 위한 참고 사이트 RESTful API RESTful API 설계 가이드https://sanghaklee.tistory.com/57REST API URI design 을 위한 7가지 Ruleshttps://blog.restcase.com/7-rules-for-rest-api-uri-design/5가지 REST API design 가이드라인https://blog.restcase.com/5-basic-rest-api-design-guidelines/REST API design 시 어려운점 5가지https://blog.restcase.com/top-5-rest-api-design-problems/ Uploaded by N2T 2022. 8. 26.
Regex 정규식 표현방법 정리 정규식은 프로그래밍을 하다보면 반드시 접할 수 밖에 없다Regular Expression정규 표현식 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.기본표현표현식설명^The Start문자열이 The Start 로 시작합니다The End$문자열이 The End 로 끝납니다startstart 가 들어있는 모든 문자열을 매칭합니다문자수량표현식설명ab*c0개 이상의 b 를 포함한 문자 ac, abc, abbc, abbbc 등ab+c1개 이상의 b 를 포함한 문자 abc, abbc, abbbc 등ab?c0개 또는 1개의 b 를 포함한 문자 ac, abcab{2}c2개의 b 를 포함한 문자 abbcab{2,}c2개 이상의 b 를 포함한 문자 abbc, abbbc, abbbbc .. 2022. 8. 26.
Vue Directive & Instance Properties 학습정리 Directive디렉티브설명예제비고v-textinnerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자그대로 보여줌v-htmlinnerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면에 구현함XSS(Cross Site Scripting) 공격에 주의v-showcss의 display 와 동일한 기능v-ifif 조건문을 구현함v-elseelse 조건문을 구현함v-else-ifelse if 조건문을 구현함v-forfor 반복문을 구현함 ... v-on엘리먼트에 이벤트 리스너를 연결합니다. v-on 은 생략 가능하다 v-on:click ⇒ @click 로 사용가능@속성 으로 단축해서 표현 가능하다v-bind태그와 태그사이의 값을 다루는 것이 아니라 태그의 속성을 변경할 때 사용함 v-bind 는 생.. 2022. 8. 25.
Vue Lifecycle 학습정리 Lifecycle Hooks라이프사이클 훅설명beforeCreateVue인스턴스가 생성되었지만 데이터관찰, 이벤트 감시가 설정 되기 전에 호출 됨createdVue인스턴스가 생성되고 데이터관찰, 계산형 속성, 메서드, 감시의 설정이 끝나면 호출 됨beforeMountDOM인 el 요소에 vue 인스턴스가 마운트 되기 전에 호출 됨mountedDOM인 el 요소에 vue 인스턴스가 마운트 된 후에 호출 됨beforeUpdate가상 DOM이 생성되기 전에 데이터가 변경될때 호출 됨updated데이터의 변경으로 인해 가상 DOM이 다시 렌더링된 후에 호출 됨. DOM에 종속성이 있는 계산은 이 단계에서 수행해야 함beforeDestroyVue 인스턴스가 제거 되기 전에 호출 됨destroyedVue 인스턴스가.. 2022. 8. 25.
Vue Event 학습정리 Vue.js 에서는 이벤트를 v-on 디렉티브를 사용해서 처리합니다.v-on 을 줄여서 @ 로 사용할 수 있습니다좋아요 좋아요 이벤트명설명click마우스를 클릭했을 때 실행함dblclick마우스를 더블 클릭했을 때 실행함mouseover마우스의 포인트가 요소 위로 올라왔을 때 실행함mouseout마우스의 포인트가 요소 밖으로 벗어났을 때 실행함mousemove마우스의 포인트가 이동했을 때 실행함mousedown마우스의 버튼을 눌렀을 때 실행함mouseup마우스의 버튼을 놓았을 때 실행함keydown키보드의 키를 눌렀을 때 실행함keyup키보드의 키를 놓았을 때 실행함keypress키보드의 키를 눌렀다가 놓았을 때 실행함change요소가 변경될 때 실행함submit이 제출될 때 실행함reset이 재설정될 .. 2022. 8. 25.
Vue Template Syntax 학습정리 문자표현콧수염 태그 {{ }} 를 사용한다Message: {{ msg }}HTML을 그대로 표현v-html 디렉티브를 사용한다 Using v-html directive: Using mustaches: {{ rawHtml }}HTML 속성표현v-bind:속성 또는 :속성 을 사용한다콧수염 태그 {{ }} 에서는 HTML 속성을 표현할 수 없다 boolean 속성은 표현 방식이 다르다ButtonisButtonDisabled 가 null, undefined, false 이면 disabled 속성이 button 에 포함되지 않는다Javascript 표현식콧수염 태그에 {{ }} 자바스크립트를 한 줄만 넣을 수 있다. 조건문은 넣을 수 없다 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }}.. 2022. 8. 25.
Vue Component 학습정리 Template 는 순수 HTML 코드만을 가지고 있다Component 는 HTML 템플릿과 데이터 세팅, 함수 정의 등 다양한 작업을 할 수 있다Component 를 활용하여 재사용성을 강화 할 수 있다Component 는 HTML 태그 같이 사용한다 Component 내부의 data 는 function 으로 만들어야 한다 Uploaded by N2T 2022. 8. 25.
Vue Rendering 학습정리 v-if : 조건부 랜더링a2는 100입니다 a2는 100이 아닙니다template 태그에서도 사용이 가능하다 (v-show 는 불가) data1 data2 v-show조건부 랜더링 인데 태그는 표시하고 display 속성으로 처리한다a7은 100입니다 a7은 100이 아닙니다v-if 와 다른 점은 태그가 전부 적용된다 display:none 속성으로 관리된다template 태그로 사용 못 한다 v-for반복 랜더링 {{idx}} : {{a1}} Uploaded by N2T 2022. 8. 25.
Vue Routing 학습정리 Getting Started | Vue RouterNote We will be using ES2015 in the code samples in the guide. Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details here. Creating a Single-page Application with Vue + Vue Router is dead simple.https://router.vuejs.org/guide/vue-routerhttp://jeonghwan-kim.github.io/2018/04/07/vue-router.html Upload.. 2022. 8. 25.
Vue Mixin 학습정리 Vuejs 에서 제공하는 Vue 객체에 필요한 기능을 재활용 할 때 사용한다한번 만든 기능을 여기 저기의 객체에서 공통으로 사용하고 싶을 때 쓴다 재사용 라이브러리라고 생각하면 된다 count 를 더하는 js 를 Mixin.js 파일로 만들고count 를 빼는 vue 파일에서 Mixin 을 선언하면 count 를 더하는 기능까지 사용할 수 있다 // Test.vue // countMixin.js let countMixin = { props: { count:{ default: 0 } }, methods:{ onClick(){ this.data++; } } }; export default countMixin; Uploaded by N2T 2022. 8. 25.
반응형

티스토리툴바