본문 바로가기
반응형

Programming60

[VSC] vim 불편한 특수키 조정 개발 IDE 툴인 Visual Studio Code(이하 vsc)는 다양한 확장팩(? 플러그인?)을 제공합니다. 근래 copilot과 더불어 copilot chat이 지원되는데, 이 툴은 2023년 8월 8일 현재에도 vsc에서만 제공되고 있어서, 위상이 끝없이 올라가는 거 같다. (막상 copilot chat을 사용하면서 chatgpt를 일정 기대한 나에게는 조금 아쉬운 내용도 있다.) JetBrain 툴이 메모리는 많이 먹지만 그 편리함이란.. 하지만 비용때문에 회사 지원도 어느 정도 정리되고 vsc로 가려는 움직임이 있기 때문에, 여러 조건들의 변화로 인해 vsc로 넘어가려고 노력 중입니다. 저는 윈도 GUI 기반 프로그래머이지만 웬지 vi(m) 툴이 먼가 있어 보입니다. (과거 어느 여자 개발자가.. 2023. 8. 8.
[laravel] docker 환경에서 설치하기 with sail 주의) laravel 최신 버전을 기본 설치 합니다. 하위 버전으로 내리는 거 힘들어요. 하지 마세요. ^^ 잠시 본업에 충실하면 세상은 많이 변하고 있다. 본업의 해야할 것과 개인적으로 하고 싶은 것이 다르면 딜레마에 빠진다. laravel 솔루션을 보면 laravel/app을 사용하지 않고 있다. 괜히 봤다. 궁금했다.. 과거에 해봤던 팩키지 생성.. 으로 하는데.. 그렇다면 팩키지도 만들어 봐야 하는 거 아닌가? 이참에 하는 김에 빠방한 윈도 환경도 세팅을 했으니, docker 환경에서 wsl을 사용해서 해보자~ 싶었다. 괜한 생각은 꼬리에 꼬리를 물고... =_=;; 그렇게 환경은 정리가 되었으니... windows11 pro + wsl 2 + Ubuntu20.04.6 docker desktop .. 2023. 7. 12.
크롬 프로필에서 개발 중인 크롬 익스텐션 등록 방법 크롬에서 프로필 별로 사용이 가능하도록 지원해 줍니다. 구글 로그인 계정별로 동기화도 가능합니다. 그렇다면 크롬 익스텐션 앱도 프로필별로 사용이 가능할까요? 가능하더군요~! 다만 첫 화면에서 확장프로그램 관리 아이콘이 없어서 순간 당황했습니다. 프로필 별로 확장 프로그램 사용하기 기존 확장프로그램 설치와 동일 합니다. 다만 첫화면에 확장 프로그램 관리 아이콘이 없어서 주소 표시줄에서 직접 입력해서 진입을 해야 합니다. chrome://extensions 확장 프로그램을 설치해 보신 분은 익숙한 "확장 프로그램" 페이지로 진입을 합니다. 확장 프로그램 관리 페이지에서 "개발자 모드"를 선택하면 "압축해제된..."과 함께 총 3개의 버튼이 나옵니다. "압축해제된 확장 프로그램을 로드합니다." 버튼을 클릭하면.. 2023. 4. 17.
[svelte 실무적용] #2. child 변수값을 parent 변수에 업데이트 하기 사이트가 복잡해져 가면 component 를 잘게 찢어서 사용하기에 한계가 있다. 이유는 상위 parent component 에서 하위 childe component 를 호출하는 거야 문제가 없겠지만, 하위 child component 내부에서 변경된 변수값을 상위 parent 에 전달하기 복잡하다. 복잡하지만 그래도 사이트를 만들어야 하니 해야지.. 참조페이지 https://svelte.dev/examples/component-bindings 1. dispatcher 사용 참조 페이지 : https://svelte.dev/tutorial/component-events 자주 애용하지만 복잡하다. vuejs 에서 $emit()과 거의 같은 역할을 한다. vuejs 를 하다 보니 아래 $emit과 동일한 걸.. 2022. 8. 12.
[TOOL] js 베이스 스트레스 테스트 툴 : k6 https://k6.io/ 설치(mac) brew install k6 기본 테스트 스크립트 샘플 # filename: script.js import http from 'k6/http'; import { sleep } from 'k6'; export default function () { http.get('https://test.k6.io'); sleep(1); } 기본 실행 방법 k6 run script.js VU (Virtual User) 추가 실행 k6 run --vus 10 --duration 30s script.js --vus : 동시접속자를 10명으로 유지 --duration : 30초 동안 vus 수를 유지 호출 옵션 vu, duration을 소스에 추가해서 실행 import http from.. 2022. 8. 5.
[svelte 실무적용] #1. 사용이유, html 에디터(quill), SEO 적용 샘플 SvelteJS 사용 이유? 빠르다니깐, 궁금해서~! 그런데 모르겠다. react, vue, svelte 모두 빌드한 js 소스를 서버에 올리고 다운로드 받아서 사용하는 진짜 프론트엔드 사이드 스크립트다. 중간의 내용이야 어찌저찌 해서 팩키징 결과물이 조금씩 틀려지기는 하겠지만, 그렇다고 속도 측면은 잘 모르겠다. react는 안써보고, vue랑 별반 차이가... 그냥 빠르다니깐.. 그런가? 하는데.. 알아서들 참조하시고~ 아직 vite, rollup 차이를 구분 못하고, 실무에 sveltejs를 적용해 보면서, 맨땅에 헤딩하는 심정으로 진행하면서 실무에 필요한 내용 중에 빠져 있거나, 샘플에서 커스터마이징이 필요한 내용들을 정리해서 올려 보겠다. typescript를 사용하는 이유? 정형화된 틀에 맞춰.. 2022. 8. 4.
[크롬:앱] 크롬 확장 프로그램 #1. Hello World 갑자기 크롬 확장 앱이 만들어 보고 싶어졌습니다. 몇년 전에 관심을 가지고 잠깐 보기는 했지만, 멀 만들지??? 하는 생각에 잠깐 보고, 이렇게 만드는 구나~~ 하고 말았는데, 유투브 동영상에 나오는 광고가 귀찮아서 없애볼까 하는 생각에 다시 크롭앱을 보기 시작했네요.. 크롬 관련된 개발할 수 있는 종류가 몇가지 됩니다. https://developer.chrome.com/docs/ Documentation - Chrome Developers Build the next generation of web experiences. developer.chrome.com 이중에서 페이지가 로딩되면 곧바로 실행되어야 하니, Extensions 항목을 먼저 공부해 봅니다. https://developer.chrome... 2022. 2. 21.
[GIT] .gitignore 사용 .gitignore ? github, gitlab 등으로 소스 관리 및 배포가 대세입니다. 하지만 개발하는 OS, 플랫폼, IDE 등 사용환경에 따라 각자 관리하는, 배포에 상관없는 파일이나 디렉토리가 생깁니다. 이 파일들을 제외하기 위해서 .gitignore 파일이 사용됩니다. 파일 생성 git init 사용 방법 // flutter 프로젝트 기준으로 정리합니다. // 지정된 파일 제외 .metadata // 특정 패턴 파일들 제외 *.lock // lock 확장자 파일 제외 .* // . 으로 시작하는 파일 제외 // 특정 디렉토리만 삭제. 맨앞에 / 붙여야 합니다. /android/ // 디렉토리 이하 특정 파일 제외 /android/*.lock // android/ 이하 lock 확장자 파일 들 제외 2021. 3. 19.
[flutter] FlutterFire를 이용한 firebase 연동 #1. 설치 - iOS/macOS FlutterFire는 Flutter 앱으로 Firebase를 연동하는 Flutter 플러그인 세트 입니다. 기본은 macos 개발을 위한 정보 확인 중에 찾은 자료라서 플랫폼 별로 모두 설정 확인을 하도록 해보겠습니다. 주의) 1주일 가까이 firebase와 씨름을 한 거 같습니다. 상황이 m1 맥미니를 구입한지 얼마 안되었고, flutter 2.0에 깜짝 발표된 뒤라, 먼가 정리되지 않은 상태에서 버전 이슈라고만 생각을 했었는데... ㅠ,.ㅠ 더보기 기본 시스템 환경 Mac Mini 2020 M1 (8core CPU, 8core GPU, 8GB Ram), macOS Big Sur 11.2.2 Flutter 2.0.2 / Dart 2.12.12 / CocoaPods 1.10.1 Android Studi.. 2021. 3. 15.
[flutter] setState 없이 상태 값 변경 - ValueNotifier 하나의 StatefulWidget에서 상태 값을 관리하는 방법은 setState()를 사용하는 것입니다. setState() 없이 상태 값을 관리할 수도 있는데, ValueNotifier를 사용하는 것입니다. ValueNotifier가 좋은 것은 다른 위젯에서 변경한 상태값을 적용할 수 있습니다. setState() 없이 상태값을 변경하는 예제 class MyHomePage extends StatefulWidget { MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHome.. 2021. 3. 12.
[MAC M1] laravel + valet + php7.3 다운그레이드 방법 맥 M1에서 지원하는 PHP 기본 버전은 8.0.3 입니다. 터미널 사용 버전을 다운그레이드 하는 것은 쉬운데, 웹은 여전히 8.0이 사용되고 있었습니다. 웹서버는 valet을 사용하고 있었는데, 생각보다 버전 변경하는 것이 쉽네요. 매뉴얼을 대충 보면 안됩니다. ^^ ※ 아래 내용은 모두 로제타로 실행한 터미널에서 실행해야 합니다. 현재 m1에서는 php 8.0 이상만 지원하는 것으로 보입니다. % php -v PHP 8.0.3 (cli) (built: Mar 4 2021 20:45:17) ( NTS ) Copyright (c) The PHP Group Zend Engine v4.0.3, Copyright (c) Zend Technologies with Zend OPcache v8.0.3, Copyri.. 2021. 3. 10.
[MAC M1] laravel + vuejs + vuetify 설치 php, laravel, vuejs, vuetify 설치 brew install php@7.3 php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" ph.. 2021. 3. 8.
[VueJs] amcharts3 사용하기 설치 npm install amcharts3 --save 사용 샘플 소스 오류 수정 import AmCharts from 'amcharts3' 위 형태로 하면 AmCharts.makeChart() 함수를 찾을 수 없다는 오류가 나와서 수정 참조 URL https://github.com/developerKumar/AmchartsUse 2020. 6. 19.
[Laravel] FCM을 이용해서 웹푸시 발송하기 https://picory.com/entry/Laravel-Web-Push-%EB%B0%9C%EC%86%A1%EA%B8%B0 얼마 전에 테스트 중이던 웹 푸시 소스가 사용자를 일정 수준으로 넘어서면서 인지, 아니면 원래 그런 건지 모르겠지만, 메시지는 전송했다는데, 테스트 하는 사람들은 받지 못했다고 하는 상황이 자주 연출이 되었다. 전송했다는데? 왜 안오지? 나는 잘되던데... 하다가 나도 받지 못하는 상황이 생기니... 이거 너무 불안정한데?? 싶어서 FCM을 사용하기로 하고 다시 정리를 해본다. 설치 composer require brozot/laravel-fcm config/app.php 설정 'providers' => [ // ... LaravelFCM\FCMServiceProvider::cla.. 2020. 6. 15.
[VueJs] API 기능 모음 (추가 중) history.back() this.$router.go(-1) UI 강제 업데이트 this.$forceUpdate() // string replace all let replaceAll = function (source, needle, target) { return source.split(needle).join(target) } // 를 변환 let decodeHTML = function (html) { let txt = document.createElement('textarea') txt.innerHTML = html return txt.value } 2020. 6. 7.
[og] 카카오톡 메시지에 URL 첨부시 제목이 URL로 나오는 경우 및 테스트 방법 6월 부터인가? 갑자기 카카오톡에 특정 사이트 URL을 전송하면 보여주던 이미지와 제목에서 이미지는 정상인데 제목이 문제가 되었다. 제목이 URL로만 보인다. 잘되는 것이 안되니 호기심이 생기네... 카카오톡은 어떤 것을 참조해서 제목을 가져오는 걸까? 카카오톡의 테스트 URL? 개발자 센터 일단 카카오톡 메시지로 전송이 되면 어떻게 되는지 미리 알수 있는 방법은 카카오톡 개발자 센터에 있다. 생뚱맞기는 하지만 카카오 스토리 > RESTAPI > 웹 페이지 스크롤링에서 테스트를 제공한다. [페이지 링크] 테스트는 간단하지만 개발자 센터에서 API 테스트기 때문에 액세스 토큰을 발급받아야 한다. 카카오톡 아이디만 있으면 되는 걸로 알고 있으니, 귀찮겠지만 테스트를 위해서 개발자센터에 등록 후 토큰을 발급 .. 2020. 6. 6.
[Laravel] Eloquent ORM, Query Builder로 실행한 full query 확인 개발 중 자주 쿼리를 확인하는 일이 있다. 그런데 ->toSql()로 하게 되면 바인딩 전 쿼리만 나와서 해당 값이 정상 들어갔는지 확인이 어려울 수 있다. 이번에는 mysql 4.x old 버전에 쿼리 질의를 할 일이 생겼는데, php 5.x 버전 부터 mysql 4.x 버전을 지원하지 않고, 어느 언어를 사용하더라도 4.x 버전을 미지원이라는 장벽을 맞이하게 되었다. 결국 원격으로 php 5.x 저 버전에 raw 쿼리를 던져서 질의 하도록 미들웨어 개념의 api를 만들었다. 기본 어드민 툴은 laravel에서 사용을 해야 하니 raw query를 생성해서 던지는 작업을 해야하는 경우가 생긴 것이다. 머 이유가 어찌 됐건 일단 바인딩된 최종 raw query 획득을 위한 작업을 진행하기 위해서 설정 작.. 2020. 5. 30.
[Linux] 가끔 필요한 내용 정리 n일 이전 생성 파일 보기 및 삭제 # n일 이전 생성 파일 보기 find 폴더/ -mtime +n find 폴더/ -mtime +n -print # n일 이전 생성 파일 삭제 find 폴더/ -mtime +n -delete find 폴더/ -mtime +n -exec rm {} \; 2020. 5. 18.
[Python] 텔레그램 채팅봇 만들기 요 근래 말이 많은 텔레그램입니다. 원격지 컴퓨터에 명령 실행할 방법을 찾다가, 메신저를 통해서 실행해 보자는 아이디어 차원에서 한번 챗봇을 보게 되었는데, 파이썬 + 텔레그램 봇 구성이 생각보다 쉬워 공유를 해봅니다. telepot 모듈 설치 pip install telepot --upgrade 소스 샘플 import telepot from telepot.loop import MessageLoop import time TOKEN_MAIN = 'BOT_TOKEN' StartMsg = """ BOT 기본 명령어 1. /help : 도움말 2. 안녕 """ # 특정 명령어가 입력할 때 반응 def execcommand(message, chat_id): args = message.split(' ') comma.. 2020. 5. 15.
[VueJs] vue-chartjs 로 멀티라인 그래프 그리기 머신러닝 같은 강좌나 책을 읽다 보면 간혹 마주치는 단어가 시계열 혹은 시계열화 이란 것입니다. 말은 어려워 보이는데 영어로는 "time series" 라고 합니다. 한글은 어렵지만 영어는 어느 정도 뜻이 이해가 갑니다. 그냥 순차적으로 먼가 하는 거구나... 라는 센쑤~! 개발자들이 디비 등에서 추출한 정보는 보통 테이블 형식의 텍스트로 제공하는 경우가 많습니다. 이것을 보기 좋게 그래프 형태로 변형해서 보여주면, 직관적으로 이해하게 되고, 실시간 의사결정이 가능해 진다고 합니다. 예전부터 알고는 있었지만, 막상 그래프 표현은 좀 어렵기는 합니다. vuejs에서는 되게 쉽습니다. 시계열의 대표적인 것이 Line Chart 일 것 같아서, 소스로 좀더 쉽게 만들어 보도록 하겠습니다. Line Charts.. 2020. 5. 11.
배민의 우아한테크세미나 온라인 진행 관련 세미나 동영상: https://www.youtube.com/watch?v=BlEzbGTQ9Zs 우아한테크세미나 동영상 자료 2020년 5월 7일 개최한 "우아한테크세미나" 발표 내용은 아래와 같습니다. 발표자료 1부 - 엔티티 클래스 설계와 퍼시스턴스 프레임워크의 활용 * 발표자료 (원페이지뷰) : https://bit.ly/2YNxlV7 * 발표자료 (슬라이드) : https://benelog.github.io/entity-dev/ 2부 - Spring Data JDBC Advanced * 발표자료 : https://bit.ly/3fCkRpg * 참고코드 : https://bit.ly/2SFjwE8www.bit.ly/2YNxlV7 참 멋지네요. 2020. 5. 8.
반응형

티스토리툴바