λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
μ‘°κ°κ°œλ…

혼자 μ •λ¦¬ν•˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄ μš©μ–΄ 01~10

by 솑두뢀 2022. 4. 21.
728x90
λ°˜μ‘ν˜•

01. λ¦¬μ•‘νŠΈ(React, React.js λ˜λŠ” React JS) – (μ›Ή ν”„λ ˆμž„μ›Œν¬)

μžλ°”μŠ€ν¬λ¦½νŠΈ 라이브러리의 ν•˜λ‚˜λ‘œ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€(UI)λ₯Ό λ§Œλ“€κΈ° μœ„ν•΄ μ‚¬μš©λœλ‹€. 

02. μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜(single-page application, SPA)

μ„œλ²„λ‘œλΆ€ν„° μ™„μ „ν•œ μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό λΆˆλŸ¬μ˜€μ§€ μ•Šκ³  ν˜„μž¬μ˜ νŽ˜μ΄μ§€λ₯Ό λ™μ μœΌλ‘œ λ‹€μ‹œ μž‘μ„±ν•¨μœΌλ‘œμ¨ μ‚¬μš©μžμ™€ μ†Œν†΅ν•˜λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄λ‚˜ μ›Ήμ‚¬μ΄νŠΈ

  • HTML, μžλ°”μŠ€ν¬λ¦½νŠΈ, CSS ν•„μš”ν•œ λͺ¨λ“  μ½”λ“œλŠ” ν•˜λ‚˜μ˜ νŽ˜μ΄μ§€λ‘œ λΆˆλŸ¬μ˜€κ±°λ‚˜,μ μ ˆν•œ μžμ›λ“€μ„ λ™μ μœΌλ‘œ λΆˆλŸ¬λ“€μ—¬μ„œ ν•„μš”ν•˜λ©΄ λ¬Έμ„œμ— μΆ”κ°€ν•˜λŠ”λ°, 보톡 μ‚¬μš©μžμ˜ λ™μž‘μ— μ‘λ‹΅ν•˜κ²Œ λ˜λŠ” 방식
  •  μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜κ³Όμ˜ μ†Œν†΅μ€ λ’·νŽΈμ— μžˆλŠ” μ›Ή μ„œλ²„μ™€μ˜ 동적인 톡신을 μˆ˜λ°˜ν•˜κΈ°λ„ ν•œλ‹€.

03. μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ (User Interface)

μ‚¬μš©μžκ°€ μ»΄ν“¨ν„°μ™€ μ˜μ‚¬μ†Œν†΅μ„ 톡해 μƒν˜Έ μž‘μš©ν•˜λŠ” μ‹œμŠ€ν…œ

μ‚¬μš©μžμ™€ 기계/μ‹œμŠ€ν…œ/사물이 μ†Œν†΅ν•˜λŠ”λ° 도움을 μ€€λ‹€.

ex_μ‚¬μš©μžμ™€ 슀마트폰, μ‚¬μš©μžμ™€ 컴퓨터 사이λ₯Ό μž‡λŠ”λ‹€.

> ν”„λ‘ νŠΈμ—”λ“œλŠ” μ‚¬μš©μžκ°€ λ³Ό 수 μžˆλŠ” 화면인 UIλ₯Ό μ˜λ―Έν•œλ‹€.

04. Axios

  • AxiosλŠ” λΈŒλΌμš°μ €, Node.jsλ₯Ό μœ„ν•œ Promise APIλ₯Ό ν™œμš©ν•˜λŠ” HTTP 비동기 톡신 λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€.
  • λ°±μ—”λ“œλž‘ ν”„λ‘ νŠΈμ—”λ“œλž‘ 톡신을 μ‰½κ²Œν•˜κΈ° μœ„ν•΄ Ajax와 λ”λΆˆμ–΄ μ‚¬μš©ν•©λ‹ˆλ‹€.
  • 이미 μžλ°”μŠ€ν¬λ¦½νŠΈμ—λŠ” λ©‹μ§„ fetch apiκ°€ μžˆμ§€λ§Œ, ν”„λ ˆμž„μ›Œν¬μ—μ„œ ajaxλ₯Ό κ΅¬ν˜„ν• λ• axiosλ₯Ό μ“°λŠ” 편

http ν”„λ‘œν† μ½œμ„ μ΄μš©ν•΄μ„œ 데이터λ₯Ό μš”μ²­ν•˜κ³  λ°›μ•„μ˜¬ 수 μžˆλŠ” 라이브러리

https://github.com/axios/axios

 

 

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js

github.com

05. 동기 vs 비동기 : 데이터λ₯Ό λ°›λŠ” 방식

동기(synchronous : λ™μ‹œμ— μΌμ–΄λ‚˜λŠ”) 

  • μš”μ²­κ³Ό κ·Έ κ²°κ³Όκ°€ λ™μ‹œμ— μΌμ–΄λ‚œλ‹€
  • κ²°κ³Όκ°€ μ£Όμ–΄μ§ˆ λ•ŒκΉŒμ§€ 아무것도 λͺ»ν•˜κ³  λŒ€κΈ°ν•΄μ•Ό ν•˜λŠ” 단점
  • μ‹œκ°„μ΄ μ •ν•΄μ Έμžˆλ‹€λŠ” κ²ƒμœΌλ‘œ taskλ³„λ‘œ μž‘μ—…μ‹œκ°„μ΄ κΈ΄ μ‹œκ°„μ„ λ˜‘κ°™μ΄ λΆ€μ—¬ν•œλ‹€λ©΄ ? 'CPU μ‹œκ°„ λ‚­λΉ„'

비동기(Asynchronous : λ™μ‹œμ— μΌμ–΄λ‚˜μ§€ μ•ŠλŠ”)

  • μš”μ²­κ³Ό κ²°κ³Όκ°€ λ™μ‹œμ— μΌμ–΄λ‚˜μ§€ μ•ŠλŠ”λ‹€.
  • μ‹œκ°„μ΄ 걸리더라도 κ·Έ μ‹œκ°„ λ™μ•ˆ λ‹€λ₯Έ μž‘μ—…μ„ ν•  수 μžˆμœΌλ―€λ‘œ μžμ›μ„ 효율적으둜 μ‚¬μš©ν•  수 μžˆλŠ” μž₯점

06. JPA(Java Persistence API)

  • νŠΉμ • κΈ°λŠ₯을 ν•˜λŠ” λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ•„λ‹Œ ORM을 μ‚¬μš©ν•˜κΈ° μœ„ν•΄ λ§Œλ“  μΈν„°νŽ˜μ΄μŠ€
  • ORM(Object-Relational Mapping) 기술 ν‘œμ€€μœΌλ‘œ μ‚¬μš©λ˜λŠ” μΈν„°νŽ˜μ΄μŠ€μ˜ λͺ¨μŒ
  • ORM이기 λ•Œλ¬Έμ— μžλ°” ν΄λž˜μŠ€μ™€ DBν…Œμ΄λΈ”μ„ λ§€ν•‘ν•œλ‹€.(sql을 λ§€ν•‘ν•˜μ§€ μ•ŠλŠ”λ‹€)
  • JPAλ₯Ό κ΅¬ν˜„ν•œ λŒ€ν‘œμ μΈ μ˜€ν”ˆμ†ŒμŠ€ `Hibernate`

07. ORM

  • ORM은 DB ν…Œμ΄λΈ”μ„ μžλ°” 객체둜 λ§€ν•‘ν•¨μœΌλ‘œμ¨ κ°μ²΄κ°„μ˜ 관계λ₯Ό λ°”νƒ•μœΌλ‘œ SQL을 μžλ™μœΌλ‘œ μƒμ„±ν•˜μ§€λ§Œ MapperλŠ” SQL을 λͺ…μ‹œν•΄μ£Όμ–΄μ•Ό ν•œλ‹€.
  • Class와 RDB(Relational DataBase)의 ν…Œμ΄λΈ”μ„ λ§€ν•‘(μ—°κ²°)

08. μ˜μ†μ„±

데이터λ₯Ό μƒμ„±ν•œ ν”„λ‘œκ·Έλž¨μ΄ μ’…λ£Œλ˜μ–΄λ„ 사라지지 μ•ŠλŠ” λ°μ΄ν„°μ˜ νŠΉμ„±

  • μ˜μ†μ„±μ„ κ°–μ§€ μ•ŠμœΌλ©΄, λ°μ΄ν„°λŠ” λ©”λͺ¨λ¦¬μ—μ„œλ§Œ μ‘΄μž¬ν•˜κ³ , ν”„λ‘œκ·Έλž¨μ΄ μ’…λ£Œλ˜λ©΄ λ°μ΄ν„°λŠ” λͺ¨λ‘ 사라진닀.
  • 데이터λ₯Ό νŒŒμΌμ΄λ‚˜ DB에 영ꡬ μ €μž₯ν•¨μœΌλ‘œμ¨ 데이터에 μ˜μ†μ„±μ„ λΆ€μ—¬

09. λΉŒλ“œ(Build)

μ†ŒμŠ€μ½”λ“œ νŒŒμΌμ„ μ»΄ν“¨ν„°μ—μ„œ μ‹€ν–‰ν•  수 있게 λ³€ν™”ν•˜λŠ” κ³Όμ • λ˜λŠ” κ²°κ³Όλ¬Ό

  • ν”„λ‘œμ νŠΈμ—μ„œ 쓰인 파일 및 μžμ› (.xml, .jpg, .jar, .properties)을  JVMμ΄λ‚˜ 톰캣같은 WASκ°€ 인식할 수 μžˆλŠ” ꡬ쑰둜 νŒ¨ν‚€μ§• ν•˜λŠ” κ³Όμ • 및 κ²°κ³Όλ¬Ό

10. λΉŒλ“œ 도ꡬ(Build tool)

λŠ˜μ–΄λ‚˜λŠ” λΌμ΄λΈŒλŸ¬λ¦¬μ™€ 라이브러리의 버전 λ™κΈ°ν™”μ˜ 어렀움을 ν•΄μ†Œν•˜κ³ μž λ“±μž₯

ex) Ant /  Maven / Gradle

Ant

  • ν”„λ‘œμ νŠΈκ°€ λ°©λŒ€ν•  경우 슀크립트 κ΄€λ¦¬λ‚˜ λΉŒλ“œ 과정이 λ³΅μž‘ν•΄μ§„λ‹€.
  • 슀크립트 μž‘μ„±λ„ 많고, 라이브러리 μ˜μ‘΄κ΄€λ¦¬κ°€ λ˜μ§€ μ•Šμ•„ λΆˆνŽΈν•¨

maven

  • ν•„μš”ν•œ 라이브러리λ₯Ό νŠΉμ • λ¬Έμ„œ(pom.xml)에 μ •μ˜ν•΄ λ†“μœΌλ©΄ λ‚΄κ°€ μ‚¬μš©ν•  라이브러리 뿐만 μ•„λ‹ˆλΌ ν•΄λ‹Ή λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μž‘λ™ν•˜λŠ”λ°μ— ν•„μš”ν•œ λ‹€λ₯Έ λΌμ΄λΈŒλŸ¬λ¦¬λ“€κΉŒμ§€ κ΄€λ¦¬ν•˜μ—¬ λ„€νŠΈμ›Œν¬λ₯Ό ν†΅ν•΄μ„œ μžλ™μœΌλ‘œ λ‹€μš΄λ°›μ•„ μ€€λ‹€.

Gradle 

  • 개발 지원에 쀑점을 λ‘” λΉŒλ“œ 도ꡬ
  • Ant와 Mavenκ³Ό 같은 이전 μ„ΈλŒ€ λΉŒλ“œ λ„κ΅¬μ˜ 단점을 λ³΄μ™„ν•˜κ³  μž₯점을 μ·¨ν•©ν•˜μ—¬ λ§Œλ“  μ˜€ν”ˆμ†ŒμŠ€ λΉŒλ“œ 도ꡬ
  • 메이븐(Maven)의 pom.xml을 Gradle 용으둜 λ³€ν™˜ κ°€λŠ₯

 

 

728x90
λ°˜μ‘ν˜•

'μ‘°κ°κ°œλ…' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

CI / CD (지속적인 톡합 / 배포)  (0) 2025.02.10
[DBeaver] 단좕킀 / ν™œμš©λ²•  (0) 2024.06.25

λŒ“κΈ€