CodeHoon

안녕하세요 상훈입니다.

깃혀브를 이용해서 아래와 같이 프로젝트 2개를 하나의 깃 Repository에 넣고싶은데, 안되고 있었습니다.

그런데 아무리해도 git add 가 안돼서 왜그러지 싶었습니다.

다른 경우일 수도 있지만, 제 경우에는 올릴 02-nuxt.js 라는 폴더 내에 .git 이라는 깃 파일이 있었기 때문이었습니다.

.git 폴더는 repository에 연결할떄 필요한 폴더이기 때문에, 이곳에서는 필요가 없는 폴더입니다.

> 프로젝트를 생성할때 같이 생성되었습니다.

bash 를 사용하여 지우도록하겠습니다.

$ rm -r .git

재확인을 통해, 이제 정상적으로 삭제가되었고 git 관련 파일이 없는것을 확인하였습니다.

남은건 add, commit, 그리고 push 뿐이죠. 

성공하였습니다.

Vue.js 2, Vuetify, router, vuex, vue-chart.js 를 이용하여 프로젝트 외면을 꾸며주었다. 

물론 프로젝트 자체를 확인해보면 router, vuex를 사용하지 않은 것을 확인할 수 있다.

Vuetify의 active를 사용하여 버튼을 클릭하면 검정색 글씨로 변하는 버튼이 된다.

유튜브 강의 를 통해 볼 수 있었습니다.

강의 내용은 주로 Vuetify 내용을 다루고 있습니다.

■ 사용 기술

1. Vue.js 2
2. html
3. sass

전반적으로 아주 아주 아주 기초의 Vue.js 프로젝트였음

난이도 : ★☆☆☆☆
따라하기 쉬움

실용성 : ★★☆☆☆
본업에서 딱히 도움될만한 내용은 없음

sass 지식을 살짝 얻어감
(sass를 사용 안했었기 때문에)

대충 이런거 만듬(모바일 크기) <-> pc버전

안녕하세요 상훈입니다.

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 주소 입니다. 개발 공부에 참고하세요!!