분류 전체보기

· Docker
도커에 Nginx + Laravel 를 실행시키는 가장 기본 형태의 도커 파일에 대해서 알아본다.필수사항1. docker 설치https://docs.docker.com/engine/install/  2. composer 설치https://getcomposer.org/ 3. docker compose 설치https://docs.docker.com/compose/install/  composer 가 설치되어 있다면 도커홈에서 Docker Desktop 만 설치하면 됨.  GitHub 에서 다운로드 하는 경우1. local PC 에서 실행하기git clone https://github.com/ssh521/laravel-nginx-docker.git laravel-nginx-dockercd laravel-ngi..
docker 를 사용하지 않고 Synology 기본 php 버전으로 설치 가능한 라라벨 버전은 8버전이다.$ php -vPHP 8.1.9 (cli) (built: Dec 6 2022 02:51:27) (NTS)Copyright (c) The PHP GroupZend Engine v4.1.9, Copyright (c) Zend Technologies 터미널에서 라라벨 프로젝트를 생성하면composer create-project laravel/laravel example-appCreating a "laravel/laravel" project at "./example-app"Cannot use laravel/laravel's latest version v11.5.1 as it requires php ^8.2..
리눅스 버전을 확인한다.커널정보 확인uname -a리눅스 버전 확인cat /etc/issue리눅스 버전 자세하게cat /etc/*release*리눅스 비트 32bit, 64bit 확인하기getconf LONG_BIT
· Tools
옵시디언에서 Copilot 플러그인 설치하고 Cursor 처럼 ChatGPT 를 이용해 보자. 자세한 설명은 아래 링크 참조. https://obsidian.yaver.com/Copilot%20for%20Obsidian Copilot for ObsidianObsidian 을 Cursor 처럼 사용하자.obsidian.yaver.com
· Laravel
intervention/image 패키지 설치composer require intervention/image 파일 수정vendor/archtechx/laravel-seo/src/Commands/GenerateFaviconsCommand.php // GD 드라이버 설정 방식 수정$manager = new ImageManager( driver: \Intervention\Image\Drivers\Gd\Driver::class); $this->comment('Generating ico...');$manager ->read($path) ->resize(32, 32) ->save(public_path('favicon.ico')); $this->comment('Generating png...'); $manager -..
· Laravel
폴더 구조를 간편하게 라우터로 변경하는 코드임.Route::get('/test/{foldername}/{filename}', function ($foldername, $filename) { return view('test.' . $foldername . '.' . $filename);})->name('test.dev'); @php$folder = "laravel";$path = $rootPath . "test/" . $folder;$pathname = "test." . $folder;$files = getFileName($path);@endphp@foreach ($files as $file ) {{ $file }} @endforeach
$attrsv-model = "form.name"v-bind="{ ...$attrs, class: null}"modelValue@input="$emit('update:modelValue', $event.target.value)"  TextInput.vue (컴포넌트) {{ label }}: {{ error }} {{ $attrs }}  Parents.vue (부모 컴포넌트) focus  랜더링 결과 [코드 분석해 보기] v-bind="{ ...$attrs, class: null }" 의 최종 랜더링 코드는{ "class": "pb-8 pr-6 w-full lg:w-1/2", "content": "content" } 이다..
... 점3개로 표현되는 Spread Operator 가 나온 이유는 배열 또는 Object 복사를 손쉽게 하기 위해서다. - 모든 괄호를 없애주는 기호- 대괄호 또는 중괄호를 제거해 주는 연산자 1. 배열 합치기var a = [1,2,3];var b = [4,5];var c = [...a, ...b];c = [1,2,3,4,5] 배열은 참조가 변수에 저장되기 때문에 값을 복사하기 위해서는 실제 데이타를 복사해야 하는데, 이를 손쉽게 만들수 있다. 2. 객체 합치기const a = { name: 'kim', age: 30,}const b = { address: 'Seoul',}const c = {...a, ...b} const c = { name: 'kim', age: 30, address: 'Se..
플러그인 설치하기 설정 > 커뮤니티 플러그인 > 탐색 > Obsius Publish 검색 파일명에서 마우스 오른쪽 버튼을 클릭하면 Publish to Obsius 선택 > 내용이 인터넷에서 공유됨 > 클립보드에 링크가 복사된다. https://obsius.site/0g6505551110385l1x5d 이제 생성된 링크를 통해서 인터넷에서 누구나 볼 수 있게 된다. 공개한 이후   수정, URL, 제거 메뉴를 볼 수 있다. css, 첨부 이미지 등은 공유 안되지만, 간단한 내용은 공유 할 수 있다.
공식링크 : https://devtools.vuejs.org/getting-started/introduction  3가지 방법 제공. 크롬 확장프로그램 설치 링크 :https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=ext_sidebar Vue.js devtools - Chrome 웹 스토어DevTools browser extension for Vue.jschromewebstore.google.com 크롬을 다시 껐다가 켜면 Vue 메뉴가 보인다.
기본 레이 아웃은 여러개의 slot 을 사용할 수 없다. [시나리오1]기본 Layout > MainLayout.vue 으로 사용한다. app.js 파일 내용import './bootstrap';import { createApp, h } from 'vue'import { createInertiaApp } from '@inertiajs/vue3'import MainLayout from './Layouts/MainLayout.vue'createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) const page = pages[`./Pages/${name}.vue`] ..
export default setup() props 와 emit// setup() export default { props: ['title'], emits: ['update'], setup(props, { emit }) { // props와 emit 사용 } } //