자바스크립트와 캔버스61 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.. 2022. 3. 8. 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에 아래와 같이 스크립트.. 2022. 3. 6. 마우스 위치 - 자바스크립트로 판별 구독자분께서 질문 주셔서 기쁜(?) 마음으로 답변도 드릴겸, 다른 분께도 알려드릴겸 글을 남깁니다 :) Q 웹브라우저 화면에서 마우스의 위치를 알고 싶습니다. 자바스크립트로 알 수 있나요? A 네, 가능합니다! 자바스크립트에서는 현재 사용하는 웹브라우저 화면의 마우스 위치를 알 수가 있습니다. 다만 염두에 두실 부분이 있는데요. 화면이 스크롤되지 않았을 때는 아무런 문제가 없습니다. 그런데 화면이 스크롤되었을 때 마우스 좌표는 2가지 계산 방법으로 분리가 됩니다. 첫째는, 마우스 스크롤과 관계없이 무조건 웹브라우저 왼쪽 상단에서부터 떨어진 거리를 측정하는 방법과 두번째는, 웹브라우저 화면을 스크롤한 거리를 감안해서 측정하는 방법이지요.. 보통 두번째 방법을 많이 사용하는데요. 페이지 좌표라고 부릅니다. .. 2022. 2. 11. 멀티채팅방 기능구현~! 과거에 세이클럽 등의 플랫폼에서 채팅을 해보신적이 있나요? 회원들이 직접 채팅방을 만들고 채팅방에 들어가 채팅도 하고 뭐 그런 게 꽤 유행이었지요. 짜투리 시간을 활용해 연습용 프로젝트를 하나 만들었습니다. 디자인 전혀 없고 단순히 기능만 있지만, 직접 방을 만들고 들어가 채팅할 수 있다는 점에서 의미가 있을것 같네요. node.js 를 이용, 소켓IO로 개발하였는데요, 응용하면 여러가지로 활용이 가능합니다. 실시간 웹의 매력에 푹 빠질것 같은 요즈음입니다. URL 은 아래와 같은데 오류도 잡고 수정도 하고 디자인도 다듬을 예정이라 ( 방 삭제 기능도 없다는.. ) 갑자기 언제 작동안될지도 모릅니다 :) http://3.38.118.214:8080/ 2021. 12. 13. jQuery 프로미스 - await 처리 최근 자바스크립트 문법에 발맞추어 jquery Ajax 도 프로미스(Promise) 방식의 코딩 패턴을 지원하는 사실을 알게 되었는데요. 몇 버전부터 지원되는지는 알 수 없으나, 3.6.0 버전에서는 확실히 지원되는 것으로 확인됩니다. 우선 결과소스를 먼저 확인시켜드리겠습니다. json 결과를 반환해줄 node.js 서버 소스를 아래와 같이 구성하고, const express=require('express'); const bodyParser = require('body-parser'); const app=express(); app.use(express.static('public')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended.. 2021. 9. 26. 캔버스와 함께하는 자바스크립트, 13번째 시간 - 3D세계의 창조 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 10. 2. 자바스크립트와 캔버스 12, 테트리스를 만들어봐-Final 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 10. 2. 자바스크립트와 캔버스 11, 테트리스를 만들어봐-7 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 10. 2. 자바스크립트와 캔버스 10, 테트리스를 만들어봐-6 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 9. 29. 자바스크립트와 캔버스 9, 테트리스를 만들어봐-5 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 9. 28. 자바스크립트와 캔버스 8, 테트리스를 만들어봐-4 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 9. 27. 자바스크립트와 캔버스 7, 테트리스를 만들어봐-3 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 https://itadventure.t.. 2019. 9. 25. 이전 1 2 3 4 5 6 다음
