[DAY 17] VanillaJS를 통한 자바스크립트 기본 역량 강화 I (6)

송히·2023년 10월 11일

TIL

[데브코스 프론트엔드] TIL & MIL & 회고

목록 보기

11/27

Today I Learn📖

fetch API 사용해보기 (강의)

정적 HTML과 동적 JAVASCRIPT (추가 학습)

fetch API 사용해보기

API 사용에 서툰 경우, 일단 더미데이터로 코드 짜고 API 끼우기 !

API 도메인을 뽑아내서 상수로 관리 or 외부의 환경 변수로 사용할 수 있음

//api.js

/* 아래처럼 API 도메인을 뽑아내면 됨. 이건 END_POINT로 관리하는 경우임 */
const API_END_POINT = "https://kdt.roto.codes"

export const request = (url) => {
  return fetch('${API_END_POINT}/${url}')
    .then(res => {
      if (res.ok) { // 잘 받았으면 json으로 변환
        return res.json()
      }
      throw new Error(`${res.status} Error`) // 아니면 에러
    })
    .catch(e => alert(e.message))
}

render() 함수는 파라미터가 없어야함
-> 외부의 영향 없이 자기 자신의 state만으로 렌더링 되어야함 !

2가지 API속 data를 한번에 사용하는 방법

Promise.all 2번 사용
-> 각각 2개의 데이터를 한꺼번에 모으기 (여전히 따로 존재하긴 함)
알고리즘을 이용해 두 데이터를 원하는 형태로 가공

/* 1번 */
const fetchOptionData = (productId) => {
  return request(`/products/${productId}`) // product 정보 불러오기
    .then((product) => {
      return request(`/product-options?product.id=${product.id}`); // 각 id별로 옵션 불러오기
    })
    .then((productOptions) => {    
      return Promise.all([ // productOptions와 product-option-stocks를 둘 다 감싼 Promise.all
        Promise.resolve(productOptions), // productOptions 정보 -> reslove 썼으니까 얘 자체도 Promise값 됨
        Promise.all( // productOptions의 id에 해당하는 각 옵션과 그 옵션에 따른 재고들
          productOptions.map((productOption) => productOption.id).map((id) => { 
          return request(`/product-option-stocks?productOption.id=${id}`);
          })
        )
      ]);
    })
    .then((data) => {
      console.log(data); // Promise.all을 2번 이용해 배열에 두 데이터 담은 값 출력 (Promise.all 반환 형태가 원래 배열임)
    });

    /* 2번 */
    .then((data) => { // 위의 console.log 대신 형태 가공
      const [productOptions, stocks] = data;
      const optionData = productOptions.map((productOption, i) => {
        const stock = stocks[i][0].stock;

        return { 
          optionId: productOption.id, 
          optionName: productOption.optionName, 
          optionPrice: productOption.optionprice, 
          stock 
        };
      });

      console.log(optionData);
    });
};

Array.isArray()를 방어 코드로 사용하는 이유
1. 데이터가 배열이 아닌 예상치 못한 타입일 때 에러 방지
  -> 배열 대신 null, undefined, 혹은 객체일 때 발생할 수 있는 에러 예방
2. 순회 메서드 사용시 에러 방지
  -> 보통 배열을 순회(map, forEach, ...)하거나 데이터를 렌더링 하려면 배열 형태여야 함
  => 어찌됐건 방어 코드를 넣는 습관은 가지는 것이 좋음. 나중에 큰 버그를 막아줄 수 있기 때문 !

데이터를 한 곳에서 관리하고, 변경된 데이터와 관련한 컴포넌트의 state만 갱신해서 화면에 리렌더링 되게 설계하기
-> 데이터에 맞춰 화면이 바뀌는 게 보장되기 때문에, 올바른 데이터가 오면 올바르게 렌더링 됨이 보장됨 !

정적 HTML과 동적 JAVASCRIPT

정적 HTML

HTML은 웹 페이지의 구조와 내용을 정의함

사용자 인터렉션에 반응하지 않음
데이터 변화에 따른 화면 업데이트 불가
스스로 구조나 요소 바꾸기 불가

=> HTML 자체는 변화가 없는 상태 (정적)

동적 자바스크립트

웹 페이지의 DOM 요소를 조작해 동작을 추가하기 때문에, 자바스크립트를 통해 정적 웹페이지를 동적 어플리케이션으로 바꿈

사용자 인터렉션에 따라 반응함
서버에서 데이터 받아와서 실시간 업데이트 가능
HTML 문서의 DOM 요소 조작 가능
조건문과 반복문을 통해 다양한 로직 구현 가능

특징 HTML 자바스크립트
역할 웹 페이지의 정적 구조 정의 어플리케이션의 동작 & 상호작용
변화 여부 정적, 변화 X (상호작용 X) 동적, 변화 O (상호작용 O)
언어 타입 마크업 언어 (구조, 내용) 프로그래밍 언어 (로직, 동작)

특징	HTML	자바스크립트
역할	웹 페이지의 정적 구조 정의	어플리케이션의 동작 & 상호작용
변화 여부	정적, 변화 X (상호작용 X)	동적, 변화 O (상호작용 O)
언어 타입	마크업 언어 (구조, 내용)	프로그래밍 언어 (로직, 동작)