[TIL] 2025. 1. 31

치만·2025λ…„ 1μ›” 31일
BackendTILToday I learnedfrontendhtmlloginPagewwwλ°λΈŒμ½”μŠ€μ›Ή ν’€μŠ€νƒν”„λ‘œκ·Έλž˜λ¨ΈμŠ€

24 K-Digital Training μ›Ή ν’€μŠ€νƒ λ°λΈŒμ½”μŠ€ 6κΈ°

λͺ©λ‘ 보기
6/91
post-thumbnail

🎯 웹에 λŒ€ν•΄ μ΄ν•΄ν•˜κ³ , ν”„λ‘œμ νŠΈμ˜ 첫 단계인 둜그인 ν™”λ©΄ ꡬ성을 μ œμž‘ν•©λ‹ˆλ‹€.


πŸ“™ Today I Learned

Web (μ›”λ“œ μ™€μ΄λ“œ μ›Ή, WWW)

μ›Ή(Web)은 인터넷에 μ—°κ²°λœ 컴퓨터λ₯Ό 톡해 μ‚¬λžŒλ“€μ΄ 정보λ₯Ό κ³΅μœ ν•  수 μžˆλŠ” κ³΅κ°„μž…λ‹ˆλ‹€.

인터넷(Internet) : 컴퓨터듀이 μ„œλ‘œ 톡신 κ°€λŠ₯ν•œ κ±°λŒ€ν•œ λ„€νŠΈμ›Œν¬μž…λ‹ˆλ‹€. 좜처: mdn


Web의 νŠΉμ§•

  • ν•˜μ΄νΌν…μŠ€νŠΈ(링크)λ₯Ό ν™œμš©ν•œ 정보 μ—°κ²°

    • 웹은 정보λ₯Ό ν•˜μ΄νΌν…μŠ€νŠΈ ν˜•μ‹μœΌλ‘œ ν‘œν˜„ν•˜μ—¬, λ‹€μ–‘ν•œ λ¬Έμ„œ 및 정보λ₯Ό 링크λ₯Ό 톡해 μ‰½κ²Œ μ΄λ™ν•˜λ©° 탐색할 수 μžˆμŠ΅λ‹ˆλ‹€.

    ν•˜μ΄νΌν…μŠ€νŠΈ: λ‹€λ₯Έ ν…μŠ€νŠΈμ— 링크λ₯Ό ν¬ν•¨ν•˜λŠ” ν…μŠ€νŠΈ 좜처: mdn


  • μ›Ή μ„œν•‘(Web Surfing) λ˜λŠ” μ›Ή λΈŒλΌμš°μ§•(Web Browsing)을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    • μ›Ή νŽ˜μ΄μ§€μ˜ 링크λ₯Ό 따라가며 μ—¬λŸ¬ μ›Ή νŽ˜μ΄μ§€λ₯Ό νƒμƒ‰ν•˜λŠ” ν–‰μœ„λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€.

Web의 ꡬ쑰

ν΄λΌμ΄μ–ΈνŠΈ(Client): μ„œλΉ„μŠ€λ₯Ό μ΄μš©ν•˜λŠ” (μš”μ²­ν•˜λŠ”) 컴퓨터

μ„œλ²„(Server): μ„œλΉ„μŠ€λ₯Ό μ œκ³΅ν•˜λŠ” 컴퓨터

ν”„λ‘œν† μ½œ(Protocol): ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„ κ°„μ˜ 톡신 κ·œμΉ™(약속)

  • μ˜ˆμ‹œ
    • HTTP(HyperText Transfer Protocol): μ›Ήμ—μ„œ 데이터λ₯Ό μ£Όκ³ λ°›λŠ” κΈ°λ³Έ ν”„λ‘œν† μ½œ

좜처: μœ„ν‚€λ°±κ³Ό


Web 개발 직무 이해

ν”„λ‘ νŠΈμ—”λ“œ: μ›Ή μ„œλΉ„μŠ€(μ›Ή μ‚¬μ΄νŠΈ)μ—μ„œ μ‚¬μš©μžμ˜ μΈ‘λ©΄(Client-side)의 κ·Έλž˜ν”½ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ κ΅¬μ„±ν•˜λŠ” μ˜μ—­

  • μ‚¬μš©μžμ™€ μƒν˜Έμž‘μš©(κΈ€μž μž…λ ₯, λ²„νŠΌ 클릭, ν™”λ©΄ 좜λ ₯ λ“±)을 λ‹΄λ‹Ήν•©λ‹ˆλ‹€.

λ°±μ—”λ“œ: μ›Ή μ„œλΉ„μŠ€(μ›Ή μ‚¬μ΄νŠΈ)μ—μ„œ μ‚¬μš©μžμ˜ λˆˆμ— 보이지 μ•ŠλŠ” μ„œλ²„ μΈ‘(Server-side) 데이터λ₯Ό μ²˜λ¦¬ν•˜λŠ” μ˜μ—­

  • ν”„λ‘ νŠΈμ—”λ“œμ—μ„œ 전달받은 데이터와 μš”μ²­μ„ λ‚΄λΆ€ 데이터와 연산을 ν™œμš©ν•˜μ—¬ μ²˜λ¦¬ν•˜κ³  ν”„λ‘ νŠΈμ—”λ“œμ— κ²°κ³Όλ₯Ό μ „λ‹¬ν•©λ‹ˆλ‹€.

둜그인 ν™”λ©΄ λ§Œλ“€κΈ° μ‹€μŠ΅

둜그인 화면을 λ§Œλ“€κΈ° μœ„ν•΄ ν”„λ‘ νŠΈμ—”λ“œμ˜ κ°œλ…κ³Ό 개발 도ꡬ에 λŒ€ν•΄ 이해λ₯Ό ν•˜κ³  μ‹€μŠ΅μ— 듀어가도둝 ν•˜κ² μŠ΅λ‹ˆλ‹€.πŸ˜€

ν”„λ‘ νŠΈμ—”λ“œ κ°œλ…

좜처: SCRIMBA

HTML: μ›Ή νŽ˜μ΄μ§€ ꡬ성 μš”μ†Œλ“€μ˜ ꡬ쑰

CSS: μ›Ή νŽ˜μ΄μ§€ ꡬ성 μš”μ†Œλ“€μ„ 꾸밈

JavaScript: μ›Ή νŽ˜μ΄μ§€ ꡬ성 μš”μ†Œλ“€μ— 동적인 λ³€ν™”λ₯Ό 쀌


IDE

IDEλŠ” 톡합 개발 ν™˜κ²½(Integrated Development Environment)으둜 μ½”λ“œ μž‘μ„±,μ‹€ν–‰, 디버깅 등을 ν•˜μˆ˜ν–‰ν•  수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” λ„κ΅¬μž…λ‹ˆλ‹€.

  • μ˜ˆμ‹œ : VS Code, IntelliJ IDEA, Eclipse

HTML

HTML(Hyper Text Markup Language): μ›Ή νŽ˜μ΄μ§€λ₯Ό μ—°κ²°ν•˜λŠ” κΈ°λŠ₯을 가진 ν…μŠ€νŠΈμ΄μž μ›Ή νŽ˜μ΄μ§€μ˜ ꡬ쑰λ₯Ό λͺ…μ‹œν•˜λŠ” μ–Έμ–΄μž…λ‹ˆλ‹€.

  • HTML은 <>(νƒœκ·Έ)λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. νƒœκ·ΈλŠ” μ›Ή νŽ˜μ΄μ§€μ˜ ꡬ성 μš”μ†Œ ν•˜λ‚˜ν•˜λ‚˜λ‘œ 역할을 ν•˜κ²Œ λ©λ‹ˆλ‹€.
  • <νƒœκ·Έ> 감싸진 κΈ€μžκ°€ κ·Έ νƒœκ·Έμ˜ 역할을 λ§‘μŠ΅λ‹ˆλ‹€.</νƒœκ·Έ>
    • μ—¬λŠ” νƒœκ·Έμ™€ λ‹€λŠ” νƒœκ·Έκ°€ ν•œ 쌍일 수 있고, λ‹«λŠ” νƒœκ·Έ 없이 μ—¬λŠ” νƒœκ·Έκ°€ λ‹¨λ…μœΌλ‘œ μ“°μ΄λŠ” κ²½μš°λ„ μžˆμŠ΅λ‹ˆλ‹€.

HTML κΈ°λ³Έ ν‹€

<!DOCTYPE html> : document type 이 htmlμž„μ„ λͺ…μ‹œν•˜λŠ” νƒœκ·Έμž…λ‹ˆλ‹€.

<html>: HTML λ¬Έμ„œμ˜ μ‹œμž‘κ³Ό 끝을 κ°μ‹ΈλŠ” μ΅œμƒμœ„ νƒœκ·Έμž…λ‹ˆλ‹€.

<head>: HTML λ¬Έμ„œμ˜ λ¬Έμ„œ νŒŒμΌμ— λŒ€ν•œ 정보λ₯Ό ν¬ν•¨ν•˜λŠ” νƒœκ·Έμž…λ‹ˆλ‹€.

<meta charset="UTF-8">: λ¬Έμ„œμ˜ 문자 인코딩을 UTF-8둜 μ„€μ •ν•˜λŠ” νƒœκ·Έμž…λ‹ˆλ‹€. "UTF-8"은 문자 인코딩 λ°©μ‹μœΌλ‘œ, λ‹€μ–‘ν•œ 언어와 특수 문자λ₯Ό μ˜¬λ°”λ₯΄κ²Œ ν‘œμ‹œν•  수 있게 ν•©λ‹ˆλ‹€.

<title>: μ›Ή λΈŒλΌμš°μ € 탭에 ν‘œμ‹œλ˜λŠ” 제λͺ©μ„ μ„€μ •ν•˜λŠ” νƒœκ·Έμž…λ‹ˆλ‹€.

<body>: μ‹€μ œ 화면에 ν‘œμ‹œλ  μ›Ή νŽ˜μ΄μ§€μ˜ μ½˜ν…μΈ λ₯Ό ν¬ν•¨ν•˜λŠ” νƒœκ·Έμž…λ‹ˆλ‹€.

πŸ’»VS Codeλ₯Ό ν†΅ν•΄μ„œ 둜그인 νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€μ–΄λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

HTML νƒœκ·Έ

<h1>: 제λͺ©(Heading)을 ν‘œμ‹œν•˜λŠ” νƒœκ·Έ

<br>: μ€„λ°”κΏˆ(Break) νƒœκ·Έ

<input>: μ‚¬μš©μžλ‘œλΆ€ν„° μž…λ ₯을 λ°›λŠ” νƒœκ·Έ, λ‹€μ–‘ν•œ μœ ν˜•μ˜ μž…λ ₯을 λ°›μŠ΅λ‹ˆλ‹€.

  • <input type="text"> : ν…μŠ€νŠΈ μž…λ ₯ ν•„λ“œλ‘œ, μ‚¬μš©μžκ°€ 문자, 숫자 등을 μž…λ ₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

  • <input type="password"> : λΉ„λ°€λ²ˆν˜Έ μž…λ ₯ ν•„λ“œλ‘œ, μž…λ ₯된 λ¬Έμžκ°€ 보이지 μ•Šλ„λ‘ ν•©λ‹ˆλ‹€.

  • <input type="button" ν…μŠ€νŠΈ> : λ²„νŠΌμ„ μƒμ„±ν•˜λ©°, 클릭 μ‹œ νŠΉμ • λ™μž‘μ„ μˆ˜ν–‰ν•©λ‹ˆλ‹€.

좜λ ₯ν™”λ©΄

🧐 였늘의 발견

<button>뿐 μ•„λ‹ˆλΌ <input> νƒœκ·Έ 속성에 type="button"이 μžˆλ‹€λŠ” 것을 μ•Œμ•˜μŠ΅λ‹ˆλ‹€.

πŸ–‹οΈ ν•œ 쀄 회고

웹에 κ°œλ…μ„ 읡히고 둜그인 νŽ˜μ΄μ§€λ₯Ό 직접 κ΅¬ν˜„ν•˜λ©΄μ„œ ν•˜μ΄νΌν…μŠ€νŠΈμ— λŒ€ν•œ κΉŠμ€ 이해λ₯Ό ν•˜κ²Œ 된 것 κ°™λ‹€.

profile
치만
🌱개발 기둝μž₯
이전 포슀트

[TIL] 2025. 1. 24

λ‹€μŒ 포슀트

[TIL] 2025. 2. 3

0개의 λŒ“κΈ€