본문 바로가기

JavaScript227

[JavaScript] 마우스 이펙트 만들기 웹 서핑을 하다 보면 다양한 웹사이트와 블로그에서 창의적이고 매력적인 마우스 이펙트를 종종 보게 됩니다. 이러한 이펙트는 웹사이트에 생동감을 더하고, 사용자 경험을 향상시키는 데 큰 역할을 합니다. 오늘은 바로 그런 마우스 이펙트를 자바스크립트로 만들어 볼 것입니다. 마우스 이펙트는 웹사이트의 인터페이스에 독특한 터치를 추가하며, 사용자의 상호작용을 더 재미있고 몰입감 있게 만듭니다. 예를 들어, 마우스 커서를 따라 움직이는 애니메이션 요소, 클릭 시 흩어지는 효과, 마우스의 움직임에 반응하는 배경 등 다양한 형태가 있습니다. 자바스크립트는 이러한 동적인 이펙트를 생성하는 데 아주 적합한 언어입니다. HTML과 CSS와 함께 사용하여, 웹 페이지에 독특하고 상호작용적인 요소를 쉽게 추가할 수 있습니다. .. 2024. 2. 25.
[JavaScript] OpenWeatherMap API 사용하여 입력한 도시의 향후 5일 동안의 날씨 예보 정보 가져오기 안녕하세요 오늘은 OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드를 만들어보겠습니다. OpenWeatherMap API 를 사용하려면 https://openweathermap.org/ 에서 무료로 api 키를 발급받아야 합니다. api키를 발급 받은 후 index.html 파일에 다음과 같이 코드를 작성해줍니다. 5일 날씨 예보 예보 조회 그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다. async function fetchForecast() { let city = document.getElementById('city-input').value.trim(); if (city) { let apiKey = '발급받은 자신의 API 키'; // OpenWeatherMap .. 2024. 2. 21.
[JavaScript] OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드 만들기 안녕하세요 오늘은 OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드를 만들어보겠습니다. OpenWeatherMap API 를 사용하려면 https://openweathermap.org/ 에서 무료로 api 키를 발급받아야 합니다. api키를 발급 받은 후 index.html 파일에 다음과 같이 코드를 작성해줍니다. 날씨 정보 대시보드 날씨 조회 그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다. async function fetchWeather() { console.log('fetchWeather') let city = document.getElementById('city-input').value.trim(); if (city) { let apiKey = '발급받은 내.. 2024. 2. 12.
[JavaScript] 블록 익스플로러에 비트코인 조회 기능 추가하기 https://stickode.tistory.com/1016 https://stickode.tistory.com/1023 이전 게시글들에 이어 이더리움 익스플로러에 비트코인 조회 기능을 추가해서 여러 블록체인을 조회할 수 있는 블록익스플로러로 확장해보겠습니다. infura key 같은 경우는 위 게시글을 참고하시면 쉽게 하실 수 있습니다. 여기부터는 프로젝트 파일 구조 및 코드입니다 index.html Cryptocurrency Block Explorer Ethereum Block Lookup Get Ethereum Block Ethereum Transaction and Account Lookup Get Transaction Get Balance Get Current Ethereum Gas Price B.. 2024. 1. 9.
[JavaScript] DeepLink 사용해서 유튜브 앱 열기 안녕하세요. 오늘은 모바일 브라우저에서 Deeplink를 이용해 유튜브 앱을 열어보겠습니다. 유튜브외에도 다른 앱들도 가능하며, 직접 제작한 앱도 Intent-filter 설정으로 실행이 가능합니다. html 파일을 만들고 코드를 작성하겠습니다. DOCTYPE html> Open YouTube App 유튜브 앱 열기 document.addEventListener('DOMContentLoaded', function() { document.getElementById('openYouTubeButton').addEventListener('click', function() { openYouTubeApp(); }); function openYouTubeApp() { // 유튜브 앱을 열기 위한 Deeplink va.. 2024. 1. 6.
[JavaScript] 이더리움 익스플로러에 조회 기능 추가하기 저번 게시글(https://stickode.tistory.com/1016)에 이어서 오늘은 이더리움 블록익스플로러에 트랜잭션과 계정의 잔액, 그리고 현재 가스 가격을 조회하는 기능을 추가했습니다. 프로젝트 구조 코드 app.js // app.js const express = require('express'); // Express 모듈 불러오기 const app = express(); // Express 애플리케이션 생성 const { Web3 } = require('web3'); // Web3 모듈 불러오기 const web3 = new Web3('https://mainnet.infura.io/v3/발급받은 키'); // Infura를 통해 이더리움 메인넷에 연결 // BigInt 값을 문자열로 변환하여.. 2024. 1. 4.
[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.

티스토리툴바