본문 바로가기

자바스크립트와 캔버스

Node.js - Part 11-6. 그림파일도 문제 없어요 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express ) 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com 파일 모듈에서 잠깐 설명 드렸는데요. 그림, 영상, 이미지 등의 파일은 특별한 처리가 필요해 복잡하다고 했었지요? express 는 그 부분도 문제 없습니다. 정적 웹페이지에서는 자동 처리가 되거든요. 이 참에 그림 파일을 업로드하는 부분도 알아보겠습니다. .. 더보기
Node.js - Part 11-5. 스크립트의 이해 자, 이제 4줄짜리 express 기본 소스가 어떤 구조인지 살펴 보도록 하겠습니다. Node.js 스크립트는 항상 첫 줄부터 순차진행됩니다. 첫째 줄 스크립트는 아래와 같은데요. const express=require('express'); 답습하는 의미에서 다시 살펴보겠습니다. const 는 한번 대입하면 변하지 않는 상수를 정의하는 선언문이고 const express 는 상수의 이름을 express 로 지어주겠다는 의미이며, 그리고 express = require('express');는 express 모듈을 불러와 express 에 넣어주겠다는 의미입니다. 등호기호 = 는 동일하다는 의미가 아니라 오른쪽을 복사해서 왼쪽에 넣는 의미였지요. express 도 결국은 모듈이기 때문에 이와 같은 방법을 사.. 더보기
http 웹페이지에서 카메라, VR 제어 권한 주기 크롬브라우저의 업데이트로 인해 http 주소에서는 카메라 제어나 휴대폰의 VR기울기 센서를 제어할 수 없도록 변경되었었는데요. 기본적으로 https 주소에서만 카메라나 VR기울기센서를 사용할 수 있습니다. 그렇다고 https 인증서를 구매해서 적용하자니 돈이 들고 해서 나중에 기회가 되면 알아볼까 했었는데요. 오늘 드디어 http 주소에서도 카메라, VR을 제어할 수 있는 방법을 알아내어 공유합니다! 단, 이 방법은 사용자 본인이 각각 적용할 URL을 직접 입력해야 작동되는데요. 먼저 아래 URL 에 접속하신 다음에, chrome://flags/#unsafely-treat-insecure-origin-as-secure Disabled 선택상자를 클릭, Enabled 로 바꿔 주세요 그리고 제어를 허용할 .. 더보기
Node.js - Part 11-4. 단 4줄로 정적 웹사이트 만들기 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express ) 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com Part11-3은 중요도가 그리 높지는 않아 건너 뛰었습니다 :) 이전 Part 에서 파일 모듈로 정적인 웹사이트를 만드는 부분을 다뤄봤었는데요. express.js 를 이용하면 단 4줄로 정적인 웹사이트를 만들 수 있어 살펴보겠습니다. 스크립트를 입력해볼 .. 더보기
Node.js - Part 11-1. express 프레임워크 소개 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com Express! 이삿짐 센터일까요? Node.js 에서는 노우! 홈페이지 틀을 구축해주는 성능 좋은 도구입니다. 이런 도구를 프레임워크라고 부르지요. 지난 파트에서는 fs파일모듈믈 이용하여 다소 원시적(?)인 웹서비스를 제공하는 방법을 살펴보았는데요. 위 방법의 장점은 반응속도가.. 더보기
Node.js - Part 10-2. 페이지는 계속 추가할 수 있어요 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com 앞장에서 puppy.html 파일을 읽어서 사용자에게 보여주는 기능을 만들었지요? 이제 파일 시스템이 한번 마련된 이상 웹페이지는 쉽게 쉽게 추가 가능합니다. 예를 들면, 새해 축하 메시지 페이지를 꾸밀 수도 있는데요. 신년 축하 인사페이지를 꾸며보도록 할까요? 앞에서 puppy.. 더보기
Node.js - Part10-1. 파일 읽어 뿌려주자(1) 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com Part 10. 접속주소마다 다른 화면 보여주기 앞의 예제는 오로지 하나의 고정 페이지만 보여주는 서비스입니다. 만일 접속 URL 마다 다양한 페이지를 보여 주고 싶다면 어떻게 해야 할까요? 변화 없는 단순한 페이지를 보여주기 위해서라면 굳이 Node.js에 아래와 같이 스크립트.. 더보기
마우스 위치 - 자바스크립트로 판별 구독자분께서 질문 주셔서 기쁜(?) 마음으로 답변도 드릴겸, 다른 분께도 알려드릴겸 글을 남깁니다 :) Q 웹브라우저 화면에서 마우스의 위치를 알고 싶습니다. 자바스크립트로 알 수 있나요? A 네, 가능합니다! 자바스크립트에서는 현재 사용하는 웹브라우저 화면의 마우스 위치를 알 수가 있습니다. 다만 염두에 두실 부분이 있는데요. 화면이 스크롤되지 않았을 때는 아무런 문제가 없습니다. 그런데 화면이 스크롤되었을 때 마우스 좌표는 2가지 계산 방법으로 분리가 됩니다. 첫째는, 마우스 스크롤과 관계없이 무조건 웹브라우저 왼쪽 상단에서부터 떨어진 거리를 측정하는 방법과 두번째는, 웹브라우저 화면을 스크롤한 거리를 감안해서 측정하는 방법이지요.. 보통 두번째 방법을 많이 사용하는데요. 페이지 좌표라고 부릅니다. .. 더보기