코딩묻은 디자이너

vue.js로 팝업창 만들기!

위의 팝업 오픈! 버튼을 클릭하면 아래와 같은 팝업이 나오고

팝업 오른쪽 상단의 그림을 클릭하면 팝업이 닫히는 화면 만들기!

일단 기능만 만들어본거라 디자인은 신경쓰지 않았다

vuefity의 다이어로그 기능을 사용해서 쉽고 이쁘게 만들 수도 있지만 뷰티파이를 사용하지 않고 만들어봤다

https://vuetifyjs.com/en/components/dialogs/

전체적으로는 MainPage 안에 PopUp.vue를 컴포넌트로 분리하여 주었다.

일단 팝업을 열기 위한 신호를 주는 버튼을 HTML에서 만들어준다

      <button
        @click="openPopup()">
        팝업 오픈!
      </button>

@click에 openPopup()함수와 바인딩 해준다(바인딩 한다는 표현이 맞는가?)

import PopUp from '../components/PopUp.vue'

export default {
  name:'MainPage',
  components:{
    PopUp,
  },
  data: ()=> {
    return {
      popupView : false,
    }
  },
  methods:{
    openPopup(){
      this.popupView = (this.popupView) ? false : true
    }
  }
}

script 파일!

MainPage 에서 PopUp을 components에 넣어주고

화면을 열기 위한 변수로 popupView를 만들어줬다.

처음에는 팝업이 닫혀있는 상태여야하기 때문에 기본값은 false

@click을 통해 openPopup()에 신호가 오면 popupView는 false 값과 true 값이 토글이 된다

    <div class="popup-view" :class="{ active : popupView }">
      <pop-up @close-popup="openPopup()"></pop-up>
    </div>

다시 HTML로 돌아가서 열릴 팝업 파일을 본다

css로 팝업 창을 컨트롤 하기 위해 감싸고 있는 div에 popup-view클래스를 주었다

true값이 들어오면 active가 활성화 될 것이다

.popup-view{
  opacity: 0;
  display: none;
  visibility: hidden;
}
.active{
  opacity: 1;
  display: block;
  visibility: visible;
}

팝업을 감싸고 있는 div에 투명도와 display:none 그리고 visibility를 주었다.

visibility: hidden만 주어도 팝업이 안보이지만 hidden 상태에서는 실제로는 화면에 팝업의 띄워져 있는 상태기 때문에 나중에 오류가 생길 수 있어 display: none 설정을 꼭 넣어준다!

그리고 active는 팝업이 열린 상태를 나타낸다

components/PopUp.vue

html

      <div class="close-image">
        <img src="../assets/button.png" alt="" @click="closePopup()">
      </div>

팝업 컴포넌트에서는 창을 닫는 이미지에 클릭 이벤트를 주었다!

    methods:{
      closePopup: function(){
        this.$emit('close-popup')
      }
    }

emit을 통해 close-popup 신호를 부모에게 보낸다.

그럼 view/MainPage.vue의

    <div class="popup-view" :class="{ active : popupView }">
      <pop-up @close-popup="openPopup()"></pop-up>
    </div>

이 분에서 @close-popup이벤트를 받아내고 그것을 openPopup()함수로 다시 신호를 주면

신호를 받고 popupView가 false로 전환되어 팝업을 닫을 수 있다!

뭔가 열심히 적어봤는데 함수라던거 변수라던가 그런 용어적인 면에서 잘 설명이 되고 있는지 모르겠다( : ౦ ‸ ౦ : )

Vue2를 사용하면서 라우터 기능을 사용하기 위해

npm install vue-router

를 입력하여 라우터를 설치하였는데

WARNING  Compiled with 17 warnings

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'onUnmounted' (imported as 'onUnmounted') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'onDeactivated' (imported as 'onDeactivated') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'onActivated' (imported as 'onActivated') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'inject' (imported as 'inject') was not found in 
'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'unref' (imported as 'unref') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'watchEffect' (imported as 'watchEffect') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'defineComponent' (imported as 'defineComponent') was not found in 'vue' (possible exports: default)     

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'reactive' (imported as 'reactive') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'h' (imported as 'h') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'provide' (imported as 'provide') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'ref' (imported as 'ref') was not found in 'vue' 
(possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'shallowRef' (imported as 'shallowRef') was not found in 'vue' (possible exports: default)

 warning  in ../node_modules/vue-router/dist/vue-router.esm-bundler.js

export 'nextTick' (imported as 'nextTick') was not found in 'vue' (possible exports: default)

 warning  in ./src/router/index.js

export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

다음과 같은 오류? warning이 발생하며 화면이 표시되지 않았다

VueRouter에서 반복적으로 오류가 발생하고 있는데 어디서 오류가 발생하는지 알 수가 없어 한참을 고민했는데 결과적으로

버전문제였다!

Vue2에서는 vue-router @4버젼을 사용할 수 없으니 지우고 새로 설치해야한다

모듈 지우고 새로 설치

npm uninstall vue-router

npm install --save vue-router@3

Vue.js 프로젝트 시작하기

Vue.js 란

사용자 인터페이스르 만들기 위한 프레임워크

시작

npm install -g @vue/cli

CLI 설치

프로젝트 생성

vue create 프로젝트명

프로젝트를 생성하면 다음과 같이 vue 3를 선택할 것인지 vue 2를 선택할 것인지 창이 나오는데 나는 익숙한 vue 2를 사용하기로 하였다.

이 다음에는 npm 과 yarn 을 선택하는 창도 나오는데 선택 후에 프로젝트가 생성된 것을 확인할 수 있다

실행코드

npm run serve

실행 전에 'cd 프로젝트명'를 입력해서 프로젝트 안으로 접근 한 후 터미널 창에 실행코드를 입력한다

터미널 창에 npm run serve를 입력하면 다음과 같이 기본적인 vue.js 뷰를 확인할 수 있다

프론트엔드 개발을 위한 프레임워크로 vue를 많이 사용했지만 최근 유니티를 공부하다가 돌아오니 프로젝트 만들고 실행하는 법을 까먹어버리는 바람에 짧게 정리할 겸 써본 게시글

vue 실행 과 관련된 키워드를 검색해보면

npm start

npm run dev

이 코드를 작성해서 실행하는 글들이 많이 나오는데 내가 실행이라는 키워드를 잘못 이해한 것인지 서버가 실행되지 않았다.

vue.js 서버 실행 코드가 기억 안나서 생각보다 많은 시간을 버린 자의 글...