πŸ§‘πŸ»β€πŸ« ν”„λ‘ νŠΈμ—”λ“œ 기술 λ©΄μ ‘ 단골 κ°œλ…λ“€ 정리 (λ„€νŠΈμ›Œν¬ / CS 편)

leehyunjuΒ·2023λ…„ 4μ›” 15일
313

FEλ©΄μ ‘μ€€λΉ„

λͺ©λ‘ 보기
3/3
post-thumbnail

계속 μΆ”κ°€ν•  μ˜ˆμ •μž…λ‹ˆλ‹€.

πŸ§‘πŸ»β€πŸ« JWT

JWTλŠ” JSON μ›Ή 토큰을 λ‚˜νƒ€λƒ…λ‹ˆλ‹€. πŸ”₯인증 및 κΆŒν•œ λΆ€μ—¬ λͺ©μ μœΌλ‘œ μ‚¬μš©λ˜λŠ” μΌμ’…μ˜ 토큰πŸ”₯μž…λ‹ˆλ‹€.

JWTλŠ” 헀더, νŽ˜μ΄λ‘œλ“œ 및 μ„œλͺ…μ˜ μ„Έ λΆ€λΆ„μœΌλ‘œ κ΅¬μ„±λ©λ‹ˆλ‹€.

  • 헀더 (Header) : μ„œλͺ…을 μƒμ„±ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” 토큰 μœ ν˜• 및 ν•΄μ‹± μ•Œκ³ λ¦¬μ¦˜μ— λŒ€ν•œ 정보가 ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
  • νŽ˜μ΄λ‘œλ“œ(Payload) : 토큰이 μ „λ‹¬ν•˜λŠ” ν΄λ ˆμž„ β€‹β€‹λ˜λŠ” 데이터가 ν¬ν•¨λ©λ‹ˆλ‹€.
  • μ„œλͺ…(Signature) : 전솑 쀑에 토큰이 λ³€μ‘°λ˜μ§€ μ•Šμ•˜λŠ”μ§€ ν™•μΈν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.

JWTλŠ” 일반적으둜 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜ 및 APIμ—μ„œ ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„ 간에 μ‚¬μš©μž 데이터λ₯Ό μ•ˆμ „ν•˜κ²Œ μ „μ†‘ν•˜λŠ” μˆ˜λ‹¨μœΌλ‘œ μ‚¬μš©λ©λ‹ˆλ‹€. 토큰은 μ„œλ²„μ—μ„œ μƒμ„±λ˜μ–΄ μ €μž₯λ˜λŠ” ν΄λΌμ΄μ–ΈνŠΈλ‘œ μ „μ†‘λ©λ‹ˆλ‹€. 그런 λ‹€μŒ ν΄λΌμ΄μ–ΈνŠΈλŠ” 각 후속 μš”μ²­κ³Ό ν•¨κ»˜ 토큰을 μ „μ†‘ν•˜μ—¬ μ„œλ²„κ°€ μ‚¬μš©μž 이름과 μ•”ν˜Έλ₯Ό 계속 ν™•μΈν•˜μ§€ μ•Šκ³ λ„ μ‚¬μš©μžλ₯Ό μΈμ¦ν•˜κ³  κΆŒν•œμ„ λΆ€μ—¬ν•  수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.

JWTλŠ” λ…λ¦½ν˜•μœΌλ‘œ μ„€κ³„λ˜μ—ˆμœΌλ©° μ„Έμ…˜ λ°μ΄ν„°μ˜ μ„œλ²„ μΈ‘ μŠ€ν† λ¦¬μ§€κ°€ ν•„μš”ν•˜μ§€ μ•ŠμœΌλ―€λ‘œ λΆ„μ‚° μ‹œμŠ€ν…œμ—μ„œ 보닀 ν™•μž₯ κ°€λŠ₯ν•˜κ³  μ‚¬μš©ν•˜κΈ° μ‰½μŠ΅λ‹ˆλ‹€.

참고자료 좜처 : https://jwt.io/!

μ™Όμͺ½μ΄ 토큰정보이고, 였λ₯Έμͺ½μ΄ 토큰 μ•”ν˜Έλ₯Ό λ³΅ν˜Έν™” μ‹œμΌœ λ‚˜μ˜¨ μ •λ³΄μž…λ‹ˆλ‹€.

πŸ§‘πŸ»β€πŸ« μΏ ν‚€

  • λΈŒλΌμš°μ €μ—μ„œ μ €μž₯λ˜λŠ” 킀와 같이 λ“€μ–΄μžˆλŠ” μž‘μ€ 파일
  • λΈŒλΌμš°μ € μƒνƒœ 정보λ₯Ό λ‘œμ»¬μ— μ €μž₯ν–ˆλ‹€κ°€ μ°Έμ‘°ν•œλ‹€.
  • λΈŒλΌμš°μ €μ— 300κ°œκΉŒμ§€ μΏ ν‚€ μ €μž₯ κ°€λŠ₯
  • ν•˜λ‚˜μ˜ 도메인당 20개 κ°’λ§Œ κ°€μ§ˆ 수 μžˆλ‹€.
  • ν•˜λ‚˜μ˜ 쿠킀값은 4KBκΉŒμ§€ μ €μž₯ κ°€λŠ₯
  • Response Header에 Set-Cookie 속성을 μ‚¬μš©ν•˜λ©΄ ν΄λΌμ΄μ–ΈνŠΈμ— μΏ ν‚€λ₯Ό λ§Œλ“€ 수 μžˆλ‹€.
  • μΏ ν‚€λŠ” μ‚¬μš©μžκ°€ λ”°λ‘œ μš”μ²­ν•˜μ§€ μ•Šμ•„λ„ λΈŒλΌμš°μ €κ°€ Request μ‹œμ— - Request Headerλ₯Ό λ„£μ–΄μ„œ μžλ™μœΌλ‘œ μ„œλ²„μ— μ „μ†‘ν•œλ‹€.

πŸ§‘πŸ»β€πŸ« μ„Έμ…˜

  • μ‚¬μš©μž 정보λ₯Ό 파일 λΈŒλΌμš°μ €μ— μ €μž₯ν•˜λŠ” 쿠킀와 달리 μ„Έμ…˜μ€ μ„œλ²„ μΈ‘μ—μ„œ κ΄€λ¦¬ν•œλ‹€.
  • μ„œλ²„μ—μ„œ ν΄λΌμ΄μ–ΈνŠΈλ₯Ό κ΅¬λΆ„ν•˜κΈ° μœ„ν•΄ μ„Έμ…˜ IDλ₯Ό λΆ€μ—¬ν•˜λ©°, μ›Ή λΈŒλΌμš°μ €κ°€ μ„œλ²„μ— μ ‘μ†ν•΄μ„œ λΈŒλΌμš°μ €λ₯Ό μ’…λ£Œν•  λ•ŒκΉŒμ§€ 인증 μƒνƒœλ₯Ό μœ μ§€ν•œλ‹€.
  • 접속 μ‹œκ°„μ— μ œν•œμ„ 두어 일정 μ‹œκ°„ 응닡이 μ—†λ‹€λ©΄ 정보가 μœ μ§€λ˜μ§€ μ•Šκ²Œ μ„€μ • κ°€λŠ₯
  • 데이터λ₯Ό μ„œλ²„μ— 두기 λ•Œλ¬Έμ— 쿠킀보닀 λ³΄μ•ˆμ΄ μ’‹λ‹€.
  • μ‚¬μš©μžκ°€ λ§Žμ•„μ§ˆμˆ˜λ‘ μ„œλ²„ λ©”λͺ¨λ¦¬λ₯Ό 많이 차지함

πŸ§‘πŸ»β€πŸ« μ›ΉμŠ€ν† λ¦¬μ§€

  • 둜컬 μŠ€ν† λ¦¬μ§€(Local Storage)와 μ„Έμ…˜ μŠ€ν† λ¦¬μ§€(Session Storage)κ°€ 있으며, 같은 Storage 객체λ₯Ό μƒμ†ν•˜κΈ° λ•Œλ¬Έμ— λ©”μ„œλ“œκ°€ 동일
  • ν΄λΌμ΄μ–ΈνŠΈμ— 데이터λ₯Ό μ €μž₯ν•  수 μžˆλ„λ‘ HTML5λΆ€ν„° μΆ”κ°€λœ μ €μž₯μ†Œ
  • κ°„λ‹¨ν•œ Key-Value μŠ€ν† λ¦¬μ§€ ν˜•νƒœ
  • 쿠킀와 달리 μžλ™ μ „μ†‘μ˜ μœ„ν—˜μ„±μ΄ μ—†μŒ
  • μ˜€λ¦¬μ§„(Origin)(도메인,ν”„λ‘œν† μ½œ,포트) λ‹¨μœ„λ‘œ 접근이 μ œν•œλ˜λŠ” νŠΉμ„± 덕뢄에 CSRF둜 λΆ€ν„° μ•ˆμ „
  • 쿠킀보닀 큰 μ €μž₯ μš©λŸ‰ 지원 (λͺ¨λ°”일 2.5MB, λ°μŠ€ν¬νƒ‘ 5~10MB)
  • μ„œλ²„κ°€ HTTP 헀더λ₯Ό 톡해 μŠ€ν† λ¦¬μ§€ 객체λ₯Ό μ‘°μž‘ν•  수 μ—†μŒ (μ›Ή μŠ€ν† λ¦¬μ§€ 객체 μ‘°μž‘μ€ JavaScript λ‚΄μ—μ„œλ§Œ μˆ˜ν–‰)
  • 였직 λ¬Έμžν˜•(string) 데이터 νƒ€μž…λ§Œ 지원

(1) 둜컬 μŠ€ν† λ¦¬μ§€

  • μ‚¬μš©μžκ°€ 데이터λ₯Ό μ§€μš°μ§€ μ•ŠλŠ” 이상, λΈŒλΌμš°μ €λ‚˜ OSλ₯Ό μ’…λ£Œν•΄λ„ 계속 λΈŒλΌμš°μ €μ— λ‚¨μ•„μžˆμŒ (μ˜κ΅¬μ„±)
  • 단, λ™μΌν•œ λΈŒλΌμš°μ €λ₯Ό μ‚¬μš©ν•  λ•Œλ§Œ ν•΄λ‹Ή
  • μ§€μ†μ μœΌλ‘œ ν•„μš”ν•œ 데이터 μ €μž₯(μžλ™ 둜그인 λ“±)

(2) μ„Έμ…˜μŠ€ν† λ¦¬μ§€

  • 데이터가 μ˜€λ¦¬μ§„ 뿐만 μ•„λ‹ˆλΌ λΈŒλΌμš°μ € 탭에도 μ’…μ†λ˜κΈ° λ•Œλ¬Έμ—, μœˆλ„μš°λ‚˜ λΈŒλΌμš°μ € 탭을 닫을 경우 제거
  • μΌμ‹œμ μœΌλ‘œ ν•„μš”ν•œ 데이터 μ €μž₯(μΌνšŒμ„± 둜그인 정보, μž…λ ₯폼 μ €μž₯ λ“±)

πŸ§‘πŸ»β€πŸ« HTTP

HTTPλŠ” Hypertext Transfer Protocol의 μ•½μžμž…λ‹ˆλ‹€. 인터넷을 톡해 데이터λ₯Ό μ „μ†‘ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” ν”„λ‘œν† μ½œμž…λ‹ˆλ‹€. HTTPλŠ” World Wide Web의 기반이며 ν΄λΌμ΄μ–ΈνŠΈ(예: μ›Ή λΈŒλΌμš°μ €)와 μ„œλ²„(예: μ›Ή μ„œλ²„) κ°„μ˜ 톡신을 κ°€λŠ₯ν•˜κ²Œ ν•©λ‹ˆλ‹€.

ν΄λΌμ΄μ–ΈνŠΈκ°€ μ„œλ²„μ— HTTP μš”μ²­μ„ 보낼 λ•Œ λ©”μ„œλ“œ

  • GET : λ¦¬μ†ŒμŠ€ 쑰회, μ„œλ²„μ— μ „λ‹¬ν•˜κ³  싢은 λ°μ΄ν„°λŠ” Query(쿼리 νŒŒλΌλ―Έν„°, 쿼리 슀트링)λ₯Ό ν†΅ν•΄μ„œ 전달
  • POST : μš”μ²­ 데이터 처리, 주둜 등둝에 μ‚¬μš©
  • PUT : λ¦¬μ†ŒμŠ€λ₯Ό λŒ€μ²΄, ν•΄λ‹Ή λ¦¬μ†ŒμŠ€κ°€ μ—†μœΌλ©΄ 생성
  • PATCH : λ¦¬μ†ŒμŠ€ λΆ€λΆ„ λ³€κ²½
  • DELETE : λ¦¬μ†ŒμŠ€ μ‚­μ œ

HTTPλŠ” μƒνƒœ λΉ„μ €μž₯(Stateless) ν”„λ‘œν† μ½œμž…λ‹ˆλ‹€. 즉, 각 μš”μ²­κ³Ό 응닡이 독립적이며 이전 μš”μ²­μ΄λ‚˜ 응닡에 λŒ€ν•œ 정보λ₯Ό μœ μ§€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μƒνƒœλ₯Ό μœ μ§€ν•˜κΈ° μœ„ν•΄ μ›Ή κ°œλ°œμžλŠ” μΏ ν‚€ λ˜λŠ” 기타 방법을 μ‚¬μš©ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘ λ˜λŠ” μ„œλ²„ 츑에 정보λ₯Ό μ €μž₯ν•©λ‹ˆλ‹€.

HTTPλŠ” μ‹œκ°„μ΄ 지남에 따라 λ°œμ „ν•΄ μ™”μœΌλ©° μ΅œμ‹  버전은 μ„±λŠ₯ 및 λ³΄μ•ˆ ν–₯상을 μœ„ν•΄ QUIC ν”„λ‘œν† μ½œμ„ μ‚¬μš©ν•˜λŠ” HTTP/3μž…λ‹ˆλ‹€.

πŸ§‘πŸ»β€πŸ« call by value & call by reference

(1) call by value

  • argument μ•„κ·œλ¨ΌνŠΈλ‘œ 값이 λ„˜μ–΄μ˜¨λ‹€.
  • 값이 λ„˜μ–΄μ˜¬ λ•Œ λ³΅μ‚¬λœ 값이 λ„˜μ–΄μ˜¨λ‹€.
  • caller(ν˜ΈμΆœν•˜λŠ” 아이)κ°€ 인자λ₯Ό 볡사해 λ„˜κ²¨μ€¬μœΌλ―€λ‘œ callee(ν˜ΈμΆœλ‹Ήν•œ 아이)μ—μ„œ ν•΄λ‹Ή 인자λ₯Ό μ–΄λ–»κ²Œ ν•˜λ“  caller(ν˜ΈμΆœν•˜λŠ” 아이)λŠ” 영ν–₯을 받지 μ•ŠλŠ”λ‹€.
let a = 1;

function addOne(b) { //callee 호좜 λ‹Ήν•˜λŠ”
  b = b + 1;
}

addOne(a); // caller 호좜 ν•˜λŠ”

console.log(a); // 1

(2) call by reference

  • arguments둜 reference(값에 λŒ€ν•œ μ°Έμ‘° μ£Όμ†Œ, λ©”λͺ¨λ¦¬ μ£Όμ†Œλ₯Ό λ‹΄κ³  μžˆλŠ” λ³€μˆ˜)λ₯Ό λ„˜κ²¨μ€€λ‹€.
  • referenceλ₯Ό λ„˜κΈ°λ‹€ λ³΄λ‹ˆ ν•΄λ‹Ή referenceκ°€ κ°€λ¦¬ν‚€λŠ” 값을 λ³΅μ‚¬ν•˜μ§€ μ•ŠλŠ”λ‹€.
  • caller(ν˜ΈμΆœν•˜λŠ” μ• )κ°€ 인자λ₯Ό 볡사해 λ„˜κΈ°μ§€ μ•Šμ•˜μœΌλ―€λ‘œ callee(ν˜ΈμΆœλ‹Ήν•œ μ• )μ—μ„œ ν•΄λ‹Ή 인자λ₯Ό 지지고 볢으면 caller(ν˜ΈμΆœν•˜λŠ” μ• )λŠ” 영ν–₯을 λ°›λŠ”λ‹€.
const me = {
  name: 'Jimmy'
};

function changeName(person) { //callee 호좜 λ‹Ήν•˜λŠ”
  person.name = 'Joo';
}

console.log(me); // { name: 'Jimmy' }

changeName(me); // caller 호좜 ν•˜λŠ”

console.log(me); // { name: 'Joo' }

πŸ§‘πŸ»β€πŸ« 이벀트 μ œμ–΄ 방식

(1) λ””λ°”μš΄μŠ€ (Debounce)

연이어 ν˜ΈμΆœλ˜λŠ” ν•¨μˆ˜λ“€ 쀑 λ§ˆμ§€λ§‰ ν•¨μˆ˜(λ˜λŠ” 제일 처음)만 ν˜ΈμΆœν•˜λ„λ‘ ν•˜λŠ” 것
ν™œμš©λ˜λŠ” κ³³ : 검색에 주둜 μ‚¬μš©λœλ‹€.

(2) μ“°λ‘œν‹€λ§ (Throttle)

λ§ˆμ§€λ§‰ ν•¨μˆ˜κ°€ 호좜된 ν›„ 일정 μ‹œκ°„μ΄ μ§€λ‚˜κΈ° 전에 λ‹€μ‹œ ν˜ΈμΆœλ˜μ§€ μ•Šλ„λ‘ ν•˜λŠ” 것
ν™œμš©λ˜λŠ” κ³³ : μŠ€ν¬λ‘€μ„ μ˜¬λ¦¬κ±°λ‚˜ 내릴 λ•Œ 보톡 μ‚¬μš©

참고자료 좜처
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

πŸ§‘πŸ»β€πŸ« CORS

CORSλŠ” Cross-Origin Resource Sharing의 μ•½μžμž…λ‹ˆλ‹€. μ›Ή νŽ˜μ΄μ§€κ°€ μ›λž˜ νŽ˜μ΄μ§€λ₯Ό μ œκ³΅ν•œ 도메인이 μ•„λ‹Œ λ‹€λ₯Έ 도메인에 λŒ€ν•œ μš”μ²­μ„ λ§Œλ“€μ§€ λͺ»ν•˜λ„둝 μ œν•œν•˜λŠ” μ΅œμ‹  μ›Ή λΈŒλΌμš°μ €μ— κ΅¬ν˜„λœ λ³΄μ•ˆ κΈ°λŠ₯μž…λ‹ˆλ‹€.

ν•œ λ„λ©”μΈμ˜ μ›Ή νŽ˜μ΄μ§€κ°€ λ‹€λ₯Έ 도메인에 HTTP μš”μ²­μ„ μ‹œλ„ν•  λ•Œ λΈŒλΌμš°μ €λŠ” μ„œλ²„κ°€ 원본 κ°„ μš”μ²­μ„ ν—ˆμš©ν•˜λŠ”μ§€ ν™•μΈν•˜κΈ° μœ„ν•΄ CORS μ‹€ν–‰ μ „ μš”μ²­μ„ μ„œλ²„λ‘œ λ³΄λƒ…λ‹ˆλ‹€. 그런 λ‹€μŒ μ„œλ²„λŠ” μš”μ²­μ΄ ν—ˆμš©λ˜λŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λ‚΄λŠ” μ μ ˆν•œ CORS ν—€λ”λ‘œ μ‘λ‹΅ν•©λ‹ˆλ‹€. μš”μ²­μ΄ ν—ˆμš©λ˜λ©΄ λΈŒλΌμš°μ €λŠ” μ‹€μ œ μš”μ²­μ„ μ§„ν–‰ν•©λ‹ˆλ‹€. 그렇지 μ•Šμ€ 경우 λΈŒλΌμš°μ €λŠ” μš”μ²­μ„ μ°¨λ‹¨ν•˜κ³  였λ₯˜λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.

CORS 문제λ₯Ό ν•΄κ²°ν•΄ λ³Έ κ²½ν—˜μ΄ μžˆλŠ”μ§€?

(1) μ„œλ²„ κ°œλ°œμžμ™€ μ†Œν†΅

  • λ„€νŠΈμ›Œν¬ ν˜„ν™©μ„ κ³΅μœ ν•˜λ©° μ†Œν†΅ν•˜μ—¬ ν•΄κ²° ν•©λ‹ˆλ‹€.

    (2) 개발 ν™˜κ²½μ—μ„œ ν”„λ‘μ‹œ 섀정을 ν•΄μ€€λ‹€.
  • CRAμ—μ„œλŠ” package.jsonμ—μ„œ Proxy 섀정을 ν•˜μ—¬ ν•΄κ²° ν•©λ‹ˆλ‹€.
  • NextJs인 경우 next.conifg.jsμ—μ„œ Proxy 섀정을 ν•˜μ—¬ ν•΄κ²° ν•©λ‹ˆλ‹€.
profile
μ•„λŠ‘ν•œ λ‡Œκ³΅κ°„ 🧠

4개의 λŒ“κΈ€

comment-user-thumbnail
2023λ…„ 4μ›” 26일

asd

λ‹΅κΈ€ 달기
comment-user-thumbnail
2023λ…„ 6μ›” 13일

μ•ˆλ…•ν•˜μ„Έμš”.. 취업을 μœ„ν•œ 정보λ₯Ό μ°Ύκ³ μžˆμ—ˆλŠ”λ° κ°μ‚¬ν•©λ‹ˆλ‹€. !!!

1개의 λ‹΅κΈ€