라라벨 6.0, artisan make:auth가 사라졌다 free

2019-09-09

라라벨 6.0이 되면서 UI 부분이 laravel/ui 패키지로 분리되었습니다. 이에따라 라라벨 5에서 인증 UI를 만들어주는 artisan make:auth도 함께 사라졌습니다. 기존 사용자들은 수년간 쓰던게 갑자기 안되서, 새로 배우는데 과거의 자료로 학습하시는 분들은 하라는대로 하는데 안되서 당황스러울 수 있을것 같아요. 오늘은 UI 부분이 laravel/ui 패키지로 분리됨에 따른 변화를 알아보도록 하겠습니다.


그 동안 라라벨은 부트스트랩을 기본 UI로, VueJS를 기본 자바스크립트 프레임워크로 사용하고 있었습니다. 쓰라는대로 쓰면 사실 편리한 면이 있었죠. 그게 프레임워크의 매력이기도 하고요. 하지만 부트스트랩이나 Vue가 아닌 다른 것을 쓰고 싶어지면 이들을 걷어내는 수고가 필요하기도 했습니다. 이 둘을 쓰지 않지만 걷어내기 귀찮아서 그냥 두고 쓰는 경우도 많았겠죠.


image


5.8과 6.0의 package.json 파일의 변화를 보면, 부트스트랩, 뷰, Jquery 등이 제거된 것을 확인할 수 있습니다.


그럼 laravel/ui 패키지를 사용해봅시다. 컴포저로 설치합니다.


composer install laravel/ui

php artisan ui 명령으로 프론트엔드 스캐폴딩을 바꿀 수 있습니다. 어떤 프리셋을 사용할 건지 정해줘야하고, 현재 지원하는 프리셋은 bootstrap. vue, react 입니다.


image


제가 요즘 주로 쓰는 TailwindCSS는 혹시 계획이 없나 찾아보니 올해 안에 프리셋이 나올 것 같네요. (Adding TailwindCSS preset) 그 전까지는 https://github.com/laravel-frontend-presets/tailwindcss 를 쓰면 된다고 합니다.


Vue UI


Vue ui를 사용해봅시다.


php artisan ui vue

위와 같이 실행하면 됩니다. 이 명령어를 실행하면 총 8개의 파일이 영향을 받습니다.



  • package.json

  • resources/js/app.js

  • resources/js/bootstrap.js

  • resources/sass/app.scss

  • webpack.mix.js

  • resources/js/components/ExampleComponent.vue

  • resources/sass/_variables.scss

  • yarn.lock


Vue를 쓰기 위해 package.json에 필요한 패키지들을 추가, 삭제하고 라라벨에 vue를 로드하도록 js, scss, mix 파일을 수정하는게 주된 내용입니다. 자세한 내역은 여기를 참고하세요.


Vue ui를 사용하겠다고 하면 부트스트랩을 함께 불러들이네요. 즉 vue로 설정하면 기존과 같은거라고 보시면 됩니다. 참고하세요.


image


인증 스캐폴딩을 해보기


UI 프리셋과 함께 --auth 옵션을 주면 인증 스캐폴딩이 이뤄진다고 합니다. 예전의 php artisan make:auth와 같은 기능이죠. 이미 프리셋을 설치한 상태에서 실행하면 다음의 파일들이 추가로 생성되고, routes/web.php 파일이 수정됩니다.


php artisan ui vue --auth


  • app/Http/Controllers/HomeController.php

  • resources/views/auth/login.blade.php

  • resources/views/auth/passwords/email.blade.php

  • resources/views/auth/passwords/reset.blade.php

  • resources/views/auth/register.blade.php

  • resources/views/auth/verify.blade.php

  • resources/views/home.blade.php

  • resources/views/layouts/app.blade.php


추가된 파일은 인증용 뷰와 HomeController 입니다. 자세한 내역이 궁금하신 분들은 여기에서 확인해보세요.


프론트엔드 UI 프리셋을 바꿔보기


이미 프리셋이 적용된 상태에 다른 프리셋으로 전환이 가능합니다. 명령어는 동일합니다.


php artisan ui bootstrap
혹은
php artisan ui react

bootstrap 으로 바꿨을 때는 거의 바뀌는게 없어 보입니다. vue와 react간 변환할 때는 package.json에서 vue와 react를 추가 제거하고 app.js와 webpack.mix.js가 조금씩 바뀝니다.


--auth 옵션을 붙여서 재실행하면 기존의 뷰 파일을 덮어쓸건지 물어봅니다. 아무것도 직접 손댄 것이 없다면 뷰 파일 내용은 똑같습니다. 만약 무언가 작업했는데 덮어쓰면 처음 상태로 돌아가겠죠.


이건 살짝 버그가 아닌가 싶은데 --auth 옵션을 붙여서 실행하면 할 때마다 web 라우트 파일에 인증용 라우트가 계속 추가됩니다. 뭐 확인하고 지우면 되니 큰 문제는 아닙니다.


이래저래 테스트 삼아 바꿔볼 때마다 커밋을 해봤으니 궁금하신 분들은 커밋 로그를 확인해보세요.


공식문서


laravel/ui 패키지의 공식 문서는 라라벨 매뉴얼의 Frontend > Frontend Scaffolding 입니다. 사용전에 한번씩 참고하시면 도움이 되실 것 같습니다.


마치며


라라벨 5.8의 기본값과 똑같이 재현하고자 하면 라라벨을 설치한 후 php artisan ui vue를 실행하면 됩니다. 부트스트랩, Vue, 리액트 모두 안써도 상관없습니다. 다만 인증 스캐폴딩을 하려면 셋 중 하나는 선택을 해주셔야 합니다. 프레임워크의 책임이 아닌 부분은 독립시키고, 더 다양한 선택을 할 수 있게 한 건 좋은 선택 같아요. 다만 선택을 한 번은 해야한다는게 웹 개발이 처음인 분들에겐 다소 부담일 수 있겠네요.


1일 1식 라라벨 50호

2019년 9월 9일


이현석

바쁜 팀장님 대신 알려주는 신입 PHP 개발자 안내서를 쓰고, 클린 아키텍처 인 PHP를 번역했습니다. 2020년에 출간될 Laravel Up & Running 2nd Edition을 번역하고 있습니다.