๐Ÿ‹ ๋ธŒ๋ผ์šฐ์ € (Browse)

์‚ฌ๋žŒ์ด ๋ณผ ์ˆ˜์žˆ๋„๋ก ๋ฒˆ์—ญํ•ด์คŒ.

์–ธ์–ด๋ฅผ ์ด์šฉํ•ด์„œ ์ž‘์„ฑํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•ด๋…ํ•ด์„œ ์ปดํ“จํ„ฐ์— ๋ฐ”์ด๋„ˆ๋ฆฌ(2์ง„์ˆ˜)๋ฐ์ดํ„ฐ๋ฅผ ๋„˜๊ฒจ์ค๋‹ˆ๋‹ค.
์ฒ˜๋ฆฌํ•œ ๊ฒƒ์„ ๋‹ค์‹œ ๋ธŒ๋ผ์šฐ์ €์— ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. (์Œ๋ฐฉํ–ฅ ํ†ต์‹  => ๊ตฌ๊ธ€ ํฌ๋กฌ, ์‚ฌํŒŒ๋ฆฌ)

๐Ÿถ ์„œ๋ฒ„ (Server)

ํด๋ผ์ด์–ธํŠธ(๊ณ ๊ฐ) ์™€ DB(๋Œ€๊ธฐ์—…) ์ค‘๊ฐ„์˜ ์œ ํ†ต์—…์ฒด.

์ œ๊ณตํ•˜๋Š” ์ฃผ์ฒด, ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์š”์ฒญํ•˜๋ฉด ์„œ๋ฒ„๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ๊ฐ€์ ธ์™€์„œ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.
์Šคํฌ๋ฆฐ์ƒท, 2019-08-03 22-24-16.png

๐Ÿฏ API (Application Programming Interface)

์„œ๋ฒ„ ์ž์›์„ ์ž˜ ๊ฐ€์ ธ๋‹ค ์“ธ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์–ด ๋†“์€ ๋ฉ”๋‰ดํŒ.

์ธํ„ฐํŽ˜์ด์Šค ๋ž€?
์ปดํ“จํ„ฐ ์‹œ์Šคํ…œ๋ผ๋ฆฌ ์ •๋ณด๋ฅผ ๊ตํ™˜ํ•˜๋Š” ๊ณต์œ  ๊ฒฝ๊ณ„๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
์‚ฌ๋ฌผ ๊ฐ„ ๋˜๋Š” ์‚ฌ๋ฌผ๊ณผ ์ธ๊ฐ„ ๊ฐ„์˜ ์˜์‚ฌ์†Œํ†ต์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ์ผ์‹œ์  ํ˜น์€ ์˜์†์ ์ธ ์ ‘๊ทผ์„ ๋ชฉ์ ์œผ๋กœ
๋งŒ๋“ค์–ด์ง„ ๋ฌผ๋ฆฌ์ , ๊ฐ€์ƒ์  ๋งค๊ฐœ์ฒด(์ ‘์ )๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๐Ÿท HTTP (HyperText Transfer Protocol)

๊ทœ์•ฝ๊ณผ ๊ทœ์น™์„ ์ง€ํ‚ค๋ฉฐ ๋จน์€ ๋งŒํผ ๋ฑ‰์Šต๋‹ˆ๋‹ค.

๊ทœ์•ฝ๊ณผ ๊ทœ์น™, ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ฃผ๋กœ HTML๋“ฑ์˜ ๋ฌธ์„œ๋กœ ์ฃผ๊ณ ๋ฐ›๋Š”๋ฐ ์‚ฌ์šฉํ•˜๋Š” ํฌ๋กœํ† ์ฝœ

  • http ๊ตฌ์„ฑ
    • header
      ์–ด๋””์„œ ๋ณด๋‚ด๋Š” ์š”์ฒญ์ธ๊ฐ€(origin)
      ์ปจํ…์ธ  ํƒ€์ž…์€ ๋ฌด์—‡์ธ๊ฐ€(content-type)
      ์–ด๋–ค ํด๋ผ์ด์–ธํŠธ๋ฅผ ์ด์šฉํ•ด ๋ณด๋ƒˆ๋Š”๊ฐ€(user-agent) ...
    • body
      ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๊ธฐ์œ„ํ•œ ๊ณต๊ฐ„
      method: GET, PUT, POST, PUT, DELETE ...
  • http ์†์„ฑ

    • stateless - ์š”์ฒญ์€ ๋…๋ฆฝ์  ์ด๊ธฐ ๋•Œ๋ฌธ์— state ๋ผ๋Š” ๊ฒƒ์ด ์—†๋‹ค.

    • connectionless - ์‘๋‹ต์„ ํ•˜๋Š” ์ˆœ๊ฐ„ ์—ฐ๊ฒฐ ์ข…๋ฃŒ

      GET - ์„œ๋ฒ„์— ์ž์›์„ ์š”์ฒญ
      POST - ์„œ๋ฒ„์— ์ž์›์„ ์ƒ์„ฑ (๋ฉ”์„ธ์ง€ ์ƒ์„ฑ)
      PUT - ์„œ๋ฒ„์˜ ์ž์›์„ ์ˆ˜์ • (ํ”„๋กœํ•„ ์—†๋Žƒ)
      DELETE - ์„œ๋ฒ„์˜ ์ž์›์„ ์ œ๊ฑฐ

๐Ÿผ ajax (

์„œ๋ฒ„ ์‘๋‹ต์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ํŽ˜์ด์ง€์˜ ๊ตฌ์„ฑ์š”์†Œ๋ฅผ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

  • dynamic web page ๋“ฑ์žฅ

    • ์„œ๋ฒ„์™€ ์ž์œ ๋กญ๊ฒŒ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋‹ค.
      XMLHttpRequest(XHR)
    • ํŽ˜์ด์ง€ ๊นœ๋นก์ž„ ์—†์ด seamless ํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.
      Javascript์™€ DOM ์‚ฌ์šฉ

    ๋‘๊ฐœ๋ฅผ ๋‹ค ํ•ฉ์ณ์„œ ajax ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

    • fetch API
      fetch ('URL') // ์„œ๋ฒ„์ฃผ์†Œ ,Defalult ๊ฐ’์€ GET
          .then(function(response) { // ์‘๋‹ต์„ ๋ฐ›์œผ๋ฉด
                return response.json(); // json์œผ๋กœ ๋˜์–ด์žˆ๋Š” ๊ฒƒ์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ object๋กœ ๋ฐ”๊ฟˆ
      })
          .then(function(json) {  
        // json ํ˜•ํƒœ๋กœ ์ „๋‹ฌ ๋ฐ›์€ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์‘๋‹ต              
      });

๐Ÿจ ์šฉ์–ด

  • DNS (Domain Name System)
    ๋„๋ฉ”์ธ ๋„ค์ž„ ์‹œ์Šคํ…œ, ํ˜ธ์ŠคํŠธ์˜ ๋„๋ฉ”์ธ ์ด๋ฆ„์„ ํ˜ธ์ŠคํŠธ์˜ ๋„คํŠธ์›Œํฌ ์ฃผ์†Œ๋กœ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ๊ทธ ๋ฐ˜๋Œ€์˜ ๋ณ€ํ™˜์„ ์ˆ˜ํ–‰ํ•จ.

์Šคํฌ๋ฆฐ์ƒท, 2019-08-04 00-30-31.png

  1. ์‚ฌ์šฉ์ž๊ฐ€ www.example.com์„ ์น˜๋ฉด
  2. ์ผ€์ด๋ธ” ์ธํ„ฐ๋„ท ๊ณต๊ธ‰์—…์ฒด, DSL ๊ด‘๋Œ€์—ญ ๊ณต๊ธ‰์—…์ฒด ๋˜๋Š” ๊ธฐ์—… ๋„คํŠธ์›Œํฌ์—์„œ ๊ด€๋ฆฌํ•˜๋Š” DNS ํ•ด์„๊ธฐ๋กœ ๋ผ์šฐํŒ…๋จ.
  3. ํ•ด์„๊ธฐ์—์„œ ์š”์ฒญ ๋ฐ›์€ www.example.com์„ DNS ๋ฃจํŠธ ์ด๋ฆ„์œผ๋กœ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
  4. ํ•ด์„๊ธฐ๋Š” ์ด๋ฒˆ์— ์š”์ฒญ ๋ฐ›์€๊ฒƒ์„ ๊ฐ€์ง€๊ณ  .com ๋„๋ฉ”์ธ์˜ TLD ์ด๋ฆ„ ์„œ๋ฒ„์ค‘ ํ•˜๋‚˜์— ๋‹ค์‹œ ์ „๋‹ฌํ•จ.
  5. ํ•ด์„๊ธฐ๋Š” ์ „๋‹ฌ ๋ฐ›์€๊ฒƒ์„ ๊ฐ€์ง€๊ณ  amazon์— ๊ฐ€์„œ ์š”์ฒญ ํ•ด๋‹น์ด๋ฆ„ ์„œ๋ฒ„๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
  6. amazon ์ด๋ฆ„ ์„œ๋ฒ„๋Š” example.com ํ˜ธ์ŠคํŒ… ์˜์—ญ์—์„œ www.example.com ๋ ˆ์ฝ”๋“œ๋ฅผ ์ฐพ์•„์„œ ์›น ์„œ๋ฒ„์˜
    IP wnth 190.0.2.44๋ฅผ ๋ฐ›์•„ DNS ํ•ด์„๊ธฐ๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  7. ๋“œ๋””์–ด IP ์ฃผ์†Œ๋ฅผ ํš๋“ญํ•ฉ๋‹ˆ๋‹ค. ํ•ด์„๊ธฐ๋Š” ๋‹ค์Œ์— ๋ˆ„๊ตฐ๊ฐ€ ํƒ์ƒ‰์„ ์ข€ ๋นจ๋ฆฌ ํ• ์ˆ˜ ์žˆ๋„๋ก IP์ฃผ์†Œ๋ฅผ ์บ์‹ฑํ•ฉ๋‹ˆ๋‹ค.
    ์บ์‹ฑ๊ถ๊ธˆํ•˜๋ฉด TTL (Time to Live)