스마트디바이스실습 ‐ 6주차 - jiho0419/SmartDevice_2025-1 GitHub Wiki

1️⃣ ESP32 Wi-Fi 모드

*️⃣ Station Mode (STA)

💠 ESP32가 일반적인 Wi-Fi 클라이언트처럼 AP(Access Point) 에 접속하는 모드 말한다
💠 예: 가정용 공유기, 스마트폰 핫스팟 등에 연결
💠 주요 함수 : WiFi.begin(ssid, password);
💠 용도 : 인터넷에 연결되거나, 로컬 네트워크 상에서 통신

*️⃣ Access Point Mode (AP)

💠 ESP32가 Wi-Fi 공유기처럼 작동 , 다른 장치들이 ESP32에 연결할 수 있게 한다
💠 자체 IP 주소를 갖고 DHCP 서버를 제공한다
💠 주요 함수 : WiFi.softAP(ssid, password);
💠 용도 : 외부 인터넷 없이 로컬 네트워크 통신 (예: 스마트폰과 직접 연결)

*️⃣ AP + STA Mode (Dual Mode)

💠 ESP32가 동시에 AP 이자 STA 로 동작 한다
💠 자체 IP 주소를 갖고 DHCP 서버를 제공한다
💠 주요 함수 : WiFi.begin(...) (STA 설정) WiFi.softAP(...) (AP 설정)
💠 용도 : ESP32가 외부 서버와 통신하면서도, 스마트폰 같은 장치가 ESP32에 직접 연결 가능하게 한다

*️⃣ 요약

모드 역할 용도
STA 클라이언트 공유기나 핫스팟에 연결
AP 공유기 다른 장치가 ESP32에 직접 연결
AP+STA 둘 다 유연한 연결 방식 (인터넷 + 로컬 통신)

2️⃣ Web Server

*️⃣ 정의

💠 웹 서버 는 클라이언트(웹 브라우저)의 요청을 받아 HTML 페이지나 데이터를 응답해주는 소프트웨어를 말한다
💠 ESP32는 라이트한 웹 서버 라이브러리를 이용해서 쉽게 구현 가능하다

*️⃣ 라이브러리 종류

💠 ESPAsyncWebServer

🔸 비동기 처리, 성능이 좋고 많은 클라이언트 처리 가능
🔸 약간 설정이 복잡

💠 WebServer (기본)

🔸 #include <WebServer.h>
🔸 동기식 처리, 간단한 용도에 적합

*️⃣ 요약

🔸 ESP32는 자체적으로 웹 서버를 운영 가능
🔸 STA/AP 모드 모두 지원
🔸 HTML 응답으로 센서 정보 표시, 버튼 제어 등 가능
🔸 초간단 IoT 대시보드 구현 가능

3️⃣ 실습

*️⃣ 웹 서버 구축 실습

💠 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!" 이 제대로 나오는 확인

*️⃣ 내장 LED 웹 제어 실습

💠 구축한 웹 서버를 활용해 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가 꺼지는 것을 확인

KakaoTalk_20250412_235801943.mp4
⚠️ **GitHub.com Fallback** ⚠️