[TIL] 210920

Lee SyongΒ·2021λ…„ 9μ›” 20일
JavaScriptTILajax
0

TIL

λͺ©λ‘ 보기
33/204
post-thumbnail

πŸ“ 였늘 ν•œ 것

  1. 숫자 야ꡬ(Number Baseball) κ²Œμž„ κ΅¬ν˜„ μ™„λ£Œ

  2. μ›Ή μ„œλ²„ / μ„œλ²„μ™€ ν΄λΌμ΄μ–ΈνŠΈ / μ›Ή ν˜ΈμŠ€νŒ… / Ajax / fetch API / λ¦¬νŒ©ν† λ§ ν•¨μˆ˜


πŸ“– ν•™μŠ΅ 자료

  1. μƒν™œμ½”λ”© μ›Ή μ„œλ²„ κ°•μ˜ (μ„œλ²„μ™€ ν΄λΌμ΄μ–ΈνŠΈ / μ›Ή ν˜ΈμŠ€νŒ…)

  2. μƒν™œμ½”λ”© 2018 Ajax κ°•μ˜ 1 ~ 10편


πŸ“š 배운 것

숫자 야ꡬ κ²Œμž„

μ–΄μ œ ν’€μ΄μ—μ„œ μ΄μ–΄μ„œ

4. λ„€ 번째 μš”κ΅¬ 사항

μ‚¬μš©μžκ°€ 10νšŒκΉŒμ§€ μ‹œλ„ν•  수 μžˆλ„λ‘ μ œν•œν•©λ‹ˆλ‹€.

πŸ’‘ 이벀트 λ¦¬μŠ€λ„ˆ μ‚­μ œν•˜λŠ” 방법

removeEventListener('μ œκ±°ν•  이벀트 λ¦¬μŠ€λ„ˆμ˜ 이벀트 νƒ€μž…', μ œκ±°ν•  이벀트 λ¦¬μŠ€λ„ˆ ν•¨μˆ˜ 이름);

πŸ’‘ 문제 λ°œμƒ

  • μ‚¬μš©μžκ°€ ENTER ν‚€λ₯Ό 10번 ν΄λ¦­ν•œ ν›„ 이벀트 λ¦¬μŠ€λ„ˆκ°€ μ‚­μ œλ˜λ„λ‘ ν•΄μ•Ό 함

πŸ’‘ ν•΄κ²° 방법

  • 이벀트 λ¦¬μŠ€λ„ˆ 밖에, click λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κ³  0을 할당함

  • 이벀트 λ¦¬μŠ€λ„ˆ μ•ˆμ—, click++ λ₯Ό 좔가함

  • click이 10이 되면, 이벀트 λ¦¬μŠ€λ„ˆκ°€ μ‚­μ œλ˜λ„λ‘ 함

πŸ’‘ μˆ˜μ •ν•œ μ½”λ“œ

  • (μœ„μ˜ λ¬Έμ œμ™€λŠ” λ³„κ°œλ‘œ) var ν‚€μ›Œλ“œλ₯Ό const ν‚€μ›Œλ“œλ‘œ λ°”κΏ” 쀬닀
const enter = document.querySelector('.box-field-enter');
const userString = document.querySelector('#box-field-input');
const result = document.querySelector('.box-result');

let click = 0; // λ°˜λ“œμ‹œ 이벀트 λ¦¬μŠ€λ„ˆ 밖에 μ μ–΄μ€˜μ•Ό 함

enter.addEventListener('click', function clickEnter () {
  const random = hidden.innerText;
  const user = userString.value;

// (μ½”λ“œ μ€‘λž΅)

  const strikeCount = array.filter(e => e === 'strike').length;
  const ballCount = array.filter(e => e === 'ball').length;

  if (user.length !== 3) {
    alert('μ„Έ 자리 숫자λ₯Ό μž…λ ₯ν•΄μ•Ό ν•©λ‹ˆλ‹€.');
  } else if (user.length === 3) {
    result.innerText = `${strikeCount} strike ${ballCount} ball`;
  }

  // ENTERλ₯Ό λˆ„λ₯Ό λ•Œλ§ˆλ‹€ click에 ν• λ‹Ήλœ μˆ«μžκ°€ 1μ”© 증가
  click++;

  // click이 10이 되면 이벀트 λ¦¬μŠ€λ„ˆ μ‚­μ œ
  if (click === 10) {
    enter.removeEventListener('click', clickEnter);
  }
});

5. λ‹€μ„― 번째 μš”κ΅¬ 사항

κ²Œμž„ μž¬μ‹œμž‘ λ²„νŠΌμ„ λ§Œλ“€κ³ , μž¬μ‹œμž‘ ν•  수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.

πŸ’‘ < button type="reset" ></ button >

ν•΄λ‹Ή λ²„νŠΌμ„ 감싸고 μžˆλŠ” < form ></ form > μ•ˆμ— μžˆλŠ” μ‚¬μš©μž μž…λ ₯ 값듀을 μ΄ˆκΈ°ν™”ν•œλ‹€

πŸ’‘ μˆ˜μ •ν•œ μ½”λ“œ

πŸ”Ž HTML

  • RESTART λ²„νŠΌμ˜ type을 reset으둜 지정

  • form νƒœκ·Έ μœ„μΉ˜ μˆ˜μ •

<body>
  <section>

    <!-- μ•Όκ΅¬κ²Œμž„ Start -->
    <div class="box">
      <button class="box-start">START</button>
      <form class="box-field">

        <label for="box-field-input">숫자 μž…λ ₯ μΉΈ : </label>
        <input type="number" placeholder="μ„Έ 자리 숫자 μž…λ ₯" id="box-field-input">

        <button type="button" class="box-field-enter">ENTER</button>

        <div class="box-result"></div>
        <button type="reset" class="box-restart">RESTART</button>
      </form>
    </div>
    <!-- μ•Όκ΅¬κ²Œμž„ End -->
  </section>
</body>

πŸ’‘ 문제 λ°œμƒ

  • HTML만 μˆ˜μ •ν•˜λ‹ˆκΉŒ RESTART λ²„νŠΌμ„ λˆŒλŸ¬λ„ μ‚¬μš©μžμ˜ μž…λ ₯ κ°’λ§Œ μ΄ˆκΈ°ν™”λ  뿐 result.innerText 값은 사라지지 μ•ŠμŒ

πŸ’‘ ν•΄κ²° 방법

  • 문제 해결을 μœ„ν•΄ RESTART λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ result.innerText 값이 사라지도둝 λ²„νŠΌμ— 이벀트λ₯Ό 등둝함

πŸ’‘ μˆ˜μ •ν•œ μ½”λ“œ

πŸ”Ž javascript

// κ²Œμž„ μž¬μ‹œμž‘ λ²„νŠΌ
const restart = document.querySelector('.box-restart');

restart.addEventListener('click', function () {
  result.innerText = '';
});

6. ν…ŒμŠ€νŠΈ 및 점검

μš”κ΅¬ 사항은 λͺ¨λ‘ κ΅¬ν˜„μ„ μ™„λ£Œν–ˆλ‹€
그런데 ν…ŒμŠ€νŠΈλ₯Ό 해보닀 μ˜λ„ν•œ λŒ€λ‘œ μ‹€ν–‰λ˜μ§€ μ•ŠλŠ” 뢀뢄을 λ°œκ²¬ν•¨

πŸ’‘ 문제 λ°œμƒ

  • μ‚¬μš©μžκ°€ μ„Έ 자리 μˆ«μžκ°€ μ•„λ‹Œ 값을 input에 μž…λ ₯ν–ˆμ„ λ•Œλ„ click++κ°€ μ§„ν–‰λ˜μ–΄ 총 μ œν•œλœ 횟수 10λ²ˆμ— 포함됨

πŸ’‘ ν•΄κ²° 방법 (μˆ˜μ •ν•œ μ½”λ“œ)

  • μ‚¬μš©μžκ°€ μ„Έ 자리 숫자λ₯Ό μž…λ ₯ν–ˆμ„ κ²½μš°μ—λ§Œ click++이 μ§„ν–‰λ˜λ„λ‘ click++의 μœ„μΉ˜λ₯Ό else if ꡬ문 μ•ˆμœΌλ‘œ μ΄λ™μ‹œν‚΄

  • λ§ˆμ°¬κ°€μ§€λ‘œ click이 10이 됐을 λ•Œ 이벀트 λ¦¬μŠ€λ„ˆλ₯Ό μ œκ±°ν•˜λŠ” ꡬ문도 else if ꡬ문 μ•ˆμœΌλ‘œ μ΄λ™μ‹œν‚΄

if (user.length !== 3) {
  alert('μ„Έ 자리 숫자λ₯Ό μž…λ ₯ν•΄μ•Ό ν•©λ‹ˆλ‹€.');
} else if (user.length === 3) {
  result.innerText = `${strikeCount} strike ${ballCount} ball`;
  click++;
  if (click === 10) {
    enter.removeEventListener('click', clickEnter);
  }
}

πŸ“Œ 숫자 야ꡬ κ²Œμž„ μ΅œμ’… μ½”λ“œ

πŸ”Ž HTML

<html>
  <body>
    <section>
      <div class="box">
        <button class="box-start">START</button>
        <form class="box-field">
          <label for="box-field-input">숫자 μž…λ ₯ μΉΈ : </label>
          <input type="number" placeholder="μ„Έ 자리 숫자 μž…λ ₯" id="box-field-input">
          <button type="button" class="box-field-enter">ENTER</button>
          <div class="box-result"></div>
          <button type="reset" class="box-restart">RESTART</button>
        </form>
      </div>
    </section>
    <p class="hidden"></p>
  </body>
</html>

πŸ”Ž CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  border: 1px solid black;
  background: transparent;
  cursor: pointer;
  border-radius: 5px;
  background-color: white;
}

body {
  padding: 80px;
}

section {
  max-width: 1000px;
  margin: 0 auto;
}

.box {
  text-align: center;
  margin: 40px;
  padding: 40px;
  border: 2px solid black;
  border-radius: 5px;
}

.box-start {
  margin: 20px;
  padding: 10px 20px;
}

.box-field {
  margin: 20px;
}

.box-field-enter {
  margin: 20px;
  padding: 3px 10px;
}

.box-result {
  border: 1px solid black;
  border-radius: 5px;
  background-color: white;
  height: 100px;
  margin: 40px;
  line-height: 5;
}

.box-restart {
  margin-bottom: 20px;
  padding: 10px 20px;
}

.hidden {
  display: none;
}

πŸ”Ž javascript

'use strict';

// 1. κ²Œμž„ μ‹œμž‘ λ²„νŠΌ - λžœλ€ν•œ μ„Έ 자리 숫자 (보이지 μ•Šκ²Œ)
const start = document.querySelector('.box-start');
const hidden = document.querySelector('.hidden');

start.addEventListener('click', function () {
  const naturalOne = Math.floor((Math.random() * (10 - 0)) + 0);
  const naturalTwo = Math.floor((Math.random() * (10 - 0)) + 0);
  const naturalThree = Math.floor((Math.random() * (10 - 0)) + 0);

  const randomString = `${naturalOne}${naturalTwo}${naturalThree}`;
  hidden.innerText = randomString;
});

// 2. μ—”ν„° ν‚€ - μ„Έ 자리 숫자 x, κ²½κ³  μ°½
// 3. μ—”ν„° ν‚€ - '랜덀 숫자' vs 'μž…λ ₯ κ°’' 비ꡐ, λ³Ό/슀트라이크 좜λ ₯
// 4. μ‚¬μš©μžκ°€ 10νšŒκΉŒμ§€ μ‹œλ„ν•  수 μžˆλ„λ‘ μ œν•œ
// 6. μ„Έ 자리 숫자 μž…λ ₯ μ‹œμ—λ§Œ 10νšŒμ— ν¬ν•¨λ˜λ„λ‘
const enter = document.querySelector('.box-field-enter');
const userString = document.querySelector('#box-field-input');
const result = document.querySelector('.box-result');

let click = 0;

enter.addEventListener('click', function clickEnter () {
  // hidden.innerText(랜덀 숫자)λŠ” string
  // userString.value(μ‚¬μš©μž μž…λ ₯ κ°’)도 string
  const random = hidden.innerText;
  const user = userString.value;

  const a = Number(random[0]);
  const b = Number(random[1]);
  const c = Number(random[2]);
  const x = Number(user[0]);
  const y = Number(user[1]);
  const z = Number(user[2]);

  function compareAX () {
    if (a === x) {
      return 'strike';
    }
  }

  function compareAY () {
    if (a === y) {
      return 'ball';
    }
  }

  function compareAZ () {
    if (a === z) {
      return 'ball';
    }
  }

  function compareBX () {
    if (b === x) {
      return 'ball';
    }
  }

  function compareBY () {
    if (b === y) {
      return 'strike';
    }
  }

  function compareBZ () {
    if (b === z) {
      return 'ball';
    }
  }

  function compareCX () {
    if (c === x) {
      return 'ball';
    }
  }

  function compareCY () {
    if (c === y) {
      return 'ball';
    }
  }

  function compareCZ () {
    if (c === z) {
      return 'strike';
    }
  }

  const array = [compareAX(), compareAY(), compareAZ(), compareBX(), compareBY(), compareBZ(), compareCX(), compareCY(), compareCZ()];

  const strikeCount = array.filter(e => e === 'strike').length;
  const ballCount = array.filter(e => e === 'ball').length;

  if (user.length !== 3) {
    alert('μ„Έ 자리 숫자λ₯Ό μž…λ ₯ν•΄μ•Ό ν•©λ‹ˆλ‹€.');
  } else if (user.length === 3) {
    result.innerText = `${strikeCount} strike ${ballCount} ball`;
    click++;
    if (click === 10) {
      enter.removeEventListener('click', clickEnter);
    }
  }
});

// 5. κ²Œμž„ μž¬μ‹œμž‘ λ²„νŠΌ
const restart = document.querySelector('.box-restart');

restart.addEventListener('click', function () {
  result.innerText = '';
});

μ›Ή μ„œλ²„

μƒν™œμ½”λ”© μ›Ή μ„œλ²„ κ°•μ˜ μ°Έκ³ 

1. μ„œλ²„μ™€ ν΄λΌμ΄μ–ΈνŠΈ

μ„œλ²„μ™€ ν΄λΌμ΄μ–ΈνŠΈ

  • ν΄λΌμ΄μ–ΈνŠΈ(client) : 정보λ₯Ό μš”μ²­ν•˜λŠ” 컴퓨터 (μ›Ή/κ²Œμž„/μ±„νŒ… ν΄λΌμ΄μ–ΈνŠΈ λ“±)

  • μ„œλ²„(server) : 정보λ₯Ό μ‘λ‹΅ν•˜λŠ” 컴퓨터 (μ›Ή/κ²Œμž„/μ±„νŒ… μ„œλ²„ λ“±)


2. μ›Ή ν˜ΈμŠ€νŒ…

κΉƒν—ˆλΈŒμ—μ„œ μ§€μ›ν•˜λŠ” μ›Ή ν˜ΈμŠ€νŒ… μ„œλΉ„μŠ€ 이용

  • public으둜 repository λ§Œλ“€κΈ°

  • repositoryμ—μ„œ Setting λ©”λ‰΄μ˜ GitHub Pages 클릭

  • sourceμ—μ„œ Branch: main λ˜λŠ” master 선택 ν›„ save

  • λ°”λ‘œ μœ„μ— μƒμ„±λœ μ£Όμ†Œ ν΄λ¦­ν•˜κΈ°

  • 404 errorκ°€ 뜨면 쑰금 κΈ°λ‹€λ¦° ν›„ μƒˆλ‘œκ³ μΉ¨ ν•΄λ³΄κ±°λ‚˜ ν˜„ μ£Όμ†Œ 뒀에 html 파일 이름 λΆ™μ—¬ λ„£κ³  μ—”ν„° λˆ„λ₯΄κΈ°


Ajax

μƒν™œμ½”λ”© 2018 Ajax κ°•μ˜ (1 ~ 10편) μ°Έκ³ 

1. μ •μ˜ 및 ν•„μš”μ„±

  • μ›Ή νŽ˜μ΄μ§€λ₯Ό λΆ€λΆ„μ μœΌλ‘œ κ°±μ‹ ν•  수 μžˆλ„λ‘ ν•΄μ€€λ‹€

    ex. μ‚¬μ΄νŠΈ λ‚΄ λͺ¨λ“  νŽ˜μ΄μ§€μ˜ μΉ΄ν…Œκ³ λ¦¬ 기호λ₯Ό < ol >μ—μ„œ < ul >둜 λ³€κ²½ν•˜κ³  싢은 경우, κΈ°λ³Έ index.html만 μˆ˜μ •ν•΄μ€˜λ„ ajaxλ₯Ό μ΄μš©ν•΄ λ™μ μœΌλ‘œ λͺ¨λ“  νŽ˜μ΄μ§€μ˜ μΉ΄ν…Œκ³ λ¦¬ 기호 λ³€κ²½ κ°€λŠ₯

  • 이λ₯Ό 톡해 ν•˜λ‚˜μ˜ νŽ˜μ΄μ§€μ—μ„œ μ—¬λŸ¬ 정보듀을 ν‘œν˜„ν•  수 μžˆλŠ”, single-page application을 κ΅¬ν˜„ν•  수 μžˆλ‹€


2. λ™μ μœΌλ‘œ μ½˜ν…μΈ  λ³€κ²½ν•˜κΈ°

(μ˜ˆμ‹œλ₯Ό λ“€μ–΄ μ„€λͺ…)

Ajaxλ₯Ό μ΄μš©ν•˜λ©΄,

  • 메뉴λ₯Ό ν΄λ¦­ν–ˆμ„ λ•Œ
    μ›Ή νŽ˜μ΄μ§€λ₯Ό reload ν•˜μ§€ μ•Šκ³ 
    νŽ˜μ΄μ§€μ˜ 일정 λΆ€λΆ„λ§Œμ„ μ›Ή λΈŒλΌμš°μ €κ°€ μ›Ή μ„œλ²„μ— μš”μ²­ν•΄ κ°€μ Έμ™€μ„œ 화면에 ν‘œμ‹œν•˜λ„λ‘ ν•  수 μžˆλ‹€

  • μ½˜ν…μΈ λ₯Ό λ™μ μœΌλ‘œ λ³€κ²½ν•˜κ³  μ‹Άλ‹€λ©΄
    μ›Ή λΈŒλΌμš°μ €κ°€ μ›Ή μ„œλ²„μ— 접속해
    λ³„λ„μ˜ νŒŒμΌμ—μ„œ μ½˜ν…μΈ λ₯Ό μˆ˜μ •ν•˜κ³  μ½μ–΄μ˜€λ„λ‘ ν•  수 μžˆλ‹€


3. fetch API

1) Ajax

  • Asynchronous Javascript And Xml (비동기식 μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ xml)

  • μ›Ή λΈŒλΌμš°μ €κ°€ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ΄μš©ν•˜μ—¬ μ›Ή μ„œλ²„μ— 접속해 정보λ₯Ό κ°€μ Έμ˜€λŠ” 방법

2) fetch API

Ajaxλ₯Ό κ΅¬ν˜„ν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•˜λŠ” 기술

예제

onclick="
fetch('html').then(function(response){
  response.text().then(function(text){
    document.querySelector('article').innerHTML = text;
  })
})
"

μ‰½κ²Œ ν’€μ–΄μ„œ ν•΄μ„ν•˜λ©΄,

  • μ›Ή μ„œλ²„μ— 'html'μ΄λΌλŠ” νŒŒμΌμ„ μš”μ²­ν•œλ‹€
  • μ›Ή μ„œλ²„μ˜ 응닡이 λλ‚˜λ©΄ document.que rySelector('article').innerHTML = text; 뢀뢄이 μ‹€ν–‰λœλ‹€
  • textλΌλŠ” λ³€μˆ˜ μ•ˆμ—λŠ” μ›Ή μ„œλ²„κ°€ μ‘λ‹΅ν•œ 데이터가 λ‹΄κΈ°κ²Œ λœλ‹€

3) fetch API λœ―μ–΄λ³΄κΈ°

예제

fetch('html').then(function(response){
  console.log(response.status);
  if (response.status == '404') {
    alert('not found');
  }
});

πŸ”Ž fetch APIλ₯Ό 톡해 ν΄λΌμ΄μ–ΈνŠΈκ°€ μ„œλ²„μ—κ²Œ μš”μ²­ν•˜λ„λ‘ 함

fetch('html')
// μ›Ή λΈŒλΌμš°μ €μ•Ό, htmlμ΄λΌλŠ” νŒŒμΌμ„ μ„œλ²„μ—κ²Œ μš”μ²­ν•΄μ€˜.

πŸ”Ž μ„œλ²„μ˜ 응닡이 끝날 λ•ŒκΉŒμ§€ 마λƒ₯ 기닀리지 μ•Šκ³  λ‹€λ₯Έ μ½”λ“œκ°€ ν•¨κ»˜ 싀행될 수 μžˆλ„λ‘ μ„œλ²„μ˜ 응닡이 λλ‚˜λ©΄ μ‹€ν–‰μ‹œν‚¬ ν•¨μˆ˜λ₯Ό μ˜ˆμ•½ν•΄λ‘ 

function callbackme() {
  console.log('response end'); // (μ˜ˆμ œμ™€ λ‹€λ₯΄κ²Œ μž„μ‹œλ‘œ μ“΄ μ½”λ“œ)
}

fetch('html').then(callbackme);
// fetch APIμ•Ό, μ„œλ²„μ˜ 응닡이 λλ‚˜λ©΄ λ‚΄κ°€ μ •μ˜ν•΄λ†“μ€ callbackmeλΌλŠ” ν•¨μˆ˜λ₯Ό μ‹€ν–‰μ‹œμΌœμ€˜.

console.log(1);
console.log(2);

console 창에 좜λ ₯λ˜λŠ” μˆœμ„œ

1
2
response end

즉, fetchκ°€ μ‹€ν–‰λ˜λŠ” λ™μ•ˆμ—(μ„œλ²„κ°€ μ‘λ‹΅ν•˜λŠ” λ™μ•ˆ) λ‹€λ₯Έ μ½”λ“œκ°€ ν•¨κ»˜ 싀행될 수 μžˆλ‹€ β†’ λΉ„λ™κΈ°μ μœΌλ‘œ μ‹€ν–‰λœλ‹€

πŸ’‘ λΉ„λ™κΈ°λž€?
μš”μ²­κ³Ό κ²°κ³Όκ°€ λ™μ‹œμ— μΌμ–΄λ‚˜μ§€ μ•ŠλŠ”λ‹€

πŸ”Ž fetch API에 λ“€μ–΄κ°ˆ ν•¨μˆ˜λŠ” λ‹€λ₯Έ κ³³μ—μ„œ 뢈릴 일이 μ—†κΈ° λ•Œλ¬Έμ— 보톡 읡λͺ… ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•œλ‹€. μ˜ˆμ œμ—μ„œ μ‚¬μš©ν•œ ν•¨μˆ˜λ„ 읡λͺ… ν•¨μˆ˜μ΄λ―€λ‘œ 고쳐주면,

fetch('html').then(function(){
  console.log('response end');
});

πŸ”Ž fetch APIκ°€ then에 주어진 읡λͺ…μ˜ 콜백 ν•¨μˆ˜λ₯Ό μ‹€ν–‰μ‹œν‚¬ λ•Œ ν•¨μˆ˜μ˜ 첫 번째 인자둜 responseλΌλŠ” 객체λ₯Ό 쀌

fetch('html').then(function(response){
  console.log(response);
});

πŸ’‘ response 객체

  • fetch APIλ₯Ό 톡해 'html'을 μš”μ²­ν–ˆμ„ λ•Œ μ„œλ²„κ°€ μ‘λ‹΅ν•œ κ²°κ³Όλ₯Ό λ‹΄κ³  μžˆλŠ” 객체
  • κ·Έ 속성 값듀을 톡해 μ„œλ²„λž‘ 톡신을 ν•  λ•Œ μ–΄λ–€ μƒνƒœλ‘œ 톡신이 μ΄λ£¨μ–΄μ‘ŒλŠ”μ§€ μ•Œ 수 μžˆλ‹€

πŸ’‘ response 객체의 status 속성 κ°’

  • 200 ok
    β†’ μ„œλ²„κ°€ μš”μ²­λ°›μ€ λ¦¬μ†ŒμŠ€λ₯Ό μ°Ύμ•˜λ‹€ (μš”μ²­ 성곡)
  • 304 not modified
    β†’ μš”μ²­ν•œ λ¦¬μ†ŒμŠ€κ°€ 이전 μš”μ²­ λ•Œμ™€ 비ꡐ해 μˆ˜μ •λ˜μ§€ μ•Šμ•˜λ‹€
  • 404 not found
    β†’ μ„œλ²„κ°€ μš”μ²­λ°›μ€ λ¦¬μ†ŒμŠ€λ₯Ό 찾지 λͺ»ν–ˆλ‹€ (μš”μ²­ μ‹€νŒ¨)
fetch('javascript').then(function(response){
  console.log(response.status);
  // μ„œλ²„κ°€ μš”μ²­λ°›μ€ λ¦¬μ†ŒμŠ€λ₯Ό 찾지 λͺ»ν•œ 경우, 경고창을 λ„μš°λ„λ‘ 함
  if (response.status == '404') {
    alert('not found');
  }
});

4. λ¦¬νŒ©ν† λ§ ν•¨μˆ˜ν™”

  • 이름을 지은 ν•¨μˆ˜μ— μž¬μ‚¬μš©ν•  μ½”λ“œλ₯Ό λ„£μ–΄μ€€λ‹€

  • ν•΄λ‹Ή μ½”λ“œμ—μ„œ λ°”λ€” 수 μžˆλŠ” 뢀뢄에 λ³€μˆ˜λ₯Ό λ„£μ–΄μ€€ ν›„ 같은 λ³€μˆ˜λ₯Ό λ§€κ°œλ³€μˆ˜μ—λ„ 적어 μ€€λ‹€

function fetchPage (name) {
  fetch(name).then(function(response){
    response.text().then(function(text){
      document.querySelector('article').innerHTML = text;
    })
  });
}
  • onclick μ†μ„±μ˜ κ°’μœΌλ‘œ ν•΄λ‹Ή ν•¨μˆ˜λ₯Ό 적어쀀닀
<li><a onclick="fetchPage('html')"></a></li>
<li><a onclick="fetchPage('css')"></a></li>
<li><a onclick="fetchPage('javascript')"></a></li>

✨ 내일 ν•  것

  1. μƒν™œμ½”λ”© 2018 Ajax κ°•μ˜ μ΄μ–΄μ„œ λ“£κΈ°
profile
Lee Syong
λŠ₯λ™μ μœΌλ‘œ μ‚΄μž, ν–‰λ³΅ν•˜κ²ŒπŸ˜
이전 포슀트

[TIL] 210919

λ‹€μŒ 포슀트

[TIL] 210921

0개의 λŒ“κΈ€