huiyu's blog

canvas로 생성한 이미지의 경우 데스크탑에서 오른쪽버튼 누르면 이미지로 저장할 수 있었는데. .모바일에선 이미지로 저장할 수 없었다. 화면자체에 Image로 표시해주기 위해 아래같이 코드사용. var myImage = document.createElement('img'); myImage.crossOrigin="*"; myImage.width=760; myImage.height=760; myImage.src = canvas.toDataURL('image/jpg'); canvas의 toDataURL()을 사용하게 되면 현재 캔버스의 url을 갖고오게 되고, 이미지의 src로 설정하면 Image로 나오게된다. 그런데 테스트시 계속 아래같이 크로스도메인 이슈가 나오게 된다. dynamicrunners.htm..

HTML문서 head의 meta정보 설정을 통해 할 수 있다. /*제목*/ /*url*/ /*이미지 */ /*부가설명*/ https://brunch.co.kr/@jiyeonsongofnt/11 링크 붙여넣을 때 보이는 이미지는 어디서 오는 것일까? 들어가기 전에 이 글은 링크의 미리보기 제목, 설명, 이미지의 정체에 대해서 알고 싶은 마케터들을 위해 유용한 내용을 담고 있습니다. 오늘날 페이스북이나, 네이버 블로그, 카카오톡 등에서 어떤 링크에 대한 미리보기 제목, 설명, 이미지를 제공하고 있습니다. 링크를 붙여넣을 때 생기는 미리보기 제목, 설명, 이미지는 도대체 어디에서 오는 것일까요? H brunch.co.kr

이번에 새로 간단한 프로젝트 진행하면서 참고한 웹페이지들 -> 정리할때 참고 HTML5 javascript - canvas에 이미지를 그린다 - 그린 이미지 위에 text를 그린 후 이미지로 추출 - 입력할 text data는 구글 스프레드 시트에서부터 얻기(구글 스프레드시트 api활용) - 구글 데이터만큼 위의 canvas를 생성 화면에 그려준다. 끝! java script - function https://www.everdevel.com/JavaScript/return/ everdevel 웹 입문 사이트 에버디벨 - HTML, CSS, JavaScript, jQuery, MySQL ,PHP를 다룹니다. www.everdevel.com https://www.codingfactory.net/10386 J..

1. HTTP란? -HyperText Transfer Protocal, WWW상에서 서버와 클라이언트 간에 데이터를 어떻게 주고 받을 수 있는지를 정의한 통신 규약 -Hypertext란 개별 정보들을 링크를 이용해 유기적으로 연결시킴으로써 비연속적, 비선형적 체계로 구성한 전자적 텍스트 -http://ko.wikipedia.org/wiki/HTTP 2. HTTP 모듈 - Node.js는 HTTP모듈을 기본 내장 모듈로 제공, HTTP 기반 웹 어플리케이션을 쉽게 개발할 수 있게 해줌. 3. HTTP Server - 기본소스1234567var http = require('http');http.createServer(function (req, res) { res.writeHead(200, {'Content-..

1. typeof12345678910//1. typeof를 통해 데이터 타입 확인console.log('number type : ', typeof(100));console.log('string type : ', typeof('100'));console.log('boolean type : ', typeof(true));console.log('object type : ', typeof({}));console.log('array type : ', typeof([]));console.log('function type : ', typeof(function(){}));console.log('null type : ', typeof(null));console.log('undefined type : ', typeof(a..

1. JRE설치http://www.oracle.com/technetwork/java/javase/downloads/index.html 2. 이클립스 -NTS 설치http://sourceforge.net/projects/nodeclipse/files/Enide-Studio/ 3.샘플 프로젝트 구동 -[File]-[New]-[Node Project] 클릭 - 'HelloWorld' 입력 후 [Finish] - hello-world-server.js를 확인해 보면 http 서버를 구동시키는 파일이라는 것을 알 수 있다. - 'hello-world-server.js' 오른쪽 버튼 [Run As]-[Node Application]선택 - 아래와 같이 실행됨을 확인할 수 있다. 웹 브라우저에서 'http://127..

1. Node.js설치 - 'http://nodejs.org' 접속 후 'DOWNLOADS' 클릭 - OS에 맞는 설치파일 다운로드 후 설치파일 실행, 'Next' 클릭 - 기본값으로 두고 'Next' 클릭한 후 설치를 진행한다. 2. Node REPL - 보통 .Node.js를 '백엔트 자바스크립트'라고 말하지만 이것만으로는 이해하기가 어렵다. Node.js의 실체가 무엇인지 확인하는 최고의 방법은 NODE REPL(Read-Evaluate-Print-Loop)을 사용함으로써 Node.js의 실행환경을 경험해 보는 것이다. - Node.js는 펄, 파이썬, 루비 등과 같이 그 자체가 서버이며 실행 환경을 제공하고 있다. Node REPL을 통해 작성한 자바스크립트 코드를 직접 돌려보며 테스트를 할 수 ..

1. 자바스크립트 - 웹 브라우저에서 실행되는 스크립트 언어, HTML로 작성된 웹 페이지에 함수 형태로 작성되는 언어 - 해석형 언어 : 컴파일할 필요 없이 소스 코드 자체가 실행 시에 인터프리터에 의해 해석되어지는 언어 2. V8 자바스크립트 엔진 - 구글에 의해 C++로 개발된 오픈 소스 자바스크립트 엔진, 크롬에 내장되어 공개 - V8은 기존의 컴파일된 바이트코드를 실행시키거나 인터프리터로 해석하는 대신, 자바스크립트를 컴파일하여 네이티브 머신 코드로 변경한 후에 실행할 수 있게 해줌. - Garbage collection 이용 : 필요 없는 객체는 수집하여 버려 V8의 고성능에 이바지 - 독립적으로 실행 가능 - 이를 개발 가능하게 한 플랫폼이 Node.js 3. Node.js - 이벤트 주도 ..

1. 웹프로그래밍 기초- 웹 어플리케이션 : 웹 기반 어플리케이션- 웹 브라우저에 서비스를 제공하기 위해 필요로 하는 구성 요소들 구성 요소 역할 주요 제품 웹 서버 - 웹브라우저의 요청을 받아서 결과를 웹브라우저에 전송, 만약 처리가 필요하면 어플리케이션 서버와 프로그램을 직접 호출 - 정적인 HTML, 이미지, CSS,Java Script 제공시 사용 아피치, nginx 등 어플리케이션 서버 게시글 목록, 로그인 처리와 같은 기능을 실행, 그 결과를 웹 서버에 전달 Tomcat, JBoss 데이터베이스 웹 어플리케이션이 필요로 하는 데이터 저장 Oracle, MySQL, MSSQL 웹 브라우저 웹 서버에 서비스 실행 요청, 웹 서버의 처리결과를 보여준다 인터넷, 구글크롬, 파이어 폭스 - 정적인 HT..