동해둘리의 IT Study

하이브리드앱 개발시 주로 사용되는 웹뷰 (Webview) 에서 소셜로그인 적용시,카카오/ 네이버 등은 팝업방식이 아니라 문제가 안되지만,페이스북은 팝업방식을 사용하기 때문에 문제가 발생하게 됩니다 왜냐하면 웹뷰 (Webview) 는 기본적으로 팝업을 지원하지 않고, 하나의 window 로만 동작하기 때문입니다 기본적으로, 웹의 HTML 문서내에서 페이스북 로그인을 처리하기 위해서는 페이스북 개발자 사이트를 참조하면 됩니다. https://developers.facebook.com/docs/facebook-login/web 페이스북 개발자센터의 소스를 사용하게되면 팝업이 뜨면서 로그인이 처리되게 됩니다. 이때, 팝업이 뜨지 않게 하려면 아래와 같이 하면 됩니다.앱ID 부분은 페이스북 개발자센터에서 앱 등록..

IT공부방/안드로이드 Android 2018. 12. 18. 04:52

여러개의 테이블에서 검색한 결과를 한번에 뿌려주어야 하는 경우가 있습니다 예를들어, 검색할 때에 3개의 게시판에 있는 내용을 모두 검색하여 한 화면에 뿌려주는 경우입니다. 이럴때는 단순히 UNION 함수만 사용하면 됩니다. SELECT subject FROM A_TABLE WHERE subject like '%검색어%' UNION SELECT subject FROM B_TABLE WHERE subject like '%검색어%' UNION SELECT subject FROM C_TABLE WHERE subject like '%검색어%' 이렇게 하면 A_TABLE, B_TABLE, C_TABLE 의 검색결과를 한번에 얻을 수 있습니다. 검색결과를 리스트 형태로 뿌려주는 경우, 제목을 클릭하면 각각의 테이블 ..

IT공부방/기타 2018. 12. 13. 15:44

일정시간 간격으로 이미지를 변환, 전환 시키는 javascript 코드입니다. 기본적으로 setTimeout() 함수를 사용하게 됩니다. setTimeout() 함수는 아래와 같이 일정시간이 지나면 함수내에 기록된 동작이 일어나게 됩니다. setTimeout(function(){ alert("Hello"); }, 3000); 두번째 인자로 기입된 3000(milliseconds) 즉, 3초가 지난후에 alert("Hello"); 함수가 실행되는 방식입니다. 실행되는 함수를 외부에 작성한 후에 호출해도 됩니다. var myVar; function myFunction() { myVar = setTimeout(alertFunc, 3000);} function alertFunc() { alert("Hello!"..

IT공부방/jQuery, ajax, java 2018. 12. 13. 11:54

요즈음 영상광고나 홍보물에서 많이 사용되는 모션그래픽을 쉽게 만들 수 있는 프로그램 입니다 아래 링크에서 다운로드 받을 수 있습니다. https://www.nchsoftware.com/animation/ko/index.html 사용설명은 아래 유튜브 동영상을 참고하시기 바랍니다 https://www.youtube.com/watch?v=_YYfsfi-gKs&feature=youtu.be

IT공부방/개발환경,오픈소스 2018. 12. 5. 19:24

로딩이미지는 파일을 업로드/ 다운로드 하거나 페이지의 더보기 버튼을 클릭했을때 등등 다양한 상황에서 사용이 됩니다. 이때 사용되는 움직이는 로딩이미지를 만들어주는 사이트를 알려드립니다. 아래 사이트에 접속하시면 됩니다.http://www.ajaxload.info/ 접속하신 후 Indicator type 을 클릭하시면 여러가지 다양한 모양의 움직이는 로딩이미지가 나타납니다. 원하는 로딩이미지를 선택하신 후에 배경색과 전경색을 선택하시고 아래에 있는 Generate It 버튼을 클릭합니다. 그러면 Preview 화면에 선택한 움직이는gif 로딩이미지가 표시됩니다. Preview 화면 아래쪽에 있는 Download it 버튼을 클릭하시면 바로 다운로드 받으실 수 있습니다.

IT공부방/HTML5, CSS 2018. 11. 11. 13:41

HTMl5 로 코딩을 하는경우, 동적으로 화면의 요소들을 컨트롤 해야하는 경우가 많습니다. 팝업형태의 DIV 태그를 사황에 따라 보여준다거나 많은 리스트를 보여주지만, 사용자의 선택에 따라 일부분만 보여주어야 하는 경우 동적으로 HTMl 요소들을 컨트롤 해야합니다. 이럴때 흔히 사용하는 Style Property 가 바로 display와 visibility 입니다. display 는 none 이나 block, inline 등의 값을 사요할 수 있고 visibility 는 hidden, visible 값을 사용하게됩니다. 하지만, 이 두가지 property는 중요한 차이점이 있습니다. 위 그림에서 보는바와 같이, display 를 사용하는 경우 B 를 display:none 으로 처리했다면, B 가 안보이..

IT공부방/HTML5, CSS 2018. 11. 8. 23:52

html태그나 div 태그를 사용하는 경우, 해당 태그에 접근하기 위해서 id 값이나 name 값을 사용하는 경우가 많습니다. 호랑이 독수리 원숭이 아래 그림을 클릭하시면 w3school 에서 제공하는 Global attributes 설명페이지로 링크됩니다. 참고하세요

IT공부방/HTML5, CSS 2018. 11. 8. 23:33

모바일웹이나 웹앱/ 하이브리드앱 첫 화면 인트로페이지 에 이미지를 보여주는 경우,부드럽게 열렸다가 2~3초 지난 후에 다음페이지로 연결되게 하기위한 코드입니다. 우선, 이미지가 부드럽게 로딩되기 위해서는 jquery 의 fadein() 을 사용합니다. 바로 이 부분인데요, 아이디가 loadingimg 인 img 태그에 fadein 함수를 적용하여 1500 즉 이미지 로딩시 1.5초의 시간동안 fadein (천천히 열림)처리를 하늑겁니다. 물론, 문서내의 모든 객체가 로딩된 후에 실시해야 하니까 $(document).ready 내에 기술해야 하겠지요 또 한가지, 인트로페이지 로딩후 3초후에 다른페이지가 로딩되게 하려면, 아래와같이 meta 태그만 사용하면 됩니다. CONTENT 부부의 3 은 3초후에 그 ..

IT공부방/jQuery, ajax, java 2018. 10. 30. 16:24

안드로이드에서 웹뷰를 생성하여 웹사이트를 로드한 경우, 웹뷰내에 로드된 페이지에서 특정 버튼이나 메뉴가 클릭되었을 경우,안드로이드 코드내의 특정 Javascript 함수를 호출해야 하는 경우가 있다. 반대로, 안드로이드 쪽에서 버튼이나 메뉴를 클릭했을 때, 웹뷰내에 로드된 페이지의 특정 Javascript 함수를 호출해야하는 경우가 있다 먼저, 안드로이드 에서 웹뷰에 로드된 페이지의 Javascript 함수를 호출하려면 아래와 같이 호출하면 된다. mWebView.loadUrl("javascript:TestFunction()"); 웹뷰내의 페이지에는 다음과 같이 구현되어 있어야 한다. function TestFunction() { // 웹페이지에서 실행할 동작을 기술} 반대로, 웹뷰내의 페이지에서 안드로..

IT공부방/안드로이드 Android 2018. 10. 2. 02:14

아마존웹서비스 AWS 의 인스턴트에 접속하여 FTP 파일전송을 할 수 있는 프로그램인 WinSCP 를 설명합니다 WinSCP 는 Window 환경에서 아마존웹서비스의 인스턴스에 접속하여 파일을 전송할 수 있는 프로그램입니다아마존웹서비스의 인스턴스는 물론이고, 클라우드서비스인 Amazone S3 서비스에도 접속할 수 있습니다 WinSCP 프로그램은 아래 사이트에서 다운로드 가능합니다. http://winscp.net/eng/download.php 설치 후 실행시키면 호스트이름과 사용자이름을 물어보는데요 아마존 웹서비스의 인스턴스에 있는 퍼블릭DNS(IPv4) 를 입력해 주시면 됩니다. 그리고, 사용자이름은 AMI 의 기본 사용자이름을 사용하게 됩니다 즉, Amazon Linux AMI 일 경우 ec2-us..

IT공부방/개발환경,오픈소스 2018. 9. 10. 18:57

아마존웹서비스 AWS 에 접속하여 인스턴스를 생성한 후에putty 프로그램을 이용하여 SSH 로 접속하는 방법을 기록합니다. 아마존웹서비스 AWS 에 접속한 후에 콘솔에 로그인을 하게되면 아래와 같이 AWS 에서 제공하는 여러가지 서비스가 보입니다여기에서 기존에 생성했던 인스턴스를 관리하기 위해서는 EC2 메뉴를 선택합니다 이때, 인스턴스 리스트가 보이지 않는 경우가 간혹 있습니다 이럴때는 당황하지 마시고, 우측상단에 있는 리전(Region) 을 선택하셔서, 서울로 바꿔주시면 보이게 됩니다. 바꾸고 나면, 아래와 같이 기존에 생성했던 인스턴스 리스트가 보이게 됩니다. 생성된 인스턴스에 SSH로 접속하기 위해서는 SSH 접속프로그램이 필요합니다.putty.exe 프로그램을 많이 사용하는데요 아래 링크를 통..

IT공부방/개발환경,오픈소스 2018. 9. 10. 18:35

프로그래머가 아니어도 쉽게 프로그램을 만들 수 있도록 해주는 언어로 프로세싱언어가 있는데 프로세싱 언어를 자바스크립트에 통합시켜 만든 패키지로 p5가 있습니다. https://p5js.org/reference/ 아래와 같이 기본적인 드로잉 기능부터 3D는 물론 사운드까지 다양한 예제들과 라이브러리가 제공됩니다. ExamplesStructureCoordinates Width/Height Setup/Draw No Loop Loop Redraw Functions Recursion Create Graphics FormPoints/Lines Shape Primitives Pie Chart Regular Polygon Star Triangle Strip Bezier 3D Primitives DataVariables..

IT공부방/개발환경,오픈소스 2018. 6. 25. 22:37

앱인벤터 AppInventor 에서 웹뷰 WebView 컴포넌트를 사용할 때, 웹뷰 내에서 전화번호를 클릭할 경우 스마트폰의 전화걸기 기능을 실행할 필요가 생기는데요 전화걸기 : 010-1234-5678 단순히 위와 같이 해서는 에러코드가 생기게 됩니다. 이때는 같이 Activity Starter 를 이용하여 외부 기능을 호출하는 방식을 사용하면 됩니다위와 같이 Activity Starter 와 Clock 컴포넌트를 삽입한 후에 아래와 같이 블럭을 조립해주면 됩니다. 그리고, 웹뷰에 보여지게되는 HTML 코드는 아래와 같이 작성해주면 됩니다 01012345678

IT공부방/앱인벤터 2018. 3. 30. 17:50

웹사이트 내에서 마우스클릭 이벤트가 발생한 경우에 마우스클릭위치를 알아내는 방법입니다 이부분을 클릭하면 클릭된 위치의 X좌표와 Y좌표를 표시합니다 위와같이 하면 태그나 태그를 클릭할 경우, 클릭된 위치의 X좌표와 Y좌표값을 알 수 있습니다. 아울러, 클릭된 태그(엘리먼트)의 종류를 알아내려면 다음과 같이 하면 된다 function showCoords(event) { var targ; if (!e) { var e = window.event; } if (e.target) { targ=e.target; } else if (e.srcElement) { targ=e.srcElement; } var tname; tname = targ.tagName; alert("지금 클릭된 태그명은" + tname + " 입니다 ..

IT공부방/jQuery, ajax, java 2018. 3. 27. 10:46

앱개발 등에 필요한 무료아이콘을 구할 수 있는 사이트 http://www.flaticon.com http://www.iconfinder.com 저작권에 위배되지 않는 아이콘을 제공하는 사이트입니다무료도 있지만 유료로 판매되는 아이콘도 있습니다

IT공부방/개발환경,오픈소스 2018. 3. 27. 01:37

CSS 를 이용하여 DIV의 테두리를 위와같이 둥글게 만들고 싶을때 어떻게 하는지 설명하겠습니다. 브라우저가 Mozilla 계열이냐 비Mozilla 계열이냐에 따라 다르게 코딩하기 때문에두가지 경우를 전부 CSS에 설정해 주는것이 좋습니다. 2 18.3.5 미린 111-1111 한미정 (010-111-1111) 입구방 허니콤 (모세그린) 변경추가 40,000원 주문함 안방창 3D길이 130으로 수정 아래와 같이 하면, 상하좌위 모든 테두리가 둥글게 됩니다. -moz-border-radius: 10px; -webkit-border-radius: 10px; 각각 설정하려면 아래와 같이 사용하면 됩니다. -moz-border-radius-topleft : 10px; //좌상단 모서리-moz-border-rad..

IT공부방/HTML5, CSS 2018. 3. 26. 23:17