<h3 style="font-size: 1.3125em; margin: 29px 0px 22px; padding: 0px; clear: both; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">1. 개요</h3>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">추후 진행할 프로젝트에서 접속하고자하는 웹서버의 HTTP Response 나 웹페이지에서 필요한 정보를 사용하기 위해서 NodeMCU 보드를 웹클라이언트(WebClient)로서 사용하여 HTTP 사이트 접속방법을 설명합니다.</p>
<h4 style="font-size: 1.125em; margin: 29px 0px 22px; padding: 0px; clear: both; font-weight: 400; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">1.1 요약 정리</h4>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">마이크로컨트롤러(NodeMCU) 제어보다는 웹에 대한 정보로서 기본지식이 없는 상황이라면 이해하기 어렵습니다. 웹, 특히나 이 글에서는 HTTP 프로토콜까지 설명해야하는데 설명하자면 글이 너무 길어지니 소스코드가 어떻게 동작하는지 큰 맥락만 설명합니다.</p>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">1. HTML 언어로 웹페이지 구성 (라즈베리파이)<br />2. 구성한 웹페이지를 웹서버에 업로드 (라즈베리파이)<br />3. 라즈베리파이를 Wi-Fi에 연결 (라즈베리파이)<br />4. 라즈베리파이를 웹서버로 구동 (라즈베리파이)<br />5. 웹클라이언트 NodeMCU 보드로 웹서버(라즈베리파이)에 웹페이지 요청 (NodeMCU 보드)<br />6. 웹클라이언트러부터 요청이 오면 웹페이지를 응답 (라즈베리파이)<br />7. 웹서버로부터 받은 웹페이지 내용을 출력(NodeMcu 보드)</p>
<h4 style="font-size: 1.125em; margin: 29px 0px 22px; padding: 0px; clear: both; font-weight: 400; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">1.2 준비물</h4>
<ul style="margin: 0px 0px 22px; padding: 0px; list-style-position: inside; list-style-image: initial; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;">
   <li style="margin: 0px 0px 10px; padding: 0px 0px 0px 22px; list-style: inherit; position: relative; font-size: 0.9375em; line-height: 1.5714; color: #666666; text-indent: -22px;">NodeMCU 개발보드(이 글에서는 NodeMCU v3)</li>
   <li style="margin: 0px 0px 10px; padding: 0px 0px 0px 22px; list-style: inherit; position: relative; font-size: 0.9375em; line-height: 1.5714; color: #666666; text-indent: -22px;">Micro 5pin USB</li>
   </ul>
<h3 style="font-size: 1.3125em; margin: 29px 0px 22px; padding: 0px; clear: both; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">2. 웹서버 만들기(라즈베리파이, 옵션)</h3>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">필자처럼 라즈베리파이를 이용하여 웹서버를 만들어 테스트하고자 한다면&nbsp;<a href="https://bugwhale.tistory.com/entry/raspberrypi-raspbian-apm-install?category=839479" style="text-decoration-line: none; color: #04beb8;" target="_blank">라즈베리파이 라즈비안 APM(Apache, PHP, MySql, phpMyAdmin) 설치하기</a>&nbsp;글에서 기본적인 웹서버를 구축하는데 필요한 정보를 얻을 수 있습니다.</p>
<h4 style="font-size: 1.125em; margin: 29px 0px 22px; padding: 0px; clear: both; font-weight: 400; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">2.1 웹페이지 만들기</h4>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">라즈베리파이 라즈비안 OS 기준으로 설명합니다. 아래 명령어로 http.html 파일을 생성, 편집을 열어줍니다.</p>
<pre id="code_1582038851926" class="c++ cpp" data-ke-language="c++" data-ke-type="codeblock" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs cpp" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">sudo nano /var/www/html/http.html</code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">아래 내용을 적어주고 "Ctrl + X", "Y", "Enter" 를 순서대로 눌러줘서 저장합니다.</p>
<pre id="code_1582038879936" class="c++ cpp" data-ke-language="c++" data-ke-type="codeblock" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs cpp" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">HTTP Test Webpage</code>
   </pre>
<h3 style="font-size: 1.3125em; margin: 29px 0px 22px; padding: 0px; clear: both; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">3. 소스코드</h3>
<h4 style="font-size: 1.125em; margin: 29px 0px 22px; padding: 0px; clear: both; font-weight: 400; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">3.1 전체 소스코드</h4>
<pre id="code_1582038895638" class="c++ cpp" data-ke-language="c++" data-ke-type="codeblock" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs cpp" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">
      <table class="hljs-ln">
         <tbody>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="1" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="1" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="1" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-meta" style="color: #fc9b9b;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string">&lt;ESP8266WiFi.h&gt;</span></span></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="2" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="2" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="2" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-meta" style="color: #fc9b9b;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string">&lt;ESP8266HTTPClient.h&gt;</span></span></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="3" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="3" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="3" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="4" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="4" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="4" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">const</span><span class="hljs-keyword" style="color: #fcc28c;">char</span>* ssid     = <span class="hljs-string" style="color: #a2fca2;">"Wi-Fi 아이디"</span>;</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="5" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="5" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="5" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">const</span><span class="hljs-keyword" style="color: #fcc28c;">char</span>* password = <span class="hljs-string" style="color: #a2fca2;">"Wi-Fi 비밀번호"</span>;</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="6" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="6" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="6" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">const</span><span class="hljs-keyword" style="color: #fcc28c;">char</span>* host = <span class="hljs-string" style="color: #a2fca2;">"Host 주소"</span>;</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="7" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="7" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="7" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="8" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="8" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="8" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">WiFiClient client;</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="9" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="9" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="9" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">HTTPClient http;</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="10" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="10" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="10" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="11" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="11" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="11" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-function"><span class="hljs-keyword" style="color: #fcc28c;">void</span><span class="hljs-title" style="color: #ffffaa;">setup</span><span class="hljs-params">()</span></span>{</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="12" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="12" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="12" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	Serial.begin(<span class="hljs-number" style="color: #d36363;">115200</span>);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="13" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="13" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="13" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	Serial.println(<span class="hljs-string" style="color: #a2fca2;">""</span>);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="14" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="14" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="14" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	Serial.print(<span class="hljs-string" style="color: #a2fca2;">"Connect to "</span>);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="15" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="15" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="15" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	Serial.println(ssid);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="16" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="16" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="16" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="17" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="17" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="17" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	WiFi.mode(WIFI_STA);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="18" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="18" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="18" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	WiFi.begin(ssid, password);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="19" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="19" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="19" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">while</span> (WiFi.status() != WL_CONNECTED) {</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="20" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="20" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="20" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">		delay(<span class="hljs-number" style="color: #d36363;">500</span>);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="21" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="21" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="21" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">		Serial.print(<span class="hljs-string" style="color: #a2fca2;">"."</span>);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="22" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="22" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="22" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	}</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="23" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="23" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="23" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	Serial.print(<span class="hljs-string" style="color: #a2fca2;">"IP address: "</span>);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="24" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="24" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="24" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	Serial.println(WiFi.localIP());</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="25" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="25" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="25" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">}</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="26" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="26" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="26" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="27" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="27" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="27" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-function"><span class="hljs-keyword" style="color: #fcc28c;">void</span><span class="hljs-title" style="color: #ffffaa;">loop</span><span class="hljs-params">()</span></span>{</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="28" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="28" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="28" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	Serial.<span class="hljs-built_in" style="color: #ffffaa;">printf</span>(<span class="hljs-string" style="color: #a2fca2;">"Connect to %s\n"</span>, host);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="29" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="29" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="29" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	http.begin(client, host);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="30" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="30" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="30" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	http.setTimeout(<span class="hljs-number" style="color: #d36363;">1000</span>);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="31" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="31" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="31" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">int</span> httpCode = http.GET();</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="32" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="32" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="32" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="33" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="33" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="33" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">if</span>(httpCode &gt; <span class="hljs-number" style="color: #d36363;">0</span>) {</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="34" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="34" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="34" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">		Serial.<span class="hljs-built_in" style="color: #ffffaa;">printf</span>(<span class="hljs-string" style="color: #a2fca2;">"GET code : %d\n\n"</span>, httpCode);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="35" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="35" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="35" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="36" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="36" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="36" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">if</span> (httpCode == HTTP_CODE_OK) {</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="37" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="37" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="37" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">			String payload = http.getString();</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="38" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="38" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="38" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">			Serial.println(payload);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="39" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="39" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="39" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">		}</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="40" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="40" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="40" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	} </td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="41" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="41" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="41" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">else</span> {</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="42" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="42" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="42" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">		Serial.<span class="hljs-built_in" style="color: #ffffaa;">printf</span>(<span class="hljs-string" style="color: #a2fca2;">"GET failed, error: %s\n"</span>, http.errorToString(httpCode).c_str());</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="43" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="43" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="43" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	}</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="44" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="44" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="44" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	http.end();</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="45" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="45" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="45" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="46" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="46" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="46" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	delay(<span class="hljs-number" style="color: #d36363;">5000</span>);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="47" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="47" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="47" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">}</td>
               </tr>
            </tbody>
         </table>
      </code>
   </pre>
<h4 style="font-size: 1.125em; margin: 29px 0px 22px; padding: 0px; clear: both; font-weight: 400; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">3.2 소스코드 설명</h4>
<pre class="toolbar:2 start-line:2 lang:default decode:true autoit" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs cpp" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;"><span class="hljs-meta" style="color: #fc9b9b;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string">&lt;ESP8266HTTPClient.h&gt;</span></span></code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">HTTP 프로토콜을 위해 ESP8266HTTPClient 파일을 Include 해줍니다</p>
<pre class="toolbar:2 start-line:4 lang:default decode:true cpp" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">
      <table class="hljs-ln">
         <tbody>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="1" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="1" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="1" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">const</span><span class="hljs-keyword" style="color: #fcc28c;">char</span>* ssid     = <span class="hljs-string" style="color: #a2fca2;">"Wi-Fi 아이디"</span>;</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="2" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="2" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="2" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">const</span><span class="hljs-keyword" style="color: #fcc28c;">char</span>* password = <span class="hljs-string" style="color: #a2fca2;">"Wi-Fi 비밀번호"</span>;</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="3" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="3" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="3" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">const</span><span class="hljs-keyword" style="color: #fcc28c;">char</span>* host = <span class="hljs-string" style="color: #a2fca2;">"Host 주소"</span>;</td>
               </tr>
            </tbody>
         </table>
      </code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">가장 중요한 부분으로 사용하는&nbsp;<span style="color: #ff0000;">Wi-Fi ID, 비밀번호</span>를 정확하게 입력해줍니다. 그리고&nbsp;<span style="color: #ff0000;">Host 주소</span>에는 접속하고자 하는&nbsp;<span style="color: #ff0000;">http://웹사이트주소</span>를 입력합니다. 이 글에서 설명한 라즈베리파이를 사용한다면&nbsp;<span style="color: #ff0000;">"http://<span style="color: #0000ff;">라즈베리파이IP</span>/http.html"</span>&nbsp;를 입력해주면 됩니다.</p>
<pre class="toolbar:2 start-line:9 lang:default decode:true abnf" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">HTTPClient http;</code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">http 이름으로 HTTPClient 객체 생성</p>
<pre class="toolbar:2 start-line:28 lang:default decode:true cpp" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">	Serial.<span class="hljs-built_in" style="color: #ffffaa;">printf</span>(<span class="hljs-string" style="color: #a2fca2;">"Connect to %s\n"</span>, host);</code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">시리얼 모니터에 접속하고자 하는 웹페이지를 출력</p>
<pre class="toolbar:2 start-line:29 lang:default decode:true mipsasm" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs sql" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">
      <table class="hljs-ln">
         <tbody>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="1" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="1" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="1" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	http.begin(<span class="hljs-keyword" style="color: #fcc28c;">client</span>, host);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="2" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="2" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="2" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	http.setTimeout(1000);</td>
               </tr>
            </tbody>
         </table>
      </code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">begin() 메소드는 host 주소로 접속을 시도하는 메서드로 HTTP Request 과정이라고 보면 됩니다. setTimeout() 메소드는 연결 타임아웃 시간을 설정해주며 설정해준 시간안에 웹페이지에 접속하지 못한다면 더 이상 시도하지 말고 그냥 넘어가라는 의미입니다.</p>
<pre class="toolbar:2 start-line:31 lang:default decode:true ebnf" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs perl" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;"><span class="hljs-keyword" style="color: #fcc28c;">int</span> httpCode = http.GET();</code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">HTTP Request 를 하면 웹서버에서 요청에 따라 HTTP Code 라는 것을 보내게 되며 GET() 메소드는 HTTP Code 값을 얻어오며 그 값을 int httpCode 변수에 넣어 줍니다.</p>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">여기서 HTTP Code 를 응답 상태코드로 예를 들어 200 이라는 값이 반환하면 "응답 성공" 이라는 의미이며 404 값은 "(요청한 페이지를) 찾을 수 없음" 이라는 의미입니다.</p>
<pre class="toolbar:2 start-line:33 lang:default decode:true stylus" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">if(httpCode &gt; 0) {</code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">HTTP 응답코드가 정상적이라면(404 같은 값도 이 소스코드에서는 기본적으로는 정상이라고 봅니다. 정상이 아니면 0 값이다.)</p>
<pre class="toolbar:2 start-line:34 lang:default decode:true accesslog" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs perl" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">
      <table class="hljs-ln">
         <tbody>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="1" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="1" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="1" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">		Serial.printf(<span class="hljs-string" style="color: #a2fca2;">"GET code : %d\n\n"</span>, httpCode);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="2" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="2" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="2" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"></td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="3" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="3" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="3" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">if</span> (httpCode == HTTP_CODE_OK) {</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="4" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="4" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="4" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">			String payload = http.getString();</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="5" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="5" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="5" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">			Serial.println(payload);</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="6" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="6" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="6" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">		}</td>
               </tr>
            </tbody>
         </table>
      </code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">HTTP 응답코드를 시리얼 모니터에 띄워준 뒤 응답코드를 한번 더 비교해줍니다. (여기서 HTTP_CODE_OK 값은 상수값으로 200) 즉, "응답 성공"이라면 getString() 메소드로 웹페이지 내용을 payload에 저장 후 시리얼 모니터에 출력시켜줍니다.</p>
<pre class="toolbar:2 start-line:41 lang:default decode:true accesslog" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs perl" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">
      <table class="hljs-ln">
         <tbody>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="1" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="1" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="1" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;"><span class="hljs-keyword" style="color: #fcc28c;">else</span> {</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="2" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="2" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="2" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">		Serial.printf(<span class="hljs-string" style="color: #a2fca2;">"GET failed, error: %s\n"</span>, http.errorToString(httpCode).c_str());</td>
               </tr>
            <tr>
               <td class="hljs-ln-line hljs-ln-numbers" data-line-number="3" style="margin: 0px; padding: 0px 5px 0px 0px; word-break: break-word; user-select: none; text-align: center; color: #cccccc; border-right-style: solid; vertical-align: top;">
                  <div class="hljs-ln-n" data-line-number="3" style="margin: 0px; padding: 0px;">&nbsp;</div>
                  </td>
               <td class="hljs-ln-line hljs-ln-code" data-line-number="3" style="margin: 0px; padding: 0px 0px 0px 10px; word-break: break-word;">	}</td>
               </tr>
            </tbody>
         </table>
      </code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">HTTP 응답코드가 비정상이라면(0 이하 값) 에러메세지를 시리얼 모니터에 출력시켜줍니다.</p>
<pre class="toolbar:2 start-line:44 lang:default decode:true mipsasm" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; color: #555555;">
   <code class="hljs sql" style="margin: 0px; padding: 0.5em; white-space: pre; overflow-x: auto; display: block; background: rgb(51, 51, 51); color: white;">	http.end();</code>
   </pre>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">end() 메서드로 http 연결을 종료합니다.</p>
<h3 style="font-size: 1.3125em; margin: 29px 0px 22px; padding: 0px; clear: both; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">4. 동작 결과</h3>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">빨간상자는 접속한 Wi-Fi 이름과 부여받은 IP 를 나타내고 파란 상자는 "http://192.168.1.100/http.html" 로 접속을 시도함을 알려주며, 응답 결과로 200 코드 값을 얻을 것을 알 수 있습니다. 초록 상자는 위에서 작성한 http.html 파일 내용입니다.</p>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<figure class="imageblock alignCenter" width="677" height="419" data-origin-width="0" data-origin-height="0" style="margin: 0px auto 20px; max-width: 100%; clear: both; padding: 0px; display: table; position: relative; text-align: center; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><span data-url="https://blog.kakaocdn.net/dn/bjk1tk/btqBG0pln4h/D6aKmhQVWKjLyFEfHyTekK/img.png" data-lightbox="lightbox" data-alt="" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/bjk1tk/btqBG0pln4h/D6aKmhQVWKjLyFEfHyTekK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbjk1tk%2FbtqBG0pln4h%2FD6aKmhQVWKjLyFEfHyTekK%2Fimg.png" width="677" data-origin-width="0" data-origin-height="0" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; margin: 0px; height: auto;" /></span></figure>
<p style="margin-bottom: 32px; padding: 0px; word-break: break-all; font-size: 0.9375em; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<h3 style="font-size: 1.3125em; margin: 29px 0px 22px; padding: 0px; clear: both; line-height: 1.5; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;">5. 참조</h3>