JavaScript

개요 Phaser는 HTML5 Game Framework로 이를 사용하면 우리는 JavaScript를 사용하여 Game을 쉽게 개발할 수 있습니다. 하지만 하나의 Game이 APP으로써 공통적인 요소로 사용자 관리(로그인), 게임자료 관리, (필요에 따라) 실시간 통신 등이 추가로 필요합니다. Angular와 같은 Web Framework를 사용하면 이러한 공통 요소를 좀 더 손쉽게 Game에 추가할 수 있습니다. 이번 포스트에서는 우선 Angular 프로젝트에서 Phaser를 사용할 수 있도록 설정해보도록 하겠습니다. 환경설정 Angular 우선 다음 링크를 참고하여 Angular를 사용할 수 있도록 프로젝트를 생성합니다. Angular 개발환경 설정하기 Angular 시작하기 Phaser 3 설정 P..

개요 웹브라우저의 Windows 객체에가 제공하는 setTimeout과 setInterval 메서드를 활용하면 지정된 시간 후에 함수를 실행하거나 일정한 시간 간격에 따라 함수를 반복 실행할 수 있습니다. setTimeout - 지연 시간 후, 함수 실행 setTimeout 메서드를 사용하면 일정 시간이 흐른 후, 함수를 호출(실행) 하도록 할 수 있습니다. 사용예는 다음과 같습니다. setTimeout(function() { console.log(new Data()); }, 3000); 이 코드를 실행하면 3초 후에 현재 날짜가 콘솔에 표시됩니다. setTimeout() 메서드의 첫 번째 입력 파라메터는 ‘실행하고자 하는 함수’, 두 번째 입력 파라메터는 ‘지연시간’ 을 밀리초 단위로 지정합니다.또한 ..

JavaScript에서 발생하는 오류(Error)의 종류 일반적으로 프로그래밍 중 발생할 수 있는 오류는 3가지가 있습니다. 1. 구문 오류(Syntax Error) JavaScript가 요구하는 규칙대로 프로그램을 작성하지 않을 경우 발생합니다. 예를 들면 다음과 같은 코드입니다. ▼ 구문 오류 발생 예제 console.log("안녕하세요" consoe.log 호출 시 )를 누락하였습니다. 따라서 코드를 실행해보면 SyntaxError: missing ) after argument list라는 오류 문구를 출력합니다. 2. 실행시간 오류(Runtime Error, Exception) 이런 종류의 오류는 프로그램을 실행할 때 발생합니다. 다시 말해 실행(평가)해보기 전까지는 그곳에 오류가 있는지 알 수 ..

개요 참고 : HTML Snippets for Twitter Boostrap framework : Bootsnipp.com 모바일 환경에서 편리하게 페이지 내에서 이동할 수 있도록, 오른쪽 하단에 back to top 버튼을 추가하였습니다. 화면이 아래로 스크롤되면 왼쪽 하단에 표시되며 누르면 스크롤되어 페이지 상단으로 이동하는 기능입니다. back to top 버튼 추가 작업은 티스토리의 스킨편집창에서 진행합니다. 단순한 기능이지만 조금더 멋스럽고 자연스럽게 화면을 스크롤해주고 툴팁이 사라지는 등의 애니메이션 기능이 필요하기 때문에 Jquery 라이브러리를 변경해주어야 합니다. html 항목을 선택한 후, 아래의 소스코드를 태그 아래에 추가하였습니다. Top 기존 수정들과 달리 html 뿐만 아니라 C..

객체 JavaScript에서 기본자료형을 제외한 모든 값은 객체입니다. 이름과 값을 한 쌍으로 묶은 데이터를 여러개 모은 것입니다. // 객체의 생성 let user = { name: "TOM", age: 10 }; console.log(user); 여기서 name과 age 는 각각 user 객체의 프로퍼티라고 부릅니다. 여기서 name 생성이 된 객체의 프로퍼티를 접근(값을 읽거나 값을 변경)할때는 . 연산자나 [] 연산자를 사용하며 프로퍼티의 이름을 이용하여 접근합니다. 대괄호 연산자에는 작은 따옴표(') 또는 큰 따옴표(") 를 사용하여 이름을 기술합니다. // 객체 프로퍼티 읽기 console.log(user.name); // 객체 프로퍼티 변경 user['age'] = 15; console.lo..

개요 앞서 밝힌 바와 같이 저는 대학을 졸업 후, 한 직장에서 쭉 C 를 사용하여 프로그램을 개발해왔습니다. 덕분에 이번에 학습 하는 JavaScript 도 제가 사용해 왔던 C 와 다른 부분을 중심으로 기술하며, 동일한 부분은 간략히 넘어가도록 하겠습니다. 앞서 구축했던 학습환경의 main.js 파일에 있는 내용을 이후 나오는 예시 코드로 교체하여 실행해 볼 수 있습니다. 변수 JavaScript의 변수는 C 와 달리 별도의 타입을 지정하지 않고, let 키워드를 사용하여 생성합니다. 참고로 이렇게 변수에 저장된 데이터의 타입을 동적으로 바꿀 수 있는 언어를 동적 타입 언어 라고 부릅니다. let message; message = "Hello"; console.log(message); 데이터타입 기본자..

개요 JavaScript를 학습하고자 환경을 구축하려 합니다. 하지만 언제나 프로그래밍 학습은 실습환경을 구축하는 것에 많은 수고가 들어가기 때문에 이를 최대한 간략히 할 수 있었으면 하는 생각이 간절합니다. 구름 IDE는 이름과 같이 웹 브라우저를 통해서 접속 가능한 클라우드 통합개발환경을 제공해주는 서비스입니다. 이를 사용하면 간단히 제가 원하는 수준의 학습환경(Node.js가 설치된 리눅스)을 쉽게 구축할 수 있습니다. 과거에는 Cloud9, CodeAnyWhere와 같은 동일한 무료 서비스들이 존재하였으나 Cloud9은 Amazon에 인수되었으며 CodeAnyWhere는 더 이상 무료 요금제를 제공하지 않기 때문에 현재(20.07.01)는 구름 IDE가 거의 유일하게 무료로 사용할 수 있는 독립된..