diff --git a/docs/kangwook/week3.md b/docs/kangwook/week3.md new file mode 100644 index 0000000..2cc4296 --- /dev/null +++ b/docs/kangwook/week3.md @@ -0,0 +1,167 @@ +# πŸ“Œ API 연동 방법 + +  +## CORS Error + +- **CORSλž€?** + +**Cross-Origin Resource Sharing둜 ꡐ차 좜처 λ¦¬μ†ŒμŠ€ κ³΅μœ μ΄λ‹€.** + +ꡐ차 μΆœμ²˜λž€ λ‹€λ₯Έ 좜처라고 ν•  수 μžˆλ‹€. + +즉, λ‹€λ₯Έ 좜처λ₯Ό 가진 λ¦¬μ†ŒμŠ€μ— μ ‘κ·Όν•  수 있게 ν•˜λŠ” λ³΄μ•ˆ λ©”μ»€λ‹ˆμ¦˜μ΄λ‹€. + +- **좜처(Origin)λž€?** + +![image](https://github.com/inu-appcenter/basic-study-16th/assets/62889359/c62b9ec6-d9ec-4d56-b634-0e58f51b984b) + +μΆœμ²˜λž€ URLμ—μ„œ Protocol, Port, Hostλ₯Ό μ˜λ―Έν•œλ‹€. + +- **CORS Errorλž€?** + +기본적으둜 μ›ΉλΈŒλΌμš°μ €λŠ” SOP(Same-Origin-Policy)λΌλŠ” 동일 좜처 정책을 지킨닀. + +즉, 동일 좜처(Same-Origin) μ„œλ²„μ— μžˆλŠ” λ¦¬μ†ŒμŠ€λŠ” 자유둭게 κ°€μ Έμ˜¬ 수 μžˆμ§€λ§Œ, λ‹€λ₯Έ 좜처(Cross-Origin) μ„œλ²„μ— μžˆλŠ” μ΄λ―Έμ§€λ‚˜ 유튜브 μ˜μƒ 같은 λ¦¬μ†ŒμŠ€λŠ” μƒν˜Έμž‘μš©μ΄ λΆˆκ°€λŠ₯ν•˜λ‹€λŠ” 말이닀. + +λ”°λΌμ„œ CORS ErrorλŠ” SOP에 μœ„λ°°λ˜λŠ” λ¦¬μ†ŒμŠ€λ₯Ό κ°€μ Έμ˜¬ λ•Œ λ‚˜νƒ€λ‚˜λŠ” μ—λŸ¬μ΄λ‹€. + +ν•˜μ§€λ§Œ SOP Errorκ°€ μ•„λ‹Œ CORS Error인 μ΄μœ λŠ” λ‹€λ₯Έ Origin에 μžˆλŠ” λ¦¬μ†ŒμŠ€λ₯Ό κ°€μ Έμ˜¬ λ•Œ, + +CORS 정책을 지킀면 ν—ˆμš©ν•΄μ£ΌκΈ° λ•Œλ¬Έμ— CORS 정책을 μ•ˆμ§€μΌ°λ‹€λŠ” μ—λŸ¬μ΄λ‹€. + +  +## Mocking + +- Mockingμ΄λž€? + +Mocking은 ν”„λ‘ νŠΈμ—”λ“œμ—μ„œ λ°±μ—”λ“œμ˜ μ„œλΉ„μŠ€λ₯Ό λͺ¨λ°©ν•˜λŠ” 기술둜, μ‹€μ œ μ„œλ²„λ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³  API 호좜 ν”„λ‘œμ„ΈμŠ€λ₯Ό λͺ¨λ°©ν•˜λŠ” κΈ°μˆ μ΄λ‹€. + +- Mocking의 ν•„μš”μ„± + +μ›Ή 개발 κ³Όμ •μ—μ„œ λ°±μ—”λ“œ μ‹œμŠ€ν…œμ΄λ‚˜ μ™ΈλΆ€ APIμ™€μ˜ 톡신이 ν•„μš”ν•œ κ²½μš°κ°€ λ§Žλ‹€. + +μ΄λ•Œ, μ‹€μ œ μ„œλΉ„μŠ€λ‚˜ APIκ°€ μ€€λΉ„λ˜μ§€ μ•Šμ•˜κ±°λ‚˜, ν…ŒμŠ€νŠΈλ₯Ό μœ„ν•΄ νŠΉμ • 응닡을 μ‘°μž‘ν•΄μ•Ό ν•  ν•„μš”κ°€ μžˆμ„ λ•Œ λͺ¨ν‚Ή(Mocking)이 ν•„μš”ν•˜λ‹€. + +λͺ¨ν‚Ήμ€ 개발 초기 λ‹¨κ³„μ—μ„œλΆ€ν„° λ°±μ—”λ“œμ™€μ˜ 톡신을 κ°€μ •ν•˜κ³  ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμ„ 진행할 수 있게 ν•΄μ£Όλ©°, λ‹¨μœ„ ν…ŒμŠ€νŠΈμ—μ„œλ„ μ™ΈλΆ€ μ˜μ‘΄μ„± 없이 μ½”λ“œλ₯Ό 검증할 수 있게 ν•΄μ€€λ‹€. + +- κ΅¬ν˜„ 방법 + +μ΄λŸ¬ν•œ λͺ¨ν‚Ήμ€ MSW(Mock Service Worker)와 같은 도ꡬλ₯Ό μ‚¬μš©ν•˜μ—¬ κ΅¬ν˜„ν•  수 μžˆλ‹€. MSWλŠ” μ„œλΉ„μŠ€ μ›Œμ»€λ₯Ό ν™œμš©ν•΄ λ„€νŠΈμ›Œν¬ μš”μ²­μ„ κ°€λ‘œμ±„κ³ , 미리 μ •μ˜λœ 응닡을 λ°˜ν™˜ν•¨μœΌλ‘œμ¨ μ‹€μ œ λ°±μ—”λ“œ 없이도 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ ν…ŒμŠ€νŠΈν•  수 있게 ν•΄μ€€λ‹€. + +  +## 각 HTTP Methodλ§ˆλ‹€ returnν•΄μ€˜μ•Όν•˜λŠ” Status CodeλŠ”? + +- 200 Ok + +ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ„ μ„œλ²„κ°€ μ •μƒμ μœΌλ‘œ μ²˜λ¦¬ν–ˆλ‹€. + +성곡에 λŒ€ν•œ λͺ¨λ“  μƒνƒœ μ½”λ“œλ₯Ό 200으둜 응닡해도 크게 상관없닀. + +ν•˜μ§€λ§Œ, ν΄λΌμ΄μ–ΈνŠΈμ—κ²Œ 더 μ •ν™•ν•˜κ³  μžμ„Έν•œ 정보λ₯Ό μ œκ³΅ν•˜κΈ° μœ„ν•΄μ„  μ μ ˆν•œ μƒνƒœ μ½”λ“œλ₯Ό λ³΄λ‚΄λŠ” 것이 μ’‹λ‹€. + +거의 λͺ¨λ“  HTTP Method에 μ‚¬μš©ν•œλ‹€. + +- 201 Created + +ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ„ μ„œλ²„κ°€ μ •μƒμ μœΌλ‘œ μ²˜λ¦¬ν–ˆκ³  μƒˆλ‘œμš΄ λ¦¬μ†ŒμŠ€κ°€ μƒκ²Όλ‹€λŠ” λœ»μ΄λ‹€. + +주둜 POST, PUT μš”μ²­μ— λŒ€ν•œ μ‘λ‹΅μœΌλ‘œ μ‚¬μš©λœλ‹€. + +- 204 No Content + +ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ€ 정상적이닀. ν•˜μ§€λ§Œ 컨텐츠λ₯Ό μ œκ³΅ν•˜μ§€ μ•ŠλŠ”λ‹€λŠ” λœ»μ΄λ‹€. + +주둜 DELETE μš”μ²­μ— λŒ€ν•œ μ‘λ‹΅μœΌλ‘œ μ‚¬μš©λœλ‹€. + +μžμ› μ‚­μ œ μš”μ²­μ„ ν–ˆκ³  이 μš”μ²­μ΄ μœ νš¨ν•˜λ‹ˆ μ„œλ²„λŠ” ν•΄λ‹Ή μžμ›μ„ μ‚­μ œν–ˆλ‹€. 더 이상 응닡할 컨텐츠가 μ—†κΈ° λ•Œλ¬Έμ— 컨텐츠가 μ—†λŠ” 204둜 μ‘λ‹΅ν•œλ‹€. + +  +## 4xx, 5xx Status code 쀑 μ‚¬μš©ν• λ§Œν•œ Status Code 정리해보기 + +**4XX Client Errors: ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ΄ μœ νš¨ν•˜μ§€ μ•Šμ•„ μ„œλ²„κ°€ ν•΄λ‹Ή μš”μ²­μ„ μˆ˜ν–‰ν•˜μ§€ μ•Šμ•˜λ‹€.** + +- 400 Bad Request + +ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ΄ μœ νš¨ν•˜μ§€ μ•Šμ•„ 더 이상 μž‘μ—…μ„ μ§„ν–‰ν•˜μ§€ λͺ»ν•˜λŠ” κ²½μš°μ΄λ‹€. + +주둜 μœ νš¨μ„± 검사 μ‹€νŒ¨ μ‹œ μ‚¬μš©ν•œλ‹€. + +- 401 Unauthorized + +ν΄λΌμ΄μ–ΈνŠΈκ°€ 인증이 λ˜μ§€ μ•Šμ•˜κΈ°μ— μžμ›μ„ μ΄μš©ν•  수 μ—†λŠ” μƒνƒœμ΄λ‹€. + +주둜 λ‘œκ·ΈμΈκ°™μ€ 인증이 μ•ˆλœ μƒνƒœμΌ λ•Œ μ‚¬μš©ν•œλ‹€. + +- 403 Forbidden + +ν΄λΌμ΄μ–ΈνŠΈκ°€ κΆŒν•œμ΄ μ—†κΈ° λ•Œλ¬Έμ— μž‘μ—…μ„ 진행할 수 μ—†λŠ” κ²½μš°μ΄λ‹€. + +주둜 인증된 ν΄λΌμ΄μ–ΈνŠΈκ°€ κΆŒν•œμ΄ μ—†λŠ” μžμ›μ— μ ‘κ·Όν•  λ•Œ μ‘λ‹΅ν•˜λŠ” μƒνƒœ μ½”λ“œλ‹€. + +- 404 Not Found + +ν΄λΌμ΄μ–ΈνŠΈκ°€ μš”μ²­ν•œ μžμ›μ΄ μ‘΄μž¬ν•˜μ§€ μ•Šλ‹€λŠ” λœ»μ΄λ‹€. + +주둜 κ²½λ‘œκ°€ μ‘΄μž¬ν•˜μ§€ μ•Šκ±°λ‚˜, μžμ›μ΄ μ‘΄μž¬ν•˜μ§€ μ•Šμ„ λ•Œ μ‚¬μš©ν•œλ‹€. + +- 404 Conflict + +ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ΄ μ„œλ²„μ˜ μƒνƒœμ™€ 좩돌이 λ°œμƒν•œ κ²½μš°μ΄λ‹€. + +주둜 아이디같은 ν•˜λ‚˜λ§Œ μ‘΄μž¬ν•΄μ•Όν•˜λŠ” λ¦¬μ†ŒμŠ€λ₯Ό 또 μƒμ„±ν•œλ‹€κ±°λ‚˜, λͺ¨μˆœλ˜λŠ” μƒνƒœμΌ λ•Œ μ‚¬μš©ν•œλ‹€. + +**5XXΒ Server Errors: μ„œλ²„ 였λ₯˜λ‘œ 인해 μš”μ²­μ„ μˆ˜ν–‰ν•  수 μ—†λ‹€.** + +ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ€ μœ νš¨ν•˜μ—¬ μž‘μ—…μ„ μ§„ν–‰ν–ˆλŠ”λ° 도쀑에 였λ₯˜κ°€ λ°œμƒν•œ κ²½μš°λ‹€. + +API μ„œλ²„μ˜ μ‘λ‹΅μ—μ„œ 5XX였λ₯˜κ°€ λ°œμƒν•΄μ„œλŠ” μ•ˆλœλ‹€. + +주둜 개발자의 μ‹€μˆ˜λ‘œ 인해 λ‚˜νƒ€λ‚œλ‹€. + +  +# πŸ“Œ μ›Ή λΈŒλΌμš°μ €μ—μ„œ νŠΉμ • νŽ˜μ΄μ§€λ₯Ό ν‘œμ‹œν•  λ•ŒκΉŒμ§€ μ„œλ²„μ— μš”μ²­ν•˜κ³  λ°›λŠ” κ³Όμ • + +1. μ›Ή λΈŒλΌμš°μ €μ— URL을 μž…λ ₯ν•œλ‹€. +2. μ›Ή λΈŒλΌμš°μ €κ°€ λ„λ©”μΈμ˜ IPμ£Όμ†Œλ₯Ό μ‘°νšŒν•œλ‹€ (λ¨Όμ € μΊμ‹œλ₯Ό μ°Ύκ³ , κ·Έ λ‹€μŒ DNSλ₯Ό κ²€μƒ‰ν•œλ‹€.) +3. μ›Ή λΈŒλΌμš°μ €κ°€ 찾은 IPμ£Όμ†Œλ₯Ό 기반으둜 μ„œλ²„μ™€μ˜ TCP 연결을 μ‹œμž‘ν•œλ‹€. +4. μ›Ή λΈŒλΌμš°μ €κ°€ HTTP(S) μš”μ²­μ„ μ„œλ²„λ‘œ μ „μ†‘ν•œλ‹€ +5. μ›Ή μ„œλ²„κ°€ μš”μ²­μ„ μ²˜λ¦¬ν•˜κ³  응닡을 λ‹€μ‹œ μ›Ή λΈŒλΌμš°μ €λ‘œ μ „μ†‘ν•œλ‹€. +6. μ›Ή λΈŒλΌμš°μ €κ°€ 전솑 받은 컨텐츠λ₯Ό λ Œλ”λ§ν•œλ‹€. + +  +# πŸ“Œ μΊμ‹œ + +## μΊμ‹œ(Cache)의 의미 + +Cacheλž€ 자주 μ‚¬μš©ν•˜λŠ” λ°μ΄ν„°λ‚˜ 값을 미리 볡사해 λ†“λŠ” μž„μ‹œ μž₯μ†Œλ₯Ό 가리킨닀. + +  +## μΊμ‹œλŠ” μ™œ μ‚¬μš©ν• κΉŒ? (μΊμ‹œμ˜ μž₯점) + +μΊμ‹œμ— 데이터λ₯Ό 미리 볡사해 λ†“μœΌλ©΄, κ³„μ‚°μ΄λ‚˜ μ ‘κ·Ό μ‹œκ°„ 없이 더 λΉ λ₯Έ μ†λ„λ‘œ 데이터λ₯Ό μ ‘κ·Ό ν•  수 μžˆλ‹€. + +반볡적으둜 λ™μΌν•œ κ²°κ³Όλ₯Ό λŒλ €μ£ΌλŠ” 경우(νŠΉμ • 이미지 or 썸넀일) μ‚¬μš©ν•˜κ±°λ‚˜, μ ‘κ·Ό μ‹œκ°„μ— λΉ„ν•΄ μ›λž˜ 데이터에 μ ‘κ·Όν•˜λŠ” μ‹œκ°„μ΄ 였래 κ±Έλ¦¬λŠ” κ²½μš°λ‚˜, 값을 λ‹€μ‹œ κ³„μ‚°ν•˜λŠ” μ‹œκ°„μ„ μ ˆμ•½ν•˜κ³ μž ν•˜λŠ” κ²½μš°μ— μ‚¬μš©ν•œλ‹€. + +## μΊμ‹œ ꡐ체 μ•Œκ³ λ¦¬μ¦˜μ˜ μ’…λ₯˜ + +μΊμ‹œκ°€ μ‚¬μš©ν•˜λŠ” λ¦¬μ†ŒμŠ€μ˜ 양은 λ¬΄ν•œλŒ€κ°€ μ•„λ‹ˆλΌ μ œν•œμ μ΄κΈ° λ•Œλ¬Έμ—, μΊμ‹œλŠ” μ œν•œλœ λ¦¬μ†ŒμŠ€ λ‚΄μ—μ„œ 데이터λ₯Ό λΉ λ₯΄κ²Œ μ €μž₯ν•˜κ³  μ ‘κ·Όν•  수 μžˆμ–΄μ•Ό ν•œλ‹€. + +κ·Έλž˜μ„œ "μΊμ‹œ ꡐ체 μ•Œκ³ λ¦¬μ¦˜"으둜 μ–΄λ–€ 데이터λ₯Ό 버리고 μ–΄λ–€ 데이터λ₯Ό μ €μž₯할지 κ²°μ •ν•œλ‹€. + +1. FIFO(First in First Out) - κ°€μž₯ λ¨Όμ € λ“€μ–΄κ°„ μΊμ‹œλ₯Ό ꡐ체 +2. LRU(Least Recently Used) -Β  κ°€μž₯ μ˜€λž«λ™μ•ˆ μ‚¬μš©λ˜μ§€ μ•Šμ€ μΊμ‹œλ₯Ό ꡐ체 +3. LFU(Least Frequently Used) - μ‚¬μš© νšŸμˆ˜κ°€ κ°€μž₯ 적은 μΊμ‹œλ₯Ό ꡐ체 + +이 μ€‘μ—μ„œ λ§Žμ€ μš΄μ˜μ²΄μ œκ°€ μ‚¬μš©ν•˜κ³  μžˆλŠ” μ•Œκ³ λ¦¬μ¦˜μ€ 2번, LRUκ°€ κ°€μž₯ 쒋은 μΊμ‹œ ꡐ체 μ•Œκ³ λ¦¬μ¦˜μœΌλ‘œ ν‰κ°€λ˜κ³  μžˆμŠ΅λ‹ˆλ‹€ + +κ·Έ μ΄μœ λŠ” κ°€μž₯ μ˜€λž«λ™μ•ˆ μ‚¬μš©ν•˜μ§€ μ•Šμ•˜λ˜ 데이터라면, μ•žμœΌλ‘œλ„ μ‚¬μš©ν•  ν™•λ₯ μ΄ 적닀고 νŒλ‹¨ν•˜κΈ° λ•Œλ¬Έμ΄λ‹€. + +  +## λ‘œμ»¬μ— μΊμ‹±λ˜λŠ” κ²½μš°λŠ” 개발자 λ„κ΅¬μ—μ„œ μ–΄λ–»κ²Œ ν‘œμ‹œλ˜λŠ” 지 ν™•μΈν•΄λ³΄μ„Έμš”! + +1. **개발자 도ꡬ μ—΄κΈ°:** λΈŒλΌμš°μ €μ—μ„œ μ›Ή νŽ˜μ΄μ§€λ₯Ό λ‘œλ“œν•œ ν›„ F12 ν‚€λ₯Ό 눌러 개발자 도ꡬλ₯Ό μ—°λ‹€. +2. **λ„€νŠΈμ›Œν¬ νƒ­ 선택:** 개발자 λ„κ΅¬μ—μ„œ λ„€νŠΈμ›Œν¬ 탭을 μ„ νƒν•©λ‹ˆλ‹€. 이 탭은 μ›Ή νŽ˜μ΄μ§€κ°€ μš”μ²­ν•œ μžμ›λ“€μ˜ λ‘œλ”© μƒνƒœλ₯Ό 보여쀀닀 +3. **νŽ˜μ΄μ§€ μƒˆλ‘œκ³ μΉ¨:** μ›Ή νŽ˜μ΄μ§€λ₯Ό μƒˆλ‘œκ³ μΉ¨ν•˜μ—¬ νŽ˜μ΄μ§€μ—μ„œ μš”μ²­ν•œ μžμ›λ“€μ„ λ‘œλ“œν•œλ‹€. +4. **μΊμ‹œλœ μžμ› 확인:** λ„€νŠΈμ›Œν¬ νƒ­μ—μ„œ λ‘œλ“œλœ μžμ›λ“€μ˜ λͺ©λ‘μ„ 확인할 수 μžˆλ‹€. μΊμ‹œλœ μžμ›μ€ μ•„λž˜ 그림처럼 β€œServed from memory cache”와 같은 문ꡬ가 λœ¬λ‹€. μ΄λŠ” 둜컬 μΊμ‹œμ—μ„œ κ°€μ Έμ˜¨ κ²ƒμž„μ„ λ‚˜νƒ€λ‚Έλ‹€. + +![image](https://github.com/inu-appcenter/basic-study-16th/assets/62889359/5253090d-0b1f-436e-861f-da894cf6ec52)