FILife

https://github.com/finaleaf/vue-sfc-scaffolding finaleaf/vue-sfc-scaffolding Contribute to finaleaf/vue-sfc-scaffolding development by creating an account on GitHub. github.com composer와 npm은 미리 설치한다. webpack.mix.js 파일에 작성해둔 내용이 있다면 백업 해 둔다. 프로젝트 디렉토리에 들어가서 아래와 같이 installer.sh 파일을 실행한다. wget https://raw.githubusercontent.com/finaleaf/vue-sfc-scaffolding/master/installer.sh && chmod +x installer...

.form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: absolute; top: 0; padding: 7px 0 0 13px; transition: all 200ms; opacity: 0.5; color: red; } .form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder { font-size: 75%; transform: translate3d(0, -100%, 0); opacity: 1; } 매우 잘 된다. 출처: stackoverflow.com/a/58736840 H..

라라벨 doc에도 나와있지만, 이해가 잘 안가서 겁나 헤매다 쓴다. 알다시피 Eloquent의 강력한 기능 중 하나는 relation 일것이다. 1:1 또는 1:n 관계 까지는 별 문제가 없었는데, 연결된 테이블과 연결된 테이블을 가져오는것이 어려웠다. 이런 경우 사용되는 메서드는 hasOneThrough, hasManyThrough, belongsToThrough 등이 있는데, 이것을 기록하려 한다. 먼저 테이블 구조는, 1. 카테고리 테이블 category (Model: Category) id INT, NN, AI, UQ name VARCHAR color VARCHAR created_at DATETIME 2. 카테고리와 상품을 연결하는 category_items (Model: CategoryItems..

위 구성에서 "Host key verification failed." 오류가 발생하는 경우다. 1. EC2 키 파일의 owner를 gitlab-runner 로 변경해준다. 단, 그룹은 유지. 2. 키 파일의 권한은 400 3. .gitlab-ci.yml 파일의 before_script 부분에 아래 세 줄을 넣어준다. - ssh-keyscan -H '{EC2-PUBLIC-DNS}' >> ~/.ssh/known_hosts - ssh-keyscan ec2-{EC2-PUBLIC-DNS} | sort -u - ~/.ssh/known_hosts -o ~/.ssh/known_hosts - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config 물론 {EC2..

링크로 대체함. https://soraji.github.io/front/2019/12/05/IE11blankVuejs/ [Vue.js] Vue를 적용하니 IE11에서 하얀화면(blank)으로 나올때 vue로 실컷 작업한뒤, chrome에서 신나게 작업을 하고 있는데, soraji.github.io 별거 다 해봤는데 저것만 먹히더라.

윈도우10 2004 업데이트가와 함께 WSL도 업데이트가 되었다. 처음에는 /mnt/d/projects 디렉토리를 mount하여 document_root 로 사용했으나, 찾아보니 /mnt 내에 위치한 파일은 제 속도가 나오지 않는다고 한다. /home 안에 새로 디렉토리를 만들었는데, 탐색기에서 접근할 방법이 막막했다. \\wsl$ 경로로 접근하면 된다기에 해봤더니 권한 오류가 발생한다. 이 경우는 IDE를 통해 해결되었다. intellij 계열이나 VScode 가 WSL 경로를 지원한다는듯 하다. 이후에 생긴 문제는 browsersync 사용 시 브라우저에서 접속이 안되는 것이었다. npm run watch 커맨드를 실행하면 브라우저 탭은 새로 열리는데 접속이 불가했다. 자동생성되는 3000번 포트가 ..

시원하게 설명 된 곳이 없어서 삽질하다 직접 쓴다. 다른 글들을 참고하여, Laravel과 webpack과 vue를 설치한다. [Laravel] resources/views/app.blade.php Laravel에서 view 가 있는 route는 얘가 다 한다고 보면 된다. /routes/web.php

기본적으로 라라벨은 위 커맨드 실행 시 app/ 디렉토리 아래 바로 model 파일을 생성한다. 개인적으로 용납할 수 없다. app/Models 아래에 model 파일을 생성하려면 php artisan make:model Models/ModelName 과 같이 해야 했는데, 아래와 같은 방법으로 해결 가능하다. 먼저 php artisan make:command ModelMakeCommand 를 실행해서 console command를 생성한다. 해당 파일의 내용을 아래 내용으로 덮어씌워, 프레임웍의 command를 override 시켜준다.

composer가 이렇게 메모리 먹는 하마인줄 몰랐다. 아래 커맨드를 실행하여 해결했다. 배포시스템에서 발생하는 경우 배포 대상 서버에서 실행한다. $ sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024 $ sudo /sbin/mkswap /var/swap.1 $ sudo /sbin/swapon /var/swap.1 출처: https://github.com/composer/composer/issues/945#issuecomment-8552757

이전 글 (https://fils.tistory.com/812)에서 설명했던 Deployer가 최근 문제를 일으켰다. deployer는 배포 시 release 디렉토리 내에 자동으로 번호를 매긴 디렉토리를 생성하고, 해당 디렉토리를 current 디렉토리로 symlink 설정하는 방식이다. 최근에 배포를 하려다 보니 이미 존재하는 마지막 번호 디렉토리에 배포를 시도하다 오류가 발생하는 일이 대부분이었다. 재미있는건 실패 후 재시도를 하면 배포가 됐다. 한참을 검색해서 찾아낸 원인은, slack 에 배포될 디렉토리를 미리 알리도록 했는데, 배포과정이 시작되기 전 {release_path} 변수를 미리 사용하면, 내부적으로 다음 배포 디렉토리가 이전에 사용 된 변수로 지정된다는 것이었다. 즉, 현재 배포 버..

흔하진 않지만 nusoap을 이용하는 API들을 사용해야 할때가 있다. 설정이 맞지 않으면 한글이 "???" 와 같이 표시된다. 아래와 같이 설정하면 정상적으로 표시 된다. $client = new nusoap_client(/*ENDPOINT*/); $client->decode_utf8 = FALSE; $client->soap_defencoding = "UTF-8"; $client->setHeaders("Content-Type: text/xml;charset=UTF-8"); 출처: https://stackoverflow.com/questions/20887830/return-utf-8-farsi-string-from-nusoap-webservice

방법 1. php.ini의 register_argc_argv 값을 On으로 설정. https://www.laravel.co.kr/posts/23 Laravel Korea #php composer.phar install Loading composer repositories with package information Installing dependencies - Installing laravel/framework (v4.0.0-BETA3) Downloading: 100% PHP Fatal error: Uncaught exception 'ErrorException' with message 'proc_open(): fork f www.laravel.co.kr 근데 지금은 이것도 안됨.. 방법 2. swap 메..

잘 정리 된 글이 있으므로 링크로 대체한다. https://wonism.github.io/node-sass-vendor/

비교적 최근에 윈도우10에는 Windows Subsystem Linux(WSL) 이라는 것이 생겼다. 윈도우상에서 리눅스를 돌리는 것이라 생각하면 되겠다. 다만 윈도우에 종속적인지라, 전체설치한 리눅스와는 달라서 손볼 부분들이 좀 있다. 난 물론 우분투 18.04를 설치했다. 기본으로 설치 된 ssh는 제대로 작동하지 않는 이슈가 있으므로, 지우고 새로 설치한다. $ sudo apt purge open-ssh $ sudo apt install open-ssh -y 다음으로, 웹서버를 구축할것이니 당연하게도 nginx, php-fpm을 설치한다. sudo apt install nginx php7.2-fpm -y php-fpm용 모듈은 필요한걸 알아서 설치 해 준다. nginx의 site-enabled에 적..

이번엔 꽤 복잡했다. 1. phpunit, gitlab-runner 설치 먼저 Laravel의 테스트 자동화를 도와줄 phpunit을 composer.json에 추가해준다. unit test 자동화를 위해 https://github.com/vigneshc91/laravel-test-generator 패키지를 documentation에 따라 설치하고, 불필요하거나 시스템에 영향을 미칠 수 있는 테스트 항목을 정리하여 셋팅 해 두었다. 추후 gitlab-runner 가 phpunit으로 테스트를 수행하려면 composer.json의 require-dev 항목에 들어있어야 한다. $ composer require --dev phpunit/phpunit ^8.3 해당 내용을 포함하여 저장소에 push 해 준다...

http://www.gurubee.net/article/50256 시간 입력 시 전의 값과 비교해서 입력하는건데.. 하음! 오라클 초보가 다시 한번 질문 올립니다 흑저장되어 있는 시간을 비교하여 신규값을 입력할때 중첩되면 오류 메시지를 뿌리는 쿼리 입니다.테이.. www.gurubee.net 마치 마법같다. 혹시 삭제될 때를 대비하여 내용을 복사 해 둔다. by 마농 [2010.09.10 13:17:09] -- cnt가 0 이면 정상 1 이면 중복 -- SELECT COUNT(*) cnt FROM 테이블 WHERE fr_time < :v_to_time AND to_time > :v_fr_time AND ROWNUM = 1 ; by 마농 [2010.09.10 15:20:57] 흔히들 기간 중복 체크 문제에..

* 리퍼비시 제품 구매로 사은품 이벤트 참가가 불가한 객관적 후기입니다. 최근 와이프가 유선 이어폰의 불편을 체감하기 시작 한 관계로, 사용하던 QCY T1 TWS 를 넘기고, 내가 사용할것을 새로 구매하는 조약이 체결되었다. 평소 성향대로 긴 시간을 들인 조사를 마친 끝에 채택 된 모델은 사진과 제목에 언급된 프리고S. 신품 8만원에 비해 상대적으로 2만원 가량 저렴한 리퍼비시 제품을 선택했다. 리퍼비시 제품 또한 음질에 불만족 하는 경우 일주일 이내 무조건 환불 가능 조건이 붙어있었다. 기존에 QCY T1을 사용했던 경험이 있으니, 일부 비교하여 소감을 적어두고자 한다. 1. 디자인 사실 디자인과는 별 상관 없는 성향과 직업인지라, 할말이 별로 없다. 다만 최근 매우 유행하던 "알리캡슐"과 같은 스타..

Laravel-mix + Vue 를 쓰다보니 귀찮은 일이 생겼다. 바로 npm 빌드 시 평소에는 dev 모드로 빌드해서 debug를 하고, 배포할땐 production 빌드를 해야 하는 점이다. 고민하다 sh를 짜기로 했다. 역할은 매우 간단하다. 1. 배포할 서버를 입력 받는다. 2. 커밋 메시지를 입력 받는다. (없으면 커밋이 안되니까) 3. 빌드한다 4. git add, git commit, git push를 차례대로 수행한다. 5. deployer로 배포한다. 먼저 vi나 touch 커맨드로 dep.sh 파일을 생성한다. chmod +x dep.sh 를 수행하여 실행 권한을 준다. sh는 아래와 같다. build="" st () { #해당하는 번호가 없으면 다시 선택할 수 있도록 함수 작성 ech..

참고1. https://github.com/appstract/laravel-blade-directives참고2. https://github.com/duncan3dc/blade blade template을 쓰다 보면, 레이아웃 내에 준비한 scripts나 styles 섹션에 각 태그를 넣어주는 일은 무척 귀찮다. @js(), @css() 와 같이 해결하려고 시도 해 봤다. 먼저 Providers/AppServiceProvider.php 에 아래와 같이 내용을 추가한다. public function boot() { Blade::directive('css', function ($css) { return ''; }); Blade::directive('js', function ($js) { return ''; }..

Facade를 생성하여 적용하는 방법은 이곳에 있다. https://hdtuto.com/article/laravel-55-create-custom-facade-example-from-scratch 요약하자면 사용할 클래스를 생성한다. (경로 무관, namespace 필요, 상속 불필요)php artisan make:provider 커맨드로 provider를 생성한다.provider의 register() 메서드에서는 물론 1에서 생성한 클래스를 returnapp/Facades 디렉토리에 1과 같은 이름으로 Facade 클래스 파일을 생성.config/app.php 의 provider와 aliases 배열에 생성한 것들을 추가해준다.composer dumpautoload 커맨드를 실행하면 Facade를 사용..

기본적으로 https://www.cikorea.net/bbs/view/tip?idx=18704 글을 참고하였다. 다만, parent::setInstance() 부분에서 Cannot access property Blade::$instance 오류가 계속 발생했다. 이 부분을 잡고 씨름 한 끝에, 아래와 같이 수정하여 작동하는 것을 확인했다. self::$blade = new BladeInstance(APPPATH . "views", APPPATH . "cache/blade/views", $directives); render()가 static method 이므로, 걍 편하게 Blade::render("dir.view") 와 같이 사용하면 된다.

Vue.js 가이드의 내용에 따라, keyup, keydown 등의 이벤트를 @keyup 디렉티브로 사용 해 왔다. https://vuejs.org/v2/guide/events.html#System-Modifier-Keys Event Handling — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 이곳을 보면 이벤트 디렉티브에 키 조합이 사용 가능한 것을 알수있다. alt+key 라던가, ctrl+key 라던가.. 대표적으로 @keyup.enter 를 많이 쓰게 되는데, 이 중 "enter" 부분은 key code로도 대체 가능하다. @keyup.enter == @keyup.13 input element 에서는 특정 키에 대해서 이벤트 ..

파일이 변경되면 브라우저를 자동으로 새로고침 해 주는 Browser-Sync 라는게 있다고 한다. 찾아보니 로컬서버의 경우는 매우 쉽게 설정이 가능한듯 했다. 하지만 나는 원격 서버 유저... (로컬 네트워크 내에 가상머신을 몇개 만들어 사용) 뭔짓을 해도 새로고침이 되지 않기에, 구글신께 빌어 계시를 받았다. [Laravel-mix 의 경우] 기본적으로 Browser-Sync가 dependency에 포함되어 있다. webpack.mix.js 파일에 셋팅만 해주면 된다. 윈도우의 hosts 파일을 변경하여 가상 도메인으로 활용중이므로, proxy 설정을 포함 해 준다. mix.browserSync({ proxy: 'http://my-virtual-domain.com', files: [ './dist/**..

webpack을 3에서 4로 업데이트 했다. 같은 툴인데 뭐가 얼마나 다르겠나 하고 시작했다. 많이 달랐다. 이 쉐키들... 일단 가장 중요한 요소로, CommonsChunkPlugin 이 deprecated 되어 사용할 수 없게 되었다. 대신 config.optimization.splitChunks 를 사용해야 한다. 샘플만 보고 따라했더니, 기존에 common 으로 묶었던 공통 js가 vendor.js 와 common.js 로 분리되었다. 게다가 css도 단일 파일로 만들던것이 직접 만든 css 파일들이 포함되지 않게 되어버렸다. 구글을 하루 종일 뒤진 끝에 분리 된 파일들을 병합할 수 있었다. 추가/변경 된 부분만 나열하자면 이렇다. (기존 entry 등은 대부분 동일하다) mode: "none",..

이런게 있다는걸 이제야 알았다. 심지어 5.4 이전 버전에서도 exlixir 라는 이름으로 존재했었다고 한다. 애초에 composer require를 통해 laravel을 설치했으니 그럴만도 하다. 기존 프로젝트에 npm i -S laravel-mix 를 할수도 있지만, 그 부분은 알아서 응용하는걸로... ~ 우분투 18.04, node와 npm 설치 된 것으로 가정 ~ 우선 OS에 laravel installer를 설치해준다. composer require global "laravel/installer" 다음으로 laravel 커맨드를 실행하기 위해 installer 커맨드의 PATH를 잡아줘야 한다. ~/.bashrc 를 열어 아래와 같이 PATH를 추가 해 준다. PATH=$PATH:~/.confi..

https://github.com/laravel/framework/pull/25408#issuecomment-418123476 보안 관련 문제로 인해 블레이드 템플릿의 @lang 지시어가 패치되었다고 한다. 기존에는 @lang("main.welcome") 과 같이 사용하면 다국어 설정의 HTML 태그들이 렌더되어 출력되었는데, 최근 버전(정확한 버전은 모르고 개인적으로 5.5.42 부터 확인했음)에서는 태그들이 그대로 출력된다. XSS 관련 이슈이며, 이후에도 롤백되지 않을것이라고 한다. 대안은 trans(or __) 함수로, {!! __("main.welcome") !!} 와 같이 사용해야 한다. 새로 배포한 사이트 메인에 태그가 다 보여서 개당황... @lang으로 HTML포함된 문자열을 많이 가지고..

사실 이건 deployer repository에 recipe가 있다. https://deployer.org/recipes/slack Composer로 이 레시피를 설치해서 사용하면 된다. Slack > Administration > Manage Apps > Custom integrations > Incoming Webhooks 로 들어가 Webhook을 새로 만들고, 해당 webhook url을 slack recipe에 셋팅해주면 된다. set('slack_webhook', 'https://hooks.slack.com/services/{YOUR_WEBHOOK}');이렇게. 이후 메뉴얼에 나온대로 slack_text, slack_success_text, slack_failure_text 를 설정하면 배포 ..

출처: https://www.linkedin.com/pulse/javascript-find-object-array-based-objects-property-rafael/ 출처에 설명이 매우 잘 되어있다. object array, 즉 이런걸 말하는거다. [{ id: 1, name: a},{ id: 2, name: b},{id: 3, name: c},...] 여기서 array에 속한 object의 특정 값을 찾아 해당 object를 반환 하는 방법을 검색 해 보았다. ES6에선 정만 간단히 아래와 같이 하면 된다고 한다. var obj = objArray.find(function (obj) { return obj.id === 3; }); 테스트 결과 잘 된다. ※ 이것은 버전과 관계없이 망할 IE에서는 작동..

blueimp-fileupload 플러그인이 webpack과 의존성 충돌이 발생하여 이것과 jquery, jquery-ui 등을 별도로 사용했었다. 오랜만에 생각이 나 구글을 다시 뒤져보니 해법이 있었다. 1. script-loader 설치 > npm install --save-dev script-loader 2. 기존 페이지 내의 태그를 제거하고, 해당 플러그인이 사용되는 js에 다음과 같이 import 시킨다. require('script-loader!blueimp-file-upload/js/vendor/jquery.ui.widget.js'); require('script-loader!blueimp-tmpl/js/tmpl.js'); require('script-loader!blueimp-load-im..

아래 링크를 따라 하면 해결. https://community.letsencrypt.org/t/solved-usr-local-sbin-certbot-auto-851-usr-local-sbin-certbot-auto-opt-eff-org-certbot-venv-bin-letsencrypt-not-found/42545 요약은 이렇다. rm -rf ~/.local/share/letsencrypt rm -rf /opt/eff.org/certbot/ 실행 후 재시도.