Laravel 5 / vue 2 튜토리얼

항상 1편만 쓰고 2편을 못썼는데 이번에는 새해를 맞이해서 좀 길게 갔으면 좋겠습니다.

이번에 라라벨을 가지고 데시보드를 만들게 되었습니다. 과거에 했던 프로젝트는 이미 세팅이 되있는 상태가 많아서 처음부터 해볼 일이 없었는데 이번에 좋은 삽질 기회를 얻어서 배운 것들을 조금 공유 하고자 합니다. Laravel이 한국에서도 인기가 있는 진 모르겠습니다. 적어도 2016년 github 스타를 가장 많이 받은 프론트엔드 프레임워크 vue는 조금 핫 하겠죠 ?

Composer, php, homestead, ssh등이 설치 되어 있다고 생각 하고 시작 하겠습니다.

설치가 되어 있지 않다면 아래 링크로 가셔서 설치 해주세요.

php7 및 composer 설치

homestead 설치

https://github.com/intelcoder/laravel-tutorial

먼저 새로운 프로젝트를 만들어 보겠습니다. 

composer create-project --prefer-dist laravel/laravel 원하는_프로젝트_이름

프로젝트 폴더로 들어가신다음 

터미널을 열고 npm install을 쳐서 필요한 라이브러리들을 설치해주세요 ! 그 다음 라라벨 설치 확인을 위해 로컬 서버를 돌려줍시다. 

php artisan serve

스크립트 실행후 터미널에 보시면 아래와 같이 뭔가 뜹니다. 브라우저를 열어서 url을 복사 붙여 넣기 !

Laravel development server started on http://127.0.0.1:8000/

그리고 아래와 같은 페이지가 보인다면 성공 ! 아무런 에러 없이 왔다면 당신은 럭키가이 ? 

그리고 조금 눈여겨 봐야 하는 것은 gulpfile입니다. elixir는 gulp를 기반으로 만들어 져서 엘릭서가 gulpfile 안에 있습니다.

밑에 보시면 scss compile 하는 것과 webpack으로 vue를 트렌스파일 해주는 것을 볼 수 있습니다.

gulp명령어로 한번 실행 시킬 수 있지만 파일을 바뀔 때마다 gulp를 계속 실행 하는 것은 미친 짓이므로 이미 있는 명령어인 

gulp watch 혹은 npm run dev로 gulp를 돌려 줍시다.

Laravel gulpfile.js

const elixir = require('laravel-elixir');
 
require('laravel-elixir-vue-2');
 
/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */
 
elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');
});
 

기본 세팅으로는 파일이 변한다고 해도 브라우저를 메뉴얼로 리로드 해야 되는 등 많은 불편함이 있기 때문에 

gulp파일을 조금 업그레이드 해보도록 하겠습니다.

먼저 프로젝트 루트에 webpack.config.js라는 파일을 만들어 줍니다. 

 webpack.config.js

let webpack = require('webpack');
let path = require('path');
 
module.exports = {
    entry: './resources/assets/js/app.js',
    output: {
        path: path.resolve(__dirname, 'public/js'),
        filename: 'bundle.js',
        publicPath: ''
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this nessessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                //materialize loader jquery, jquery.hammer preload
                test: /materialize-css\/bin\//,
                loader: 'imports?jQuery=jquery,$=jquery,hammerjs'
            },
        ]
    },
    plugins: [
    ]
};

gulpfile.js에 가셔서 아래와 같이 바꿔 줍니다. 브라우저 싱크는 livereload와 비슷하게 watch하고 있는 파일이 변경되어 리컴파일 하면 브라우저를 자동으로 리로드 해주는 모듈입니다. 참으로 고마운 놈이죠. 아래에 보이는 proxy는 브라우저 싱크가 :3000을 기본으로 사용하기 때문에 넣었습니다. localhost:8000대신 homestead.app을 넣어도 되죠.

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
       .browserSync({
         proxy: 'localhost:8000'
       });
});
 

이제 npm 패키지들을 설치 해봅시다. 아래 것들을 package.json. 아래 붙여 넣기를 한다음 npm install을 실행 시켜 줍시다.

 "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.25.0",
    "expose-loader": "^0.7.1",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "file-loader": "^0.9.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-util": "^3.0.8",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-browser-sync-simple": "^2.1.1",
    "laravel-elixir-vue-2": "^0.2.0",
    "scss-loader": "0.0.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.1.0-beta.25"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "domready": "^1.0.8",
    "gsap-promise": "^2.0.0",
    "jquery": "^3.1.0",
    "jquery-hammerjs": "^2.0.0",
    "materialize-css": "^0.97.8",
    "materialize-sass-origin": "^0.97.5",
    "vue": "^2.1.10",
    "vue-router": "^2.1.3"
  }

이로서 dev 환경 세팅은 어느정도 끝이 났습니다.

과거에 복사 붙여넣기를 막아 놨는데 지금 어떻게 그기능을 끝는 지 기억아 안나내요 ..