1 λΆ„ μ†Œμš”

1μž₯ μ›Ή 기술 ν™˜κ²½ 이해

1.1 λ„€νŠΈμ›Œν¬, 인터넷, μ›Ή


  • λ„€νŠΈμ›Œν¬ : 컴퓨터와 컴퓨터λ₯Ό μ—°κ²°ν•΄ μ£ΌλŠ” 망
  • TCP/IP : 컴퓨터 간에 톡신할 수 μžˆλ„λ‘ λ§Œλ“  ν”„λ‘œν† μ½œ
  • 인터넷 : μ „ 세계가 ν•˜λ‚˜λ‘œ μ—°κ²°λœ λ„€νŠΈμ›Œν¬
    • TCP/IP, WWW의 μƒμ—…ν™”λ‘œ λ°œμ „
  • WWW : 인터넷을 μ‚¬μš©ν•˜κΈ° 쉽도둝 ν•˜μ΄νΌ ν…μŠ€νŠΈ ν†΅ν•˜μ—¬ 정보λ₯Ό 전달 λ˜λŠ” κ³΅μœ ν•  수 μžˆλŠ” μ„œλΉ„μŠ€
    • HTTP
      • μ›Ή μ„œλΉ„μŠ€μ—μ„œ μ‚¬μš©λ˜λŠ” 톡신 규격
      • ν΄λΌμ΄μ–ΈνŠΈ μ†Œν”„νŠΈμ›¨μ–΄ : μ›Ή μ„œλΉ„μŠ€λ₯Ό μ΄μš©ν•˜κΈ° μœ„ν•œ ν΄λΌμ΄μ–ΈνŠΈ μ†Œν”„νŠΈμ›¨μ–΄ β†’ μ›Ή λΈŒλΌμš°μ €
        • 크둬, μ‚¬νŒŒλ¦¬, νŒŒμ΄μ–΄ν­μŠ€
      • μ„œλ²„ μ†Œν”„νŠΈμ›¨μ–΄ : μ„œλ²„μ—μ„œ μ›Ή μ„œλΉ„μŠ€λ₯Ό μ œκ³΅ν•˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄
        • μ•„νŒŒμΉ˜, ν†°μΊ£
      • λ™μž‘ κ³Όμ • image
    • HTML
    • URL

1.2 μ›Ή ν”„λ‘œκ·Έλž˜λ° 언어와 μ£Όμš” 기술


  • ν”„λ‘ νŠΈμ—”λ“œ
    • HTML : μ›Ή λ¬Έμ„œμ˜ ꡬ쑰λ₯Ό μ •μ˜ν•˜κ³  μ½˜ν…μΈ λ₯Ό ν‘œν˜„ν•˜λŠ” μ–Έμ–΄
    • CSS : HTMLμ—μ„œ ꡬ쑰(λ ˆμ΄μ•„μ›ƒ)μ΄λ‚˜ λ””μžμΈ μš”μ†Œλ₯Ό λΆ„λ¦¬ν•˜μ—¬ μ‹œκ°μ  μš”μ†Œλ₯Ό μ •μ˜
    • JavaScript
    • TypeScript
  • ν”„λ‘ νŠΈμ—”λ“œ ν”„λ ˆμž„μ›Œν¬
    • React
    • Vue
    • Angular
  • ν”„λ ˆμž„μ›Œν¬
    • μ†Œν”„νŠΈμ›¨μ–΄μ μœΌλ‘œλŠ” λͺ©μ μ— 맞게 잘 μ„€κ³„λœ ꡬ쑰와 미리 κ΅¬ν˜„λœ 곡톡λͺ¨λ“ˆ(라이브러리)이 ν¬ν•¨λœ μ†Œν”„νŠΈμ›¨μ–΄ 개발 ν™˜κ²½
    • μ’…λ₯˜
      • PHP
      • JavaScript, TypeScript - Node.js(Next.js, Express.js, NestJs ), Angular / React / Vue(Front-End)
      • 파이썬 - Django, Flask, FastAPI
      • 루비
      • Java - Spring Framework(μ „μžμ •λΆ€ ν”„λ ˆμž„μ›Œν¬), Spring Boot
  • λ°±μ—”λ“œ 쀑심 개발
    • 전톡적인 μ›Ή 개발 λͺ¨λΈμ΄λ©°, μ„œλ²„μ—μ„œ λͺ¨λ“  것을 λ‹΄λ‹Ήν•˜λŠ” 방식
    • μ„œλ²„ 연동에 ν•„μš”ν•œ λ‹€μ–‘ν•œ μ„œλ²„ ν™˜κ²½ λŒ€μ‘ κ°€λŠ₯
    • μ†Œκ·œλͺ¨ μ„œλ²„λ₯Ό μ—°λ™ν•˜λŠ” MSA 방식 ν™•μ‚°
    • 기술이 μ•ˆμ •μ , κΈ°μ‘΄ 개발 μ‹œμŠ€ν…œ 많고 였래 μœ μ§€ image
  • ν”„λ‘ νŠΈμ—”λ“œ 쀑심 개발
    • ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ HTML을 κ°€μ§€κ³  μžˆκ±°λ‚˜ μ„œλ²„μ—μ„œ HTML만 λ°›μ•„μ˜€κ³  μ„œλ²„λ‘œλΆ€ν„° ν™” λ©΄ ꡬ성에 ν•„μš”ν•œ λ°μ΄ν„°λ§Œ μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ 받아와 데이터와 화면을 μ‘°ν•©ν•΄ λ³΄μ—¬μ€Œ (CSR)
    • UX/UI, μ›Ή μ„±λŠ₯κ³Ό μ›Ή 접근성이 μ€‘μš”
    • ν•„μš”ν•œ μ‹€μ‹œκ°„ 데이터 κ°±μ‹  κ°€λŠ₯ ν˜•νƒœ (REST API) image
  • μ›Ή μ•±κ³Ό λ„€μ΄ν‹°λΈŒ μ•±
    • λ„€μ΄ν‹°λΈŒ μ•± : λͺ¨λ°”일 기기에 μ΅œμ ν™”λœ ν”Œλž«νΌμ— λ§žλŠ” μ–Έμ–΄λ‘œ κ°œλ°œν•œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜
    • μ›Ή μ•± : μ‹€μ œ μ›Ή λ°©μ‹μœΌλ‘œ μž‘λ™λ˜μ§€λ§Œ μ‚¬μš©μžμ—κ²Œ μ•± μ‚¬μš©κ°™μ€ κ²½ν—˜ 전달 image

1.3 μƒˆλ‘œμš΄ μ›Ή 개발 νŠΈλžœλ“œ


  • μžλ°” μ–Έμ–΄ λŒ€μ•ˆ β†’ μ½”ν‹€λ¦°
  • λ°±μ—”λ“œ 개발 및 운영 ν™˜κ²½μ˜ λ³€ν™”
    • μŠ€ν”„λ§ λΆ€νŠΈ ν”„λ ˆμž„μ›Œν¬ λ°œμ „
    • ν”„λ‘ νŠΈμ—”λ“œ 쀑심 개발 가속화 β†’ κ°„κ²°ν•œ ν˜•νƒœμ˜ μ„œλ²„ ν”„λ‘œκ·Έλž˜λ° 개발 λŠ˜μ–΄λ‚¨ : REST API ν˜•νƒœμ˜ 개발
    • λ‹€μ–‘ν•œ ꡬ쑰의 DB 연동 및 ν™œμš© μ€‘μš”
  • ν”„λ‘ νŠΈμ—”λ“œ 쀑심 개발둜의 이동
  • μŠ€ν”„λ§ λΆ€νŠΈ ν”„λ ˆμž„μ›Œν¬λ‘œμ˜ λ³€ν™”
    • λ…λ¦½μ μœΌλ‘œ μ‹€ν–‰λ˜λŠ” μŠ€ν”„λ§ 기반 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ‰½κ²Œ λ§Œλ“€ 수 μžˆκ²Œν•˜λŠ” ν”„λ‘œμ νŠΈ

νƒœκ·Έ:

μΉ΄ν…Œκ³ λ¦¬:

μ—…λ°μ΄νŠΈ: