BD 26일차
웹 개발 부트캠프 첫걸음 🚀
웹사이트 개발을 위한 기초 개념 정리
안녕하세요! 이번 웹 개발 부트캠프에서는 웹사이트 개발에 필요한 핵심 개념들을 배워볼 예정입니다. 💡
웹 개발에는 여러 프로그래밍 언어가 사용되지만, 모든 것을 한꺼번에 익히기는 어렵습니다. 그래서 먼저 주요 언어들의 용도와 역할을 이해하는 것부터 시작하겠습니다.
🌐 웹 개발에 사용되는 언어들
웹 개발에서 사용되는 언어들은 크게 세 가지로 구분됩니다:
- 마크업 언어 (Markup Language):
- HTML, CSS
- 웹 브라우저가 직접 읽고 해석할 수 있는 언어
- 웹사이트의 구조와 디자인을 담당
- 클라이언트 사이드 스크립트 (Client-Side Script):
- JavaScript, React.js, Vue.js, jQuery, Bootstrap
- 웹 브라우저에서 실행되는 코드
- 사용자와의 상호작용을 담당
- 서버 사이드 스크립트 (Server-Side Script):
- PHP, Python, Java, Node.js, JSP, ASP
- 웹 브라우저가 직접 읽지 못하는 언어
- 서버에서 데이터를 처리하고 웹사이트에 제공
📌 정리:
- 웹 브라우저는 HTML, CSS, JavaScript를 해석할 수 있음
- 서버 사이드 언어는 백엔드(Back-End)에서 데이터를 처리함
🖥️ 웹사이트가 화면에 표시되는 과정
우리가 네이버(Naver)와 같은 웹사이트에 접속할 때 어떤 과정이 일어나는지 살펴봅시다!
1️⃣ 사용자가 네이버.com 입력
웹 브라우저(Chrome, Safari, Edge 등)에서 네이버.com을 입력하고 엔터를 누르면, 먼저 도메인(Domain Name)이 해석됩니다.
2️⃣ DNS 서버에서 IP 주소 확인
도메인은 실제로 숫자로 된 IP 주소(예: 112.32.21.45)와 연결되어 있습니다.
도메인 네임 시스템(DNS 서버)이 네이버.com에 해당하는 IP 주소를 찾아 브라우저에 알려줍니다.
3️⃣ 클라이언트(웹 브라우저) → 서버 요청
브라우저는 받은 IP 주소로 서버에 요청(Request)을 보냅니다.
웹사이트의 데이터를 제공하는 서버는 기본적으로 80번(HTTP) 또는 443번(HTTPS) 포트를 사용합니다.
4️⃣ 서버에서 HTML 파일 전달
서버는 요청을 받으면 HTML 파일과 함께 CSS, JavaScript 등을 포함한 웹페이지 데이터를 브라우저로 전송(Response)합니다.
5️⃣ 브라우저가 HTML, CSS, JS 해석
브라우저는 받은 HTML, CSS, JavaScript 코드를 해석하여 웹사이트 화면을 구성합니다. 🎉
💡 쉽게 말하면:
- 도메인 입력 → DNS 서버에서 IP 주소 확인 → 서버에서 HTML 파일 제공 → 브라우저가 화면에 표시
💻 웹 개발 기초: 변수와 상수
웹 개발에서 변수(Variable)와 상수(Constant) 개념은 필수적입니다.
🔹 변수란?
변수(Variable)는 변할 수 있는 데이터를 저장하는 공간입니다.
let myAge = 29;
let myName = "병조";🔹 상수란?
상수(Constant)는 변하지 않는 데이터를 저장합니다.
const birthYear = 1985;
const country = "대한민국";🔹 변수와 상수의 차이
| 구분 | 변수 (let) | 상수 (const) |
|---|---|---|
| 변경 가능 여부 | 가능 ✅ | 불가능 ❌ |
| 예제 | let x = 10; x = 20; | const y = 5;(변경 불가능) |
| 주 사용처 | 변할 가능성이 있는 값 | 절대 변하지 않는 값 |
⚠️ var는 사용하지 않는 것이 좋음
var는 과거에 사용되던 변수 선언 방식이지만, 불안정한 동작을 유발할 수 있어 현재는let과const를 사용합니다.
🛠️ HTML 기본 구조
이제 간단한 HTML 기본 구조를 살펴봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 개발 기초</title>
</head>
<body>
<h1>안녕하세요! 웹 개발을 배워봅시다 🚀</h1>
</body>
</html>💡 HTML 구조 핵심 정리:
<!DOCTYPE html>: HTML5 문서 선언<html>: 웹 문서의 시작<head>: 메타데이터, 제목(title) 설정<body>: 실제 화면에 표시되는 내용
🔥 마무리 및 다음 단계
이번 챕터에서는 웹 개발의 기본 개념과 웹사이트가 동작하는 과정을 살펴봤습니다.
✅ 오늘 배운 핵심 정리
- 웹 개발 언어: HTML, CSS, JavaScript, 서버사이드 언어
- 웹사이트 로딩 과정: 도메인 → DNS → 서버 → HTML 반환 → 브라우저에서 표시
- 변수(
let), 상수(const) 개념과 기본 사용법
💡 다음에는?
- JavaScript의 기초 문법을 배우고, 직접 간단한 코드 실습을 해볼 예정입니다!
이제 본격적으로 웹 개발을 배워갈 준비가 되셨습니다. 🚀
궁금한 점이 있다면 언제든지 질문해주세요! 🙌
