[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : Javascript 3 & React 1

m_ngyeong·2023년 6월 23일

IT개발캠프 JavaScript React 개발자부트캠프 리액트 리액트캠프 부트캠프 스나이퍼팩토리 웅진씽크빅 유데미 인사이드아웃 프로젝트캠프 프로젝트캠프후기

[유데미x스나이퍼팩토리] 10주완성 프로젝트 캠프 React

목록 보기

13/28

JavaScript

Fetch API

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있다.

fetch()는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받는다.
응답은 Response 객체로 표현되며, JSON 응답 본문을 바로 반환하지는 않는다.

How to use Fetch API

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

첫번째 인자: URL
두번째 인자: 옵션 객체를 받고, Promise 타입의 객체를 반환
- 옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정
반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve
실패했을 경우에는 예외(error) 객체를 reject
응답(response) 객체로 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있음

API 활용하기

OpenWeather API 사용

const weather = document.getElementById("weather");
const API_KEY = "";
function getWeather(lat, lon) {
  console.log(lat, lon);
  //API 통신
  fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`
  )
    .then(function (response) {
      console.log(response);
      return response.json();
    })
    .then(function (json) {
      console.log(json);
      const temp = json.main.temp;
      const humidtiy = json.main.humidity;
      weather.innerText = `${temp} @ ${humidtiy}`;
    });
}

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

function handleGeoError() {
  console.log("Error!");
}

function init() {
  navigator.geolocation.getCurrentPosition(
    handleGeoSuccess, //1번째 인자: 위치정보를 가져오는 것을 성공시 실행 함수
    handleGeoError //2번째 인자: 위치정보를 가져오는 것을 실패시 실행 함수
  );
}
init();

HTMLElement: change

사용자가 요소의 값을 수정할때, <input> <select> <textarea> 요소에 대해 change 이벤트가 발생된다. <input>이벤트와 달리 change 이벤트는 요소의 값이 변경될 때마다 반드시 실행되는지는 않는다. addEventListener()와 같은 메서드에서 이벤트 이름을 사용하거나 이벤트 핸들러 속성을 설정하여 사용한다.

input 이벤트와의 차이점

input : 요소값 변경 직후에 발생하며, <select> 요소에서는 작동하지 않음
change: 요소값 변경 후에 요소가 focus 잃으면 발생하며, <select> 요소에서도 작동함

React

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 상태가 업데이트되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링한다.
Virtual DOM이라는 것은 가상의 DOM이다. 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로, JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다는 특징이 있다.

How to use React

Node와 빌드 도구를 설치한 개발환경을 세팅하는 것
CDN을 사용해서 온라인에서 바로 라이브러리를 끌어오는 것

React CDN

개발단계에서 사용하기에 좋으며, 별도의 빌드 과정 없이 React 애플리케이션을 빠르게 테스트하고 공유할 수 있다.

<!-- RecatJS는 애플리케이션을 아주 Interactive하도록 만들어주는 Library -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- ReactDom은 React element들을 HTML body에 둘 수 있도록 해주는 것 -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

Babel

JavaScript문법을 확장해주는 도구이다. Javascript로 결과물을 만들어주는 컴파일러로써 소스 대 소스 컴파일러, transpiler라고 불린다.

<!-- jsx 컴파일러 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

JSX(JS + XML)

JavaScript 파일 내에서 HTML과 유사한 마크업을 작성할 수 있는 JavaScript용 구문 확장이다.

The Rules of JSX

Return a single root element
- 구성 요소에서 여러 요소를 반환하려면 단일 상위 태그로 요소를 래핑한다.
- <div> 마크업에 엑스트라를 추가하고 싶지 않다면 대신 다음 <> </> 과 같이 작성할 수 있다.
- 빈 태그를 Fragment라고 하며, 브라우저 HTML 트리에 흔적을 남기지 않고 항목을 그룹화할 수 있다.
Close all the tags
- self-closing tags : <img />
- wrapping tags : <li>oranges</li>
camelCase most of the things
- JSX로 작성된 속성은 JavaScript 객체의 키가 된다.
- 변수 이름에 대한 제한이 있다. 예를 들어 이름에 대시를 포함하거나 와 같은 예약어를 사용할 수 없다.

참고문서
fetch(), https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
https://www.daleseo.com/js-window-fetch/
change, https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
React, https://react.dev/
babel, https://bravenamme.github.io/2020/02/12/what-is-babel/

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.