이번 프로젝트에서 가장 기본이 되는 것은 웹서버라고 생각해서 웹페이지 작성을 가장 먼저 시작했다.
이전에 HTML과 CSS를 취미 삼아 공부한 적이 있는데, 도움은 많이 되었지만,
이번 프로젝트의 성격을 고려해 볼 때, JavaScript를 공부할 걸 하고 후회하기도 했다.
처음에는 Node.js를 이용해 동적인 웹페이지를 작성하려고 했지만, 아무리 구글링을 해도, 웹페이지 자체에서 Node.js 파일을 실행시키는 방법을 찾을 수 없어서, 단순 JavaScript를 이용하기로 계획을 바꿨다.
(사실 Node.js가 JavaScript이긴 하지만,,)
웹페이지를 디자인하기 전에 나만의 서버가 필요했는데, 다행히도 닷홈(www.dothome.co.kr)이라는 사이트에서 무료 호스팅 서비스를 해주고 있었다. 방법은 너무나 간단해서, 따로 설명할 필요는 없을 것 같다. 여러 사이트에서 포스팅된 자료를 참고하면 될 것 같다. (참고할 점은 HDD사용량이랑 트래픽 사용량인데, 각각 200MB 정도여서 현재로서는 부족하지는 않을 것 같다)
추가적으로 내가 작성한 HTML파일을 할당받은 서버에 올려주는 프로그램이 필요하다. 이러한 프로그램을 FTP 프로그램이라고 한다.
FTP란, File Transfer Protocol의 약자로, 직역하면, 파일 전송 규약 쯤 된다. 서로 분리되어 있는 PC의 서버 간에 파일을 전송해줄 수 있는 프로그램이 바로 FTP 프로그램이다. 나는 FileZilla를 이용했다.
이제 준비작업은 모두 끝났고, 본격적으로 웹페이지를 작성하면 된다.
Visual Studio Code를 통해 HTML문(main.html)과 JavaScript 코드(script.js)를 작성하였고, 다음과 같다.
main.html
<!DOCTYPE html>
<head>
<title>Home Remote Control</title>
</head>
<body>
<form>
<h3>Test Buttons</h3>
<ul>
<li>
<input type="checkbox" name="test" id="btn1"> button1
<label id = "label1"> Off </label>
</li>
</ul>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
function getSelectedCheckboxValues(name) {
const checkboxes = document.querySelectorAll(`input[name="${name}"]:checked`);
let values = [];
checkboxes.forEach((checkbox) => {
values.push(checkbox.value);
});
return values;
}
const btn1 = document.querySelector('#btn1');
btn1.addEventListener('click', (event) => {
if(getSelectedCheckboxValues('test') == 'on') {
document.getElementById('label1').innerHTML = 'On';
}
else {
document.getElementById('label1').innerHTML = 'Off';
}
});
해당 파일을 웹페이지에서 열어보면 다음과 같이 나온다.
URL부분에, HTML파일이 저장된 경로가 나타나게 된다.
이제 이 파일(HTML, JavaScript 파일)을 FTP 프로그램을 통해 내가 할당받은 서버에 올린 후, 웹페이지에서 확인해 보자.
본문 내용은 동일하지만, 아까 말한 URL부분이 달라졌다. 기존에는 파일이 있는 내 PC상의 경로였지만, 서버에 올린 파일을 여는 순간, 내가 할당받은 주소(사용자 ID.dothome.co.kr) + 서버 내 경로(HRC/main.html)가 나타난다.
이렇게 성공적으로 내가 작성한 파일을 웹페이지만 띄울 수 있으면, 어디서든 확인할 수 있게 되었다.
마지막으로 확인해야 할 부분은, button을 클릭했을 때, HTML문 중에서 어디가 수정되는지 확인하는 것이다. 이것을 위해 이렇게 복잡?한 과정을 거친 것이다!! 다시 한번 목표를 되새기자. 우리? 의 목표는 밖에서도 에어컨을 켤 수 있게 하는 것이다. 현재 나의 계획은 button에 따라 HTML문이 수정되고 그 수정된 HTML문에 따라 에어컨을 제어하고자 하는 것이다. 이것을 확인하려면, 웹브라우저에서 마우스 오른쪽 버튼을 클릭하여 '검사'를 누르면 된다.
그럼 위의 사진과 같이 오른쪽에 해당 웹페이지에 대한 다양한 정보를 만날 수가 있다. 여기서 내가 관심있는 부분은 오른쪽 상단의 HTML문이다. button을 check 했을 때와 하지 않았을 때를 비교해보자.
차이가 보이는가..... <label id="label1"> 뒤의 글자가 Off에서 On으로 변경되었다!! button만 눌렀을 뿐인데 HTML문이 변경되다니.. 예전에 JavaScript에 관심이 많던 친구가 이해가 안 된 내가 한심해지는 순간이다.
아무튼 check를 누르면 변경되는 text를 이용해서 앞으로 여러 가지 일을 할 것이다.
근데 위에 간단하게 작성한 HTML&JavaScript에 몇 가지 문제가 있다.
1. 현재 내가 작성한 웹사이트는 URL만 알면 누구나 접속할 수가 있다. (다시 말해 누구나 나의 에어컨을 켜고 끌 수가 있다)
2. 웹페이지를 새로고침하면 처음 설정한 값(Off)으로 간다.
이 문제들은 프로젝트를 진행하는 큰 틀에서는 아직 수정하지 않아도 될 거 같아서, 이후에 보완하기로 했다.
다음 과제는 아이폰앱 레이아웃을 구축하고, 아이폰을 통해 저 버튼을 클릭하는 걸 구현해야 한다.
(물론 아이폰에서 웹페이지로 들어가서 버튼을 눌러도 되지만, 그건 뭔가 멋이 없다. )
'애플리케이션 개발 > HRC(Home Remote Control)' 카테고리의 다른 글
| 3-4. Node.js를 이용한 웹 페이지 작성(파일 read/write 구현) 1 (0) | 2020.08.02 |
|---|---|
| 3-3. Node.js를 이용한 웹 페이지 작성(개요) (0) | 2020.08.02 |
| 3-2. 웹 페이지 상태를 유지하는 방법 고찰 (0) | 2020.07.27 |
| 0-0.밖에서도 에어컨을 켜기 위한 계획 (0) | 2020.07.22 |
| 에어컨을 켜기 위한 프로젝트의 시작.. (0) | 2020.07.21 |
