Session 17. UI & API

κΉ€λ―Όμž¬Β·2021λ…„ 9μ›” 13일
0

TIL, WeCode, CourseΒ 

λͺ©λ‘ 보기
34/48
post-thumbnail

*πŸ”Study Keyword :

  • 1>πŸ”‘UI와 πŸ”‘APIκ°€ 무엇이며 μ–΄λ– ν•œ 차이가 μžˆλŠ”μ§€ 2>APIλŠ” μ–΄λ–€ 흐름을 κ°€μ§€λŠ”μ§€μ— λŒ€ν•΄μ„œ μ•Œμ•„λ³΄μž

πŸ’‘λ“€μ–΄κ°€κΈ°μ— μ•žμ„œ)

  • λ°±μ—”λ“œμ˜ 세상을 κ²½ν—˜ν•˜κΈ° μ „ μ–Όλ§ˆλ‚˜ λ§Žμ€ 것듀을 λ‹€λ£° 건지에 μ–΄λ– ν•œ κΈ°μˆ λ“€κ³Ό 도ꡬ듀을 μ‚¬μš©ν•  건지에 λŒ€ν•΄μ„œ μ•Œκ³ κ°€λŠ” 것이 μ€‘μš”ν•˜λ‹€.

- Backend map

-what are we going to learn❓

  • 1> Node.jsλŠ” λŸ°νƒ€μž„ ν™˜κ²½μœΌλ‘œ ν”„λ ˆμž„μ›Œν¬λ„ λΌμ΄λΈŒλŸ¬λ¦¬λ„ μ•„λ‹ˆλ‹€.
  • Node.js의 λŒ€ν‘œμ μΈ ν”„λ ˆμž„μ›Œν¬κ°€ λ°”λ‘œ 2> Expressλ‹€.
  • 3> MYSQL 은 RDBMS 즉, κ΄€κ³„ν˜• 데이터 베이슀이고 이 말은 즉, λΉ„κ΄€κ³„ν˜• 데이터 λ² μ΄μŠ€λ„ μ‘΄μž¬ν•¨μ„ μ˜λ―Έν•œλ‹€.
  • 4> ORM - 객체와 κ΄€κ³„ν˜• λ°μ΄ν„°λ² μ΄μŠ€μ˜ 데이터λ₯Ό μžλ™μœΌλ‘œ 맀핑(μ—°κ²°)ν•΄μ£ΌλŠ” 역할을 ν•œλ‹€.
  • μ΄λ ‡κ²Œ 데이터 베이슀의 객체λ₯Ό κ΄€λ¦¬ν•˜κ²Œ ν•΄μ£ΌλŠ” μ—¬λŸ¬ μ’…λ₯˜ 쀑 ν•˜λ‚˜κ°€ 5> Prisma둜 이저엔 μ‹œν€„λΌμ΄μ¦ˆλ₯Ό 많이 μ‚¬μš©ν–ˆκ³  λͺ½κ΅¬μŠ€λŠ” λͺ½κ³  디비와 ν•¨κ»˜ μ‚¬μš©ν•΄μ™”λ‹€.
  • HTTP ν†΅μ‹ μ—μ„œ μžμ›μ— λŒ€ν•œ CRUD μš”μ²­μ„ Resource와 Method둜 ν‘œν˜„ν•˜μ—¬ νŠΉμ •ν•œ ν˜•νƒœλ‘œ μ „λ‹¬ν•˜λŠ” 방식인 *6>Restful APIλ₯Ό 개발 ν•  μ˜ˆμ •μ΄λ©°
  • APIλ₯Ό μœ„ν•œ 쿼리 μ–Έμ–΄λ‘œ μ‘΄μž¬ν•˜λŠ” λ°μ΄ν„°λ‘œ 쿼리λ₯Ό μˆ˜ν–‰ν•˜κΈ° μœ„ν•œ λŸ°νƒ€μž„μΈ 7> GRraphqQL을 μ‚¬μš©ν•΄λ³΄λ©° 8> 인증/μΈκ°€μ˜ κ³Όμ •κ³Ό 9>λ°°ν¬κΉŒμ§€ 닀루고
  • λ§ˆμ§€λ§‰μœΌλ‘œ μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ λ¦¬μ•‘νŠΈλ‘œ ν΄λ‘ ν•œ μœ„μŠ€νƒ€λ²…μŠ€ νŽ˜μ΄μ§€μ— ν•΄λ‹Ήλ˜λŠ” APIλ₯Ό μƒμ„±ν•˜κ³ 
    λ°μ΄ν„°λ² μŠ€μ˜ 10> SQL μ•”ν˜Έν™”κΉŒμ§€ 진행할 μ˜ˆμ •μ΄λ‹€.

πŸ”…μ°Έκ³ πŸ”…)

  • μ„œλ²„λ₯Ό λ§Œλ“œλŠ” Node.js의 Express μ„œλ²„μ™€ DBλŠ” μ„œλ‘œ 독립적인 κ΄€κ³„λΌμ„œ 이 λ‘˜ 사이λ₯Ό 뢙여쀄 λ§€κ°œμ²΄κ°€ ν•„μš”ν•œλ° 그것이 λ°”λ‘œ Prizma이닀.

Intro HTTP Recep

  • μš°λ¦¬λŠ” 이전 μ„Ήμ…˜μ—μ„œ 배운 mock-dataλ₯Ό ν† λŒ€λ‘œ λ¦¬μ•‘νŠΈμ—μ„œ importν•˜κ³  이후 fetchλ₯Ό μ‚¬μš©ν•˜μ—¬ 데이터λ₯Ό κ°€μ Έμ˜€λŠ” 과정을 κ²½ν—˜ν–ˆλ‹€.

  • λ§Œμ•½ μ‹€μ œλ‘œ 고객이 μŠ€νƒ€λ²…μŠ€ ν™ˆνŽ˜μ΄μ§€μ— λ“€μ–΄κ°€μ„œ 상세 정보 λ¦¬μŠ€νŠΈνŽ˜μ΄μ§€μ— μžˆλŠ” μƒν’ˆμ— λŒ€ν•œ 정보가 κΆκΈˆν•˜μ—¬ 방문을 ν•˜λ©΄ ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„ 사이엔 무슨 일이 λ°œμƒν• κΉŒ?

1> ν΄λΌμ΄μ–ΈνŠΈλŠ” 고객, 즉 μ„œλΉ„μŠ€λ₯Ό μ΄μš©ν•˜λŠ” 츑이 μƒν’ˆμ— λŒ€ν•œ 정보λ₯Ό μš”μ²­ν•  λ•Œ 상세 정보λ₯Ό μ„œλ²„μ—λ‹€κ°€ μš”μ²­ν•˜κ³ 
2> μ„œλ²„λŠ” ν΄λΌμ΄μ–ΈνŠΈλ‘œ λΆ€ν„° λ“€μ–΄μ˜¨ μš”μ²­μ— 따라 데이터λ₯Ό μ „λ‹¬ν•˜μ—¬ μ‘λ‹΅ν•˜λ©° μ„œλΉ„μŠ€λ₯Ό μ œκ³΅ν•΄μ£ΌλŠ” μ›Ή ν˜ΈμŠ€νŠΈλ‘œμ„œ μš”μ²­μ„ 받은 μ›Ήμ„œλ²„λŠ” λ°μ΄ν„°λ² μ΄μŠ€λ₯Ό λ’€μ Έμ„œ μš”μ²­μ— λŒ€ν•œ 정보λ₯Ό μ°ΎλŠ”λ‹€.
3> μ„œλ²„λŠ” 찾은 μƒν’ˆ 정보λ₯Ό ν΄λΌμ΄μ–ΈνŠΈ 츑으둜 κ±΄λ„€μ€ŒμœΌλ‘œμ„œ μš”μ²­μ— 응닡을 ν•œλ‹€.

1. UI와 API에 λŒ€ν•΄μ„œ

  • ν”„λ‘ νŠΈμ—μ„œ 1>UIλ₯Ό λ§Œλ“€κ³  λ°±μ•€λ“œμ—μ„œλŠ” 2> APIλ₯Ό λ§Œλ“ λ‹€.

1_1. UI에 λŒ€ν•΄μ„œ

  • 1>UIλŠ” User interface둜 μœ μ €μ™€ μ†Œν”„νŠΈμ›¨μ–΄κ°€ λ§Œλ‚˜λŠ” 경계선에 ν¬ν•¨λ˜λŠ” κ°€λ Ή ν™”λ©΄, ν‚€λ³΄λ“œ, 마우슀, μ›ΉλΈŒλΌμš°μ €κ°€ λͺ¨λ‘ UIλ‹€.
  • ν”„λ‘ νŠΈ κ°œλ°œμžκ°€ 화면에 κ·Έλ¦¬λŠ” 것을 UIλ₯Ό λ§Œλ“ λ‹€κ³  ν‘œν˜„ν•˜λ©° λ”°λΌμ„œ ν”„λ‘ νŠΈ 개발자라면 μ‚¬μš©μžμ™€ μ†Œν†΅μ„ μ€‘μš”ν•˜κ²Œ μ—¬κΈ°λ©° SEO에 λŒ€ν•΄μ„œλ„ 잘 μ•Œμ•„μ•Όν•œλ‹€.

1_2. API에 λŒ€ν•΄μ„œ

  • 2>APIλŠ” Application Programming Interface둜 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜κ³Ό μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ μ„œλ‘œ μ˜μ‚¬μ†Œν†΅μ„ ν•˜κ³  데이터λ₯Ό κ΅ν™˜ν•  수 μžˆλŠ” ν•˜λ‚˜μ˜ 맀게체λ₯Ό μ˜λ―Έν•œλ‹€
  • ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μΌμ–΄λ‚˜λŠ” λ™μž‘μ„ μ§„ν–‰ν•˜κΈ° μœ„ν•΄μ„  κ²°κ΅­ APIκ°€ ν•„μš”ν•˜λ‹€. 이 λ™μž‘μ€ λ²‘μ—”λ“œμ—κ² ν•˜λ‚˜μ˜ 이벀트이자 μš”μ²­μœΌλ‘œμ„œ 이λ₯Ό ν•Έλ“€λ§ν•˜κΈ° μœ„ν•œ ν•¨μˆ˜λ“€μ„ μž‘μ„±μ„ ν•΄λ†“λŠ” 것이 λ²‘μ—”λ“œ κ°œλ°œμžκ°€ ν•˜λŠ” 일이닀.

  • 즉, μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜κ³Ό λ‹€λ₯Έ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ 톡신을 ν•  수 μžˆλ„λ‘ 쀑간에 μžˆλŠ” λ§€κ²Œν•¨μˆ˜λ₯Ό API라고 ν•œλ‹€.
  • λ°±μ—”λ“œ κ°œλ°œμžλŠ” μ–΄ν”Œκ³Ό μ–΄ν”Œ μ‚¬μ΄μ˜ 톡신을 μ€‘μž¬ν•˜λ©° μœ μ € ν•œ λͺ… ν•œ λͺ…이 λͺ¨λ‘ μ„œλΉ„μŠ€λ₯Ό λ§€λ„λŸ½κ²Œ μ΄μš©ν•˜κΈ° μœ„ν•΄μ„œ μ„œλ²„λ₯Ό 잘 λŒμ•„κ°ˆ 수 μžˆλ„λ‘ μ΅œμ ν™”ν•˜μ—¬ κ΅¬μΆ•ν•˜λŠ” 것이 μ€‘μš”ν•˜λ‹€

1_3. API의 흐름

  • 1> μΈμŠ€νƒ€κ·Έλž¨ μ–΄ν”Œμ„ μ΄μš©ν•˜λŠ” μ‚¬μš©μžκ°€ μš”μ²­μ„ 보내면 μ‚¬μš©μžμ˜ μš”μ²­μ„ λ°›λŠ” APIκ°€ μ‘΄μž¬ν•œλ‹€.
  • 2> APIλŠ” λ‹€λ₯Έ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•΄μ„œ μš”μ²­μ— λŒ€ν•œ 응닡을 λ³΄λ‚΄μ£ΌλŠ” 역할을 ν•œλ‹€.

*πŸ’‘conclusion

  • API와 UI의 차이에 λŒ€ν•΄μ„œ 각각 무슨 일을 ν•˜λŠ”μ§€ λͺ…ν™•ν•˜κ²Œ μ•Œλ©΄ 끝!

#πŸ“‘Study Source

  • μœ„μ½”λ“œ μ†Œν—Œλ‹˜μ˜ 첫 번째 λ²‘μ—”λ“œ νŒŒμš΄λ°μ΄μ…˜ κ°•μ˜ 쀑:}
profile
자기 μ‹ λ’°μ˜ νž˜μ„ λ―Ώκ³  μ‹€μ²œν•˜λŠ” κ°œλ°œμžκ°€ λ˜κ³ μžν•©λ‹ˆλ‹€.

0개의 λŒ“κΈ€