13일차

13일차 수업은 API을 배웠고, 본격적인 React 수업에 들어갔다. 미리 공부를 해두었기 때문에 어려움은 없지만, 중요한 건 잘 활용하는 것이기 때문에 최대한 배운 걸 어떻게 활용하면 좋을까를 생각하면서 수업을 들었다.

우선은 배웠던 내용을 하나하나 기록하며 잊지 않도록 해보자.

API

API는 Application Programming Interface의 약자로 간단하게 설명하면 소프트웨어간에 데이터를 공유할 수 있도록 하는 인터페이스이다. 이걸 간단한 예로 날씨와 같다.

뉴스나 인터넷에서 흔히 날씨를 알 수 있는데, 이 날씨 데이터는 뉴스나 인터넷에서 데이터를 만드는 것이 아니라 기상청과 같은 곳에서 날씨 데이터를 받아서 제공한다. 뉴스와 기상청 사이에 데이터를 주고 받는 것이 필요한데, 이때 필요한 것이 인터페이스이며, 프로그램간에 주고 받는 것을 API라 한다.

수업예시

<div class="weather"></div>
<script>
  const weatherElement = document.querySelector(".weather");

const getSeoulWeather = async () => {
  const 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();
</script>

날씨 API를 구성하는 코드다. 여기서 API의 핵심은 API_KEY, API_URL이다. key는 나만이 갖고, 나만 알고 있어야 하는 것이다. 이를 URL과 연결하여 인증된 사용자만 API를 이용할 수 있다. 그리고 URL은 사용할 데이터를 요청하는 곳이다.

이것만 이해하고 나머지는, API doc, 즉 공식문서를 확인하는 게 가장 효과적이다.

cdn

cdn은 Content Delivery Network 약자로, 컨텐츠 전달 네트워크다. React에서 cdn은 React 라이브러리 파일과 종속성인 ReactDOM 파일을 호스팅하고 있는 서버로부터 파일을 다운로드하고 웹 페이지에 추가하는 역할을 한다.

예시

html코드의 헤더에 작성하면 된다.

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

이렇게 하면 html코드에서 React와 ReactDOM을 사용하는 것이 가능하다. 그러면 html코드에서 아래와 같은 코드도 사용이 가능하다.

React코드

<script type="text/babel">
  const root = document.getElementById('root')
  function MyComponent(props) {
    return React.createElement('h1', null, `안녕하세요 ${props.name}`);
  };
  ReactDOM.render(<MyComponent name={"yulgok"} />, root);
</script>

html script태그에 React문법도 사용이 가능해진다. 이걸 가능하게 해주는 것이 cdn 태그를 달았기 때문이고, 따로 설치할 필요없이 React에서 컨텐츠를 가져와 사용할 수 있게 해준다.

실습

gitHub : https://github.com/leeyulgok/3-Day-2/tree/main/%EC%8B%A4%EC%8A%B5

오늘의 실습내용은 크게 어려운 부분이 없었다. 기존에 배웠던 내용을 활용해서 React cdn을 활용하여 보여주는 거였기 때문에 어렵지 않게 했다.

로그인

간단하게 로그인을 만들었다. 아이디와 비밀번호를 입력하면 콘솔에 띄우는 거까지 했다. 여기서 중요한 점은 버튼을 눌렀을 때, 어떤 부분이 event로 target되는지를 아는 것이 중요하다.

이미지는 아이디와 비밀번호를 입력했을 때, 콘솔에 띄운 사진이다.

코드

const onLogin = (event) => {
  event.preventDefault();
  console.log(event.target.parentElement.id.value);
  console.log(event.target.parentElement.pw.value);
};

코드는 위와 같은데 event와 target을 본 후 어떤 요소들로 이루어졌는지 파악한 후 나머지 값을 가져왔다. react라 할지라도 웹을 잘 이해한다면, 값을 가져오고 보이는 것은 어렵지 않은 일이다.

정리하기

13일차는 API와 React에 대해 배웠다. API는 프론트엔드를 하면서 많이 사용될 중요한 부분이기 때문에 다양하게 활용하는 연습이 필요하다. 또한 React는 cdn을 활용하여 코드를 짰다. 핵심은 react를 활용했다는 점이다.

앞으로의 첫 발을 내딛기 시작했다. 그러니 집중해서 어떨 때 활용하는지 이해하며 공부하고, 이를 착실하게 기록해야겠다.

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