동고 팔자 상팔자

자바스크립트 키 동시입력 이벤트는 keydown과 keyup 이벤트 조합으로 구현할 수 있음 키 입력 여부를 boolean으로 관리하면 됨 window.addEventListener("keydown", keysPressed, false); window.addEventListener("keyup", keysReleased, false); var keys = []; function keysPressed(e) { keys[e.keyCode] = true; // Ctrl + Space if (keys[17] && keys[32]) { console.log("Ctrl + Space"); e.preventDefault(); // prevent default browser behavior } } function ke..

우분투에서 갑자기 의존성이 깨져서 api-get upgrade를 했더니 오류가 발생 Reading package lists... Done Building dependency tree Reading state information... Done You might want to run 'apt --fix-broken install' to correct these. The following packages have unmet dependencies: mariadb-server : Depends: mariadb-server-10.3 (>= 1:10.3.29-0ubuntu0.20.04.1) but 1:10.3.28+maria~focal is installed E: Unmet dependencies. Try 'ap..

1. 웹팩이란 웹팩은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. 웹팩이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다. 2. 웹팩을 쓰면 뭐가 좋을까? 2-1) 모듈 관리 웹팩을 쓰면 모듈 관리가 쉽다. // math1.js var num = 10; function printNum() { console.log(num); } // math2.js var num = 20; function printNum() ..

html2canvas를 사용하여 웹 화면 캡쳐를 해보자 html2canvas는 자바스크립트로 화면을 캡쳐할 수 있는 라이브러리다. element를 캔버스로 변환해준다. 화면을 PDF로 내보낼때도 사용되는데, PDF로 내보내기는 '자바스크립트로 PDF 내보내기'를 참고바란다. 그리고 html2canvas가 어떻게 화면을 캡처하는지 궁금하다면 'html2canvas는 어떻게 캔버스를 그릴까' 포스트를 참고바란다. 화면을 캡쳐하고, 클립보드에 복사도 해보자. 사용법은 굉장히 간단하다. 설치 (직접 js 다운받아서 사용해도 됨) Install NPM npm install --save html2canvas Install Yarn yarn add html2canvas 라이브러리 임포트 import html2canv..

반복문에서 비동기 처리를 동기적으로 처리해보자. 아래처럼 메뉴를 주문받으면 제조 시간이 랜덤으로 0~4초가 걸리는 함수가 있다. 여러 건의 주문을 받았을 때, 주문을 동기 처리하여 결과를 한 번에 반환하려면 어떻게 해야 할까? const order = menu => { const time = Math.floor(Math.random() * 4) * 100 const result = `${menu}, ${time}` console.log("order", result) return new Promise(resolve => setTimeout(() => resolve(result), time)) } const menus = [ 'americano', 'latte', 'cake', 'milk' ] 아래처럼 fo..

자바스크립트의 스위치(swtich)문을 객체 리터럴(object literal)을 이용하여 구현해보자. 객체 리터럴로 스위치문을 대체하기 위해서는 먼저 ES6의 객체 리터럴 확장 기능을 알아야한다. 먼저 ES6의 객체 리터럴을 정리하고 스위치문을 구현해보자. 1) ES6 객체 리터럴 확장 기능 1-1) 객체 생성 시, 속성을 축약할 수 있다. 객체 생성 시, 변수만 설정해주면 된다. ES6 이전에는 객체 리터럴이 key, value 쌍이었다. 예를 들어 let name = 'ES5' let stauts = "active" let server = { no: 1, name: name, status: stauts, } console.log(server) { no: 1, name: 'ES5', status: '..

지난 포스트에 이어 이번 포스트에서는 게임 준비, 게임 오버 및 시간 텍스트를 출력을 다룹니다. 전체 목차 Phaser 및 플레이어 설정 시작, 종료 및 텍스트 설정 (현재 페이지) 적(총알) 설정 및 충돌 설정 1. 텍스트 출력 간단한 텍스트 출력 예제입니다. (10, 10) 위치에 "TEXT"를 출력합니다. 글꼴과 색상은 font, fill로 설정합니다. this.textTime = this.add.text(10, 10, "TEXT", { font: "25px Arial", fill: "#FFFFFF" }); 더 자세한 설정 방법은 아래를 참고하세요. https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html Phaser 3 API..

Phaser를 이용하여 HTML5 게임을 개발해보자 Phaser를 이용한 HTML5 게임 개발하기입니다. 자세한 원리는 글에 포함하지 않았으며 코딩을 처음 접하는 분들을 위해 나름(?) 친절하게 작성하였습니다. 또한 외부 이미지 리소스를 사용하지 않고 오로지 코드로만 구현합니다. 코드를 단순히 복사하기보다는 단계별로 코드를 따라 하면서 사용 방법을 익히고 응용하면 좋을 것 같습니다. 전체 목차 Phaser 및 플레이어 설정 (현재 페이지) 시작, 종료 및 텍스트 설정 적(총알) 설정 및 충돌 설정 1. 준비 개발을 위해 IDE를 설치합니다. 여러 IDE가 있지만 VSCODE를 추천합니다. 2. Phaser 세팅 & 게임 영역 그리기 아래와 같이 html 파일을 생성 후 아래와 같이 작성합니다. 총알 피하..

Phaser : HTML5 게임을 쉽게 만들도록 도와주는 게임 프레임워크 직접 캔버스를 이용해서 만들수도 있지만 자동차 만드는데 굳이 바퀴까지 직접 만들필요가 있나? 원리만 알고 잘 만들어진 도구를 사용하는게 좋다고 생각한다. 수 많은 게임 프레임워크(혹은 엔진, 툴)들이 많은데 이를 활용하면 훨씬 효율적으로 게임을 개발할 수 있다. 위키에서 게임 엔진 목록 검색했더니 엄청 나온다. https://en.wikipedia.org/wiki/List_of_game_engines List of game engines - Wikipedia From Wikipedia, the free encyclopedia Jump to navigation Jump to search Wikipedia list article Gam..

CORS Anywhere와 Heroku를 이용하여 CORS 프록시 서버를 구축하는 방법 Front에서 공공 API와 같이 교차 URL을 호출할 때 CORS 에러를 접하게 되는데, 이것 때문에 프록시 서버를 직접 구축(혹은 이미 사용하고 있는 서버를 이용)하는 게 여간 귀찮을 때가 있다. 간단한 사이드 프로젝트라면 더욱 그럴 거고. 이럴 때 CORS Anywhere와 Heroku를 이용하여 아주 간단히 프록시 서버를 구축하여 사용하면 편하다. 1. CORS Anywhere CORS Anywhere는 프록시 된 요청에 CORS 헤더를 추가하는 NodeJS 프록시다. MIT 라이선스로 자유롭게 사용할 수 있다. whitelist, blacklist, rate limit 등의 다양한 설정도 간단하게 할 수 있다..

VSCODE WEB 사용 미국 기준으로 10월 20일에 vscode web이 공개되었네요. 이제 vscode를 설치하지 않고 브라우저에서 vscode를 사용할 수 있습니다. vscode.dev(!) 포스트와 VS Code for the Web: vscode.dev를 보고 직접 사용해 보았습니다. 멋진 기능이 있거나 팁이 있으면 공유해주세요😄 1. VSCODE 시작 vscode.dev로 접속하면 바로 vscode가 열립니다. 2. Github 연동 Github와 연동해서 바로 사용할 수 있다고 하네요. repository 생성 후, 주소 앞에 접두사로 "vscode.dev"를 붙이기만 하면 됩니다. Github 로그인을 요청하는데 로그인하면 repository을 불러옵니다. 예) https://github..

기술 블로그 모음 사이트 아래 사이트에서 모아서 다 볼수 있긴한데 없는 블로그들도 있어서 기록한다. https://www.foobar.kr/ 기술 블로그 모음 - FooBar 기술 블로그 컨텐츠 구독 및 검색 www.foobar.kr 29CM : https://medium.com/29cm 44BITS : https://www.44bits.io/ko 농심데이타시스템 : https://tech.cloud.nongshim.co.kr/techblog/ 당근마켓 : https://medium.com/daangn 드라마앤컴퍼니 : https://blog.dramancompany.com/ 데일리호텔 : https://dailyhotel.io/ 레진 : https://tech.lezhin.com/ 렌딧 : https:..

야후 파이낸스에서 주식 데이터 수집에 이어 이번엔 구글 파이낸스에서 주식 데이터를 수집해봅시다. 아래는 삼성전자 구글 파이낸스 URL인데, 주소를 보면 뒤가 "[티커]:KRX (코덱스는 KOSDAQ)" 형식으로 붙는 걸 알 수 있습니다. 여기에 티커만 바꿔주면서 종목을 조회할 겁니다. https://www.google.com/finance/quote/005930:KRX 삼성전자(005930) 주가 및 뉴스 - Google Finance 최근 삼성전자(005930)의 실시간 시세, 이전 실적, 차트를 비롯한 금융 정보를 확인하여 충분한 정보를 바탕으로 주식 거래와 투자를 결정하세요. www.google.com 위 주소에서 주가와 날짜를 파싱해야합니다. 위에 찍힌 가격이 데이터를 수집하는 날로 가정하고 해도..

야후 파이낸스에서 주식 데이터를 수집하는 방법입니다. 야후 파이낸스 종목 Summary 페이지에서 데이터를 수집해도 되지만, 테스트해보니 야후는 종목에 따라 데이터가 갱신되는 시간이 달랐습니다. (예를 들어 삼성전자는 어제 데이터, 현대차는 오늘 데이터 이런 식) 그래서 종목 메인 페이지에 나오는 수치가 언제 데이터인지 모르기때문에 아래처럼 종목 history 영역에서 조회하여 날짜별 데이터를 확인하는게 좋습니다. 아래를 예로 들면 맨 위 행에 있는 데이터와 날짜를 함께 파싱하면 가장 최근 데이터를 얻을 수 있다. 데이터 수집은 너무 빈번하게 요청하면 차단 당할 수 있기 때문에 적절하게 간격을 두고 조회해야 합니다. 저는 1초 간격을 두었습니다. 헤더는 적절히 세팅해줍니다. 결과 >>>>> 코스피 {'d..

목록 확인, 등록/수정 ubuntu@first-instance:~$ crontab -l ubuntu@first-instance:~$ crontab -e 수행 로그 확인 ubuntu@first-instance:~$ cat /var/log/syslog | grep cron Jul 10 00:17:01 first-instance CRON[1673267]: (root) CMD ( cd / && run-parts --report /etc/cron.hourly) Jul 10 01:17:01 first-instance CRON[1673679]: (root) CMD ( cd / && run-parts --report /etc/cron.hourly) 주기 * * * * * 분(0-59) 시간(0-23) 일(1-31) 월..