웹/네트워크/HTTP 베이스캠프 for developer - 웹 기초용어 정리

학습 내용

• 알아두면 유용한 웹 기초 상식에 대해 알 수 있다.

 

 

1. 웹(Web)과 인터넷(Internet)의 차이점

우리가 흔히 사용하는 www는 웹(Web)을 의미합니다. 그러나 웹과 인터넷은 같은 개념이 아닙니다!

• 인터넷: 전 세계의 네트워크를 연결하는 거대한 철도망
• 웹(Web): 인터넷 위에서 작동하는 특정한 열차(KTX, 새마을호 등)

 

🔑 비유로 이해하기!

 

• 인터넷은 철도망이고, 웹은 그 위를 달리는 여객 열차입니다.

• 웹 페이지는 열차에 실린 승객(텍스트, 이미지, 영상 등)입니다.

• 다른 열차(FTP, 이메일 등)도 같은 철도망(인터넷)을 달립니다.

 

 

🌟 웹의 핵심 구성 요소

 

1. HTML: 구조를 담당하는 뼈대

2. CSS: 디자인과 레이아웃을 담당하는 피부

3. JavaScript: 웹 페이지의 동적 기능을 구현하는 근육

 

 

📌 웹의 필수 요소

 

• URL: 웹 자원의 주소

• HTTP: 클라이언트와 서버 간의 통신 약속

• DNS: 도메인 이름을 IP 주소로 변환

• 웹 서버: 요청을 받아 처리하고 응답을 반환

• 웹 브라우저: 사용자가 요청한 페이지를 보여주는 프로그램

 

---

2. 웹이 작동하는 원리

 

1. URL 입력

사용자가 웹 브라우저 주소창에 URL을 입력합니다.

2. DNS 확인

브라우저는 DNS 서버에 IP 주소를 요청합니다.

3. HTTP 요청(Request)

브라우저가 웹 서버에 해당 리소스를 요청합니다.

4. HTTP 응답(Response)

웹 서버는 요청에 대한 응답을 보냅니다.

5. 브라우저 렌더링

브라우저는 HTML, CSS, JavaScript를 해석하여 화면에 표시합니다.

 

 

📊 예시

 

• https://www.example.com

• https: 프로토콜
• www: 서브도메인
• example.com: 도메인
• /path: 경로

관련 코드

---

3. 웹을 구성하는 언어들

 

HTML (구조)

역할: 웹 페이지의 구조와 콘텐츠 정의

예시:

<h1>안녕하세요!</h1>
<p>이곳은 저의 웹 페이지입니다.</p>코드코드

 

CSS (디자인)

역할: 웹 페이지의 스타일 및 레이아웃 설정

예시:

h1 {
  color: blue;
  font-size: 24px;
}

 

 

JavaScript (기능)

역할: 웹 페이지에 동적 기능 추가

예시:

alert('안녕하세요! 이 웹 페이지에 오신 것을 환영합니다.');

 

Python (서버 데이터 처리)

역할: 백엔드에서 데이터 처리 및 API 제공

예시:

@app.route('/')
def hello():
    return "안녕하세요, Python 서버입니다!"

 

---

4. URL, URI, URN

 

• URI: 자원의 식별자

• URL: 자원의 위치 (ex: https://www.example.com)

• URN: 자원의 이름 (ex: urn:isbn:123456789)

 

📌 예시

 

• https://www.example.com/about

• URL: 자원의 위치
• URN: urn:uuid:1234-5678-90ab

---

5. HTTP와 HTTPS의 차이

 

HTTP (HyperText Transfer Protocol)

 

• 데이터가 암호화되지 않고 전송

• 주로 공개된 정보 제공

 

HTTPS (HTTP Secure)

 

• SSL/TLS로 암호화된 데이터 전송

• 개인 정보 보호

 

🔐 예시:

• HTTP: http://www.example.com

• HTTPS: https://www.example.com

 

---

6. 모놀리식 vs 마이크로서비스 아키텍처

🧩 모놀리식 아키텍처

 

• 특징: 모든 기능이 하나의 애플리케이션에 통합

• 장점: 개발과 배포가 간단

• 단점: 확장성과 유지보수가 어려움

 

🧩 마이크로서비스 아키텍처

 

• 특징: 기능별로 독립된 서비스로 분리

• 장점: 독립적 개발 및 배포 가능

• 단점: 서비스 간 통신 복잡성

 

---

7.  정리

이번 글에서는 웹의 기본 개념부터 HTTP, HTTPS, 아키텍처의 차이점까지 살펴보았습니다.

웹 개발을 배우기 위한 첫걸음을 잘 내딛으셨나요? 😊

 

앞으로 더 깊이 있는 웹 개발 이야기를 다뤄볼 예정이니, 다음 포스팅도 기대해주세요! 🚀

 

✨ 오늘도 즐거운 개발 라이프 되세요! ✨

 

 

---

참고자료

 

https://www.inflearn.com/course/%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-http-%EC%A0%9C%EC%BD%94%EB%B2%A0/dashboard

웹/네트워크/HTTP 베이스캠프 for developer 강의 | 제주코딩베이스캠프 - 인프런