6주차_참고 : 내장 LED를 제어하는 웹서버(TEXT 기반) - dhryu60/SmartDevice_2025-1 GitHub Wiki

아래는 HTML이나 CSS 없이 텍스트 기반으로 실습할 수 있도록 변형한 코드

  • 웹 브라우저에서 http://ESP32_IP/에 접속하면 GPIO 상태를 단순한 텍스트 형식으로 보여주고,
    /2/on, /2/off 경로를 통해 GPIO 2번 핀을 ON/OFF 할 수 있음

✅ 수정된 텍스트 기반 코드

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

// Wi-Fi 접속 정보
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// GPIO 상태 저장 변수
String output2State = "off";
const int output2 = 2;

// 비동기 웹서버 객체 생성
AsyncWebServer server(80);

void setup() {
  Serial.begin(115200);
  delay(3000);

  pinMode(output2, OUTPUT);
  digitalWrite(output2, LOW); // 기본 OFF

  Serial.print("Wi-Fi 연결 중: ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWi-Fi 연결됨");
  Serial.print("IP 주소: ");
  Serial.println(WiFi.localIP());

  // 루트 페이지 - 현재 상태 표시
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    String message = "ESP32 GPIO 제어 페이지\n\n";
    message += "현재 GPIO 2 상태: " + output2State + "\n\n";
    message += "GPIO 2를 ON 하려면 /2/on\n";
    message += "GPIO 2를 OFF 하려면 /2/off\n";
    request->send(200, "text/plain", message);
  });

  // GPIO 2 ON
  server.on("/2/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(output2, HIGH);
    output2State = "on";
    Serial.println("GPIO 2 ON");
    request->send(200, "text/plain", "GPIO 2 is now ON\n");
  });

  // GPIO 2 OFF
  server.on("/2/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(output2, LOW);
    output2State = "off";
    Serial.println("GPIO 2 OFF");
    request->send(200, "text/plain", "GPIO 2 is now OFF\n");
  });

  server.begin();
}

void loop() {
  // 비동기 웹 서버이므로 loop 내용 없음
}

✅ 실습 흐름

  1. 📱 스마트폰 핫스팟 켜기
  2. 🔌 ESP32 전원 연결 → Wi-Fi에 자동 연결됨
  3. 🖥 시리얼 모니터로 IP 주소 확인
    예: 192.168.43.157
  4. 브라우저에서 접속
    • http://192.168.43.157/ → 상태 확인
    • http://192.168.43.157/2/on → GPIO ON
    • http://192.168.43.157/2/off → GPIO OFF

✅ 장점

  • HTML이나 스타일이 없기 때문에 메모리 부담이 적고, 초보자에게도 직관적
  • 모든 출력이 텍스트 기반이므로, 모바일 브라우저, curl, Python 등 다양한 환경에서 테스트 가능

⚠️ **GitHub.com Fallback** ⚠️