내일배움캠프 10일차 TIL

📢TMI

오늘은 밖에 비가 주륵주륵 내렸다 날씨 api 구현해서 이모티콘을 보여주는데 rain,clouds 밖에 없다. 빨리 맑은 날씨까 돌아와서 태양아이콘을 보고싶다.

✍TIL(Today I Learned)

외부 api 날씨 api 구현

자신의 위치에 따라 다른 정보를 찍어주어야 하기 때문에 사용자 좌표를 찍어줌

    var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };

    function handleGeoSucc(position) {
        console.log(position);
        const latitude = position.coords.latitude;  // 경도
        const longitude = position.coords.longitude;  // 위도
        const coordsObj = {
            latitude,
            longitude
        }

        getWeather(latitude, longitude);
    }

    function handleGeoErr(err) {
        console.log("geo err! " + err);
    };

    navigator.geolocation.getCurrentPosition(handleGeoSucc, handleGeoErr, options);

콘솔로 찍힌 내위치 정보

이제 내위치 정보가 성공적으로 찍혔으니 좌표에 값을 주어서 위에올린 getWeather(latitude, longitude); 날씨정보 코드와 합침

  function getWeather(lat, lon) {
        fetch(
            `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=내키값&units=metric`
        )

이제 콘솔에 찍힌 날씨 정보에 대한 코드를 만든다

  .then(function (response) {
                return response.json();

            })
            .then(function (json) {

                console.log(json);
                let $country = json.sys.country;
                let $temp = json.main.temp;  //현재온도
                let $place = json.name;   // 사용자 위치
                let $humidity = json.main.humidity; //강수량
                let $sky = json.weather[0].main;

                let $temp_max = json.main.temp_max;//최고온도
                let $temp_min = json.main.temp_min;//최저온도
                let icon = json.weather[0].icon;//날씨아이콘
                let $wId = json.weather[0].id; // 날씨 상태 id 코드
                let $icon = 'http://openweathermap.org/img/w/' + icon


                console.log($temp, $place, $humidity, $sky,$wId)

                // $('.temptemp').append(temp + "°C");


                $('.csky').append($sky);
                $('.temp').append($temp + "°C");
                $('.humidity').append($humidity + "%");
                // $('.place').append($place);
                //  $('.place').append('/'+$country);
                $('.temp_max').append($temp_max + "°C");
                $('.temp_min').append($temp_min + "°C");
                $('.icon').append('<img src=" ' + $icon + '.png ">');

html 파일에 값을 주고 나타낸다!

완성화면

👁‍🗨TIF(Today I Feel)

오늘은 외부 api를 써야 하기 때문에 고민을하다가 날씨 api를 가져와서 넣어보기로 했다.일딴 대부분의 api들이 사용하는 방식처럼 key 를 가지고 와서 나타내어야 했다
확실히 외부 api를 사용하다보니 내가 원하는 방향에 코드를 짜는것에 있어 어려움이 있었다 세개의 예제 코드를 보면서 내가 원하느 정보들을 뽑아오는 연습을 5시간정도 했을까.... 점점 모양이 잡히는것이다 내가 삽질을 한것이 아니였구나를 느끼며 신나게 맞춰나갔다 확실히 사람마다 짜는 코드는 다르지만 원하는 목표는 같았기 때문에 수정에 수정을 거치며 완성해 나갔다. 그렇게 완성된 파일을 보니 정말 뿌듯했다. 나는 할 수 있었다! 시행착오를 거치면서 하나하나 만들어가니까 코드 하나하나의 의미를 잘 알 수 있었다.!

📢 To-do list

1.내일 머지 및 리뷰가 있기 때문에 최종본 커밋하기
2.날씨api 및 체크인체크아웃기능 합치고 디자인