dinist

[Laravel + tailwindcss + Vue.js] 날씨 페이지 만들기 - 1 본문

Web/PHP

[Laravel + tailwindcss + Vue.js] 날씨 페이지 만들기 - 1

dinist 2021. 8. 14. 15:54

라라벨, tailwindcss, Vue.js를 모두 사용해보기위해 다음 영상을 참고 하여 제작합니다.

링크 : https://www.youtube.com/watch?v=_nSzMDx79Ao

npm, composer와 같은 기본적인 도구들은 사전에 설치되어있음을 가정하고 진행합니다.

라라벨 버전은 8이며,

사용 개발도구는 VSCode입니다.

 

먼저 프로젝트를 만들어줍시다.

laravel new vue_weather

주르르르르륵 프로젝트가 생성됩니다.

 

우리는 FrontEnd로 Vue.js를 사용할 것이므로 ui 설정을 해줍시다.

 

composer를 통해 laravel/ui를 설치합시다.

composer require laravel/ui

그 다음 artisan을 통해 ui 설정을 해줍시다.

php artisan ui vue

친절하게 npm install 후 npm run dev 명령까지 진행하라고 안내하네요

하라는대로 해봅시다.

 

저같은 경우에는 이 문구 아래로 오류가 발생합니다.

하지만 다시 명령을 실행하면...

 

화끈하게 오류가 반겨줍니다. 위 오류를 인터넷에서 찾아보니 vue-loader를 설치해야된다고 하네요

 

npm i vue-loader

이후 다시 npm run dev를 하면 webpack 컴파일이 될겁니다.

그다음 php artisan serve 명령으로 라라벨 개발 서버를 실행시키고

localhost:8000으로 접속해봅시다.

 

 

이 화면이 나온다면 일단 기본적인 설정은 된거같네요

이제 vue를 사용해봅시다.

 

/resources/js/components 폴더를 보면 ExampleComponent.vue라는 파일이 있을것입니다. 이걸 사용하도록 해봅시다.

 

/resources/view/welcom.blade.php 파일이 있을겁니다. 이 파일이 위 이미지에 해당하는 페이지입니다.

이 파일내의 내용을 날려버리고~

 

이렇게 채워봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/app.css">
    <script src="/js/app.js" defer></script>
</head>
<body>
    <div id="app">
        <example-component></example-component>
    </div>
</body>
</html>

그리고  

npm run watch를 실행시킵시다. watch는 파일을 수정하면 알아서 다시 컴파일을 합니다.

 

그러면 이렇게 화면이 나와야합니다.

 

!!!! 혹시 ie11처럼 ES6 문법을 사용할 수 없는 브라우저를 지원해야 한다면..

우리는 라라벨 믹스를 사용하고 있으므로 고마운 polyfill을 사용하면 됩니다.

 

https://laravel-mix.com/extensions/polyfill

 

Polyfill | Laravel Mix Extension

Laravel Mix Polyfill A Laravel Mix extension to include polyfills by using Babel, core-js, and regenerator-runtime. Usage First, install the extension. npm install laravel-mix-polyfill --save-dev or yarn add laravel-mix-polyfill --dev Then, require it with

laravel-mix.com

 

laravel-mix-polyfill 을 설치하고

webpack.mix.js 파일에 polyfill 메소드를 추가해주면 됩니다. 위 링크에 사용방법과 매개변수들이 모두 설명되어 있습니다.

 

ie에서도 모두 표시가 됩니다.

vue는 설치가 잘 된것 같으니 이제 tailwindcss를 설치해 봅시다.

 

https://tailwindcss.com/docs/guides/laravel

 

Install Tailwind CSS with Laravel - Tailwind CSS

Setting up Tailwind CSS in a Laravel project.

tailwindcss.com

 

이 페이지에 가이드가 있습니다. 따라해봅시다

 

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

(이 부분은 선택입니다.)

그 다음 npx tailwindcss init 명령을 실행합니다.

그러면 최상위 폴더에 tailwind.config.js라는 파일이 생성되어있을겁니다.

이 config 파일을 통해 tailwindcss 의 설정을 커스텀할 수 있습니다.

 

이제 최상위 폴더의 webpack.mix.js를 수정해야합니다.

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss("resources/css/app.css","public/css",[
        require("tailwindcss"),
    ])
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: "firefox 50, IE 11"
    });

이렇게 수정해줍시다.

아래 .polyfill 메소드는 es5문법을 지원해야할 경우 laravel-mix-polyfill 설치 후 추가하시면됩니다.

 

그리고 /resources/css/app.css 파일에 다음 내용을 추가합니다.

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

그리고 다시 페이지를 확인해봅시다.

 

오! 아까와 디자인이 확연히 달라졌습니다. tailwindcss 설치가 잘 된것같네요 ie에서도 잘 출력이 될것입니다.

 

한가지 더 해주면 좋은게 있습니다.

파일이 변경될때 자동으로 브라우저를 새로고침 해주는 browsersync를 적용해봅시다.

 

https://laravel.com/docs/8.x/mix#browsersync-reloading

 

Compiling Assets (Mix) - Laravel - The PHP Framework For Web Artisans

Compiling Assets (Mix) Introduction Laravel Mix, a package developed by Laracasts creator Jeffrey Way, provides a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. In other word

laravel.com

라라벨 공식문서를 참고해도 좋습니다.

 

npm을 통해 browsersync를 설치해줍니다.

npm install -g browser-sync

설치가 완료되면 최상위 폴더의 webpack.mix.js 파일의 mix 변수에 browserSync 메소드를 추가해줍시다.

적용된 코드는 다음과 같습니다.

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss("resources/css/app.css","public/css",[
        require("tailwindcss"),
    ])
    .browserSync({
        proxy : 'http://localhost:8000',
    })
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: "firefox 50, IE 11"
    });

 

그 뒤에 npm run watch를 다시 실행해봅시다.

laravel mix 를 다시 시작하라고 하면서 동시에 에러를 던져줍니다.

 

다시 시작하면 

위와같이 browsersync 안내가 나오면서 페이지가 열릴것입니다.

앞으로 파일을 수정하면 browsersync가 이를 감지하고 자동으로 새로고침을 진행할 것입니다.

 

여기까지 기본적인 설정을 모두 마쳤습니다.

 

1편은 기본적인 설치를 다룹니다.

2편에서 페이지 디자인을 해봅시다!

'Web > PHP' 카테고리의 다른 글

PHP - Enum 사용하기 2  (0) 2023.05.24
PHP - Enum 사용하기  (0) 2023.05.24
[PhpStorm] 라라벨 serve , npm dev 설정 추가  (0) 2023.01.17
[Laravel] Laravel Sail 설치하기  (0) 2021.09.23
[Laravel + tailwindcss + Vue.js] 날씨 페이지 만들기 - 2  (0) 2021.08.29
'Web/PHP' Related Articles more