MineHome.vue
이 프로젝트의 웹사이트는 블로그 형식에 툴 모음이기 때문에 뚜렷한 목표가 없는 블로그 느낌이다.
그렇기 때문에 Home에 대한 고민을 많이 했다. 뭔가 뚜렷하지 않은 블로그의 홈이라,,,
방문하는 사람들을 위한 웹사이트기때문에 방문자가 무언가 얻고 가면 좋을 것 같다.
현대인들이 매일 궁금해하는 날씨정도가 적합한 Home일 것 같다.
우선 날씨 데이터를 사용해보자.
OpenWeatherMap
날씨의 데이터를 가져오기 위해 OpenWeatherMap API를 사용하자.
OpenWeatherMap API 란 현재 위치에 대한 날씨의 정보들을 볼 수 있다.
나는 무료로 사용할 것이기 때문에 사용할 수 있는 데이터의 양이 많지 않다.
오늘의 날씨, 3시간 단위로 5일간의 날씨 데이터를 사용해서 홈을 꾸며보자.
사용법은 간단하니 구두로 잠깐 설명하겠다.
1. 회원가입
2. API KEY 발급
3. 무료로 사용할 API의 가이드 읽기
4. URL을 확인 후 JSON 형식의 날씨 데이터 받기
5. 내가 쓸 내용들을 확인
6. 쓰기
7. 끝
가이드의 내용이 한참 과거의 내용인 것 같다. 우선 틀만 보고 내가 해보는 게 빠를 거 같다.
디테일하게 경도, 위도를 적지 않아도 도시이름으로 설정할 수 있으니 참고 바란다.
오늘 날씨
// https://api.openweathermap.org/data/2.5/weather?q={도시이름}&units=metric&appid={발급 받은 KEY}
{
"coord": {
"lon": 126.9778,
"lat": 37.5683
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04d"
}
],
"base": "stations",
"main": {
"temp": 8.66,
"feels_like": 7.86,
"temp_min": 6.69,
"temp_max": 8.66,
"pressure": 1027,
"humidity": 38,
"sea_level": 1027,
"grnd_level": 1021
},
"visibility": 10000,
"wind": {
"speed": 1.75,
"deg": 0,
"gust": 2.62
},
"clouds": {
"all": 68
},
"dt": 1708927334,
"sys": {
"type": 1,
"id": 5509,
"country": "KR",
"sunrise": 1708898954,
"sunset": 1708939285
},
"timezone": 32400,
"id": 1835848,
"name": "Seoul",
"cod": 200
}
5일간 3시간 단위의 날씨
// https://api.openweathermap.org/data/2.5/forecast?q= {도시이름} &units=metric&appid= {발급 받은 KEY}
{
"cod": "200",
"message": 0,
"cnt": 40,
"list": [
{
"dt": 1708938000,
"main": {
"temp": 8.97,
"feels_like": 8.55,
"temp_min": 7.6,
"temp_max": 8.97,
"pressure": 1027,
"sea_level": 1027,
"grnd_level": 1021,
"humidity": 37,
"temp_kf": 1.37
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04d"
}
],
"clouds": {
"all": 68
},
"wind": {
"speed": 1.43,
"deg": 21,
"gust": 2.56
},
"visibility": 10000,
"pop": 0,
"sys": {
"pod": "d"
},
"dt_txt": "2024-02-26 09:00:00"
},
{
"dt": 1708948800,
"main": {
"temp": 6.89,
"feels_like": 5.24,
"temp_min": 5.5,
"temp_max": 6.89,
"pressure": 1028,
"sea_level": 1028,
"grnd_level": 1022,
"humidity": 44,
"temp_kf": 1.39
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04n"
}
],
"clouds": {
"all": 63
},
"wind": {
"speed": 2.38,
"deg": 63,
"gust": 5.41
},
"visibility": 10000,
"pop": 0,
"sys": {
"pod": "n"
},
"dt_txt": "2024-02-26 12:00:00"
},
{
"dt": 1708959600,
"main": {
"temp": 3.97,
"feels_like": 2.2,
"temp_min": 3.97,
"temp_max": 3.97,
"pressure": 1030,
"sea_level": 1030,
"grnd_level": 1023,
"humidity": 54,
"temp_kf": 0
},
"weather": [
{
"id": 801,
"main": "Clouds",
"description": "few clouds",
"icon": "02n"
}
],
"clouds": {
"all": 21
},
"wind": {
"speed": 1.97,
"deg": 72,
"gust": 3.68
},
"visibility": 10000,
"pop": 0,
"sys": {
"pod": "n"
},
"dt_txt": "2024-02-26 15:00:00"
},
{
"dt": 1708970400,
"main": {
"temp": 2.71,
"feels_like": 1.01,
"temp_min": 2.71,
"temp_max": 2.71,
"pressure": 1031,
"sea_level": 1031,
"grnd_level": 1024,
"humidity": 59,
"temp_kf": 0
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04n"
}
],
"clouds": {
"all": 58
},
"wind": {
"speed": 1.74,
"deg": 77,
"gust": 2.84
},
"visibility": 10000,
"pop": 0,
"sys": {
"pod": "n"
},
"dt_txt": "2024-02-26 18:00:00"
},
// ........ 생략
필요한 내용들만 사용하면 될 것 같다.
Vuex를 사용하여 Store에서 Weather Data를 받아오자
// store/modules/weather.js
const weatherStore = {
namespaced: true, // 모듈에 네임스페이스 사용 설정
state: {
url_base: "https://api.openweathermap.org/data/2.5/",
months: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
days: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
weatherData: {},
weatherDaily: {},
},
getters: {
getDate: (state) => {
let d = new Date();
let day = state.days[d.getDay()];
let date = d.getDate();
let month = state.months[d.getMonth()];
let year = d.getFullYear();
return `${year}년 ${month} ${date}일 ${day} `;
},
},
mutations: {
setDate: function (state, results) {
state.weatherData = results;
},
setDaily: function (state, results) {
state.weatherDaily = results;
},
},
actions: {
fetchData: async ({ commit, state }) => {
let fetchUrl = `${state.url_base}weather?q=seoul&units=metric&APPID=${process.env.VUE_APP_WEATHER_API_KEY}`;
fetch(fetchUrl)
.then((res) => res.json())
.then((results) => {
commit("setDate", results);
})
.catch((error) => console.error("Error fetching weather data:", error));
},
fetchDataDaily: async ({ commit, state }) => {
let fetchUrl = `${state.url_base}forecast?q=seoul&units=metric&appid=${process.env.VUE_APP_WEATHER_API_KEY}`;
fetch(fetchUrl)
.then((res) => res.json())
.then((results) => {
commit("setDaily", results);
})
.catch((error) => console.error("Error fetching daily weather data:", error));
},
},
modules: {},
};
export default weatherStore;
상태(State)
url_base: OpenWeatherMap API에 대한 기본 URL
months: 월 이름을 담은 배열
days: 요일 이름을 담은 배열
weatherData: 현재 날씨 데이터가 저장될 객체
weatherDaily: 일일 날씨 예보 데이터가 저장될 객체
게터(Getters)
getDate: 현재 날짜를 특정 형식으로 반환하는 게터
뮤테이션(Mutations)
setDate: 현재 날씨 데이터를 업데이트하는 뮤테이션
setDaily: 일일 날씨 예보 데이터를 업데이트하는 뮤테이션
액션(Actions)
** API KEY는 env 파일을 통해서 암호화 하자. Github에 push할 땐 조심하시기 바란다.
fetchData: 현재 날씨 데이터를 가져오는 비동기 액션, API를 호출하고 결과를 받아와 뮤테이션을 호출하여 상태를 업데이트
fetchDataDaily: 일일 날씨 예보 데이터를 가져오는 비동기 액션, API를 호출하고 결과를 받아와 뮤테이션을 호출하여 상태를 업데이트
Store 하나로 모든 걸 다 사용해도 상관없지만
나는 각 컴포넌트마다 기능을 추가할 것이기 때문에 Store를 모듈화 시켜서 관리할 생각이다.
"굳이 그럴 거면 컴포넌트에서 다 해결하면 되지 않나?"라고 생각할 수 있지만.
이 프로젝트 자체는 스터디 용도로 사용할 것이기 때문에 큼지막한 것들은 Vuex를 통해 데이터 관리를 할 생각이다.
라고 생각했는데.. 너무 쓸데없는 짓 같기도 하다. 하다 안되면 그냥 컴포넌트에서 해결하자.
날씨 데이터는 가져왔으니 다음엔 Home component에서 사용해 보도록 하자.
'밥줄 > Vue.js' 카테고리의 다른 글
[Vue.js] PDF TO SVG(HTML (0) | 2024.05.27 |
---|---|
[Vue.js] Movie-search Project (0) | 2024.03.18 |
[Vue.js] Side Project Tools 만들기 (2) (0) | 2024.02.20 |
[Vue.js]Web browser에서 Source maps 숨기기 (0) | 2024.01.31 |
[Vue.js] Side Project Tools 만들기 (1) (1) | 2024.01.23 |