BD 21일차

---

CEO 개발 부트캠프: 웹 개발 기초 이해하기

1. 웹 개발에서 사용하는 주요 언어들

웹사이트를 개발할 때는 다양한 프로그래밍 언어가 사용됩니다. HTML, CSS, Bootstrap, jQuery, PHP, React.js 등이 있지만, 모두 다룰 필요는 없습니다. 중요한 것은 언어별 용도를 이해하고 적절히 활용하는 것입니다.

웹 개발 언어는 다음과 같이 분류됩니다:

• 마크업 언어: HTML, CSS
• 클라이언트 사이드 스크립트 언어: JavaScript 및 관련 라이브러리 (React.js, Vue.js, jQuery)
• 서버 사이드 스크립트 언어: PHP, Python, JSP, ASP

💡 핵심 개념: 웹 브라우저는 HTML, CSS, JavaScript만 읽을 수 있습니다. 서버 사이드 언어는 웹 브라우저가 직접 읽지 못합니다.

2. 웹사이트가 표시되는 과정 이해하기

웹사이트가 브라우저에 표시되는 과정을 살펴봅시다.

1. 사용자가 네이버.com 같은 도메인 주소를 입력합니다.
2. 입력된 도메인은 DNS 서버로 전달되어 해당 도메인의 IP 주소를 받습니다.
3. 받은 IP 주소로 웹 서버에 접속해 HTML, CSS, JavaScript 파일을 요청합니다.
4. 웹 서버가 요청을 처리하여 브라우저로 데이터를 전달합니다.
5. 웹 브라우저가 HTML을 해석하여 화면에 웹페이지를 표시합니다.

💡 핵심 개념: 도메인은 IP 주소를 쉽게 기억하기 위한 개념입니다.

3. 웹 개발의 필수 개념: 변수와 상수

웹 개발을 위한 코딩 기초로 변수와 상수를 알아봅시다.

• 변수 (Variable): 변할 수 있는 값을 저장하는 공간

  let myAge = 29;

• 상수 (Constant): 변경할 수 없는 고정된 값을 저장

  const myName = "John";

💡 팁: let을 사용해 변수를 선언하고, 변경이 없는 값은 const를 사용합니다.

4. 웹 개발의 논리 흐름: 조건문과 반복문

웹 개발에서 중요한 개념은 논리적인 흐름을 제어하는 조건문과 반복문입니다.

조건문 (if, else)

let score = 85;
if (score >= 90) {
    console.log("A 학점");
} else if (score >= 80) {
    console.log("B 학점");
} else {
    console.log("C 학점");
}

반복문 (for)

for (let i = 1; i <= 5; i++) {
    console.log("안녕하세요 " + i);
}

💡 핵심 개념: 조건문으로 특정 조건에서만 코드를 실행하고, 반복문으로 코드를 여러 번 실행할 수 있습니다.

5. 배열과 데이터 관리

배열(Array)은 여러 개의 데이터를 한 번에 저장할 수 있는 구조입니다.

let fruits = ["사과", "바나나", "딸기", "포도"];
console.log(fruits[0]);  // 출력: 사과
console.log(fruits.length);  // 출력: 4

💡 팁: 배열에서는 인덱스를 사용해 특정 데이터를 가져올 수 있습니다.

6. 실습 문제

아래 문제로 배운 내용을 복습해보세요.

1. for문을 사용하여 1부터 100까지의 짝수의 합을 구하세요.
2. 배열을 활용하여 과일의 가격 합계를 계산해 보세요.
3. 생년월일을 입력하면 해당 띠를 출력하는 프로그램을 작성해 보세요.

---

지금까지 웹 개발의 기초 개념을 살펴보았습니다. 앞으로 실습을 통해 더 깊이 있게 이해해 봅시다! 😊