스마트 디바이스 6주차 (웹서버 구현) - yubiine/25-1_smartdevice GitHub Wiki

⭐목표

  • ESP32의 내장 WiFi 기능을 통해 웹서버 기능을 구현하고 개념을 이해한다.

📌ESP32 WiFi 모드란?

ESP32는 강력한 Wi-Fi 기능을 내장하고 있어서, 무선 네트워크에 연결하거나 자체적으로 Wi-Fi 네트워크를 생성할 수 있습니다.
크게 STA 모드(Station 모드) 와 AP 모드(Access Point 모드) 로 구분됩니다.


🔹 STA 모드(Station 모드) 

WiFi.mode(WIFI_STA);
WiFi.begin("SSID", "PASSWORD");

ESP32가 Wi-Fi에 연결 (클라이언트 역할)

  • 공유기 통해 외부 서버/인터넷 접속 가능
  • IP 주소는 DHCP 또는 수동 설정 가능

🔹 AP 모드(Access Point 모드) 

WiFi.mode(WIFI_AP);
WiFi.softAP("ESP32-AP", "12345678");

스마트폰이나 노트북이 ESP32에 직접 연결 가능

  • 다른 기기가 ESP32에 직접 접속
  • 웹서버를 통해 직접 제어 가능

🔹 STA + AP 동시 모드 (혼합 모드) 

WiFi.begin("MyWiFi", "MyPassword");
WiFi.softAP("ESP32-AP", "ap_password");

다른 Wi-Fi에 연결되면서도 자체 네트워크를 열 수 있다

  • ESP32는 중간다리 역할로 활용

🔹 STA 모드(Station 모드) vs AP 모드(Access Point 모드)

항목 STA 모드 AP 모드
역할 Wi-Fi 클라이언트 Wi-Fi 공유기
인터넷 접속 가능 불가능(기본)
사용 환경 기존 네트워크 환경 독립적인 환경 (외부, 현장 등)
연결 장치 ESP32 → 공유기 스마트폰/PC → ESP32
활용 예 웹서버, 클라우드 연결 로컬 제어, 오프라인 제어

📌실습 1 Hello 출력 (데이터 송수신)

#include <WiFi.h>        // WiFi 라이브러리를 포함합니다.
#include <WebServer.h>   // WebServer 라이브러리를 포함합니다.

const char* ssid = "김유빈의 iPhone";             // 연결할 Wi-Fi의 SSID를 입력합니다.
const char* password = "01010101";     // 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();                         // 클라이언트의 요청을 처리합니다.
}

✅ 참고 (시리얼 모니터에서 글자 깨질경우 확인)

image

🔹 실습 결과

image

image


📌실습 2 내장 LED 제어 (웹 서버 구현)

#include <WiFi.h>
      
// Wi-Fi 접속 정보
const char* ssid = "김유빈의 iPhone";           
const char* password = "01010101"; 

// 보드에 내장된 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");
    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");
  }
}

✅ 다운로드

image image

image image


✅ 참고

  // HTML 페이지 전송
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html, charset=UTF-8");
    client.println();

글자가 깨진다면 "charset=UTF-8" 추가해보자


🔹 실습 결과

IMG_6600.MOV

🔹ESP32 Wi-Fi 주요 라이브러리

  • WiFi.h → 기본 Wi-Fi 제어 (ESP32 공식)
  • ESPAsyncWebServer.h → 비동기 웹 서버 구현
  • WiFiClient, WiFiServer → TCP/IP 통신 구현용

🔹자주 쓰는 함수

WiFi.begin(ssid, password);    // 공유기 연결
WiFi.status();                 // 연결 상태 확인
WiFi.localIP();                // 현재 ESP32 IP
WiFi.softAP(ssid, password);   // AP 모드 시작
WiFi.disconnect();             // 연결 끊기
⚠️ **GitHub.com Fallback** ⚠️