ME2DESIGNER.COM 코딩블러그

빌드 디렉토리가 삭제되면 안되는 이유 

VUE 프로젝트를 GitHub 사용하여 배포하고있고, GitHub는 https://www.me2designer.com 으로 도메인 연결을 해놓았다. 도메인 연결시 CNAME 파일이 추가되는데, 이 파일이 빌드 디렉토리에 삽입이 된다.

npm run build 실행하면 dist폴더가 삭제가 되기 때문에 build 생성시 반복적으로 GitHub에서 도메인 연결 설정을 다시해야 문제가 있었기에 해결이 필요했다. 수정 방법은 package.json 파일에 "build": "vue-cli-service build" 내용을 "build": "vue-cli-service build --no-clean"으로 변경하면 된다.

package.json 

"scripts": {    
    "build": "vue-cli-service build --no-clean",    
},

이런 경우는 꼭 설정해야될뜻 

VUE 프로젝트를 GitHub를 통해 배포하고 GitHub에 도메인 연결하여 사용하고 있다면, 빌드 디렉토리가 삭제 되지 않도록 해야될 것 이다.

GitHub 내 도메인 연결(whois.co.kr) 방법

1. GitHub 배포 폴더명(docs)으로 build 설정 

npm run build 실행시 정적파일이 CLI 기본값인 /dist 폴더에 저장이 된다. 그러나 GitHub의 배포 폴더는 /docs로 되어있어 GitHub를 이용한 정적파일 배포시 폴더명을 변경해야된다.

const path = require('path');

module.exports = {    
    outputDir: path.resolve(__dirname, './docs')
}

2. ESLint 설정시 overlay 감추기 

3. localhost 포트번호 변경 

특정 포트주소로 개발이 필요한 경우 포트번호를 지정할 수 있고, 49152~65535 사이 포트 사용을 권장한다.
(참고 : https://me2designer.tistory.com/4)

module.exports = {
    devServer: {        
        port: '포트번호 입력',        
    },    
}

4. <title> 변경 

index.html 변경하거나 router에서 location.pathname 따라 각각 다르게 설정 가능한 것으로 알고있지만, 아직 거기까지 학습이 되어있지 않아서 vue 기본 템플릿 <%= htmlWebpackPlugin.options.title %> 내용을 vue.config.js에서 변경해봤다.

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "타이틀 입력";
                return args;
            })
    },
}

4. 자동 새로고침 해제

출처 : https://stackoverflow.com/questions/51844289/turn-off-hot-reload-on-project-started-with-vue-cli-3-webpack-4-15-1

module.exports = {
    devServer: {
        hot: false,
        liveReload: false
    },
}

본문에 앞서 ESLint 브라우저 overlay 제거 설정 부터 

'$' 오류를 더 이상 보고 싶지 않다. 

jQuery 전역설정을 하게되면 ESLint에서 터미널에 에러 발생이 되었다고 표시된다.

error '$' is not defined no-undef

터미널 에러가 발생 표시되나 브라우저에서는 작업하는데 문제가 없지만, 이 부분을 해결할 필요가 있기에 ESLint 설정을 변경해주는 것은 필수로 방법은 간단하다. package.json에서 eslintConfig 속성에 "jquery": true 추가하면 더 이상 터미널에서 오류 표시가 되지 않는다.

package.json 

....
"eslintConfig": {	
  "env": {
    "node": true, 
    "jquery": true //추가하면됨
  },
}
....

더 이상 jQuery 사용에 따른 ESLint 에러 내용을 보지 않을 수 있다.

여기까지 vue cli에서 jquery 설정하는데 필요한 내용을 정리해봄 

반복적인 import 작업이 불편하다.

jQuery를 사용하기 위해서 해당 파일에서 import를 매번 선언해야되는 불편한 점 때문에 전역설정을 통해 import의 반복적인 선언 가능한 방법을 찾아봤다.

(참고) jQuery 설치방법 : https://me2designer.tistory.com/8

main.js 이용한 전역 설정

main.js 파일을 열어 window.$ = require('jquery') 이렇게 선언하면 다른 파일(컴포넌트등)에서 import추가 없이 window.$('선택자')로 자유롭게 사용할 수 있다.

main.js

import Vue              from 'vue'
import wrap             from './App.vue'
import router           from './router'

Vue.config.productionTip = false

window.$ = require('jquery') //전역사용 가능함

new Vue({
  el: '#wrap',    
  router,
  render: h => h(wrap),
}).$mount('#wrap')

Home.vue

....

<script>
	console.log(window.$('body'))
</script>

....

Console

jQuery.fn.init [body, prevObject: jQuery.fn.init(1)]

main.js 전역설정 후 Home.vue 파일에 import없이 window.$('body')작성 후 console에서 보면 정상적으로 body가 선택된 것을 확인 학 수 있다. 하지만, 일반적으로 window.$('선택자')가 아닌 $('선택자') 형식으로 사용하기에 이 방법은 실무에서 적합하지 않아 다른 방법을 찾아봐야됬다.

window.$ 대신 $ 만 쓰고 싶다.

출처 : https://hello-bryan.tistory.com/291

위 주소의 내용 처럼 webpack.config.js 사용하는 것이 일반적인 방법론으로 보인다.

그러나 vue cli3에서는 webpack.config.js 파일이 없으므로 vue.config.js에 추가하여 설정하면된다.

vue.config.js

const webpack = require('webpack');

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jquery: 'jquery',
                'window.jQuery': 'jquery',
                jQuery: 'jquery'
            })
        ]
    },
}

이렇게 설정하면 window.$('선택자') 아닌 $('선택자')으로 사용가능한 전역설정이 완료가 된다.

jQuery 설치는

터미널 실행 후 $ npm add jquery --save 입력하면 설치가 완료된다.

$ npm add jquery --save

jQuery 사용은

원하는 파일(컴포넌트등)에서 import $ from 'jquery'를 선언하면 jQuery 문법이 사용가능

<script>
import $ from 'jquery'

export default {
    mounted() {
        $(function(){ // DOCUMENT READY...
        /*
        ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
        */(function(){

				
       		console.log('TEST')
								

        })();/*
        ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
        */});// DOCUMENT READY...
    }
}
</script>

참고사항으로 jQuery 설치가 정상적으로 되었는지 확인 방법은

터미널에서 $ npm add jquery --save 실행 후 package.json과 package-lock.json을 열어서 보면

기존에 없던 jQuery 검색해보면 속성이 추가된 것을 확인 할 수 있습니다.

각 파일에서 import 반복선언 없이 jQuery 전역설정 방법은? 

ESLint 브라우저 overlay 문제

Vue CLI 설치시 ESLint(린트) 필수지만, 큰 불편사항이 있다.

ESLint에서 설정된(지향하는) 코드 패턴이 아닌 경우 에러가 발생되는데 특히, 사용되지 않는 변수(var) 선언시 ESLint에서 오류가 발생되고, 브라우저에 오류내용이 overlay 되면서 생산성 저해되는 부분이 있어 ESLint 설정을 변경하는 법을 찾아봄

overlay 숨기고, 단 ESLint의 오류 내용은 보고싶다.

관련 내용을 찾아보니 캡틴형님께서 이해하기 쉽게 내용 설명과 해결방법을 설명해 놓았는데, 내용은 간단하다.

1. vue.config.js를 사용하여 overlay: false 처리하면

2. 터미널에서는 오류내용이 기존 처럼 출력되지만

3. 브라우저에서는 오류 내용이 overlay되지 않음

vue.config.js

module.exports = {
    devServer: {
        overlay: false,        
	},    
}

그래서

의외로 간단함, 진작 이렇게 하면 될텐대 위 방법 전에는 빈 변수값을 삭제하거나 주석 처리 또는 console.log() 등으로 overlay되지 않도록 처리했기에 불편한점 많았다.

역시, 불편하다 싶으면 참지 말고 구글링 적절한 판단인듯

참조 : https://www.youtube.com/watch?v=eQ8ugBZhrfY