<p data-ke-size="size16" 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;">ESP32 를 사용하는 이유는 보통 IoT 제품을 개발하거나<br />WIFI로 인터넷 접속이 필요하기 때문이다.</p>
<p data-ke-size="size16" 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;">그런데 문제는 개발이 끝난후 미리 설정한 WiFi 정보가 아니면 WiFi 를 접속할 수 없어서<br />코드를 다시 열고 WiFi 정보를 수정한 뒤에 다시 업로드를 했어야 했다.</p>
<p data-ke-size="size16" style="margin-bottom: 32px; padding: 0px; word-break: break-all; line-height: 2; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;"><span style="font-size: 0.9375em;">이런 방식을 하드코딩 방식이라고 한다.</span><span style="font-size: 11.25px;"><br /></span><span style="font-size: 0.9375em;">개발이 쉽지만 사용성이 너무 떨어지는 장단점이 있는 것이다.</span></p>
<p data-ke-size="size16" 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;">이번에 소개할 것은<br />ESP32 에서 코딩을 따로 수정할 필요 없이<br />스마트폰으로 ESP32의 wifi 접속 정보를 수정해서 wifi접속을 할 수 있는 기능이다.</p>
<p data-ke-size="size16" style="margin-bottom: 32px; padding: 0px; word-break: break-all; line-height: 2; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif;"><font color="#555555"><span style="font-size: 0.9375em;">필자도 아래의 글을 통해 참고한 내용으로</span></font><br /><font color="#555555"><span style="font-size: 0.9375em;">원문으로 읽어볼 수 있다면 읽어보는 것을 추천한다.</span><span style="font-size: 11.25px;"><br /></span></font><a href="https://randomnerdtutorials.com/esp32-wi-fi-manager-asyncwebserver/" target="_blank" rel="noopener" style="color: #ff0000; font-size: 0.9375em; text-decoration-line: none;">https://randomnerdtutorials.com/esp32-wi-fi-manager-asyncwebserver/</a></p>
<figure id="og_1663880561204" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="ESP32: Create a Wi-Fi Manager (AsyncWebServer library) | Random Nerd Tutorials" data-og-description="The Wi-Fi Manager allows you to connect the ESP32 board to different Access Points (networks) without hard-coding network credentials (SSID and password) and upload new code to your board." data-og-host="randomnerdtutorials.com" data-og-source-url="https://randomnerdtutorials.com/esp32-wi-fi-manager-asyncwebserver/" data-og-url="https://randomnerdtutorials.com/esp32-wi-fi-manager-asyncwebserver/" data-og-image="https://scrap.kakaocdn.net/dn/rW12W/hyPS2NqL5X/uYSwqlBQ6qqbNwjz0gtTv0/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720,https://scrap.kakaocdn.net/dn/banunk/hyPSTXiSSi/2HNuohRvitIxG7c8KOLt3k/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720,https://scrap.kakaocdn.net/dn/ld8Y8/hyPSRecNWa/AedfsXQcQ9w8EgmA1YxK21/img.png?width=714&amp;height=643&amp;face=0_0_714_643" style="margin: 30px 0px; max-width: 100%; clear: both; padding: 0px; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><a href="https://randomnerdtutorials.com/esp32-wi-fi-manager-asyncwebserver/" target="_blank" rel="noopener" data-source-url="https://randomnerdtutorials.com/esp32-wi-fi-manager-asyncwebserver/" style="text-decoration-line: none; color: #000000; position: relative; box-sizing: border-box; display: block; height: 200px; border: 1px solid rgb(217, 217, 217); z-index: 1;">
      <div class="og-image" style="margin: 0px; padding: 0px; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 200px; border-right: 1px solid rgb(217, 217, 217); background-size: cover; background-position: center center; background-image: url(&quot;https://scrap.kakaocdn.net/dn/rW12W/hyPS2NqL5X/uYSwqlBQ6qqbNwjz0gtTv0/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720,https://scrap.kakaocdn.net/dn/banunk/hyPSTXiSSi/2HNuohRvitIxG7c8KOLt3k/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720,https://scrap.kakaocdn.net/dn/ld8Y8/hyPSRecNWa/AedfsXQcQ9w8EgmA1YxK21/img.png?width=714&amp;height=643&amp;face=0_0_714_643&quot;);">&nbsp;</div>
      <div class="og-text" style="margin: 0px; padding: 33px 46px 0px 39px; position: absolute; inset: 0px 0px 0px 201px; box-sizing: border-box;">
         <p class="og-title" data-ke-size="size16" style="padding: 0px; word-break: break-all; font-size: 22px; line-height: 28px; max-width: 467px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-family: &quot;Noto Sans DemiLight&quot;, &quot;Noto Sans KR&quot;, sans-serif; margin-bottom: 10px !important;">ESP32: Create a Wi-Fi Manager (AsyncWebServer library) | Random Nerd Tutorials</p>
         <p class="og-desc" data-ke-size="size16" style="padding: 0px; word-break: break-all; font-size: 14px; line-height: normal; color: #909090; text-overflow: ellipsis; overflow: hidden; font-family: &quot;Noto Sans DemiLight&quot;, &quot;Noto Sans KR&quot;, sans-serif; font-stretch: normal; max-height: 42px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;">The Wi-Fi Manager allows you to connect the ESP32 board to different Access Points (networks) without hard-coding network credentials (SSID and password) and upload new code to your board.</p>
         <p class="og-host" data-ke-size="size16" style="padding: 0px; word-break: break-all; font-size: 14px; line-height: 2; color: #909090; position: absolute; bottom: 24px; font-family: AvenirNext, sans-serif;">randomnerdtutorials.com</p>
         </div>
      </a></figure>
<p data-ke-size="size16" 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="font-size: 0.9375em;">- 작동 원리</span></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" data-ke-mobilestyle="widthOrigin" data-origin-width="774" data-origin-height="849" 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/xoJrk/btrMQCRMnUu/wf58PFZTWV1jAG4fTn3Rq0/img.png" data-lightbox="lightbox" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/xoJrk/btrMQCRMnUu/wf58PFZTWV1jAG4fTn3Rq0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxoJrk%2FbtrMQCRMnUu%2Fwf58PFZTWV1jAG4fTn3Rq0%2Fimg.png" data-origin-width="774" data-origin-height="849" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; width: 740px; 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>
<p data-ke-size="size16" 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;">공식 홈페이지에서 설명하는 WiFi manager 라는 기능의 원리는 위의 순서도와 같다.</p>
<p data-ke-size="size16" 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. ESP32 내부에 ssid.txt , pass.txt, ip.txt 파일이 존재하는 경우와 존재하지 않은 경우로 나눈다.</p>
<p data-ke-size="size16" 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;">2. 위의 세 파일이 존재하지 않으면 자체적으로 ESP32 가 공유기가 되면서 스마트폰으로 ESP32 wifi에 접속할 수 있게된다.</p>
<p data-ke-size="size16" 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;">3. ESP32 wifi 에 연결되었다면 스마트폰에서 웹주소 192.168.4.1 로 접속하여 ESP32 설정페이지를 연다.</p>
<p data-ke-size="size16" 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;">4-5. SSID와 PASSWORD 와 IP ADDRESS 를 입력해주고 데이터를 제출(저장)하면 ESP32 내부에 ssid.txt , pass.txt , ip.txt 세 파일이 생성되게 된다.</p>
<p data-ke-size="size16" 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;">6. 재부팅을 하고 1번으로 돌아간다.</p>
<p data-ke-size="size16" 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;">7. 재부팅하면 이제는 세 txt 파일이 있기 때문에, 해당 정보로 wifi에 접속을 시도한다.</p>
<p data-ke-size="size16" 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;">8. wifi 정보가 올바르게 입력되었다면 해당 wifi에 접속을 하고, 아니면 다시 스마트폰에서 정보를 입력하는 모드로 들어가게 된다.</p>
<p data-ke-size="size16" 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;">위의 순서에 따라서 작동되기 때문에<br />문제가 생기면 위의 경우에서 내가 어느 단계에 있고, 어떤 문제가 있을지 찾아보면 된다.</p>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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;">이제 위의 기능을 실제로 ESP32에 넣어보도록 하자.</p>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<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="fileblock" data-ke-align="alignCenter" style="margin: 28px auto 20px; max-width: 100%; clear: both; padding: 0px; width: 470px; height: 71px; border: 1px solid rgb(233, 233, 233); position: relative; border-radius: 1px; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><a href="https://blog.kakaocdn.net/dn/cTJNkS/btrMQOLogaG/7qeydJ5KwUDpV7VfHfkS41/AsyncTCP-master.zip?attach=1&amp;knm=tfile.zip" class="" style="text-decoration-line: none; color: #ff0000; display: block; height: 71px;" target="_blank">
      <div class="image" style="margin: 21px 17px 20px 22px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-image: url(&quot;https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg&quot;); background-position: 0px 0px;">&nbsp;</div>
      <div class="desc" style="margin: 0px; padding: 0px; position: absolute; inset: 0px 60px 0px 70px;">
         <div class="filename" style="margin: 17px 0px 0px; padding: 0px; color: #333333; font-size: 14px; text-overflow: ellipsis; height: 20px;"><span class="name" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 272px; height: 20px; display: block;">AsyncTCP-master.zip</span></div>
         <div class="size" style="margin: 2px 0px 0px; padding: 0px; font-family: &quot;Avenir Next&quot;, sans-serif; font-size: 12px; color: #777777; height: 16px;">0.02MB</div>
         </div>
      </a></figure>
<figure class="fileblock" data-ke-align="alignCenter" style="margin: 28px auto 20px; max-width: 100%; clear: both; padding: 0px; width: 470px; height: 71px; border: 1px solid rgb(233, 233, 233); position: relative; border-radius: 1px; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><a href="https://blog.kakaocdn.net/dn/OE1B8/btrMPVDYzL4/0mLekU4lrmISUFZP6Bv2e1/ESPAsyncWebServer-master.zip?attach=1&amp;knm=tfile.zip" class="" style="text-decoration-line: none; color: #ff0000; display: block; height: 71px;" target="_blank">
      <div class="image" style="margin: 21px 17px 20px 22px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-image: url(&quot;https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg&quot;); background-position: 0px 0px;">&nbsp;</div>
      <div class="desc" style="margin: 0px; padding: 0px; position: absolute; inset: 0px 60px 0px 70px;">
         <div class="filename" style="margin: 17px 0px 0px; padding: 0px; color: #333333; font-size: 14px; text-overflow: ellipsis; height: 20px;"><span class="name" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 272px; height: 20px; display: block;">ESPAsyncWebServer-master.zip</span></div>
         <div class="size" style="margin: 2px 0px 0px; padding: 0px; font-family: &quot;Avenir Next&quot;, sans-serif; font-size: 12px; color: #777777; height: 16px;">0.27MB</div>
         </div>
      </a></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>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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;"><a href="https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/" target="_blank" rel="noopener" style="text-decoration-line: none; color: #ff0000;">https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/</a></p>
<figure id="og_1663881149911" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Install ESP32 Filesystem Uploader in Arduino IDE | Random Nerd Tutorials" data-og-description="In this article we’'ll show you how to upload files to ESP32 filesystem (SPIFFS) using a plugin for the Arduino IDE: the ESP32 filesystem uploader." data-og-host="randomnerdtutorials.com" data-og-source-url="https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/" data-og-url="https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/" data-og-image="https://scrap.kakaocdn.net/dn/baZvYa/hyPSR6h8gX/UK5SeQka9r07OJFkwCHf8K/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720,https://scrap.kakaocdn.net/dn/cGYW2b/hyPSRec1Yz/AkPB4pucNtRPgseKMTkW71/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720,https://scrap.kakaocdn.net/dn/kp4iK/hyPSYEhmb6/bnGlY59lwhw2rwXI2uB6C1/img.jpg?width=828&amp;height=466&amp;face=0_0_828_466" style="margin: 30px 0px; max-width: 100%; clear: both; padding: 0px; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><a href="https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/" target="_blank" rel="noopener" data-source-url="https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/" style="text-decoration-line: none; color: #000000; position: relative; box-sizing: border-box; display: block; height: 200px; border: 1px solid rgb(217, 217, 217); z-index: 1;">
      <div class="og-image" style="margin: 0px; padding: 0px; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 200px; border-right: 1px solid rgb(217, 217, 217); background-size: cover; background-position: center center; background-image: url(&quot;https://scrap.kakaocdn.net/dn/baZvYa/hyPSR6h8gX/UK5SeQka9r07OJFkwCHf8K/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720,https://scrap.kakaocdn.net/dn/cGYW2b/hyPSRec1Yz/AkPB4pucNtRPgseKMTkW71/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720,https://scrap.kakaocdn.net/dn/kp4iK/hyPSYEhmb6/bnGlY59lwhw2rwXI2uB6C1/img.jpg?width=828&amp;height=466&amp;face=0_0_828_466&quot;);">&nbsp;</div>
      <div class="og-text" style="margin: 0px; padding: 33px 46px 0px 39px; position: absolute; inset: 0px 0px 0px 201px; box-sizing: border-box;">
         <p class="og-title" data-ke-size="size16" style="padding: 0px; word-break: break-all; font-size: 22px; line-height: 28px; max-width: 467px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-family: &quot;Noto Sans DemiLight&quot;, &quot;Noto Sans KR&quot;, sans-serif; margin-bottom: 10px !important;">Install ESP32 Filesystem Uploader in Arduino IDE | Random Nerd Tutorials</p>
         <p class="og-desc" data-ke-size="size16" style="padding: 0px; word-break: break-all; font-size: 14px; line-height: normal; color: #909090; text-overflow: ellipsis; overflow: hidden; font-family: &quot;Noto Sans DemiLight&quot;, &quot;Noto Sans KR&quot;, sans-serif; font-stretch: normal; max-height: 42px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;">In this article we’'ll show you how to upload files to ESP32 filesystem (SPIFFS) using a plugin for the Arduino IDE: the ESP32 filesystem uploader.</p>
         <p class="og-host" data-ke-size="size16" style="padding: 0px; word-break: break-all; font-size: 14px; line-height: 2; color: #909090; position: absolute; bottom: 24px; font-family: AvenirNext, sans-serif;">randomnerdtutorials.com</p>
         </div>
      </a></figure>
<p data-ke-size="size16" 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="background-color: #ffffff; color: #3a3a3a;">Serial Peripheral Interface Flash File System (SPIFFS)</span>관련 세팅을 해주어야 한다는 것이다.</p>
<p data-ke-size="size16" 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;">아마 이미 되어있으신 분들도 계실 것이고, 아닌 분들도 계실것인데,<br />잘 모르겠다면 그냥 위의 링크로 들어가서 하라는 대로 세팅을 따라하면 된다.</p>
<p data-ke-size="size16" 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;">SPIFFS 가 뭐냐면 아두이노 코드 뿐만이 아니라 기타 파일들을 ESP32 플래시 메모리에 옮겨 써주게 하는 기능이다.<br />이게 왜 필요하냐면 WiFi manager 로 데이터를 받아올 페이지 화면이 html 과 css로 구성되어 있는데,<br />그 파일을 같이 ESP32에 넣어주어야 하기 때문이다.</p>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<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="fileblock" data-ke-align="alignCenter" style="margin: 28px auto 20px; max-width: 100%; clear: both; padding: 0px; width: 470px; height: 71px; border: 1px solid rgb(233, 233, 233); position: relative; border-radius: 1px; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><a href="https://blog.kakaocdn.net/dn/dar5Jl/btrMNcgxohd/Gk8mtapvH4zoKPb59KkN0k/ESP32FS-1.0.zip?attach=1&amp;knm=tfile.zip" class="" style="text-decoration-line: none; color: #ff0000; display: block; height: 71px;" target="_blank">
      <div class="image" style="margin: 21px 17px 20px 22px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-image: url(&quot;https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg&quot;); background-position: 0px 0px;">&nbsp;</div>
      <div class="desc" style="margin: 0px; padding: 0px; position: absolute; inset: 0px 60px 0px 70px;">
         <div class="filename" style="margin: 17px 0px 0px; padding: 0px; color: #333333; font-size: 14px; text-overflow: ellipsis; height: 20px;"><span class="name" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 272px; height: 20px; display: block;">ESP32FS-1.0.zip</span></div>
         <div class="size" style="margin: 2px 0px 0px; padding: 0px; font-family: &quot;Avenir Next&quot;, sans-serif; font-size: 12px; color: #777777; height: 16px;">0.01MB</div>
         </div>
      </a></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>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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;">컴퓨터에 아두이노가 설치된 폴더위치로 들어가서 tools 폴더에 ESP32FS 폴더를 압축해제해주면 된다.</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" data-ke-mobilestyle="widthOrigin" data-origin-width="934" data-origin-height="167" 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/cOluvn/btrMRrbp4T9/gWHLypfwiyou78SQv5Xpa0/img.png" data-lightbox="lightbox" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/cOluvn/btrMRrbp4T9/gWHLypfwiyou78SQv5Xpa0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcOluvn%2FbtrMRrbp4T9%2FgWHLypfwiyou78SQv5Xpa0%2Fimg.png" data-origin-width="934" data-origin-height="167" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; width: 740px; 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>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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;">그리고 아두이노IDE를 재시작하면 적용이 된다.</p>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<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="fileblock" data-ke-align="alignCenter" style="margin: 28px auto 20px; max-width: 100%; clear: both; padding: 0px; width: 470px; height: 71px; border: 1px solid rgb(233, 233, 233); position: relative; border-radius: 1px; color: #555555; font-family: AppleSDGothicNeo, &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><a href="https://blog.kakaocdn.net/dn/KDgpa/btrMN7ZL1Pl/m4Cicq5JK3O36Zpubhcym0/ESP32_WiFi_Manager.zip?attach=1&amp;knm=tfile.zip" class="" style="text-decoration-line: none; color: #ff0000; display: block; height: 71px;" target="_blank">
      <div class="image" style="margin: 21px 17px 20px 22px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-image: url(&quot;https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg&quot;); background-position: 0px 0px;">&nbsp;</div>
      <div class="desc" style="margin: 0px; padding: 0px; position: absolute; inset: 0px 60px 0px 70px;">
         <div class="filename" style="margin: 17px 0px 0px; padding: 0px; color: #333333; font-size: 14px; text-overflow: ellipsis; height: 20px;"><span class="name" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 272px; height: 20px; display: block;">ESP32_WiFi_Manager.zip</span></div>
         <div class="size" style="margin: 2px 0px 0px; padding: 0px; font-family: &quot;Avenir Next&quot;, sans-serif; font-size: 12px; color: #777777; height: 16px;">0.00MB</div>
         </div>
      </a></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>
<p data-ke-size="size16" 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;">이제는 위의 압축파일을 다운받고<br />압축을 푼 후에</p>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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 id="code_1663881924246" class="cpp" data-ke-language="cpp" 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" style="margin: 0px; padding: 0.5em; display: block; overflow-x: auto; background: rgb(43, 43, 43); color: #bababa;"><span class="hljs-comment" style="color: #7f7f7f;">/*********
  Rui Santos
  Complete instructions at https://RandomNerdTutorials.com/esp32-wi-fi-manager-asyncwebserver/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/</span><span class="hljs-meta" style="color: #7f7f7f;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string">&lt;Arduino.h&gt;</span></span><span class="hljs-meta" style="color: #7f7f7f;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string">&lt;WiFi.h&gt;</span></span><span class="hljs-meta" style="color: #7f7f7f;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string">&lt;ESPAsyncWebServer.h&gt;</span></span><span class="hljs-meta" style="color: #7f7f7f;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string">&lt;AsyncTCP.h&gt;</span></span><span class="hljs-meta" style="color: #7f7f7f;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string">"SPIFFS.h"</span></span><span class="hljs-comment" style="color: #7f7f7f;">// Create AsyncWebServer object on port 80</span><span class="hljs-function">AsyncWebServer <span class="hljs-title">server</span><span class="hljs-params" style="color: #b9b9b9;">(<span class="hljs-number" style="color: #6896ba;">80</span>)</span></span>;
<span class="hljs-comment" style="color: #7f7f7f;">// Search for parameter in HTTP POST request</span><span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span>* PARAM_INPUT_1 = <span class="hljs-string" style="color: #6a8759;">"ssid"</span>;
<span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span>* PARAM_INPUT_2 = <span class="hljs-string" style="color: #6a8759;">"pass"</span>;
<span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span>* PARAM_INPUT_3 = <span class="hljs-string" style="color: #6a8759;">"ip"</span>;
<span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span>* PARAM_INPUT_4 = <span class="hljs-string" style="color: #6a8759;">"gateway"</span>;
<span class="hljs-comment" style="color: #7f7f7f;">//Variables to save values from HTML form</span>
String ssid;
String pass;
String ip;
String gateway;
<span class="hljs-comment" style="color: #7f7f7f;">// File paths to save input values permanently</span><span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span>* ssidPath = <span class="hljs-string" style="color: #6a8759;">"/ssid.txt"</span>;
<span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span>* passPath = <span class="hljs-string" style="color: #6a8759;">"/pass.txt"</span>;
<span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span>* ipPath = <span class="hljs-string" style="color: #6a8759;">"/ip.txt"</span>;
<span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span>* gatewayPath = <span class="hljs-string" style="color: #6a8759;">"/gateway.txt"</span>;
IPAddress localIP;
<span class="hljs-comment" style="color: #7f7f7f;">//IPAddress localIP(192, 168, 1, 200); // hardcoded</span><span class="hljs-comment" style="color: #7f7f7f;">// Set your Gateway IP address</span>
IPAddress localGateway;
<span class="hljs-comment" style="color: #7f7f7f;">//IPAddress localGateway(192, 168, 1, 1); //hardcoded</span><span class="hljs-function">IPAddress <span class="hljs-title">subnet</span><span class="hljs-params" style="color: #b9b9b9;">(<span class="hljs-number" style="color: #6896ba;">255</span>, <span class="hljs-number" style="color: #6896ba;">255</span>, <span class="hljs-number" style="color: #6896ba;">0</span>, <span class="hljs-number" style="color: #6896ba;">0</span>)</span></span>;
<span class="hljs-comment" style="color: #7f7f7f;">// Timer variables</span><span class="hljs-keyword" style="color: #cb7832;">unsigned</span><span class="hljs-keyword" style="color: #cb7832;">long</span> previousMillis = <span class="hljs-number" style="color: #6896ba;">0</span>;
<span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">long</span> interval = <span class="hljs-number" style="color: #6896ba;">10000</span>;  <span class="hljs-comment" style="color: #7f7f7f;">// interval to wait for Wi-Fi connection (milliseconds)</span><span class="hljs-comment" style="color: #7f7f7f;">// Set LED GPIO</span><span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">int</span> ledPin = <span class="hljs-number" style="color: #6896ba;">2</span>;
<span class="hljs-comment" style="color: #7f7f7f;">// Stores LED state</span>
String ledState;
<span class="hljs-comment" style="color: #7f7f7f;">// Initialize SPIFFS</span><span class="hljs-function"><span class="hljs-keyword" style="color: #cb7832;">void</span><span class="hljs-title">initSPIFFS</span><span class="hljs-params" style="color: #b9b9b9;">()</span></span>{
  <span class="hljs-keyword" style="color: #cb7832;">if</span> (!SPIFFS.<span class="hljs-built_in" style="color: #e0c46c;">begin</span>(<span class="hljs-literal" style="color: #6896ba;">true</span>)) {
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"An error has occurred while mounting SPIFFS"</span>);
  }
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"SPIFFS mounted successfully"</span>);
}
<span class="hljs-comment" style="color: #7f7f7f;">// Read File from SPIFFS</span><span class="hljs-function">String <span class="hljs-title">readFile</span><span class="hljs-params" style="color: #b9b9b9;">(fs::FS &amp;fs, <span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span> * path)</span></span>{
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">printf</span>(<span class="hljs-string" style="color: #6a8759;">"Reading file: %s\r\n"</span>, path);
  File file = fs.<span class="hljs-built_in" style="color: #e0c46c;">open</span>(path);
  <span class="hljs-keyword" style="color: #cb7832;">if</span>(!file || file.<span class="hljs-built_in" style="color: #e0c46c;">isDirectory</span>()){
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"- failed to open file for reading"</span>);
    <span class="hljs-keyword" style="color: #cb7832;">return</span><span class="hljs-built_in" style="color: #e0c46c;">String</span>();
  }
  String fileContent;
  <span class="hljs-keyword" style="color: #cb7832;">while</span>(file.<span class="hljs-built_in" style="color: #e0c46c;">available</span>()){
    fileContent = file.<span class="hljs-built_in" style="color: #e0c46c;">readStringUntil</span>(<span class="hljs-string" style="color: #6a8759;">'\n'</span>);
    <span class="hljs-keyword" style="color: #cb7832;">break</span>;     
  }
  <span class="hljs-keyword" style="color: #cb7832;">return</span> fileContent;
}
<span class="hljs-comment" style="color: #7f7f7f;">// Write file to SPIFFS</span><span class="hljs-function"><span class="hljs-keyword" style="color: #cb7832;">void</span><span class="hljs-title">writeFile</span><span class="hljs-params" style="color: #b9b9b9;">(fs::FS &amp;fs, <span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span> * path, <span class="hljs-keyword" style="color: #cb7832;">const</span><span class="hljs-keyword" style="color: #cb7832;">char</span> * message)</span></span>{
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">printf</span>(<span class="hljs-string" style="color: #6a8759;">"Writing file: %s\r\n"</span>, path);
  File file = fs.<span class="hljs-built_in" style="color: #e0c46c;">open</span>(path, FILE_WRITE);
  <span class="hljs-keyword" style="color: #cb7832;">if</span>(!file){
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"- failed to open file for writing"</span>);
    <span class="hljs-keyword" style="color: #cb7832;">return</span>;
  }
  <span class="hljs-keyword" style="color: #cb7832;">if</span>(file.<span class="hljs-built_in" style="color: #e0c46c;">print</span>(message)){
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"- file written"</span>);
  } <span class="hljs-keyword" style="color: #cb7832;">else</span> {
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"- frite failed"</span>);
  }
}
<span class="hljs-comment" style="color: #7f7f7f;">// Initialize WiFi</span><span class="hljs-function"><span class="hljs-keyword" style="color: #cb7832;">bool</span><span class="hljs-title">initWiFi</span><span class="hljs-params" style="color: #b9b9b9;">()</span></span>{
  <span class="hljs-keyword" style="color: #cb7832;">if</span>(ssid==<span class="hljs-string" style="color: #6a8759;">""</span> || ip==<span class="hljs-string" style="color: #6a8759;">""</span>){
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"Undefined SSID or IP address."</span>);
    <span class="hljs-keyword" style="color: #cb7832;">return</span><span class="hljs-literal" style="color: #6896ba;">false</span>;
  }
  WiFi.<span class="hljs-built_in" style="color: #e0c46c;">mode</span>(WIFI_STA);
  localIP.<span class="hljs-built_in" style="color: #e0c46c;">fromString</span>(ip.<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>());
  localGateway.<span class="hljs-built_in" style="color: #e0c46c;">fromString</span>(gateway.<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>());
  <span class="hljs-keyword" style="color: #cb7832;">if</span> (!WiFi.<span class="hljs-built_in" style="color: #e0c46c;">config</span>(localIP, localGateway, subnet)){
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"STA Failed to configure"</span>);
    <span class="hljs-keyword" style="color: #cb7832;">return</span><span class="hljs-literal" style="color: #6896ba;">false</span>;
  }
  WiFi.<span class="hljs-built_in" style="color: #e0c46c;">begin</span>(ssid.<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>(), pass.<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>());
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"Connecting to WiFi..."</span>);
  <span class="hljs-keyword" style="color: #cb7832;">unsigned</span><span class="hljs-keyword" style="color: #cb7832;">long</span> currentMillis = <span class="hljs-built_in" style="color: #e0c46c;">millis</span>();
  previousMillis = currentMillis;
  <span class="hljs-keyword" style="color: #cb7832;">while</span>(WiFi.<span class="hljs-built_in" style="color: #e0c46c;">status</span>() != WL_CONNECTED) {
    currentMillis = <span class="hljs-built_in" style="color: #e0c46c;">millis</span>();
    <span class="hljs-keyword" style="color: #cb7832;">if</span> (currentMillis - previousMillis &gt;= interval) {
      Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"Failed to connect."</span>);
      <span class="hljs-keyword" style="color: #cb7832;">return</span><span class="hljs-literal" style="color: #6896ba;">false</span>;
    }
  }
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(WiFi.<span class="hljs-built_in" style="color: #e0c46c;">localIP</span>());
  <span class="hljs-keyword" style="color: #cb7832;">return</span><span class="hljs-literal" style="color: #6896ba;">true</span>;
}
<span class="hljs-comment" style="color: #7f7f7f;">// Replaces placeholder with LED state value</span><span class="hljs-function">String <span class="hljs-title">processor</span><span class="hljs-params" style="color: #b9b9b9;">(<span class="hljs-keyword" style="color: #cb7832;">const</span> String&amp; var)</span></span>{
  <span class="hljs-keyword" style="color: #cb7832;">if</span>(var == <span class="hljs-string" style="color: #6a8759;">"STATE"</span>) {
    <span class="hljs-keyword" style="color: #cb7832;">if</span>(<span class="hljs-built_in" style="color: #e0c46c;">digitalRead</span>(ledPin)) {
      ledState = <span class="hljs-string" style="color: #6a8759;">"ON"</span>;
    }
    <span class="hljs-keyword" style="color: #cb7832;">else</span> {
      ledState = <span class="hljs-string" style="color: #6a8759;">"OFF"</span>;
    }
    <span class="hljs-keyword" style="color: #cb7832;">return</span> ledState;
  }
  <span class="hljs-keyword" style="color: #cb7832;">return</span><span class="hljs-built_in" style="color: #e0c46c;">String</span>();
}
<span class="hljs-function"><span class="hljs-keyword" style="color: #cb7832;">void</span><span class="hljs-title">setup</span><span class="hljs-params" style="color: #b9b9b9;">()</span></span>{
  <span class="hljs-comment" style="color: #7f7f7f;">// Serial port for debugging purposes</span>
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">begin</span>(<span class="hljs-number" style="color: #6896ba;">115200</span>);
  <span class="hljs-built_in" style="color: #e0c46c;">initSPIFFS</span>();
  <span class="hljs-comment" style="color: #7f7f7f;">// Set GPIO 2 as an OUTPUT</span><span class="hljs-built_in" style="color: #e0c46c;">pinMode</span>(ledPin, OUTPUT);
  <span class="hljs-built_in" style="color: #e0c46c;">digitalWrite</span>(ledPin, LOW);
  <span class="hljs-comment" style="color: #7f7f7f;">// Load values saved in SPIFFS</span>
  ssid = <span class="hljs-built_in" style="color: #e0c46c;">readFile</span>(SPIFFS, ssidPath);
  pass = <span class="hljs-built_in" style="color: #e0c46c;">readFile</span>(SPIFFS, passPath);
  ip = <span class="hljs-built_in" style="color: #e0c46c;">readFile</span>(SPIFFS, ipPath);
  gateway = <span class="hljs-built_in" style="color: #e0c46c;">readFile</span> (SPIFFS, gatewayPath);
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(ssid);
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(pass);
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(ip);
  Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(gateway);
  <span class="hljs-keyword" style="color: #cb7832;">if</span>(<span class="hljs-built_in" style="color: #e0c46c;">initWiFi</span>()) {
    <span class="hljs-comment" style="color: #7f7f7f;">// Route for root / web page</span>
    server.<span class="hljs-built_in" style="color: #e0c46c;">on</span>(<span class="hljs-string" style="color: #6a8759;">"/"</span>, HTTP_GET, [](AsyncWebServerRequest *request) {
      request-&gt;<span class="hljs-built_in" style="color: #e0c46c;">send</span>(SPIFFS, <span class="hljs-string" style="color: #6a8759;">"/index.html"</span>, <span class="hljs-string" style="color: #6a8759;">"text/html"</span>, <span class="hljs-literal" style="color: #6896ba;">false</span>, processor);
    });
    server.<span class="hljs-built_in" style="color: #e0c46c;">serveStatic</span>(<span class="hljs-string" style="color: #6a8759;">"/"</span>, SPIFFS, <span class="hljs-string" style="color: #6a8759;">"/"</span>);
    <span class="hljs-comment" style="color: #7f7f7f;">// Route to set GPIO state to HIGH</span>
    server.<span class="hljs-built_in" style="color: #e0c46c;">on</span>(<span class="hljs-string" style="color: #6a8759;">"/on"</span>, HTTP_GET, [](AsyncWebServerRequest *request) {
      <span class="hljs-built_in" style="color: #e0c46c;">digitalWrite</span>(ledPin, HIGH);
      request-&gt;<span class="hljs-built_in" style="color: #e0c46c;">send</span>(SPIFFS, <span class="hljs-string" style="color: #6a8759;">"/index.html"</span>, <span class="hljs-string" style="color: #6a8759;">"text/html"</span>, <span class="hljs-literal" style="color: #6896ba;">false</span>, processor);
    });
    <span class="hljs-comment" style="color: #7f7f7f;">// Route to set GPIO state to LOW</span>
    server.<span class="hljs-built_in" style="color: #e0c46c;">on</span>(<span class="hljs-string" style="color: #6a8759;">"/off"</span>, HTTP_GET, [](AsyncWebServerRequest *request) {
      <span class="hljs-built_in" style="color: #e0c46c;">digitalWrite</span>(ledPin, LOW);
      request-&gt;<span class="hljs-built_in" style="color: #e0c46c;">send</span>(SPIFFS, <span class="hljs-string" style="color: #6a8759;">"/index.html"</span>, <span class="hljs-string" style="color: #6a8759;">"text/html"</span>, <span class="hljs-literal" style="color: #6896ba;">false</span>, processor);
    });
    server.<span class="hljs-built_in" style="color: #e0c46c;">begin</span>();
  }
  <span class="hljs-keyword" style="color: #cb7832;">else</span> {
    <span class="hljs-comment" style="color: #7f7f7f;">// Connect to Wi-Fi network with SSID and password</span>
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(<span class="hljs-string" style="color: #6a8759;">"Setting AP (Access Point)"</span>);
    <span class="hljs-comment" style="color: #7f7f7f;">// NULL sets an open Access Point</span>
    WiFi.<span class="hljs-built_in" style="color: #e0c46c;">softAP</span>(<span class="hljs-string" style="color: #6a8759;">"ESP-WIFI-MANAGER"</span>, <span class="hljs-literal" style="color: #6896ba;">NULL</span>);
    IPAddress IP = WiFi.<span class="hljs-built_in" style="color: #e0c46c;">softAPIP</span>();
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">print</span>(<span class="hljs-string" style="color: #6a8759;">"AP IP address: "</span>);
    Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(IP); 
    <span class="hljs-comment" style="color: #7f7f7f;">// Web Server Root URL</span>
    server.<span class="hljs-built_in" style="color: #e0c46c;">on</span>(<span class="hljs-string" style="color: #6a8759;">"/"</span>, HTTP_GET, [](AsyncWebServerRequest *request){
      request-&gt;<span class="hljs-built_in" style="color: #e0c46c;">send</span>(SPIFFS, <span class="hljs-string" style="color: #6a8759;">"/wifimanager.html"</span>, <span class="hljs-string" style="color: #6a8759;">"text/html"</span>);
    });
    server.<span class="hljs-built_in" style="color: #e0c46c;">serveStatic</span>(<span class="hljs-string" style="color: #6a8759;">"/"</span>, SPIFFS, <span class="hljs-string" style="color: #6a8759;">"/"</span>);
    server.<span class="hljs-built_in" style="color: #e0c46c;">on</span>(<span class="hljs-string" style="color: #6a8759;">"/"</span>, HTTP_POST, [](AsyncWebServerRequest *request) {
      <span class="hljs-keyword" style="color: #cb7832;">int</span> params = request-&gt;<span class="hljs-built_in" style="color: #e0c46c;">params</span>();
      <span class="hljs-keyword" style="color: #cb7832;">for</span>(<span class="hljs-keyword" style="color: #cb7832;">int</span> i=<span class="hljs-number" style="color: #6896ba;">0</span>;i&lt;params;i++){
        AsyncWebParameter* p = request-&gt;<span class="hljs-built_in" style="color: #e0c46c;">getParam</span>(i);
        <span class="hljs-keyword" style="color: #cb7832;">if</span>(p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">isPost</span>()){
          <span class="hljs-comment" style="color: #7f7f7f;">// HTTP POST ssid value</span><span class="hljs-keyword" style="color: #cb7832;">if</span> (p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">name</span>() == PARAM_INPUT_1) {
            ssid = p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">value</span>().<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>();
            Serial.<span class="hljs-built_in" style="color: #e0c46c;">print</span>(<span class="hljs-string" style="color: #6a8759;">"SSID set to: "</span>);
            Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(ssid);
            <span class="hljs-comment" style="color: #7f7f7f;">// Write file to save value</span><span class="hljs-built_in" style="color: #e0c46c;">writeFile</span>(SPIFFS, ssidPath, ssid.<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>());
          }
          <span class="hljs-comment" style="color: #7f7f7f;">// HTTP POST pass value</span><span class="hljs-keyword" style="color: #cb7832;">if</span> (p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">name</span>() == PARAM_INPUT_2) {
            pass = p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">value</span>().<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>();
            Serial.<span class="hljs-built_in" style="color: #e0c46c;">print</span>(<span class="hljs-string" style="color: #6a8759;">"Password set to: "</span>);
            Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(pass);
            <span class="hljs-comment" style="color: #7f7f7f;">// Write file to save value</span><span class="hljs-built_in" style="color: #e0c46c;">writeFile</span>(SPIFFS, passPath, pass.<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>());
          }
          <span class="hljs-comment" style="color: #7f7f7f;">// HTTP POST ip value</span><span class="hljs-keyword" style="color: #cb7832;">if</span> (p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">name</span>() == PARAM_INPUT_3) {
            ip = p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">value</span>().<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>();
            Serial.<span class="hljs-built_in" style="color: #e0c46c;">print</span>(<span class="hljs-string" style="color: #6a8759;">"IP Address set to: "</span>);
            Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(ip);
            <span class="hljs-comment" style="color: #7f7f7f;">// Write file to save value</span><span class="hljs-built_in" style="color: #e0c46c;">writeFile</span>(SPIFFS, ipPath, ip.<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>());
          }
          <span class="hljs-comment" style="color: #7f7f7f;">// HTTP POST gateway value</span><span class="hljs-keyword" style="color: #cb7832;">if</span> (p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">name</span>() == PARAM_INPUT_4) {
            gateway = p-&gt;<span class="hljs-built_in" style="color: #e0c46c;">value</span>().<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>();
            Serial.<span class="hljs-built_in" style="color: #e0c46c;">print</span>(<span class="hljs-string" style="color: #6a8759;">"Gateway set to: "</span>);
            Serial.<span class="hljs-built_in" style="color: #e0c46c;">println</span>(gateway);
            <span class="hljs-comment" style="color: #7f7f7f;">// Write file to save value</span><span class="hljs-built_in" style="color: #e0c46c;">writeFile</span>(SPIFFS, gatewayPath, gateway.<span class="hljs-built_in" style="color: #e0c46c;">c_str</span>());
          }
          <span class="hljs-comment" style="color: #7f7f7f;">//Serial.printf("POST[%s]: %s\n", p-&gt;name().c_str(), p-&gt;value().c_str());</span>
        }
      }
      request-&gt;<span class="hljs-built_in" style="color: #e0c46c;">send</span>(<span class="hljs-number" style="color: #6896ba;">200</span>, <span class="hljs-string" style="color: #6a8759;">"text/plain"</span>, <span class="hljs-string" style="color: #6a8759;">"Done. ESP will restart, connect to your router and go to IP address: "</span> + ip);
      <span class="hljs-built_in" style="color: #e0c46c;">delay</span>(<span class="hljs-number" style="color: #6896ba;">3000</span>);
      ESP.<span class="hljs-built_in" style="color: #e0c46c;">restart</span>();
    });
    server.<span class="hljs-built_in" style="color: #e0c46c;">begin</span>();
  }
}
<span class="hljs-function"><span class="hljs-keyword" style="color: #cb7832;">void</span><span class="hljs-title">loop</span><span class="hljs-params" style="color: #b9b9b9;">()</span></span>{
}</code>
   </pre>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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;">단순히 코드를 업로드 하는것 뿐만 아니라<br />SPIFFS 기능으로 html과 css 파일도 업로드 해주어야 한다.</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" data-ke-mobilestyle="widthOrigin" data-origin-width="971" data-origin-height="627" 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/bHt5SU/btrMPmBQgBK/LMxfUZVWAKmN87X4JSMte0/img.png" data-lightbox="lightbox" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/bHt5SU/btrMPmBQgBK/LMxfUZVWAKmN87X4JSMte0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbHt5SU%2FbtrMPmBQgBK%2FLMxfUZVWAKmN87X4JSMte0%2Fimg.png" data-origin-width="971" data-origin-height="627" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; width: 740px; 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>
<p data-ke-size="size16" 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;">ESP32 Sketch Data Upload 를 통해 html과 css 파일을 업로드 해주면 된다.</p>
<p data-ke-size="size16" 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;">데이터 파일을 업로드 하지 않으면 스마트폰에서 WiFi 세팅을 할 수가 없다.</p>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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>
<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" data-ke-mobilestyle="widthOrigin" data-origin-width="710" data-origin-height="624" 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/cE2eFk/btrMQOxRWfs/N0YRzWDnnjFPKfykWRxJp0/img.png" data-lightbox="lightbox" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/cE2eFk/btrMQOxRWfs/N0YRzWDnnjFPKfykWRxJp0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcE2eFk%2FbtrMQOxRWfs%2FN0YRzWDnnjFPKfykWRxJp0%2Fimg.png" data-origin-width="710" data-origin-height="624" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; width: 710px; 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>
<p data-ke-size="size16" 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;">ESP32에 코드가 다 업로드 되었다면 이제 스마트폰에서 ESP32 wifi를 접속해주고<br />192.168.4.1 주소로 접속하면 위의 화면이 나온다.</p>
<p data-ke-size="size16" 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;">SSID 와 Password 에 wifi 이름이랑 비번을 입력하면 된다.</p>
<p data-ke-size="size16" 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;">IP Address 는 고유 IP 주소로, ESP32가 공유기에 접속했을때 부여 받을 IP주소를 입력하는 것이고<br />Gateway Address 는 공유기 내부 주소 규칙을 입력하면 된다.<br /><br /></p>
<p data-ke-size="size16" 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;">쉽게 iptime 공유기라면 192.168.0.1 이 되고,</p>
<p data-ke-size="size16" 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;">netis 공유기라면 192.168.1.1 이 된다.</p>
<p data-ke-size="size16" 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>
<p data-ke-size="size16" 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;">정보를 제대로 입력하면 자동으로 ESP32가 wifi 접속하게 된다.</p>