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를 출력할 수 있다는 것이다.

에러문구

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

결론.

경로 설정을 잘 합시다.

안녕하세요 상훈입니다.

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 강좌 중에서 반복적으로 연습해보았습니다.

안녕하세요 상훈입니다.

Vue.js cli 를 이용하여 클론코딩을 하였습니다.

유튜버 분께서 타자가 엄청 빠르시니 적당히 멈추시면서 하세요!
(내용이 아주 좋습니다. 요점을 잘 잡고 간단하게 구현해주었습니다. )

$ vue create vue-weatherapp

으로 Vue 3 프로젝트를 생성해주었습니다.

그리고 바로 $ npm run serve 를 통하여 구동!

Component를 만들지 않고 오로지 App.vue에서 해당 내용을 작성하였습니다.

<template>

<template>
  <div id="App" :class="typeof weather.main != 'undefined' && weather.main.temp > 16 ? 'warm' : '' ">
    <main>
      <div class="search-box">
        <input 
          type="text" 
          class="search-bar" 
          placeholder="Search..."
          v-model="query" 
          @keypress="fetchWeather" 
        />
      </div>

      <div class="weather-wrap" v-if="typeof weather.main != 'undefined'">
        <div class="location-box">
          <div class="location">{{ weather.name }}, {{ weather.sys.country }}</div>
          <div class="date">{{ dateBuilder() }}</div>
        </div>

        <div class="weather-box">
          <div class="temp">{{ Math.round(weather.main.temp) }}</div>
          <div class="weather">{{ weather.weather[0].main }}</div>
        </div>

      </div>
    </main>
  </div>
</template>

<script>

<script>
export default {
  name: 'App',
  data() {
    return {
      api_key : 'd5297dac23efd490788f837861e52f62',
      url_base: 'https://api.openweathermap.org/data/2.5/',
      query: '',
      weather: {},
    }
  },
  methods: {
    fetchWeather (e) {
      if (e.key == "Enter") {
        fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
          .then(res => {
            return res.json();
          }).then(this.setResults);
      }
    },
    setResults (results) {
      this.weather = results;
    },
    dateBuilder () {
      let d = new Date()
      let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
      let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

      let day = days[d.getDay()];
      let date = d.getDate();
      let month = months[d.getMonth()-1];
      let year = d.getFullYear();

      return `${day} ${date} ${month} ${year}`;
    }
  }
  
}
</script>

<style>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: 'montserrat', sans-serif;
}

#App{
  background-image: url('./assets/cold-bg.jpg');
  background-color: aquamarine;
  background-size: cover;
  background-position: bottom;
  transition: 0.4s;
}

#App.warm {
  background-image: url('./assets/warm-bg.jpg');
}

main{
  min-height: 100vh;
  padding: 25px;

  background-image: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.75));
}

.search-box{
  width: 100%;
  margin-bottom: 30px;
}

.search-box .search-bar {
  display:block;
  width: 100%;
  padding: 15px;

  color: #313131;
  font-size:20px;

  appearance: none;
  border: none;
  outline: none;
  background: none;

  box-shadow: 0px 0px 8px rgba(0,0,0,0.25);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0px 16px;
  transition: 0.4s;
}

.search-box .search-bar:focus{
  box-shadow: 0px 0px 16px rgba(0,0,0,0.25);
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 16px 0px;
}

.location-box .location {
  color: #FFF;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  text-shadow: 1px 3px rgba(0,0,0,0.25);
}

.location-box .date {
  color: #FFF;
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  text-align: center;
}

.weather-box {
  text-align: center;
}

.weather-box .temp{
  display: inline-block;
  padding: 10px 25px;
  color: #FFF;
  font-size: 102px;
  font-weight: 900;

  text-shadow: 3px 6px rgba(0,0,0,0.25);
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  margin: 30px 0px;

  box-shadow: 3px 6px rgba(0,0,0,0.25);
}

.weather-box .weather {
  color: #FFF;
  font-size: 48px;
  font-weight: 700;
  font-style: italic;
  text-shadow: 3px 6px rgba(255, 255, 255, 0.25);
}
</style>

결과물입니다.

도시명을 작성하면 해당되는 api를 가져와 띄워줍니다.

이상입니다.

무료 기상 API 주소 입니다. 개발 공부에 참고하세요!!