34장: AI에게 웹서버 코드 요청하기¶

🎯 이 장에서 배우는 것¶

[ ] AI에게 웹서버 코드를 요청할 수 있다
[ ] 피코2에서 간단한 웹서버를 실행할 수 있다
[ ] HTML 기본 구조를 이해한다

📚 핵심 개념¶

개념: 웹서버¶

"웹서버는 마치 음식점 주방과 같아요. 손님(브라우저)이 주문하면, 주방(웹서버)이 요리(웹페이지)를 만들어 보내줍니다."

flowchart LR A[📱 브라우저] -->|요청| B[🔧 피코2 웹서버] B -->|응답| A B --- C[🌡️ 센서]

피코2가 작은 웹서버가 되어 센서값을 웹페이지로 보여줄 수 있어요!

🔨 따라하기¶

Step 1: AI에게 코드 요청하기¶

프롬프트 예시:

피코2 W에서 온도 센서값을 보여주는 
간단한 웹서버 코드를 MicroPython으로 만들어줘.
Wi-Fi 연결 후 브라우저에서 접속하면 
온도가 표시되게 해줘.

Step 2: AI가 생성한 핵심 코드 이해하기¶

코드 (AI 응답 중 핵심 부분):

# HTML = 웹페이지의 뼈대
html = """
<html>
<head><title>피코2 센서</title></head>
<body>
  <h1>온도: {temp}°C</h1>
</body>
</html>
"""

# 웹서버 시작
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.bind(addr)
s.listen(1)
print('웹서버 시작! IP:', ip)

HTML 태그 설명: | 태그 | 역할 | |------|------| | <html> | 웹페이지 시작/끝 | | <head> | 제목, 설정 | | <body> | 실제 내용 | | <h1> | 큰 제목 |

📝 전체 코드¶

import network
import socket
from machine import ADC
import time

# Wi-Fi 연결
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect('WiFi이름', '비밀번호')

while not wlan.isconnected():
    time.sleep(1)
ip = wlan.ifconfig()[0]
print('IP:', ip)

# 온도 센서 (내장)
sensor = ADC(4)

def read_temp():
    raw = sensor.read_u16()
    volt = raw * 3.3 / 65535
    return 27 - (volt - 0.706) / 0.001721

# HTML 템플릿
html = """<html><body>
<h1>🌡️ 온도: {temp:.1f}°C</h1>
</body></html>"""

# 웹서버
s = socket.socket()
s.bind(('0.0.0.0', 80))
s.listen(1)

while True:
    conn, addr = s.accept()
    temp = read_temp()
    response = html.format(temp=temp)
    conn.send('HTTP/1.0 200 OK\r\n\r\n' + response)
    conn.close()

실행 후: 브라우저에서 http://[IP주소] 접속!

⚠️ 주의할 점¶

Wi-Fi 정보 수정 필수: 'WiFi이름', '비밀번호'를 실제 값으로!
같은 네트워크: 컴퓨터와 피코2가 같은 Wi-Fi에 연결되어야 해요

✅ 점검하기¶

HTML에서 <h1> 태그의 역할은?

정답 확인

큰 제목을 표시합니다

브라우저에서 피코2에 접속하려면 무엇이 필요한가요?

정답 확인

피코2의 IP 주소 (예: 192.168.0.xxx)

🚀 다음 장 미리보기¶

웹페이지가 완성되었어요! 다음 장에서는 HTML/CSS로 대시보드를 예쁘게 꾸미는 방법을 배워볼 거예요. 🎨