Phaser로 웹 게임 만들기

Phaser로 웹 게임 만들기 1. Phaser란? 게임 프레임워크로 MIT에서 제공하는 라이센스이며, HTML5로 게임을 만들 수 있도록 지원하는 오픈소스(자바스크립트 모듈)다. 특히 모바일 게임 제작에 강하며, HTML5 게임 엔진에서 순위를 살펴보면 Phaser(페이저)가 얼마나 많이 사용되고, 유지보수가 잘 되고 있는 지 알 수 있다. 2. Editor 선택 제작자가 추천하는 Editor로 Sublime, Basic Studio, IDE 가 있지만, 그 외 이클립스나 아톰 등의 에디터를 사용해도 무방하다. 본인은 Editor를 Atom으로 사용할 것이며, 웹 코딩 외에 별도의 특별한 Editor기능을 사용하지 않기 때문에 어느 Editor든 상관 없다. 3. Phaser 다운로드 Phaser 사이..
IT/프로그래밍 2016. 7. 19. 13:00

자주 쓰는 기본 태그 익히기

자주 쓰는 기본 태그 익히기 HTML에 빠짐없이 등장하는 감초 태그들을 알아보자. 지금 배울 태그들은 태그와 태그 사이에 사용한다. - 태그 – 제목 표시하기 제목 텍스트는 일반 텍스트보다 크기가 크고 진하게 표시된다. 제목 크기에 따라 ~ 태그까지 사용할 수 있는데, 이 가장 크고 이 가장 작게 표시되는 태그이다. 라는 텍스트 단락을 표시하는 태그를 사용해서 제목 텍스트를 만든 다음 크고 진하게 바꿔도 결과 화면은 태그를 쓰는 것과 비슷하지만, 태그는 일반 텍스트에, 태그는 제목 텍스트에 사용해야 웹 표준에 맞다. è 제목 - 태그 – 텍스트 단락 만들기 웹 문서에서 가장 많이 사용하는 태그 중의 하나가 태그이다. 태그와 태그 사이에 텍스트를 입력하면 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락(..
IT/프로그래밍 2016. 7. 18. 14:00

HTML - 텍스트 입력

HTML - form형식으로 텍스트 입력하는 방법 HTML 입문자라면 앞으로 게시판을 만들거나 회원가입 페이지를 만들게될 때 게시판의 텍스트 입력 방법이나 회원가입시 나오는 텍스트 박스 등 텍스트를 입력받는 방법은 자주 사용하기 때문에 알고있으면 좋은 방법 중 하나이다. 오늘은 아래와같이 HTML의 간단한 태그를을 사용하여 웹 페이지에서 form형식으로 텍스트를 입력받는 방법을 알아보자. 필자가 작성한 간단한 코드를 보고 태그의 기능들을 하나하나 알아보자. 예제) text : password : text area : 기본값 우선 부분의 은 인코딩 방식을 utf-8로 설정하겠다는 이야기이다. 부분으로 들어가서 제일 처음 이라는 태그를 보게 되는데 사용자가 로그인을하거나 회원가입을하거나물건을사거나 또는 글을..
IT/프로그래밍 2016. 7. 14. 00:00

Node.js 게시물 개수 및 번호 매기기와 페이지 나누기

Node.js 게시물 개수 및 번호 매기기와 페이지 나누기 1. 게시물 개수 및 번호 매기기와 페이지 나누기 일반적인 게시판을 작성한다는 가정 하에 게시물 수와 게시판에 보여줄 번호를 매기는 방법과 페이지를 나누는 방법이다. [ mysql을 연동시킨 HeidiSQL 화면 ] 데이터베이스에 게시물 2개를 추가한 상태에서 다음과 같이 게시물 수를 수동적으로 입력해 표 행을 반복하여 웹페이지 출력하는 게시판 목록을 띄운다. 이러한 번거로운 일을 자동으로 바꾸는 과정이다. 이 작업을 자동적으로 수행하게 하려면 행의 길이를 알면 되는데 데이터베이스에 쿼리문을 보내 행의 길이를 알아내기엔 너무나 코드가 길어지기 때문에 이미 이 페이지에서는 rows라는 json형식을 불러와 출력해주고 있음을 알고 있다. 'rows...
IT/프로그래밍 2016. 7. 13. 00:00

Node.js 클라이언트의 요청에 response를 2개 보내는 방법

Client 요청에 Response(응답)을 2개 보내는 방법 기본적으로 한번의 Request(요청)에 한번의 (Response)응답을 할 수 있다. 하지만 다음과 같이 2개의 Response가 필요한 경우, 응답을 2개 보내게 되면 서버측에서 에러가 발생한다. 당연히 request 한번에 response는 한번만 응답할 수 있으므로, 에러가 발생한 것이다. 1번째 방법. 리다이렉트(redirect)를 이용해 다른페이지에서 수행시키자 리다이렉트를 사용해서 하나의 페이지를 더 만들고 그 리다이렉트 된 페이지에서 수행해야 할 일을 하는 것이다. 그러나 이러한 방법을 사용하면 다시 전 페이지로 돌아가기 위한 버튼 하나를 생성 해야되며, 이 외에도 같은 일을 반복하게 되면 index.js에 많은 응답 페이지를 ..
IT/프로그래밍 2016. 7. 11. 00:00

CentOS 네트워크 설정

CentOS를 설치했지만 네트워크가 설정이 안된다. 문제점을 확인해본 결과, 문제는 네트워크 랜카드가 eth0으로 인식되어야 하나 사용설정이 되어있지 않아서 네트워크를 아무리 설정해도 소용이 없었다.다음을 위하여 처리방법을 기록한다ifconfig를 통해 활성화되어 있는 네트워크 상태확인 Loopback을 확인하는 lo에 대해서만 조회 됨eth0 네트워크에 대해서는 나오지 않음ifconfig -a 를 통한 전체 네트워크 상태확인 비활성화 되어 있는 네트워크 카드를 확인eth0로 인식하고 있음ifcfg-eth0 설정값 수정 /etc/sysconfig/network-scripts/ifcfg-eth0 파일을 수정하여 eth0의 설정값을 수정 eth0을 사용 할 것이기 때문에 eth0의 설정값을 수정수정 대상 :..
IT/리눅스(linux) 2016. 7. 10. 00:00

Node.js의 확장모듈 Express를 설치하여 웹 서버 구축하기

Node.js의 확장모듈 Express를 설치하여 웹서버 구축하기 1. express 란? Node.js의 확장모듈로 서버 사이트 웹 프레임워크(Server Side Web Framework)로 정의하며, 자바스크립트 코드를 이용해 서버 사이드 작성이 가능하다. express는 Node.js에서 가장 유명한 웹 프레임워크 모듈로 express를 이용하면더 간단하게 웹 서버를 만들 수 있고, 다양한 템플릿 엔진과 기능들을 사용할 수 있다. 2. express 설치 저장하여 실행시키고자 하는 곳에 express를 설치한다. 나는 D 드라이브에 설치했다. 그런데 여기서 좀 더 편리한 환경을 만들기 위해 보통 'npm install -g express' 하면 자동으로 설치되지만 웹페이지를 jade 형식으로 작성..
IT/프로그래밍 2016. 7. 9. 00:00

HTML5와 시맨틱 태그

HTML5와 시맨틱 태그 HTML5의 문서 구조 HTML5에서는 문서 구조를 정의할 수 있는 새로운 요소들이 도입되어 태그만 보고도 쉽게 페이지 구조를 이해할 수 있다. 사람들이 소스를 쉽게 이해할 수 있도록 태그를 의미가 통하게, 즉 시맨틱(semantic, 의미가 통하는) 태그로 바뀐 겁니다. HTML5에서 새로 추가된 시맨틱 태그에 대해 알아보자.. -시맨틱 태그가 사용된 HTML5의 문서 구조 인터넷상의 문서들을 살펴보면 서로 다른 듯 보이면서도 그 구조는 크게 다르지 않다. 사이트의 제목과 로고, 검색 창 등이 있는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(contents) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보과 제작자 정보를 표시하는 푸..
IT/프로그래밍 2016. 7. 8. 15:06

Node.js 설치 및 접속 실행하기

Node.js 설치 및 접속 실행 1. Node.js 란? 서버사이드 자바스크립트 기술로, 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 기존의 자바스크립트들은 전부 브라우저에서 실행하는 형태였지만 node.js 는 서버사이드에서 실행되는 자바스크립트이며 웹서버나 SMTP 서버 등과 같은 서버 프로그램을 작성할 수 있다. 2. node.js 플랫폼의 장점크롬 V8 엔진 사용 : node.js는 V8엔진 위에서 동작하는 프레임워크이다. 즉, 크롬 V8 엔진의 성능이 개선되고 업그레이드되면 Node.js 도 같이 성장한다는 말이다.비동기 방식 : 입출력이나 데이터베이스 쿼리 수행 및 라이브러리쪽까지 비동기 처리하며, 자바 보다는 느려도 적은 비용으로 중간 성능을 낼 수 있다.Jav..
IT/프로그래밍 2016. 7. 8. 00:00