본문 바로가기

JavaScript168

[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.
[JavaScript] 브라우저에서 동작하는 지뢰찾기 만들기 - 기본편 간단한 지뢰찾기 게임입니다. 아래 코드 복사하시고 IDE가 제공하는 웹서버로 실행해보시면 바로 작동합니다. 유저가 승리하는 경우는 아직 구현 못했으며 깃발 표시기능은 구현하였습니다. 감사합니다. 2023. 9. 22.
[Javascript] Phaser로 게임 만들기 (2) 안녕하세요 Phaser로 게임 만들기를 진행하겠습니다. 이전 글은 아래 링크를 참고해주세요 https://stickode.tistory.com/943 1. 게임 만들기 이전 글에서 배경, 플랫폼, 캐릭터 바운스, 충돌, 애니메이션까지 진행한데 이어서 캐릭터 움직임을 만들어보겠습니다. 먼저 create() 함수 내에 키보드 입력을 읽어올 cursor값을 추가합니다. cursors = this.input.keyboard.createCursorKeys(); 그 다음 update() 함수 내에 키보드 값을 읽어서 캐릭터를 움직이고 애니메이션을 보여주는 코드를 추가합니다. function update () { if (cursors.left.isDown) { player.setVelocityX(-160); play.. 2023. 9. 21.
[Javascript] Phaser로 게임 만들기 (1) 안녕하세요 이번 시간에는 Phaser를 사용하여 간단한 게임을 만들어보겠습니다. 1. Phaser란? Phaser는 JavaScript 또는 TypeScript로 데스크톱 및 모바일용 HTML5 게임을 만드는데 사용되는 2D 게임 프레임워크입니다. 2. Phaser 기본 구조 Phaser의 기본 구조는 다음과 같습니다. 해당 예제는 JavaScript를 사용했습니다. // phaser.js // 게임의 설정을 저장하는 객체를 생성합니다. // 게임의 유형, 화면 너비와 높이, 게임 씬(scene)을 정의하는 속성이 들어갑니다. var config = { type: Phaser.AUTO, // 게임의 유형. Phaser.AUTO는 자동으로 WebGL 또는 Canvas를 선택. width: 800, // 게.. 2023. 9. 17.
[javascript] Array.from으로 유사배열을 배열로 변환하기 안녕하세요! 오늘은 Array.from을 알아보고 예제를 통해 유사배열을 배열로 변환하고 클릭 리스너를 등록해보겠습니다. Array.from을 알아봅시다. 1. Array.from? 1. Array.from() : 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만들어 반환한다. -출처:https://developer.mozilla.org/- 2. Array.from 문법. Array.from(arrayLike[, mapFn[, thisArg]]) (파라미터 설명) arrayLike: 배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체. mapFnOptional (선택) : 배열의 모든 요소에 대해 호출할 맵.. 2023. 9. 13.
[JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 실전편 https://stickode.tistory.com/912 저번글은 기본 기능만 있는 오목이었습니다. 이번엔 여러 기능을 더 추가해보겠습니다. 게임 초기화 취소 요청 Player Black Player White 점수: 0 0 취소 요청: 0 0 취소 사용: 0 0 2023. 9. 10.
[JavaScript] SweetAlert2 라이브러리로 팝업창 만들기 안녕하세요. 이번 시간에는 SweetAlert2 라이브러리를 사용해서 웹페이지에서 예쁜 팝업창 띄우는 예제를 진행하겠습니다. 전체 코드를 먼저 보여드리고 시작하겠습니다. SUCCESS WARNING ERROR DELETE 1. 파일 불러오기 먼저 HTML 파일에서 SweetAlert2 CSS파일과 JS 파일을 인터넷에서 불러옵니다. 2. 버튼 만들고 클릭이벤트 만들기 function alertSuccess(){ Swal.fire({ icon: 'success', title: 'Success!!', text: 'Good jop!', footer: 'Your Request Succeed!' }) } function alertWarning(){ Swal.fire({ icon: 'warning', title: .. 2023. 9. 5.

티스토리툴바