학습

# 웹 서버 · AJAX · 보안 개념 한눈에 정리

이 문서는 웹 / 서버 / AJAX 개념을 처음 접하는 사람도 바로 이해할 수 있도록 정리한 기초 설명 자료입니다.

1. localhost란? (로컬호스트)

localhost = 내 컴퓨터 자기 자신을 가리키는 특별한 주소

쉽게 말하면, "내 컴퓨터 안에서만 돌아가는 웹사이트 주소"입니다.

• localhost 또는 127.0.0.1 (둘 다 같은 의미)
• 내 PC에서만 접속 가능 (다른 사람은 접속 불가)
• 인터넷 없이도 작동함

http://localhost/index.html

💡 개발자가 혼자 테스트할 때 사용하는 주소입니다. 마치 "나만 보는 연습장" 같은 개념이에요.

2. 외부에서 접속하는 주소 (공인 IP)

다른 사람이 내 웹사이트에 접속하려면 공인 IP 주소가 필요합니다.

공인 IP는 인터넷에서 내 컴퓨터를 찾을 수 있는 "집 주소" 같은 개념입니다.

http://218.55.160.173/index.html

• 인터넷에 공개된 주소 (누구나 접속 가능)
• Apache 서버가 실행 중이어야 함 (서버가 켜져 있어야 함)
• 공유기 / 방화벽 설정이 안 되어 있으면 외부에서 접속 불가

💡 localhost는 "나만 보는 연습장", 공인 IP는 "다른 사람도 올 수 있는 공개된 집"이라고 생각하시면 됩니다.

주소	의미
localhost	나만 접속
공인 IP	다른 사람도 접속

3. 웹에서 버튼을 눌렀을 때 전체 흐름 (단계별 설명)

예를 들어 "로그인" 버튼을 눌렀을 때 무슨 일이 일어나는지 순서대로 설명드립니다:

1단계: HTML(화면) - 버튼이 보이는 화면
  ↓
2단계: 버튼 클릭 - 사용자가 마우스로 클릭
  ↓
3단계: JavaScript (이벤트 처리) - "아, 버튼이 눌렸구나!" 감지
  ↓
4단계: AJAX 요청 - 서버에게 "로그인 정보 보낼게요" 전송
  ↓
5단계: PHP (서버 로직) - 서버가 "정보 확인 중..." 처리
  ↓
6단계: MySQL (데이터 저장/조회) - 회원 정보를 창고에서 찾아봄
  ↓
7단계: JSON 응답 - 서버가 "로그인 성공!" 또는 "실패" 결과 전달
  ↓
8단계: 화면 갱신 - 결과에 따라 화면이 바뀜

역할 비유 (쉽게 이해하기)

• HTML : 종이(껍데기 화면) - 버튼이 어디에 있는지만 보여줌
• JavaScript : 손(동작) - 버튼을 누르면 뭔가 일어나게 함
• PHP : 두뇌(처리) - "이 정보가 맞나?" 생각하고 판단함
• MySQL : 창고(저장) - 회원 정보를 보관하고 꺼내줌

💡 마치 식당에서 주문하는 것과 비슷합니다. 손님이(사용자) 메뉴판(HTML)을 보고 주문(클릭)하면, 웨이터(JavaScript)가 주방(PHP)에 전달하고, 주방은 냉장고(MySQL)에서 재료를 꺼내 요리를 만들어 손님에게 전달하는 것과 같아요.

4. 클릭 = 이벤트 (사건)

웹에서는 모든 사용자의 행동이 "이벤트(사건)"입니다.

이벤트는 "사용자가 뭔가 했을 때"를 의미합니다. 마치 문을 열면 불이 켜지는 센서처럼요.

주요 이벤트 종류:

• 클릭 - 버튼이나 링크를 마우스로 누름
• 입력 - 텍스트 박스에 글자를 타이핑함
• 전송 - 폼을 제출하거나 엔터를 누름
• 스크롤 - 마우스 휠로 페이지를 위아래로 이동

// 예시: 버튼을 클릭하면 뭔가 실행되게 하는 코드
button.addEventListener("click", function () {
  // 버튼이 클릭되면 이 부분이 실행됩니다
  alert("버튼을 눌렀어요!");
});

💡 버튼을 누르는 순간 "사건"이 발생한 것이고, 그 사건을 감지해서 뭔가를 실행하는 것이 이벤트 처리입니다.

5. HTML + PHP를 한 파일로 쓰면 위험한 이유

HTML(화면)과 PHP(처리)를 한 파일에 넣으면 보안상 위험합니다.

❌ 단일 파일 방식의 문제점

사용자가 폼 작성 → 전송 버튼 클릭 → PHP 파일이 바로 실행됨

왜 위험한가요?

• 주소만 알면 누구나 직접 호출 가능 - URL을 알고 있으면 악의적인 사람이 직접 공격할 수 있음
• 자동 공격(봇)에 취약 - 로봇이 자동으로 계속 공격할 수 있음
• CSRF 공격 - 다른 사이트에서 내 사이트로 위조된 요청을 보낼 수 있음
• 무차별 요청 공격 - 비밀번호를 계속 시도해서 뚫으려는 공격

💡 마치 집 문을 열어두고 "누구나 들어오세요"라고 하는 것과 같습니다. 보안이 전혀 없어요.

6. AJAX를 사용하는 이유 (보안 핵심)

AJAX는 "페이지를 새로고침하지 않고도 서버와 통신하는 방법"입니다.

✅ AJAX 방식 (안전한 방법)

JavaScript가 중간에서 처리 → 서버에 비동기 요청 → 결과만 받아서 화면 일부만 업데이트

왜 안전한가요?

• 직접 URL 호출 차단 가능 - 악의적인 사람이 직접 주소로 접근하는 것을 막을 수 있음
• 요청 검증 가능 - "이 요청이 정당한가?" 확인할 수 있음
• 토큰 기반 보안 적용 가능 - 특별한 "출입증"을 확인해서 안전하게 처리
• 페이지 이동 없음 - 사용자는 페이지가 바뀌는 것을 느끼지 못함 (더 빠르고 부드러움)

💡 마치 경비가 있는 건물처럼, 출입증을 확인하고 들어오는 사람만 받아들이는 것과 같습니다. 훨씬 안전해요!

7. CSRF 토큰 = 1회용 교통카드 🎫 (보안 출입증)

CSRF 토큰은 "이 요청이 진짜 사용자가 보낸 것인지 확인하는 1회용 출입증"입니다.

작동 방식 (단계별)

1. 페이지 로드 시 - 서버가 특별한 토큰(랜덤 문자열)을 발급해줌
2. 요청 시 - 사용자가 뭔가를 보낼 때 이 토큰을 함께 전송
3. 서버에서 검증 - "이 토큰이 맞나?" 확인하고 맞으면 처리, 틀리면 거부

토큰이 있고 맞음 → 요청 허용 (정상 처리)
토큰이 없거나 틀림 → 요청 거부 (403 에러, 접근 차단)

쉬운 비유

• 토큰 = 개찰구 통과권 - 지하철 타려면 교통카드가 필요한 것처럼
• 없으면 접근 불가 - 교통카드 없이는 지하철을 탈 수 없는 것처럼
• 1회용 - 한 번 쓰면 다시 발급받아야 함 (더 안전함)

// 서버에서 토큰 확인하는 코드 예시
if (!check_csrf_token()) {
  // 토큰이 없거나 틀리면 접근 차단
  http_response_code(403);
  exit;
}

💡 마치 은행에서 거래할 때 OTP(일회용 비밀번호)를 받는 것과 비슷합니다. 매번 새로운 번호를 받아서 안전하게 거래하는 것처럼요.

8. CSS의 역할 (디자인 전용)

CSS는 화면의 모양(디자인)을 담당하는 전용 파일입니다.

쉽게 말하면, "웹사이트를 예쁘게 꾸미는 도구"입니다.

CSS로 할 수 있는 것:

• 색상 변경 - 버튼을 빨간색으로, 텍스트를 파란색으로
• 버튼 스타일 - 둥근 모서리, 그림자 효과 등
• 입력창 크기 조절 - 넓이, 높이 조정
• 여백, 정렬 - 요소들 사이 간격, 가운데 정렬 등
• 글꼴 설정 - 폰트 종류, 크기, 굵기
• 반응형 화면 - 모바일/태블릿/PC에 맞게 자동으로 크기 조절

💡 마치 집을 인테리어하는 것과 같아요. 집의 구조(HTML)는 그대로 두고, 벽지 색상이나 가구 배치(CSS)만 바꾸는 거예요.

8-1. CSS 예제로 이해하기 (실제 코드 보기)

예를 들어 "로그인 버튼을 빨간색으로 만들고 싶다"고 가정해봅시다.

요구사항 예시

1. 로그인 버튼을 빨간색 배경에 흰색 글자로 표시
2. 아이디 입력창을 초록색 배경, 가로 150px로 설정

CSS 파일에 이렇게 작성합니다:

/* 로그인 버튼 스타일 - 빨간색 배경, 흰색 글자 */
.login-btn {
  background-color: red;    /* 배경색: 빨강 */
  color: white;             /* 글자색: 흰색 */
}

/* 아이디 입력창 스타일 - 초록색 배경, 가로 150px */
.user-id-input {
  background-color: green;  /* 배경색: 초록 */
  width: 150px;             /* 가로 크기: 150픽셀 */
}

HTML에서는 디자인을 직접 쓰지 않고 클래스 이름만 지정합니다:

<!-- CSS 파일에서 정의한 클래스를 사용 -->
<button class="login-btn">로그인</button>
<input type="text" class="user-id-input">

💡 HTML은 "이 버튼은 login-btn 스타일을 써"라고만 말하고, 실제 색상은 CSS 파일에서 정하는 거예요. 이렇게 분리하면 나중에 색상만 바꿔도 모든 버튼이 바뀝니다!

8-2. CSS를 파일로 분리해야 하는 이유 (매우 중요 ⭐)

CSS를 별도 파일로 분리하는 것은 "편의"가 아니라 "필수"입니다!

❌ 나쁜 예: HTML 안에 디자인을 직접 쓰는 경우

<!-- 이렇게 하면 안 됩니다! -->
<button style="background:red; color:white;">로그인</button>
<button style="background:red; color:white;">회원가입</button>
<button style="background:red; color:white;">로그아웃</button>

문제점:

• 페이지마다 수정해야 함 - 버튼이 10개 페이지에 있으면 10곳 다 고쳐야 함
• 디자인 변경 시 전부 손으로 고쳐야 함 - 빨간색을 파란색으로 바꾸려면 모든 페이지를 찾아서 수정
• 코드가 지저분해짐 - HTML과 디자인이 섞여서 읽기 어려움
• 실수하기 쉬움 - 한 곳을 빼먹으면 디자인이 안 맞음

✅ 좋은 예: CSS 파일로 분리해서 관리하는 경우

1단계: CSS 파일 만들기

/* assets/css/style.css 파일에 작성 */
.btn-primary {
  background-color: red;
  color: white;
}

2단계: HTML에서 CSS 파일 연결하기

<!-- HTML 파일 상단에 한 줄만 추가 -->
<link rel="stylesheet" href="/assets/css/style.css">

<!-- 버튼들은 클래스만 지정 -->
<button class="btn-primary">로그인</button>
<button class="btn-primary">회원가입</button>
<button class="btn-primary">로그아웃</button>

장점:

• 디자인을 한 곳에서 관리 - CSS 파일 하나만 수정하면 됨
• 버튼 색상 변경 시 CSS 파일 1곳만 수정 - 빨간색을 파란색으로 바꾸려면 CSS 파일 한 줄만 고치면 모든 버튼이 바뀜
• 개발 속도 증가 - 수정 시간이 10분에서 10초로 단축
• 유지보수 쉬움 - 나중에 수정할 때 찾기 쉬움
• 협업 시 역할 분리 가능 - 디자이너는 CSS만, 개발자는 HTML만 담당

💡 마치 옷장에서 옷을 꺼내는 것과 같아요. 옷장(CSS 파일)에 옷을 정리해두면, 입을 때마다 옷장에서 꺼내면 되죠. 옷을 여기저기 흩어뒀다면 매번 찾아야 해서 불편하겠죠?

8-3. 역할 분리 한눈에 정리

구분	역할
HTML	구조 (화면 뼈대)
CSS	디자인 (색상, 크기, 정렬)
JavaScript	동작 (클릭, 이벤트)
PHP	처리 (로그인, 저장)

CSS를 분리하는 것은 편의가 아니라 필수 구조

9. XAMPP란? (웹 개발 연습 도구)

XAMPP = 로컬 서버 개발용 종합 패키지

쉽게 말하면, "내 컴퓨터에서 웹사이트를 만들고 테스트할 수 있게 해주는 무료 프로그램 세트"입니다.

포함 구성 (XAMPP 안에 들어있는 것들):

• Apache (아파치) - 웹 서버 (사람들이 접속할 수 있게 해주는 문지기)
• MySQL (마이에스큐엘) - 데이터베이스 (정보를 저장하는 창고)
• PHP (피에이치피) - 서버 언어 (서버에서 동작하는 프로그래밍 언어)
• phpMyAdmin (피에이치피마이어드민) - DB 관리 도구 (데이터베이스를 쉽게 관리할 수 있는 웹 화면)

💡 마치 요리 연습을 하려면 가스레인지, 냉장고, 조리도구가 필요한 것처럼, 웹 개발 연습을 하려면 XAMPP가 필요한 거예요. 한 번에 다 설치되어 있어서 편리합니다!

10. Apache와 MySQL의 역할 (쉽게 이해하기)

Apache (아파치) - 웹 서버

Apache는 "웹사이트에 접속할 수 있게 해주는 문지기"입니다.

• 서버 문을 열어주는 역할 - 사람들이 웹사이트에 접속할 수 있게 해줌
• 외부 사용자가 접속 가능하게 함 - 인터넷을 통해 다른 사람도 내 웹사이트를 볼 수 있게 함
• 요청을 받아서 처리 - "이 페이지 보여줘"라는 요청을 받아서 처리

💡 비유: 식당의 문지기. 손님이 오면 "어서오세요" 하고 안내해주는 역할이에요.

MySQL (마이에스큐엘) - 데이터베이스

MySQL은 "정보를 저장하고 꺼내주는 창고"입니다.

• 회원 정보 저장 - 아이디, 비밀번호, 이름 등 회원 데이터 보관
• 게시글 / 댓글 저장 - 사용자가 작성한 글과 댓글 보관
• 설정 데이터 저장 - 사이트 설정 정보 보관
• 필요할 때 꺼내줌 - 저장된 정보를 찾아서 보여줌

💡 비유: 창고 또는 금고. 물건(데이터)을 넣어두고, 필요할 때 찾아서 꺼내주는 역할이에요.

11. XAMPP 설치 위치 (Windows 기준)

XAMPP를 설치하면 보통 다음 위치에 설치됩니다:

C:\xampp\          (XAMPP가 설치된 메인 폴더)
C:\xampp\htdocs\   (웹사이트 파일을 넣는 폴더 - 중요!)

중요한 폴더: htdocs

• htdocs 폴더 = 웹 문서 위치 (웹사이트 파일을 넣는 곳)
• 이 안에 파일이 있어야 브라우저에서 접근 가능
• 예: C:\xampp\htdocs\mywebsite\index.html → 브라우저에서 http://localhost/mywebsite/index.html로 접속

💡 마치 책장처럼, htdocs 폴더에 책(웹사이트 파일)을 넣어두면 브라우저가 그 책을 읽어서 보여주는 거예요.

12. 공유기 환경에서 서버를 외부에 공개하려면

집에서 만든 웹사이트를 다른 사람도 볼 수 있게 하려면 공유기 설정이 필요합니다.

집에서 서버를 열 경우 구조:

인터넷 (외부 사람들)
  ↓
공유기 (집의 인터넷 공유기)
  ↓
내 컴퓨터 (웹서버가 돌아가는 곳)

문제는 공유기가 "외부에서 들어오는 접속을 막아버린다"는 점입니다. 그래서 설정이 필요해요.

반드시 필요한 설정 (2가지 방법)

1) 포트 포워딩 (권장 방법)

• 특정 포트(80, 443 등)만 개방 - 웹사이트 접속용 포트만 열어둠
• 비교적 안전 - 필요한 것만 열어서 위험을 줄임
• 공유기 설정에서 가능 - 공유기 관리 페이지에서 설정

💡 마치 집에 특정 방만 열어두는 것처럼, 웹사이트 접속용 문만 열어두는 거예요.

2) DMZ 설정 (위험한 방법)

• 내 컴퓨터 전체 공개 - 모든 포트를 열어둠
• 매우 위험 - 해커 공격에 취약함
• 테스트 용도로만 사용 - 실제 서비스에는 사용하지 않는 것이 좋음

💡 마치 집 문을 다 열어두는 것처럼, 모든 방을 공개하는 거라서 위험해요.

13. 핵심 요약 한 장 정리

• localhost = 나만 보는 서버
• 공인 IP = 다른 사람도 접속
• HTML = 구조
• CSS = 디자인
• JavaScript = 이벤트
• AJAX = 안전한 통신
• PHP = 처리
• MySQL = 저장
• SQL = 창고 명령어
• CSRF 토큰 = 1회용 출입증
• Apache = 서버 문
• XAMPP = 서버 연습 세트
• 관리자 페이지 = 안전한 관리 도구

# 웹 · 서버 · 보안 · 개발 개념 최종 정리본 (체크 완료)

아래 내용은 웹 개발을 처음 접하는 사람도 전체 흐름을 한 번에 이해할 수 있도록 정리된 최종본입니다.

14. SQL과 쿼리란? (데이터베이스 명령어)

SQL은 "데이터베이스(MySQL)에게 명령을 내리는 언어"입니다.

• SQL = MySQL에 명령을 내리는 언어 (Structured Query Language)
• 쿼리(Query) = 데이터베이스(창고)에 요청하는 명령 (질문하는 것)

쉬운 비유로 이해하기

• MySQL = 창고 (데이터를 보관하는 곳)
• 테이블 = 선반 (회원 정보 선반, 게시글 선반 등)
• 쿼리 = "어디에 무엇을 넣고 꺼낼지" 지시하는 명령

쿼리 예시:

-- "회원 정보 선반에서 모든 회원을 가져와줘"
SELECT * FROM users;

-- "새 회원을 추가해줘"
INSERT INTO users (username, password) VALUES ('test', '1234');

-- "이 회원 정보를 삭제해줘"
DELETE FROM users WHERE id = 1;

최초 1회 반드시 해야 하는 작업 (데이터베이스 설계)

웹사이트를 만들기 전에 데이터베이스 구조를 설계해야 합니다:

• 테이블 이름 정하기 - 예: users(회원), posts(게시글), comments(댓글)
• 컬럼(필드) 정의 - 예: 번호, 이름, 등급, 가입일 등 어떤 정보를 저장할지 정하기

💡 마치 창고를 만들 때 "여기는 회원 정보 선반, 저기는 게시글 선반"이라고 미리 정해두는 것과 같아요.

15. 회원 등급 관리가 필요한 이유

웹사이트에서는 회원마다 다른 권한을 줘야 합니다. 그래서 등급을 구분해야 해요.

회원이 다음 중 어떤 상태인지 구분해야 함:

• 일반회원 - 기본 기능만 사용 가능 (글쓰기, 댓글 등)
• 관리자 - 모든 기능 사용 가능 (회원 관리, 게시글 삭제 등)
• 유료 결제 회원 - 추가 기능 사용 가능 (프리미엄 콘텐츠 등)

👉 MySQL(창고)에서 사용자별로 등급을 저장해야 함

예를 들어:

회원번호 | 아이디 | 등급
--------|--------|------
1       | admin  | 관리자
2       | user1  | 일반회원
3       | vip1   | 유료회원

💡 마치 아파트에서 일반 세대, 관리사무소, 프리미엄 세대를 구분하는 것처럼, 웹사이트에서도 회원 등급을 구분해서 관리해야 해요.

16. 관리자 페이지를 만드는 이유

데이터베이스(MySQL)를 직접 수정하는 것은 매우 어렵고 위험합니다.

왜 직접 수정하면 안 되나요?

• DB(MySQL)를 직접 수정하기는 매우 어려움 - SQL 명령어를 정확히 알아야 함
• 실수로 데이터 손상 가능성 큼 - 한 글자만 틀려도 모든 데이터가 날아갈 수 있음
• 시각적으로 확인 불가 - 텍스트만 보여서 실수하기 쉬움

관리자 페이지를 통해 할 수 있는 것:

• 회원 정보 수정 - 클릭 몇 번으로 회원 정보 변경
• 등급 변경 - 드롭다운 메뉴로 간단하게 등급 변경
• 게시글 관리 - 목록을 보고 삭제/수정 가능
• 통계 확인 - 회원 수, 게시글 수 등을 한눈에 확인

👉 쉽고 안전하게 관리하기 위함

💡 마치 창고에 직접 들어가서 물건을 찾는 것(위험)보다, 창고 관리 프로그램으로 화면에서 클릭만 하는 것(안전)이 훨씬 쉽고 안전한 것과 같아요.

17. .htaccess란? (서버 설정 파일)

.htaccess는 "서버 환경을 설정하는 특별한 파일"입니다.

주요 기능:

• 서버 환경 설정 파일 - Apache 서버의 동작 방식을 설정
• 특정 폴더 외부 접근 차단 - 중요한 폴더를 숨길 수 있음
• 중요 파일 직접 URL 접근 방지 - 설정 파일 등을 직접 열어보는 것을 막음
• URL 주소 변경 - 복잡한 주소를 간단하게 만들 수 있음

예시:

# .htaccess 파일 내용 예시
# config 폴더는 외부에서 접근 불가
<FilesMatch "config\.php">
    Order Allow,Deny
    Deny from all
</FilesMatch>

💡 정보 탈취 방지 목적입니다. 마치 집에 금고를 두는 것처럼, 중요한 파일을 보호하는 거예요.

18. MD 파일이란? (마크다운 문서)

MD 파일은 "Markdown(마크다운) 형식으로 작성된 문서 파일"입니다.

• Markdown 파일 - .md 확장자를 가진 파일
• 텍스트 기반 문서 형식 - 워드처럼 복잡하지 않고, 간단한 텍스트로 문서 작성
• 읽기 쉬움 - 코드와 함께 보기 좋게 작성 가능

주 사용 용도:

• 기획서 - 프로젝트 계획을 문서로 작성
• 개발 진행 상황 기록 - 오늘 뭘 했는지 기록
• 과거 개발 이력 정리 - 나중에 참고하기 위해 정리
• 보고서 작성 - 프로젝트 결과를 정리
• README 파일 - 프로그램 사용법 설명

예시:

# 제목
## 소제목
- 리스트 항목
**굵은 글씨**
`코드`

💡 마치 메모장으로 문서를 쓰는 것처럼 간단하지만, 제목이나 리스트를 예쁘게 표시할 수 있어서 개발자들이 많이 사용해요.

19. 추가로 꼭 알아야 할 보안 개념

웹사이트를 안전하게 운영하기 위해 반드시 알아야 할 보안 개념들입니다.

1. 세션(Session) - 로그인 상태 유지

• 세션이란? - 사용자가 로그인했는지 기억해두는 것
• 왜 필요한가? - 페이지를 이동해도 로그인 상태가 유지됨
• 작동 방식 - 서버가 "이 사람은 로그인했어"라고 기억해둠

💡 마치 식당에서 주문표를 받는 것처럼, 서버가 "이 손님은 주문했어"라고 기억해두는 거예요.

2. XSS 방어 - 악성 코드 차단

• XSS란? - 해커가 악성 코드를 웹사이트에 넣는 공격
• 방어 방법 - 출력 시 HTML 이스케이프 처리 (특수문자를 변환)
• 예시 - <script> 같은 코드가 그대로 실행되지 않게 막음

💡 마치 편지에 위험한 물건이 들어있지 않게 검사하는 것처럼, 사용자가 입력한 내용을 검사해서 위험한 코드를 제거하는 거예요.

3. 권한 체크 - 관리자 / 일반 사용자 구분

• 권한 체크란? - "이 사람이 이 기능을 사용할 수 있나?" 확인
• 예시 - 관리자만 게시글을 삭제할 수 있게 함
• 방법 - 사용자 등급을 확인해서 허용/차단

💡 마치 아파트에서 일반 세대는 1층만, 관리사무소는 모든 층에 갈 수 있는 것처럼, 권한에 따라 접근할 수 있는 기능을 제한하는 거예요.

4. 직접 URL 접근 차단

• 문제 - 관리자 페이지 주소를 알면 누구나 접근 가능
• 해결 - 로그인하지 않았거나 관리자가 아니면 접근 차단
• 방법 - 페이지 시작 부분에서 권한 확인

💡 마치 금고 방에 아무나 들어가지 못하게 문을 잠그는 것처럼, 중요한 페이지는 접근을 제한하는 거예요.