본문 바로가기

JavaScript167

[JavaScript] 이더리움 블록 조회하는 간단한 사이트 만들기 오늘은 이더리움의 블록을 조회하는 간단한 사이트를 만들어보겠습니다. 이번 실습에서는 서버로 node.js를 사용하기 때문에, node.js가 설치 되어 있어야 합니다. 인퓨라(https://app.infura.io/dashboard)로 이동하셔서 로그인 하신 후 API key를 발급받으셔야합니다. web3 api으로 선택하셔서 Ethereum으로 발급된 key를 복사해주세요. 발급받을 때 형식은 'https://mainnet.infura.io/v3/~~~~~~'이라면 정상입니다. 여기부터는 프로젝트 파일 구조 및 코드입니다. index.html Ethereum Block Explorer Get Block app.js // app.js const express = require('express'); con.. 2023. 12. 26.
[JavaScript] Phaser 에서 마우스 클릭으로 캐릭터 이동하기 안녕하세요 이번 시간에는 Phaser로 만든 게임에서 마우스 클릭한 위치로 캐릭터 이동하는 예제를 진행하겠습니다. Phaser로 간단한 게임을 만들고 싶으시면 아래 링크를 참고해주세요 https://stickode.tistory.com/943 1. 전체 코드 전체 코드입니다. 2. 결과 2023. 11. 27.
[JavaScript] ChatGPT API로 간단한 챗봇 만들기 안녕하세요. 이번 시간에는 ChatGPT API를 사용해서 간단한 챗봇을 만들어보겠습니다. 1. ChatGPT API 키 받아오기 먼저 ChatGPT API 키를 받아야합니다. OpenAI 에 회원가입 또는 로그인합니다. https://platform.openai.com/ 그리고 좌측 메뉴에서 API keys 버튼을 클릭합니다. Create new sceret key 를 눌러 API 키를 생성합니다. API 키는 생성됐을때 한번만 볼 수 있으니 꼭 따로 저장해두세요. 2. 전체 코드 전체 코드는 다음과 같습니다. 해당 예제에서는 질문에 프롬프트를 덧붙여서 진행했습니다. 앞에서 받은 API 키를 api_key 변수에 저장한뒤 실행해주세요. chatGPT API 무엇이든 질문해보세요 !! 입력 3. 결과 2023. 11. 17.
[JavaScript] Phaser Sprite Player 캐릭터 바로 위에 nickName 가운데 정렬로 띄워주기 안녕하세요 오늘은 Phaser 간단함 게임 예제를 통해 Palyer Sprite 캐릭터 바로 위에 NickName을 가운데 정렬로 위치시켜주는 방법에 대해 알려주겠습니다. 이전 phaser로 게임만들기 (2) 예제를 토대로 코드를 수정했습니다. 참고하실 분은 이전 예제 참고해주세요 https://stickode.tistory.com/944 [Javascript] Phaser로 게임 만들기 (2) 안녕하세요 Phaser로 게임 만들기를 진행하겠습니다. 이전 글은 아래 링크를 참고해주세요 https://stickode.tistory.com/943 1. 게임 만들기 이전 글에서 배경, 플랫폼, 캐릭터 바운스, 충돌, 애니메이션까 stickode.tistory.com 위 기능을 구현하기 위해 필요한 파일은 다음.. 2023. 11. 12.
[JavaScript] Fabric.js 를 사용해서 화이트보드 만들기 안녕하세요. 이번 시간에는 Fabric.js 라는 라이브러리를 사용해서 화이트보드를 만들어보겠습니다. 1. Fabric.js 란? Fabric.js는 HTML5 캔버스(Canvas)를 쉽게 조작하고 상호작용할 수 있도록 도와주는 오픈 소스 자바스크립트 라이브러리입니다. 더 자세히 알고 싶으시면 아래 공식홈페이지를 참고해주세요. http://fabricjs.com/ Fabric.js Javascript Canvas Library Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes or complex shapes consisting of hundreds or thousands .. 2023. 11. 8.
[javascript] 마우스 이벤트를 이용하여 옮겨다니는 포스트잇 만들기 안녕하세요! 이전에 함께 마우스 이벤트에는 어떤 종류가 있는지 알아본 적이 있었습니다. 혹시 기억나지않으신다면 이 포스트를 참고 바랍니다. ( [Javascript] 마우스 이벤트 ) 오늘은 이 마우스 이벤트들을 사용하여 옮겨다니는 포스트잇을 만들어보겠습니다. mouse_event.html 클릭 후 드래그 mouse_event.css { margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #fff; margin: 60px 550px; padding: 0; overflow:hidden; } .wrapper{ position: fixed; left:0; top:0; bottom:0; right: 0; background: #f2f.. 2023. 10. 29.
[JavaScript] Phaser 객체에 애니메이션 적용하기 안녕하세요 이번에는 Phaser 객체에 애니메이션을 적용해보겠습니다. Phaser로 간단한 게임 만들고 싶으시면 아래 링크를 참고해주세요. https://stickode.tistory.com/944 [Javascript] Phaser로 게임 만들기 (2) 안녕하세요 Phaser로 게임 만들기를 진행하겠습니다. 이전 글은 아래 링크를 참고해주세요 https://stickode.tistory.com/943 1. 게임 만들기 이전 글에서 배경, 플랫폼, 캐릭터 바운스, 충돌, 애니메이션까 stickode.tistory.com 1. 캐릭터 애니메이션에 사용할 이미지 가져오기 캐릭터 애니메이션에 사용할 이미지를 가져옵니다. 예제에서는 한 프레임 당 32X64 픽셀의 이미지를 가져왔습니다. 이미지는 다음과 같습니다.. 2023. 10. 24.
[javascript] 분할 슬라이드 만들기 안녕하세요 오늘은 가로나 세로가 아니라 화면이 따로 움직이는 분할 슬라이드를 함께 만들어보겠습니다. 아래는 완성 시 모습입니다. 버튼을 누를 때마다 서로 다른 방향으로 슬라이드가 움직이는 것을 확인할 수 있습니다. 아래는 전체 코드입니다. splitSlider.html 판다 판다 ? 이름도 귀여워 고양이 남의 집 고양이 귀여워 작은 새 작고 소중해 멋진 개 인간의 좋은 친구. splitSlider.css /* 전체 페이지 설정 */ body { height: 100vh; /* 화면 높이를 전체 뷰포트 높이로 설정 */ margin: 0; /* 바깥 여백 제거 */ padding: 0; /* 안쪽 여백 제거 */ } /* 슬라이더 컨테이너 설정 */ .slider-container { position: r.. 2023. 10. 18.
[JavaScript]싱글톤 패턴 구현 안녕하세요 이번시간에는 디자인 패턴 중 하나인 싱글톤 패턴을 자바스크립트에서 구현해보겠습니다. 1. 싱글턴 패턴이란? 싱글턴 패턴은 소프트웨어 디자인 패턴 중 하나로, 클래스의 인스턴스가 하나만 생성되도록 보장하고, 그 인스턴스에 쉽게 접근할 수 있도록 하는 패턴입니다. 2. 자바스크립트에서의 싱글톤 패턴 구현 구현은 DB커넥터를 싱글톤 패턴을 사용하는 2.1 CommonJS // dbConnector.js const mysql = require('mysql'); // MySQL 라이브러리를 가져옵니다. require("dotenv").config(); // 환경 변수를 로드합니다. let instance = null; // 싱글턴 인스턴스를 저장할 변수 class DbConnector { constru.. 2023. 10. 16.

티스토리툴바