미니 프로젝트_Day 4

하루 요약

오늘은 본캠프 4일차!! 내일이면 드디어 미니 프로젝트의 최종 발표다..
프로젝트를 진행하는 동안 Github, HTML, CSS, Javascript.... 그리고 협업을 제대로 경험할 수 있었던 것 같다!

우리가 계획했던 것보다 더 멋진 결과물로 나온 것 같아서 뿌듯했다.

오늘은 두 가지 에러를 해결했는데,
첫 번째로 해결한 에러는 openAPI를 이용해서 날씨 예보를 불러오지 못하는 점을 해결했다.

Mixed Content: The page at 'https://hajoo0322.github.io/1week-project/' was loaded over HTTPS, 
but requested an insecure resource 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst?serviceKey=YwQtuITGE24Cty%2BKIF1TkmtNgWiuGUKTCSB8cmqMKSDMRt8r8iq3wNheCCK5rUaTua8gArWcX4ZvS9dIq%2B%2FxiA%3D%3D&numOfRows=10&pageNo=1&dataType=JSON&base_date=20241107&base_time=0800&nx=60&ny=127'. 
This request has been blocked; the content must be served over HTTPS.

다음과 같은 오류였는데 구글링과 GPT 선생님에게 물어보니 HTTPS와 HTTP가 서로 맞지 않아서 발생하는 에러였다!

에러 해결 방법을 찾은 후 코드를 수정함으로써 에러를 해결할 수 있었다.

async function fetchWeatherData(nx, ny) {
    const apiKey = 'YwQtuITGE24Cty%2BKIF1TkmtNgWiuGUKTCSB8cmqMKSDMRt8r8iq3wNheCCK5rUaTua8gArWcX4ZvS9dIq%2B%2FxiA%3D%3D'; // 본인의 서비스 키를 입력하세요.
    const { date: baseDate, time: baseTime } = getCurrentDateTime();
    const url = `https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst?serviceKey=${apiKey}&numOfRows=1000&pageNo=1&dataType=JSON&base_date=${baseDate}&base_time=${baseTime}&nx=${nx}&ny=${ny}`;
    try {
        const response = await fetch(url);
        const data = await response.json();

        if (data.response.header.resultCode === "00") {
            displayForecast(data.response.body.items.item);
        } else {
            console.error("API 응답 오류: ", data.response.header.resultMsg);
        }
    } catch (error) {
        console.error("날씨 데이터를 가져오는 중 오류 발생: ", error);
    }
}

URL 주소를 바꿔주었더니 날씨예보가 잘 불러와지는 것을 확인할 수 있었다.

다음으로 두 번째 에러였는데.......
방명록 기능을 수정하고 나니까 수정하기 전에 작성했었던 데이터들이 불러와지지 않는 문제가 있었다.................

그래서 코드에서 문제가 있다고 생각하고 방명록 기능 구현 Javascript 코드를 하나하나 살펴봤다.
차분하게 살펴봤더니 수정하기 전에는 Timestamp 변수를 사용하지 않았는데 새로 수정하면서 Timestamp 값도 같이 Database에 저장이 되었다. 그리고 데이터를 불러올 때도 Timestamp 값도 같이 가져와서 전에 작성했던 데이터가 불러와지지 않았던 것이었다...

최신 순으로 정렬하기 위해 사용했던 개념이지만 방명록을 순서대로 나열하지 않아도 될 거 같다는 팀원들의 의견으로 Timestamp 기능을 삭제했더니 모든 데이터가 무사히 잘나오는 것을 확인할 수 있었다.

그 후 팀원들 각자 개인 페이지를 좀 더 업데이트하고 최종 주소까지 배포했다!!!!!!!!

팀원들과 함께 만든 페이지가 배포까지 되고 나니 엄청 뿌듯했다 😎😎😎😎
내일 프로젝트 발표까지 잘 마무리할 수 있었으면 좋겠다😃😃😃 

 

프로젝트 하면서 느낀 점 🤨 

프로젝트를 완성하고 최종 배포까지 하고 나니까 첫 단추를 잘 꿰맨 것 같은 느낌이었다. 팀원들과 협업하는 과정도 순조롭게 흘러갔고 서로 다 잘맞는 사람들이어서 문제 없이 프로젝트가 진행될 수 있었던 것 같다.

Github와 페이지를 만드는 코드를 짜는 과정에서는 에러와 마주하고 힘도 들었지만 하나씩 차근차근 찾아보면서 해결하니까 해결할 수 없는 에러는 없었다!!!!

앞으로도 절대 당황하거나 짜증...(?) 내지 않고 차분하게 하나씩 해결하면서 공부하고 성장해야겠다 😃😃😃