CodeHoon

Vue.js - axios를 설치하고 바로 사용하려고 하는데 에러가 발생하였습니다.

 'Axios' is not defined no-undef

당황하였다.

■해결 방법

해당되는 컴포넌트(component)에 import 해주시면 됩니다.

<script>
import axios from 'axios'

export default {
...
}
</script>

이상입니다.

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 가 되겠네요.