12일차

오늘은 실습을 위주로 정리해서 작성하려고 한다. 꽤나 많은 내용이 들어가 있어서 양이 어떻게 될 지는 모르겠지만 하나하나 잘 풀어보려한다.

우선 결과적으로는 사진과 같다. CSS는 배경만 넣었고 나머지는 건드리지 않았다.

첫 번째는 오픈웨더 API를 사용해서 날씨 표현.
두 번째는 실시간으로 바뀌는 시간.
세 번째는 자바스크립트로 글쓰기
네 번째는 To-do-list 작성
마지막은 배경화면 랜덤 변경

이 내용을 토대로 작성해보도록 하겠다. 아래는 실습 gitHub링크다.

git https://github.com/leeyulgok/3-Day-1/blob/main/%EC%8B%A4%EC%8A%B5/practice4.js

실습

1. 날씨 API 사용하기

현재 날씨를 표현하기 위해서는 API를 사용해야 한다. API는 기상청에서도 제공하고 있고, 외국계인 오픈웨더에서도 무료로 제공한다. 나는 오픈웨더라는 곳을 이용했다. 코드는 아래와 같이 작성했다.

const weatherElement = document.querySelector(".weather");

const getSeoulWeather = async () => {
  const API_KEY = "my_api_key";
  const LAT = 37.5683;
  const LON = 126.9778;
  const API_URL = `https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&appid=${API_KEY}`;

  try {
    const response = await fetch(API_URL);
    if (!response.ok) {
      throw new Error("날씨 정보를 가져오는데 실패했습니다.");
    }

    const data = await response.json();

    const weather = data.weather[0].main;
    const temperature = Math.round(data.main.temp - 273.15);

    weatherElement.textContent = `날씨: ${weather}, 온도: ${temperature}°C`;
  } catch (error) {
    console.log("날씨 정보를 가져오는데 실패했습니다.", error);
    weatherElement.textContent = "날씨 정보를 가져오지 못했습니다.";
  }
};
getSeoulWeather();

되게 어렵게 보이지만, 하나하나 보면 크게 어렵지 않다. 일단 fetch이전까지는 API를 가져오는 부분이고, 그 이후로 보면 된다. 우선 오류가 나는 부분을 확실하게 체크를 해주고, API를 요청하여 받은 응답을 response로 받았다. 그리고 json() 메서드를 통해 json 형식의 데이터를 추출해 data 상수에 넣었다.

여기서부터는 어렵지 않은데, 가장 중요한 건 문서를 읽는 것이다.

https://openweathermap.org/current

이 홈페이지는 오픈웨더의 API doc 페이지이다. 어떤 형식으로 되어있고, 어떤 데이터를 갖고 있는지 포함하고 있다. 나는 여기서 날씨와 온도를 가져왔고, 온도는 화씨에서 섭씨로 맞췄다. 그리고 이를 웹 페이지로 보여줬다.

2. 실시간 설정

이건 이전 실습시간에 만든 걸 그대로 가져와서 사용했다. 그래서 특별하게 바뀐 건 하나도 없지만, 다시 설명하면 아래와 같다.

function updateTime() {
  let date = new Date();
  let hour = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();

  let formattedTime =
    formatTime(hour) + ":" + formatTime(minutes) + ":" + formatTime(seconds);

  document.getElementById("clock").innerText = formattedTime;
}

function formatTime(time) {
  return time < 10 ? "0" + time : time;
}

setInterval(updateTime, 1000);

함수를 만들고 시간을 가져와서 시, 분, 초로 나눠서 formattedTime이라는 변수에 포맷한 시간을 넣었다. 그리고 이를 보여주는데 setInterval() 함수를 사용해서 1초마다 업데이트 하도록 설정했다. formatTime() 함수는 두 자릿수도 맞추기 위해 만든 것이다.

3. To-do-list

Javascript를 통해 웹 페이지에 소개글을 쓰는 건 어렵지 않게 때문에 넘어가고, 바로 할 일 목록을 보도록 하겠다.

const onAddList = (event) => {
  event.preventDefault();

  const inputField = document.getElementById("inputField");
  const listItem = createListItem(inputField.value);
  const listItems = document.getElementById("listItems");

  listItems.appendChild(listItem);

  inputField.value = "";
};

const createListItem = (text) => {
  const listItem = document.createElement("li");
  listItem.textContent = text;

  const deleteButton = document.createElement("button");
  deleteButton.textContent = "삭제";
  deleteButton.addEventListener("click", () => {
    listItem.remove();
    deleteButton.remove();
  });

  const itemContainer = document.createElement("div");
  itemContainer.classList.add("item");
  itemContainer.appendChild(listItem);
  itemContainer.appendChild(deleteButton);

  return itemContainer;
};

하나하나 보도록 하면 onAddList 함수와 createListItem 함수로 나눌 수 있다. onAddList 함수는 추가 버튼을 눌렀을 때, 할 일이 추가가되게 하고, createListItem 함수는 할 일이 추가가될 수 있게 html코드를 짜는 부분이다.

onAddList 함수는 createListItem 함수에서 만든 코드를 html에 붙인다. 그리고 할 일이 추가되면 input 박스를 비운다.

createListItem 함수는 onAddList 함수에 추가될 코드를 짠다. 첫 번째는 li를 만들고, 두 번째는 삭제버튼을 만들고 이 버튼을 눌렀을 때 할 일을 삭제하는 이벤트 핸들러도 추가된다. 그리고 이 두 가지를 다루는 div를 만들어 onAddList로 보낸다.

정리하기

12일차는 배운 내용과 배울 내용으로 미리 과제를 만들었다. 쉽지 않았고, 계속 검색을 해도 다양한 오류들이 나와 애를 먹었지만, 결과를 보니 뿌듯했다. 웹 페이지를 만들 때마다 이런 뿌듯함을 느끼기 때문에 계속 공부하고 도전하는 것 같다.

API를 사용할 줄 아는 능력은 개발자로써 매우 중요하게 여겨지는 부분중 하나기 때문에 12일차를 발판으로 앞으로도 더 나은 개발자가 될 준비를 해나가야겠다. 세상에는 다양한 API가 있기 때문에 이것들을 활용해서 여러가지 웹 페이지도 만들어봐야겠다

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프