Fontawesome 과 OpenWeatherMap 사용기 + 가상 클래스 선택자는 js로 접근이 어렵다

구글링과 노마드코더의 강의를 보고 해당 API를 적용해보았다!

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

 

날씨나 기온은 가져오면 되는 문제므로 잘 넘어갈 수 있었지만 icon부분은 안 예뻐서 폰트어썸을 활용했다.

그 과정에서 폰트어썸과 해당 api의 정보를 적용하는 과정에서 시행착오가 있었으나 결과적으로 잘 나와서 만족스럽다!

// Weather API
const weatherIconRef = {
  '01' : 'fas fa-sun',
  '02' : 'fas fa-cloud-sun',
  '03' : 'fas fa-cloud',
  '04' : 'fas fa-cloud-meatball',
  '09' : 'fas fa-cloud-sun-rain',
  '10' : 'fas fa-cloud-showers-heavy',
  '11' : 'fas fa-poo-storm',
  '13' : 'far fa-snowflake',
  '50' : 'fas fa-smog'
}

const weatherEngToKR = {
  'Thunderstorm' : '낙뢰',
  'Drizzle' : '이슬비',
  'Rain' : '비',
  'Snow' : '눈',
  'Mist' : '옅은 안개',
  'Smoke' : '짙은 안개',
  'Haze' : '실안개',
  'Dust' : '황사',
  'Fog' : '안개',
  'Sand' : '짙은 황사',
  'Ash' : '재',
  'Squall' : '돌풍',
  'Tornado' : '회오리',
  'Clear' : '맑음',
  'Clouds' : '구름 많음',
}

const weather = document.querySelector('.weather');
const weatherIcon = weather.querySelector('.icon__weather');
const weatherUl = weather.querySelector('.weather > ul');

const API_KEY = 'bd8db1f879b1c4ae727fd2582620614c';
//제주도 경도/위도
const lat = 33.431441;
const lon = 126.874237;

const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
fetch(weatherUrl).then(response => response.json())
.then(data => {
  const newIcon = document.createElement('i');
  const newLi = document.createElement('li');

  const iconInfo = (data.weather[0].icon).substr(0,2);
  newIcon.classList.add(weatherIconRef[iconInfo].substr(0,2));
  newIcon.classList.add(weatherIconRef[iconInfo].substr(4));
  newLi.textContent = `${Math.round(data.main.temp)}℃  ${weatherEngToKR[data.weather[0].main]}`;

  weather.prepend(newIcon);
  weatherUl.appendChild(newLi);
}).cathch(error => {
  console.log('Weather API Error : ',error);
});

영어식으로 나오는 날씨를 한국어로 바꿔주고 기온을 반올림하는 것쯤은 이제 할만하다!

 

 

---

헤더 부분에서 hover 시 작게 말풍선이 나왔으면 좋겠다고 생각했다 그래서 ::before와 ::after로 모양을 잡아주었지만

js로 해당 li 요소를 querySelectorAll 로 받아와서 각각 띄워줄 때 content의 내용이 바뀌길 바라며 만들었지만

결과적으로 js에서 가상 클래스 선택자에 접근은 지양하는 것이 맞는 것 같다!

그래서 말풍선 부분만 span 처리를 해줘서 하드 코딩을 했다..ㅜㅜ

아이콘이 귀여워서 그대로 써보려다가 일이 더 늘어난 느낌이 크지만~~

그래도 결과물은 꽤 귀여운 것 같다.

문제는 내 내용물이 귀엽지 않다는 것이지만 ...........ㅠㅠ

 

이 문제에 대해 강사님께 조언을 듣고자 늦은 시간임에도 불구하고 질문 했다가 참고자료를 몇 받아서 보았다.

https://superfelix.tistory.com/607

[웹 프론트앤드 개발 더하기] ::before ::after 스타일링의 제한점

 

https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

구글링하다가 얼핏 본건데 getComputedStyle()과 getPropertValue()로 접근은 가능하지만... DOM 에 접근하는 개념이 아니래서 깔끔하게 접었다.