웹 개발 핵심 개념 마스터
웹, 서버, 데이터베이스의 동작 원리를
직관적인 시각 자료와 함께 상세하게 배워보세요.
1. 웹 동작의 전체 흐름
우리가 브라우저 주소창에 엔터를 쳤을 때, 서버 내부에서는 0.1초 만에 다음과 같은 일들이 벌어집니다.
요청과 응답 (Request & Response)
Client (요청)
사용자 브라우저(크롬, 사파리 등)
GET /index.php HTTP/1.1 Host: kimdowon.com User-Agent: Chrome/120.0... Cookie: session_id=abc1234...
- GET: 단순히 페이지를 보여달라는 요청
- POST: 로그인, 글쓰기 등 데이터를 보낼 때
- Cookie: 로그인 상태를 증명하는 티켓
Server (응답)
웹 서버(Apache)와 PHP
HTTP/1.1 200 OK Content-Type: text/html Set-Cookie: viewed=true <html> <body>안녕하세요!</body> </html>
- 200 OK: 성공적으로 처리됨
- 404 Not Found: 파일이 없음
- 500 Error: 서버(PHP) 내부 오류
8단계 상세 흐름도
폼 입력 및 버튼 클릭
데이터 검증 & AJAX 전송
요청 수신 및 PHP 호출
로직 수행 (로그인 등)
데이터 조회/수정/삭제
결과 수신 및 화면 갱신
절대 잊으면 안 되는 비유
- HTML (인테리어/접시): 눈에 보이는 구조와 내용물.
- CSS (페인트/장식): 예쁘게 꾸미는 디자인.
- JavaScript (웨이터): 손님의 요청을 주방(서버)으로 나르고, 결과를 가져옴.
- PHP (요리사): 주문서(코드)를 보고 실제로 요리를 만듦.
- MySQL (식자재 창고): 요리에 필요한 모든 재료(데이터)가 저장된 곳.
2. 웹 보안 필수 지식
해킹으로부터 내 사이트를 지키는 기본적인 방어 기법들입니다.
CSRF 토큰 (위조 방지)
CSRF(Cross-Site Request Forgery) 공격은 해커가 사용자의 권한을 도용하여 몰래 글을 쓰거나 비밀번호를 바꾸게 하는 공격입니다.
방어 원리
은행에서 번호표를 뽑듯이, 서버는 폼을 줄 때 "랜덤 난수표(Token)"를 같이 줍니다. 글을 쓸 때 이 토큰이 없거나 다르면 서버는 요청을 거부합니다.
- 서버: 폼 전송 시
<input type="hidden" value="a1b2c3d4">숨겨둠 - 클라이언트: 글쓰기 버튼 클릭 시 토큰 자동 제출
- 서버: "내가 아까 준 토큰이랑 똑같네? 통과!"
SQL Injection (SQL 삽입 공격)
입력창에 악성 코드를 넣어서 데이터베이스를 조작하는 아주 고전적이고 위험한 공격입니다.
위험한 예시 (절대 금지)
$sql = "SELECT * FROM users WHERE name = '" . $_POST['name'] . "'";
만약 사용자가 이름에 ' OR '1'='1을 입력하면?
=> SELECT * FROM users WHERE name = '' OR '1'='1' (모든 회원 정보 유출)
안전한 해결책 (Prepared Statement)
$stmt = $pdo->prepare("SELECT * FROM users WHERE name = :name");
$stmt->execute([':name' => $_POST['name']]);
데이터와 코드를 분리하여 처리하므로, 특수문자가 들어와도 단순 문자열로 취급됩니다.
XSS (스크립트 삽입 공격)
사용자가 입력한 내용을 필터링 없이 화면에 보여줌.
echo $_GET['comment'];
<script>alert(1)</script>입력 시 실행됨- 쿠키 탈취, 페이지 변조 가능
HTML 태그를 특수 문자 엔티티로 변환.
echo htmlspecialchars($_GET['comment']);
<가<로 변환되어 실행 안 됨- 단순 글자로만 화면에 표시됨
3. CSS 디자인 구조
박스 모델 구성요소
- Content: 실제 글자나 이미지가 들어가는 영역
- Padding: 내용물과 테두리 사이의 쿠션 (뱃살)
- Border: 박스의 경계선 (피부)
- Margin: 다른 박스와의 거리두기 (사회적 거리두기)
선택자(Selector) 우선순위
CSS가 겹칠 때 어떤 것이 적용될까요? (점수제)
- !important: 무한대 (가급적 쓰지 말 것)
- Inline Style (
style="..."): 1000점 - ID Selector (
#id): 100점 - Class Selector (
.class): 10점 - Tag Selector (
div, p): 1점
왜 CSS 파일을 분리하나요?
- 유지보수: CSS 파일 1개만 고치면, 연결된 100개 페이지 디자인이 한 번에 바뀝니다.
- 협업: 디자이너는 CSS 파일, 개발자는 PHP 파일만 건드리면 되어 충돌이 줄어듭니다.
- 캐싱: 브라우저가 CSS 파일을 최초 1회만 다운로드하고 저장해두므로 속도가 빨라집니다.
4. 서버와 네트워크 환경
XAMPP 구성요소
브라우저의 요청을 받아 PHP에게 넘겨주는 문지기
데이터를 영구적으로 저장하는 창고
데이터를 가공하고 로직을 수행하는 요리사
명령어 없이 클릭으로 DB를 관리하는 CCTV
포트 포워딩 (Port Forwarding)
공유기를 사용하는 집에서 서버를 열 때 반드시 필요한 설정입니다.
문제 상황
외부인(친구)이 내 공인 IP(아파트 정문)까지는 찾아왔지만, 공유기(경비실) 내부의 내 컴퓨터(몇 호?)가 어디인지 모름.
해결책
공유기 설정에서 "외부에서 80번 포트로 들어오면, 내 컴퓨터(192.168.0.X)의 80번으로 연결해줘"라고 약속을 정해두는 것.
5. 데이터베이스 (MySQL/MariaDB)
엑셀과 비슷하지만, 훨씬 강력하고 관계(Relation)를 맺을 수 있는 데이터 저장소입니다.
필수 SQL 명령어
SELECT * FROM users WHERE age > 20; -- 20살 넘는 사람만 조회 INSERT INTO posts (title, content) VALUES ('제목', '내용'); -- 새 글 추가 UPDATE users SET password = '1234' WHERE id = 1; -- 1번 유저 비밀번호 변경 (위험! WHERE 없으면 다 바뀜) DELETE FROM users WHERE id = 1; -- 1번 유저 삭제
JOIN (테이블 합치기)
게시글(posts) 테이블에는 작성자의 이름이 없습니다. user_id 숫자만 적혀있습니다. 왜 그럴까요?
정규화 (Normalization) 이유
- 만약 게시글마다 작성자 이름을 "홍길동"이라고 적어놨는데, 홍길동이 이름을 "홍길순"으로 개명하면?
- 게시글 1,000개를 다 찾아서 수정해야 함.
- 그래서 ID만 저장해두고, 보여줄 때만 회원 테이블과 JOIN해서 이름을 가져오는 것.
데이터 구조 예시
| ID (PK) | username | password (Hash) | role | created_at |
|---|---|---|---|---|
| 1 | admin | $2y$10$abc... | admin | 2023-12-01 |
| 2 | student1 | $2y$10$xyz... | user | 2023-12-02 |
* 비밀번호 해시(Hash): 비밀번호를 알아볼 수 없는 외계어로 변환하여, DB 관리자도 비밀번호를 알 수 없게 함.
기타 유용한 개발 지식
HTTP 상태 코드 (Status Codes)
200
OK성공! 문제 없음
404
Not Found파일을 찾을 수 없음
403
Forbidden권한 없음 (접근 금지)
500
Server Error서버 코드(PHP) 에러
Markdown (.md)
개발자들이 문서를 쓸 때 사용하는 간단한 텍스트 형식입니다. 깃허브 리드미(README.md)나 현재 이 문서도 마크다운 형식을 차용했습니다.
# 제목 → 제목
**강조** → 강조- 리스트 → - 리스트
.htaccess
아파치 서버의 설정 파일입니다. 서버를 껐다 켜지 않고도 폴더별 설정을 즉시 변경할 수 있는 강력한 파일입니다.
- 특정 IP 차단
- URL 리다이렉트 (주소 변경)
- 비밀번호로 폴더 잠금