본문 바로가기

JavaScript228

[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.
[JavaScript] 네이버 Map API 커스텀 마커 구현하기 안녕하세요. 이번 게시글에서는 네이버 map api에서 커스텀 마커 구현하는 방법에 대해서 알려드리겠습니다. 우선 네이버 지도를 세팅하는 방법은 아래 게시글을 참고해주세요. https://stickode.tistory.com/501 [Javascript] 네이버 지도 api를 사용해서 지도 표시 및 마커 찍기 오늘은 네이버 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. 먼저 네이버 클라우드 플랫폼의 Maps 서비스 페이지에 들어가서 로그인을 한 뒤, '이용 신청하기' 버튼을 클릭합니다. stickode.tistory.com 우선 기본으로 제공되는 마커를 사용하는 방법도 있고 이미지로 마커를 나타내는 방법도 있지만 이번엔 HTML 콘텐츠를 마커 아이콘으로 사용할 수 있습니다. // 마커 .. 2023. 10. 6.
[JavaScript] 카카오 Map API 키워드로 장소검색하기 안녕하세요 이번 게시글에서는 카카오 Map API를 사용해 키워드로 장소 검색할 수 있는 기능을 구현해보겠습니다. 카카오 지도를 띄우는 방법은 아래의 게시글을 참고해주세요. https://stickode.tistory.com/447 [Javascript] Kakao 지도 Javascript API 를 사용해서 지도 표시 및 마커 찍기 안녕하세요 오늘은 카카오 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. https://apis.map.kakao.com/web/guide/ Kakao 지도 API 페이지에 들어가서 안드로이드, 웹, iOS 중 웹을 선택합니다. Kak stickode.tistory.com 우선 키워드를 검색할 수 있는 from태그를 만들어 줍니다. 키워드 : 검색하기 장소 .. 2023. 9. 27.

티스토리툴바