CodeHoon

Linux, Vue.js 3 - 프로젝트를 구동하고 있는데, 아래와 같은 에러가 주기적으로 콘솔에 출력이 됩니다.

In Vue.js 3 project, there's an error that keep receiving from the server.

[WDS] Disconnected!

에러가 발생하였습니다.

21.11.09 [ 1차 수정 ] 

해당 에러가 발생하고 해결하고 보니 다시 또 발생하더군요.. (=해결못함 ^^)

그래서 좀 더 자료를 찾아보니, 해당 부분은 서버쪽의 커넥션 오류에 더 가깝다는 결론을 내었습니다.

현재 당신의 프로젝트는 dev 로 돌리고 있기 때문에 오류를 출력한다. 라는 의미 인데, 왜 이게 갑자기 나는걸까요? 

원래는 잘 실행 되었었는데...

■ 해결 방법

Vue.js 를 예시로 설명하겠습니다.

root 경로 = 프로젝트의 바로 아래 경로 (= projectName/~ ) 에 vue.config.js 파일을 생성합니다.

그 안에

module.exports = {
  devServer: {
    disableHostCheck: true,
  },
};

를 작성해주시고, 저장해주시면 에러가 말끔하게 사라집니다.

Host의 주소를 확인하는 작업인데, 해당 기능을 off 해버리는 것입니다.

■ 에러 원인: 작성된 포트 번호와 실제 구동한 포트번호의 불일치.

해당 에러는 포트 번호가 일치하지 않아 발생하는 문제이며, dev 모드로 개발시에 화면 출력에 문제가 생길 수 있습니다. 미리 처리해주시는게 좋아요

예시) 

node에 작성된 서버를 구동하려고 하는 port number = 8080,

하지만 실제로 본인이 출력한 포트번호는 8081 일 때 출력될 수 있습니다.

■ Why?

8080포트에는 Apache 서버가 구동 중이었고,
그 위 /var/www/html/projectName/~ 에 추가적으로 서버를 구동시킨 것이기 때문에
npm run serve 등을 실행하였을 때 자동으로 포트가 변경되어져 출력이 됩니다.

참고사항

Vue.js 3 + bootstrap이 되지 않아 Vuetify를 설치하려고 하였다. 그러나,,,

Vue.js 3 - Vuetify 를 설치하던 와중 에러 발생.

Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/runTransformation.js:60:17)
    at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:290:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:276:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:92:3)

이렇게 또 에러가 발생하였다.

에러 원인 : "아직 지원을 하지 않는다?"

예. 또 지원을 안합니다. (vue3 어따가 써먹냐)

다운그레이드(down grade)를 하던가 다른 css framework를 사용하던가 해야하는데, 뭐가 남았을까용?

tailwind는 되나 실행해보러 갑니다.

 Vue.js 3, Cli - bootstrap 을 적용하던 와중 발생한 에러.

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') at eval 

해당하는 에러가 발생하였다. 

에러 발생 원인 - 아직 지원하지 않는다?

여러 문서들을 뒤적거린결과, bootstrap은 아직  Vue.js 3를 지원하지 않는다고 합니다... ㅠ

그렇기 때문에 Vue.js 3 => Vue.js 2  [downgrade] 를 해주시거나,

다른 css 프레임워크를 사용해주시면 되겠습니다... ㅠㅠ

v-for에는 유용한 기능이 하나 더 있다.

v-for="(value, name, index) in MyObject"

이런식으로 적용이 가능한 점인데, value와 name은 각각 MyObject에서 value와 key를 나타낸다.

예시를 들어보자면,

MyObject = {
  title : 'the title',
  author : 'Sanghoon',
  description : 'Descriptions... This is Vue.js'
 }

MyObject가 이렇게 있을 때,

<div  v-for="(value, name, index) in MyObject">
    {{ index }}.   {{ name }}  :  {{ value }}
</div>

를 작성한다면,

0. title :  the title
1. author  :  Sanghoon
2. description : Descriptions... This is Vue.js

가 된다. 그러니까, 결국에는 json 형태의 key와 value를 출력할 수 있다는 것이다.

안녕하세요 상훈입니다.

Roblox에서 게임 만들기를 잠깐 해보았는데 

생각보다 만들기 난이도 자체가 어렵지 않더군요.

물론 원하는 기능을 만들려면 무조건 script를 작성하여야 하지만. 그래도 난이도가 높은 수준은 아닙니다.

ROBLOX STUDIO. 

저 같은 경우에는 BUTTON 한 개를 지정해서,
해당 버튼을 TOUCH하면 벽이 사라지는 방법을 구현하였습니다.

이런 게임이 로블록스에 존재하는지 안하는지 알아보지도 않았고,

누군가 아이디어를 가지고 만들어도 딱히 문제는 없다고 봅니다.. 제가 열심히 해서 만들고 싶지만,

능력이 미천하고 본업이 있기에 무리일 것 같네요..!

에러문구

VM8167:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Vue.js 3 ,  App.vue 에서 json 파일을 fetch() 하려고 했는데 경로를 옳게 작성했는데 이런 에러가 발생하였음.

해당 파일의 경로는 같은 폴더 내(/src) 에 있었지만 발생하였고, Network에서 확인하니 404에러가 발생하였다.

해결방법

json 파일을 /src 가 아닌, /public에 넣어서 사용하도록 한다.

경로를 변경해주니까 바로 200 success가 반환되었습니다.

내부에 js폴더를 추가시켜 사용하여도 똑같이 잘 읽습니다.

public/js/food.json

결론.

경로 설정을 잘 합시다.

안녕하세요 상훈입니다.

Kotlin 에서 button 클릭 시, 혹은 image button 클릭 시,
Toast 메시지를 출력하는 방법에 대해 포스팅 하겠습니다.

var contentToast = Toast.makeText(this, "Content button clicked", Toast.LENGTH_SHORT)
contentToast.show()

toast의 메시지 생성 방법은 위와 같습니다.
변수에 toast 메시지 내용을 할당하고, show() 함수를 통해 해당 내용을 체이닝하여 출력하는 방식.

예제1)

버튼 클릭 시, toast 메시지 출력

private lateinit var binding: ActivityMainBinding

onCreate(){

  binding.contentBtn.setOnClickListener {
      var contentToast = Toast.makeText(this, "Content button clicked", Toast.LENGTH_SHORT)
      contentToast.show()
  }
       
}

contentBtn이라는 id 를 가진 Image Button에 대한 클릭 이벤트 안에 Toast 메시지를 출력하도록 작성하였습니다.

예제2) : 좋아요 버튼

이미지 버튼을 2개 준비합니다. [ 클릭 전, 클릭 후 ] 의 각각의 이미지를 나타냅니다.

binding.heartBtn.setOnClickListener {
    if (!liked) {
        binding.heartBtn.setBackgroundResource(R.drawable.checkedheart);
        var likeToast = Toast.makeText(this, "Liked!!", Toast.LENGTH_SHORT)
        likeToast.show()
    } else {
        binding.heartBtn.setBackgroundResource(R.drawable.heart);
        var likeToast = Toast.makeText(this, "UnLiked!!", Toast.LENGTH_SHORT)
        likeToast.show()
    }
    liked = !liked; // reverse
}

클릭 시 toast 메시지 출력과 빈 하트가 빨간 하트로 변경되게 설정하였습니다.

vue로 따지자면 v-if( ! liked ) / else 가 되겠네요.

안녕하세요 상훈입니다.

Vue.js 에서 라우팅을 정리해볼까합니다. 

Route, Routing...  Laravel 에서는 web.php가 그 역할을 가지고 있습니다. 

하지만 저는 Front Framework 부분에서 그 내용을 처리하는 것이 더 옳다고 생각하기 때문에 vue-route에도 신경을 써보았습니다.

처음에는 진짜 정말 ? ? ? 하는 순간에 파일이 휙휙 지나가고 내가 한 게 이게 무엇인가...나는 감자다 이랬는데 여러 번 반복하여 자료를 살펴보고 직접 세팅을 해보았으며 정리를 해보니 대략적인 감을 잡았습니다.

Vue.js 3 에서는 아직 적용해보지 않았고, 현재는 Vue.js 2 만 적용해본 상태입니다.

기본 구성은 위와 같습니다. 

0. Vue project를 설치하고, vue-router를 설치합니다.

$ vue create '프로젝트명'
$ npm i -S vue-router
$ npm install 

1. router/index.js 생성
2. views/...  : vue 파일들 생성
3. main.js 수정
4. App.vue 수정

이렇게 진행하도록 하겠습니다.

1. router/index.js 생성

router 폴더와 그 안에 index.js를 생성하겠습니다. 그리고 아래와 같은 코드를 작성해줍니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import FirstPage from '@/views/first-page.vue'
import SecondPage from '@/views/second-page.vue'
import MainPage from '@/views/main-page.vue'

Vue.use(VueRouter)

const routes = [
        {
            path: '/', name: 'MainPage', component: MainPage
        },
        {
            path: '/FirstPage', name: 'FirstPage', component: FirstPage
        },
        {
            path: '/SecondPage', name: 'SecondPage', component: SecondPage
        },
    ]

const router = new VueRouter({
    mode: 'history',
    routes
})
export default router

vue route 관련한 내용을 import.

VueRouter를 사용한다고 선언.

routes의 경로를 직접 지정 저장. => Web.php가 하는 라우팅 역할

router를 출력(?) 내보내기(?) 느낌 실행

2. views/...  : vue 파일들 생성

views라는 폴더를 생성해주시고, 그 안에 해당되는 .vue파일들을 생성해줍니다.

여기서 잘 보시면 파일제목 <-> route 했던부분의 이름이 다른 것을 확인하실 수 있습니다.

바로 snake-case와 camel-case를 지원하는 것인데요, 이에 대해서는 아시리라 생각하고 넘어가겠습니다.

3. main.js 수정

기존에 src/main.js 에 있던 파일을 살짝 수정하도록 하겠습니다.

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

Vue.config.productionTip = false

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

변경된 부분은

1. import router from './router'
2. Vue 객체 내에 router 선언 
입니다.

이 곳에서 router를 호출하게 되고, app을 렌더링 시켜줍니다.

4. App.vue 수정

마지막으로 App.vue 수정입니다. 이곳에서는 쓸데없는 기존의 부분들을 모두 걷어내주고, 아래와 같이 작성합니다.

<template>
  <div id="app">
    <h1>Router Start</h1>
    <router-link to="/">Main Page</router-link> |
    <router-link to="/FirstPage">First Page</router-link> |
    <router-link to="/SecondPage">Second Page</router-link>
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<router-link> </router-link>
<router-view />

이 두 가지만 잘 알고 있으면 됩니다. 나머지는 없애도 됩니다.

<router-link to="경로"> a 태그 라고 생각하세요 </router-link>

router link 는 a 태그와 생김새가 동일합니다. 해당 태그를 클릭하면 (1)의 index.js에 의해 routing되어 해당되는 경로로 이동합니다. 

router-view 는 해당되는 view를 출력해줍니다. 대신 contents만 갈아끼워준다는 느낌이 강합니다.

[ F12 개발자모드 ] 를 켜서 확인해주시면 <div id="app"> 내의 태그들만 reload 되기 때문입니다.

이제  $ npm run serve 를 통해 서버를 띄워주시면 아래의 결과가 나옵니다.

위의 내용 중에 오류나 잘못 서술한 부분이 있다면

코멘트 남겨주시면 감사하겠습니다.

뷰 초보자이지만 천천히 꾸준히 나아가려고 합니다. 감사합니다.

제가 정리한 전체적인 흐름입니다.

강의는 짐코더님의 Vuetify 강좌 중에서 반복적으로 연습해보았습니다.