API 그것이 뭐길래

 

 

오늘 내표정.gif

오늘은 본격 서버통신에 대한 수업이였다. ajax,,,,fetch,,,,POST,,GET,,

사실 독학할때부터 많이 들었지만 아무리 들어도 이해가 잘.......ㅎ,....

거기다 오늘은 Observer라는게 잇는것도 처음알았다....아무래도 익숙치가 않아서 머리에 잘 안들어온다(라고말하고싶다)

 

API? AJAX?

진짜 나같은 빡대가리도 이해하기쉽게 설명하면 API는 프로그램끼리 소통하는 방법을 말한다.

 

API에도 외부에서 데이터를 가져오는것과 내부에서 쓰는 것으로 나뉘게되는데

외부에서 가져오는 방법은 fetch에 가져올 url을 적고 .then 뒤에 이 api에 대한 옵션들을 작성하면된다

// 🌐 외부 서버 API
fetch("https://jsonplaceholder.typicode.com/posts") //이 url에서 불러올거임
  .then(res => res.json()) //res라는 데이터를 json으로 가져오겠음
  .then(data => console.log(data)); // 그리고 그 data(여기선 json)를 console에 찍으셈이란 뜻
  .catch(err => console.error(err)); // 만약 에러 발생시 이렇게 처리하겠음

 

 

그리고 AJAX도 매번 나와서 나를 혼란스럽게 하는데 오늘 확실히 개념을 잡았다.

옛날 AJAX가 없던시절엔 API를 호출할때 웹페이지를 새로고침 해야만 가져올수있었는데

이문제를 해결하기위해 만들어진것이 바로 AJAX이다,,

새로고침없이 데이터를 가져올수 있도록 비동기 통신을 할수있는 방식을 말하는것!

 

그래서 범주로 따지면 AJAX는 통신 방식이고, API는 통신 도구라고 말할수있다

 

 

 

브라우저 내장 API가 이렇게나 많다니

// 1️⃣ DOM API
document.querySelector(".btn");
element.addEventListener("click", () => {});

// 2️⃣ Fetch API (서버와 통신하는 도구)
fetch("https://api.example.com/data");

// 3️⃣ Intersection Observer API
new IntersectionObserver(callback);

// 4️⃣ Geolocation API
navigator.geolocation.getCurrentPosition();

// 5️⃣ Local Storage API
localStorage.setItem("key", "value");

// 6️⃣ Canvas API
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// 7️⃣ Web Audio API
const audioContext = new AudioContext();

 

요것들이 전부 브라우저안에서 설치없이 바로 쓸수있는 기능들이다.

전부알면 좋겠지만 일단 1~3번까지는 배웠으니까 익숙해져야지~!

 

 

ObserveAPI

~~ Observe라고 적혀있는 브라우저 내장기능들이다. 종류가 다양하고

오늘은 interserction을 위주로 실습을 해보았는데 wow 내손으로 무한스크롤을 만들어서 넘나신기 🫢

 

See the Pen Untitled by 배근영 (@lyla-bae) on CodePen.

👆 로고눌러서 코드펜에서 스크롤해보면 잘된다. 왜때문인지 블로그에 임베드하면 안됨,,

 

intersectionObserver ⭐️

요소가 화면에 보이는지를 감시할수있는데 우리가 아는 무한스크롤에 많이 쓰인다

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) { //그냥 여기까지 외우자
      console.log("요소가 보인다!");
    }
  });
});

observer.observe(document.querySelector(".box"));

 

여기서 주목해야할 포인트들은 아래와 같다!!

• Observer 생성: 감시자를 만든다
• observe() 실행: 특정 요소를 감시 시작
• isIntersecting: 요소가 화면에 보이면 true
• unobserve(): 감시 중지 (무한 반복 방지)

 

그러나 단순히 따라치는것만으로는 이해가 잘 가지않아서

마침 코딩애플님이 설명해주신 짧은 강의도 있길래 들어보았다.

설명을 너무 잘하신다.... 역시 진짜 코딩계의 흑종원

 

코딩애플 유튜브 강의

https://youtu.be/e4Afka5IOZ8?si=x6qdpmsUuC_nVbeZ

 

스크롤애니메이션을 실습예시로 보여주셨는데 보자마자 gsap이 떠올랐다

요즘은 라이브러리가 너무 잘되어있어서 이렇게 손수한땀한땀 구현할일이 있을까...? 라고 생각하는 순간

강사님이 그 라이브러리들이 결국 이 원리로 돌아가는것이니 배워야한다고 말씀하셨다 ㅎ,,

 

gsap 공식문서

https://gsap.com/

 

 

Mutation Observer API

const observer = new MutationObserver((mutations) => {
  console.log("DOM이 변경됨!", mutations);
});

observer.observe(document.body, {
  childList: true,    // 자식 추가/제거 감시
  attributes: true    // 속성 변경 감시
});

 

DOM이 변경되는지 감시한다. 동적인 콘텐츠나 새 메시지를 추가감지를 해 실시간채팅에 쓴다구한다

 

 

Resize Observer API

const observer = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    console.log("크기 변경!", entry.contentRect);
  });
});

observer.observe(document.querySelector(".box"));

 

요소 크기변경을 감시할수있다. 반응형디자인에 유용하게 쓰일수있겠다