스마트디바이스실습 ‐ 6주차 - jiho0419/SmartDevice_2025-1 GitHub Wiki
💠 ESP32가 일반적인 Wi-Fi 클라이언트처럼 AP(Access Point) 에 접속하는 모드 말한다
💠 예: 가정용 공유기, 스마트폰 핫스팟 등에 연결
💠 주요 함수 : WiFi.begin(ssid, password);
💠 용도 : 인터넷에 연결되거나, 로컬 네트워크 상에서 통신
💠 ESP32가 Wi-Fi 공유기처럼 작동 , 다른 장치들이 ESP32에 연결할 수 있게 한다
💠 자체 IP 주소를 갖고 DHCP 서버를 제공한다
💠 주요 함수 : WiFi.softAP(ssid, password);
💠 용도 : 외부 인터넷 없이 로컬 네트워크 통신 (예: 스마트폰과 직접 연결)
💠 ESP32가 동시에 AP 이자 STA 로 동작 한다
💠 자체 IP 주소를 갖고 DHCP 서버를 제공한다
💠 주요 함수 : WiFi.begin(...) (STA 설정)
WiFi.softAP(...) (AP 설정)
💠 용도 : ESP32가 외부 서버와 통신하면서도, 스마트폰 같은 장치가 ESP32에 직접 연결 가능하게 한다
모드 | 역할 | 용도 |
---|---|---|
STA | 클라이언트 | 공유기나 핫스팟에 연결 |
AP | 공유기 | 다른 장치가 ESP32에 직접 연결 |
AP+STA | 둘 다 | 유연한 연결 방식 (인터넷 + 로컬 통신) |
💠 웹 서버 는 클라이언트(웹 브라우저)의 요청을 받아 HTML 페이지나 데이터를 응답해주는 소프트웨어를 말한다
💠 ESP32는 라이트한 웹 서버 라이브러리를 이용해서 쉽게 구현 가능하다
🔸 비동기 처리, 성능이 좋고 많은 클라이언트 처리 가능
🔸 약간 설정이 복잡
🔸 #include <WebServer.h>
🔸 동기식 처리, 간단한 용도에 적합
🔸 ESP32는 자체적으로 웹 서버를 운영 가능
🔸 STA/AP 모드 모두 지원
🔸 HTML 응답으로 센서 정보 표시, 버튼 제어 등 가능
🔸 초간단 IoT 대시보드 구현 가능
💠 ESP32를 이용해 Wi-Fi에 연결하고, 간단한 웹 서버를 만들어 클라이언트가 브라우저로 접속했을 때 "Hello from ESP32!"
문자를 보여주는 실습 진행
#include <WiFi.h> // WiFi 라이브러리를 포함합니다.
#include <WebServer.h> // WebServer 라이브러리를 포함합니다.
const char* ssid = "wifi-SSID"; // 연결할 Wi-Fi의 SSID를 입력합니다.
const char* password = "wifi-Password"; // Wi-Fi의 비밀번호를 입력합니다.
WebServer server(80); // 포트 번호 80을 사용하여 WebServer 객체를 생성합니다.
void handleRoot() {
server.send(200, "text/plain", "Hello from ESP32!"); // "/" 경로에 대한 요청을 처리하는 핸들러 함수입니다.
}
void setup() {
Serial.begin(115200); // 시리얼 통신을 초기화합니다.
WiFi.begin(ssid, password); // Wi-Fi에 연결합니다.
Serial.println("Connected to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
server.on("/", handleRoot); // "/" 경로에 대한 요청을 handleRoot() 함수로 처리합니다.
while (WiFi.status() != WL_CONNECTED) { // Wi-Fi 연결이 완료될 때까지 대기합니다.
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP()); // Wi-Fi의 로컬 IP 주소를 출력합니다.
server.begin(); // 서버를 시작합니다.
}
void loop() {
server.handleClient(); // 클라이언트의 요청을 처리합니다.
}
🔸위에 작성한 코드를 업로드

🔸시리얼 모니터를 통해 웹 서버 IP를 확인

🔸IP에 접속하여 "Hello from ESP32!"
이 제대로 나오는 확인

💠 구축한 웹 서버를 활용해 GPIO 2번 핀을 ON/OFF 제어하는 웹 페이지로 LED 제어 실습 진행
#include <WiFi.h>
// Wi-Fi 접속 정보
const char* ssid = "ssid id";
const char* password = "password";
// 보드에 내장된 LED 핀 (보통 GPIO2)
const int LED_PIN = 2;
// 웹서버 생성
WiFiServer server(80);
void setup() {
pinMode(LED_PIN, OUTPUT); // LED 핀 출력으로 설정
digitalWrite(LED_PIN, LOW); // 처음엔 꺼짐
Serial.begin(115200);
WiFi.begin(ssid, password);
// Wi-Fi 연결 대기
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting...");
}
Serial.print("Connected! IP: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("Client connected");
// HTTP 요청 받기
String request = client.readStringUntil('\r');
Serial.println("Request: " + request);
client.flush();
// 요청 분석 (LED 제어)
if (request.indexOf("GET /LED_ON") >= 0) {
digitalWrite(LED_PIN, HIGH); // LED 켜기
} else if (request.indexOf("GET /LED_OFF") >= 0) {
digitalWrite(LED_PIN, LOW); // LED 끄기
}
// HTML 페이지 전송
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html; charset=utf-8"); // ✅ UTF-8 인코딩 설정
client.println();
client.println("<!DOCTYPE html><html>");
client.println("<head><title>LED 제어</title></head>");
client.println("<body style='text-align:center; font-family:sans-serif;'>");
client.println("<h1 style='color:#3498db;'>ESP32 LED 제어</h1>");
client.println("<form action=\"/LED_ON\" method=\"GET\">");
client.println("<button style='padding:15px 30px; font-size:20px; background-color:#3498db; color:white; border:none; border-radius:8px;'>불 켜기 🔵</button>");
client.println("</form><br>");
client.println("<form action=\"/LED_OFF\" method=\"GET\">");
client.println("<button style='padding:15px 30px; font-size:20px; background-color:#aaa; color:white; border:none; border-radius:8px;'>불 끄기 ⚫</button>");
client.println("</form>");
client.println("</body></html>");
delay(1);
client.stop();
Serial.println("Client disconnected");
}
}
🔸실습을 위해 라이브러리 다운 ESPAsyncWebserver

🔸위에 작성한 코드를 업로드

🔸시리얼 모니터를 통해 웹 서버 IP를 확인

🔸불 켜기 버튼을 클릭하면 LED이 켜지고 불 끄기 버튼을 클릭하면 LED가 꺼지는 것을 확인