CodeHoon

깃 허브(Github)에 있는 본인의 레파지토리(Repository) 와 연결하는 방법에 대해 포스팅하겠습니다.
순서대로 해주세요

본인의 깃 레파지토리 주소

빈 폴더 한곳에서 진행해주세요. (git과 연결되어있는 폴더 내부를 지양해주세요)

1. git init
2. git remote add origin "git repository url"

# repository와 연결이 잘되었는지 확인
3. git remote -v
4. git pull

# git repository에 이미 데이터 자체가 있다면,
5. git clone "git repository url"

만약 가장 처음 등록하여 개인 정보 자체가 없을 경우 개인정보를 등록해줍니다.

$ git config --global user.email "깃허브 이메일주소"
$ git config --global user.name "깃허브 이름"

그리고 본인이 원하는 내용 한개를 추가해서 add 하고 commit을 해주면 된다.

■ 이 글을 쓰게 된 이유

지난번에 git pull을 통해 repository와 연동하려고 하였는데 실패하고, 해당 내용이 모두 분실되어 다시 restore을 진행하고,
전체적인 폴더 구조를 변경하는 번거로움(분노)이 있었다. 

항상 먼저 작업을 할 때에는

▶ 하위 git 경로와 겹치지 않게,
▶ 해당 branch clone을 우선적으로 진행해주어 최신화를 해주는 것을 잊지 말도록 하자.

참고 블로그

깃허브(Git Hub)에서 코드를 가져오는 방법은 다양합니다.

1. 다운로드
2. 명령어 
3. etc

사실 여러 모든 내용이 전부 "Clone"을 하는 또다른 형태입니다.

그래서 근본인 clone 명령어만 수기하도록 하겠습니다.

$ git clone "repository url"

아주 간단합니다.

안녕하세요 상훈입니다.

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