애플리케이션 개발/HRC(Home Remote Control) (26) 썸네일형 리스트형 2-1. iOS 앱에서 JavaScript 함수 실행하기 먼저 구현에 앞서 URL을 통해 웹페이지를 연결해야 하므로 Info.plist를 설정해준다. (taeminator1.tistory.com/11 참고) ContentView에서 앱과 웹페이지를 연결하기 위해, WKWebView와 URLRequest의 객체를 생성한다. 그리고 init() 함수를 추가해, 앱과 웹페이지를 연결한다. ContentView.swift import SwiftUI import WebKit import Foundation struct ContentView: View { static let url: String = "http://taeminator1.iptime.org" static let wkWebView = WKWebView() static let request: URLRequest.. 2-0. 아이폰 앱과 웹 페이지 간의 통신 두 영역 간의 통신을 위해서는 두 가지가 구현되어야 한다. 1. 아이폰 앱에서 웹페이지의 정보 가져오기 2. 아이폰 앱에서 웹페이지의 컨트롤 조작하기 첫 번째, 아이폰 앱에서 웹페이지의 정보를 가져와야 한다. 처음 앱을 실행하면 이전에 내가 저장했던 상태들을 알아야 그것에 맞춰 앱을 띄울 수 있기 때문이다. 이에 관해서는 3-1(taeminator1.tistory.com/4)에서도 말했듯이, HTML문을 Scrap 해서 정보를 읽을 것이다. 두 번째로는 JavaScript파일을 아이폰 앱에서 실행시켜 웹페이지의 컨트롤을 조작할 것이다. 예를 들어 앱에 있는 버튼을 누를 시 웹페이지의 버튼을 누르게 할 것이다. WebKit Framework에서 제공하는 evaluateJavaScript함수를 이용할 것이다.. 1-1. SwiftUI로 iOS Application UI 구성 기존에 Objective-C를 사용하던 애플은 2014년 WWDC(Worldwide Developers Conference)를 통해 Swift라는 언어를 세상에 처음 공개했고, 지난 2019 SwiftUI라는 새로운 User Interface를 공개했다. 기존 방식으로 애플리케이션을 제작하게 되면, 검증된 소스코드도 많고, 관련 자료도 많아 쉽게 애플리케이션을 만들 수 있을 것이다. 하지만 기술은 변화하고 있는데, 그 변화에 맞서기 싫어 기존 것을 고수한다면, 그리고 그것이 반복된다면, 가까운 미래에 크게 도태될 것이다. 그리고 이러한 태도가 개발자로서는 가장 기피해야 할 태도가 아닐까 싶다. 이런저런 의미에서 이번 개발은 SwiftUI를 통해 구현하기로 마음 먹었다. 사실 애플리케이션 제작 경험조차 별.. 3-4. Node.js를 이용한 웹 페이지 작성(파일 read/write 구현) 2 이전 포스팅에서 개별적으로 살펴본 코드를 합친 전체 코드이다. 전역 변수로 fs모듈을 불러왔고, 공유기에서 설정한 내부 포트 번호도 선언했다. 그리고 HTML 코드가 너무 복잡해서 templageHTML함수를 통해 조금이나마 코드를 보기 쉽게 만들었다. app.js var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('querystring'); const inPort = 80; // 내부 포트 번호 function templateHTML(title, gui, script) { return ` ${gui} `; } var app = http.createServer(function(reque.. 3-4. Node.js를 이용한 웹 페이지 작성(파일 read/write 구현) 1 앞 시간에 node.js파일을 실행시켜 외부에서도 해당 페이지를 접속하는 방법을 알아보았다. 이번 시간에는 javascript를 이용해 파일을 입출력하는 방법을 구현해 볼 것이다. 해당 포스팅은 이고잉님의 생활코딩(Node.js)이 굉장히 도움이 되었다. https://opentutorials.org/module/3549/21135 이고잉님께는 이 자리를 빌려 감사함을 전하고 싶다. 이번 개발의 주요 사항은 다음과 같다. 페이지를 열었을 경우(open, reload, ...) 이전 상태가 유지하기(read) 변경된 상태 반영하기(write) 다 작성하고 보니 코드가 너무 길어졌다. js파일에 html문과 script문을 다 넣었기 때문인데, 각각의 파일로 따로 관리하면 좋겠지만, 파라미터를 공유하고 있어.. 3-3. Node.js를 이용한 웹 페이지 작성(개요) 결론부터 말하자면, 서버를 운용하는데 Node.js를 사용하기로 했다. 초기 계획은, javascript를 이용해 웹페이지를 통해 데이터를 주고받으려고 했으나, 내가 할당받은 서버 내에서 txt 파일을 읽는 것은 성공했지만, 아무리 검색을 해보아도 할당받은 서버에 쓰기는 할 수 없었다. 검색하다가 보안상의 이유로 쓰기는 할 수 없다는 글을 보고 다른 방법을 생각하기에 이르렀다. 바로 Node.js를 이용하는 것이다. 지난 포스팅(3-1. 서버 할당과 웹페이지 작성, taeminator1.tistory.com/4)에서도 살짝 언급했지만, Node.js를 이용하기 위해서는 터미널(또는 명령 프롬프트)창에서 js 파일을 실행시켜야 하고, 켠 상태를 유지해야 해당 웹페이지에 접근할 수 있다. 이 문제를 포함해서.. 3-2. 웹 페이지 상태를 유지하는 방법 고찰 계획한 대로 개발을 하기 위해서는, 지난 포스팅(3-1. 서버 할당과 웹페이지 작성, taeminator1.tistory.com/4)에서 언급한 문제 중 하나는 바로 해결해야 할 것 같다. 바로 두 번째 문제로 언급된 웹페이지 내부의 버튼 State에 관한 문제이다. 웹 페이지를 reload 하거나, 다시 열거나 할 때마다 기존의 버튼들이 유지되지 않고 초기화되는 문제가 있었다. 첫 번째로 시도한 방법은, Javascript파일에 전역변수를 선언하여 해당 변수를 사용하는 것이었다. 하지만 웹페이지가 로드될 때마다 javaScript파일을 새로 run 시키는지, 전역 변수도 초기화되어 이 방법은 적절하지 않았다. 두 번째 방법은, javaScript에서 제공하는 Local Storage를 활용하는 것이었다.. 3-1. 서버 할당과 웹페이지 작성 이번 프로젝트에서 가장 기본이 되는 것은 웹서버라고 생각해서 웹페이지 작성을 가장 먼저 시작했다. 이전에 HTML과 CSS를 취미 삼아 공부한 적이 있는데, 도움은 많이 되었지만, 이번 프로젝트의 성격을 고려해 볼 때, JavaScript를 공부할 걸 하고 후회하기도 했다. 처음에는 Node.js를 이용해 동적인 웹페이지를 작성하려고 했지만, 아무리 구글링을 해도, 웹페이지 자체에서 Node.js 파일을 실행시키는 방법을 찾을 수 없어서, 단순 JavaScript를 이용하기로 계획을 바꿨다. (사실 Node.js가 JavaScript이긴 하지만,,) 웹페이지를 디자인하기 전에 나만의 서버가 필요했는데, 다행히도 닷홈(www.dothome.co.kr)이라는 사이트에서 무료 호스팅 서비스를 해주고 있었다. .. 이전 1 2 3 4 다음
