1. 서론: 웹(Web)의 배경 및 구조
- 주제: 애플리케이션 레이어의 마지막 실습, 주제는 '웹 프로그래밍'.
- 웹의 역사:
- 1990년 이전: 인터넷은 소수 전문가만 사용. 정보의 위치를 알기 어려움.
- 1990년 이후: 월드 와이드 웹(WWW) 등장. 하이퍼링크를 통해 클릭만으로 정보 접근 가능 -> 인터넷의 폭발적 성장.
- 구조: 클라이언트-서버 아키텍처.
- 서버: 파일(정보)을 가지고 있다가 요청 시 제공 (예: Apache, Nginx).
- 클라이언트: 파일을 요청하고 받아와서 화면에 그림 (예: Chrome, Edge, 과거 Netscape).
2. 환경 설정 (XAMPP 설치)
- 필요 도구: 웹 서버와 PHP 인터프리터가 필요함. 이를 쉽게 설치해 주는 패키지가 XAMPP.
- XAMPP 구성: Apache(웹서버), MariaDB(데이터베이스), PHP, Perl.
- 설치 과정:
- 구글에서 'XAMPP' 검색 후 다운로드 (Windows용 최신 버전).
- 설치 시 MySQL 등 불필요한 요소는 체크 해제하고 Apache와 PHP만 설치.
- 설치 경로: C:\xampp
- 실행 및 확인:
- XAMPP Control Panel 실행 -> Apache Start 버튼 클릭.
- 포트 확인: 80번(HTTP), 443번(HTTPS) 포트가 열려야 정상.
- 작동 확인: 웹 브라우저 주소창에 127.0.0.1 또는 localhost 입력.
- 127.0.0.1: 내 컴퓨터(로컬)를 가리키는 IP 주소.
- 성공 시 dashboard/index.html 페이지가 뜸.
- 서버 기본 폴더: C:\xampp\htdocs (이 폴더에 파일을 넣어야 웹 서버가 인식함).
3. 실습 1: HTML (정적 웹 페이지)
- 개념: 웹 페이지의 뼈대를 만드는 마크업 언어.
- 기본 구조:
- <html>...</html>: 문서 시작과 끝.
- <head>: 메타 데이터.
- <body>: 실제 화면에 보이는 내용.
- 주요 태그 학습:
- <h1>~<h5>: 글자 크기 (제목).
- <b>: 굵은 글씨, <i>: 기울임 꼴.
- <img>: 이미지 삽입 (<img src="파일이름">).
- <a>: 하이퍼링크 (<a href="이동할주소">).
- 실습 내용:
- htdocs 폴더에 dog.html과 개 그림 파일(dog1.png)을 넣음.
- 브라우저에서 127.0.0.1/dog.html 접속하여 텍스트와 이미지 출력 확인.
4. 실습 2: JavaScript (클라이언트 사이드 스크립트)
- 개념: 웹 페이지에 '동작'을 부여하기 위해 탄생. (Netscape사가 처음 개발).
- 특징: 웹 브라우저(클라이언트)가 코드를 실행함.
- 코드 분석 (dog_animate.html):
- <script> 태그 안에 작성.
- setInterval(함수, 100): 100ms마다 함수 실행.
- 배열(Array)에 개가 걷는 그림 9장을 저장.
- canvas 태그를 이용해 이미지를 지웠다 그리기를 반복하며 좌표(x)를 이동시켜 걷는 애니메이션 구현.
- 실습 내용:
- htdocs 폴더에 dog_animate.html과 관련 이미지들을 복사.
- 브라우저에서 접속 시 개가 걸어가는 애니메이션 확인.
5. 실습 3: PHP (서버 사이드 스크립트)
- 개념: 서버 쪽에서 실행되는 프로그래밍 언어.
- 목적: 사용자 요청이나 데이터(DB, 파일 등)에 따라 동적으로 다른 웹 페이지를 생성하여 전송. (예: 로그인 성공/실패 화면).
- 작동 원리:
- 확장자가 .php인 파일을 요청하면, 웹 서버가 PHP 엔진을 통해 코드를 실행한 후 결과(HTML)만 브라우저에 보냄.
- 코드 분석 (login.php):
- client.txt: 고객 명단 파일 (역대 미국 대통령 이름 등).
- URL 파라미터(?id=이름)로 받은 값과 파일 내의 명단을 비교.
- 명단에 있으면 $success = 1, 없으면 0.
- 결과에 따라 "Welcome" 또는 "Not a client" 메시지 출력.
- 실습 내용:
- htdocs에 login.php와 client.txt 복사.
- 주소창에 127.0.0.1/login.php?id=Jefferson 입력 -> 환영 메시지 확인.
- 주소창에 127.0.0.1/login.php?id=Jordan 입력 -> 거부 메시지 확인.
1. 배경 지식 (디테일)
- 웹(Web)의 진화:
- 1990년 이전: 인터넷은 소수의 과학자/엔지니어 전유물. 정보가 어디 있는지 알 수 없었음.
- 1990년 이후: 월드 와이드 웹(WWW) 등장. 하이퍼링크(Hyperlink) 덕분에 클릭만으로 데이터 연결 가능 -> 일반인 유입 폭발.
- 현재: 여전히 인터넷의 '킬러 애플리케이션'은 웹임.
- 클라이언트-서버 구조의 특징:
- 서버 프로그램(Web Server)과 클라이언트 프로그램(Web Browser)을 만드는 사람이 달라도 됨. (문서 규약만 지키면 됨).
- 서버: 아파치(Apache), Nginx 등.
- 브라우저: 과거 넷스케이프 내비게이터(Netscape) -> 현재 구글 크롬(Chrome)이 대세.
2. 상세 환경 설정 가이드 (XAMPP 설치)
- XAMPP란? 크로스 플랫폼(Windows, Linux 등)에서 Apache, MySQL, PHP, Perl을 한 번에 설치해 주는 패키지.
- 설치 단계 (매우 구체적):
- 구글에 'XAMPP' 검색 -> apachefriends.org 접속.
- Windows용 다운로드 (버전 3개 중 세 번째, 최신 버전 선택).
- 설치 파일 실행 시 바이러스 백신 경고가 뜨면 Yes 클릭.
- 컴포넌트 선택 (중요):
- 필수(강제): Apache, PHP.
- 체크 해제(안 쓸 것): MySQL, FileZilla, Mercury, Tomcat, Perl 등은 모두 체크 해제 (가볍게 설치).
- 설치 경로: C:\xampp (기본값 유지).
- 언어: 영어(English) 선택.
- 방화벽 경고: 액세스 허용 클릭.
- 서버 실행 및 확인:
- 제어판(Control Panel) 실행 -> Apache 옆의 Start 버튼 클릭.
- 정상 작동 시: 버튼이 Stop으로 바뀌고, Port 80, 443 표시됨.
- 트러블슈팅: 포트 번호가 안 뜨거나 에러가 나면, 다른 프로그램(다른 웹서버 등)이 포트를 점유 중인 것이므로 자리를 옮겨야 함.
- 작동 테스트:
- 브라우저 주소창 입력: 127.0.0.1 또는 localhost.
- 결과: dashboard 폴더로 리다이렉트 되며 환영 페이지 뜸.
- 원리: 파일명을 안 쓰면 암묵적으로 index.html을 찾아 보여줌.
3. 파일 관리 및 HTML 기초 (실습 1 디테일)
- 웹 서버의 기본 폴더 (Root Directory):
- 경로: C:\xampp\htdocs
- 이 폴더 안에 파일을 넣어야 서버가 인식함. (htdocs는 HyperText Documents의 약자).
- HTML 기초 문법:
- 확장자는 무조건 .html.
- 구조: <html> (전체) -> <head> (메타데이터/타이틀) -> <body> (실제 내용).
- 태그:
- <h1>~<h5>: 글자 크기 (1이 가장 큼). 절대적 크기가 아닌 상대적 단계.
- <b>: 굵게 (Bold), <i>: 기울임 (Italic).
- <img>: <img src="파일명">. 이미지를 가져와 박아넣음.
- <a>: <a href="목적지">텍스트</a>. 하이퍼링크(Anchor).
- 실습 1 과정 (dog.html):
- 제공된 WebProgramming.zip 압축 해제 -> HTML 폴더 확인.
- dog.html과 dog1.png를 C:\xampp\htdocs로 복사.
- 메모장으로 dog.html 확인: 텍스트 출력 후 dog1.png 이미지를 불러오는 구조.
- 주의: 한글 이름을 쓰면 깨지는 현상이 있어 영어 이름 사용 권장.
4. 자바스크립트 상세 분석 (실습 2 디테일)
- 배경: 정적인 HTML은 재미가 없어서, 넷스케이프사가 브라우저 내에서 프로그램이 돌아가게 만듦. 처음엔 비표준이었으나 인기가 많아져 표준이 됨.
- 이름의 유래: Java와 문법적으로 관련 없으나, 당시 Java가 인기 있어 묻어가려고 이름을 비슷하게 지음.
- 실행 주체: 웹 브라우저(클라이언트).
- 코드 분석 (dog_animate.html):
- <script> ... </script> 태그 안에 작성.
- 캔버스(Canvas): 화면에 그림 그릴 영역 (id="myCanvas", 800x600px).
- 변수 및 객체:
- var myVar: setInterval의 결과를 담음.
- ctx = ...getContext("2d"): 2D 그림 도구(붓, 지우개 등)를 가져옴.
- imgObj: 이미지 객체 배열 (new Array).
- 애니메이션 로직:
- setInterval(function, 100): 100ms(0.1초)마다 함수 실행.
- 이미지 9장 (dog1.png ~ dog9.png)을 배열에 로드.
- Running 함수:
- clearRect: 이전 그림을 지움.
- drawImage: 현재 순서의 개 그림을 그림.
- x += step: x좌표를 조금씩 이동시켜 걷는 효과 냄.
- index++: 다음 이미지로 변경 (1->2->...->9).
5. PHP 상세 분석 (실습 3 디테일)
- 차이점: 자바스크립트는 브라우저가 해석하지만, PHP는 **서버(Server-Side)**가 해석함.
- 용도: 로그인 처리, 데이터베이스 연동 등 조건에 따라 다른 페이지를 보여줘야 할 때.
- 작동 방식:
- 확장자가 .php인 파일을 요청 -> 웹 서버가 PHP 엔진 가동 -> 코드 실행 -> 결과물(HTML)만 브라우저에 전송.
- 코드 분석 (login.php):
- <?php ... ?> 태그 사용.
- 파일 처리:
- fopen("client.txt", "r"): 명단 파일을 읽기 모드로 염.
- while(!feof($file)): 파일의 끝(End Of File)이 아닐 때까지 반복.
- fgets($file): 한 줄씩 문자열 읽기.
- trim($line): 문자열 앞뒤 공백 제거 (손톱깎이처럼 정리).
- 비교 로직:
- strcmp(문자열1, 문자열2): 두 문자열 비교. 0이면 일치.
- $id: URL 파라미터로 넘어온 ID 값.
- if ($success == 1): 일치하면 Welcome..., 아니면 Not a client... 출력.
- 데이터 (client.txt): 워싱턴, 아담스, 제퍼슨 등 미국 전직 대통령 이름 5명 포함.
- 실행 방법 (GET 방식):
- 브라우저 주소창에 파라미터를 붙여서 전달.
- http://127.0.0.1/login.php?id=Jefferson
- ?: 파라미터 시작.
- id=Jefferson: 변수 id에 'Jefferson'을 넣어라.
- 주의: ?id=... 부분을 안 쓰면 PHP 내부에서 변수가 없어 에러 발생함.
'25년2학기 > 컴퓨터 네트워크' 카테고리의 다른 글
| 컴넷) 스위칭 패브릭 비교 , 스위치와 라우터 (0) | 2025.12.17 |
|---|---|
| 컴넷) (12.13) (0) | 2025.12.13 |
| 컴넷) 시험문제 (12.05) (0) | 2025.12.05 |
| 컴넷) (12.03) (1) | 2025.12.03 |
| 컴넷) (11.30) (1) | 2025.11.30 |