본문 바로가기

JavaScript208

[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.
[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.

티스토리툴바