Featured Post

웹 게임 개발에 필요한 것들

웹게임은 웹브라우저에서 실행되는 게임을 의미한다. 웹게임 개발을 위해 필요한 것은 웹브라우저, html5, css3, javascript가 있다. 진보된 형태라면 Unity와 Unreal도 존재한다. 그 외 웹게임 개발을 위한 라이브러리들도 여럿 존재하며, 생각이 있다면 하루에 조금씩 공부해 나가면 된다. What You Need To Develop Web Games 웹 게임 개발에 필요한 것들 게임 개발 자체는 어렵다. 그렇기에 AI를 이용한 바이브코딩을 하거나, 라이브러리 또는 코드를 구입하여 수정을 하기도 한다. 게임을 새로 개발하는 것보다는 참고하고 수정하는 것이 상대적으로 빠르고, 효율적일 수 있다. 하지만, 요구사항에 맞도록 코드를 수정할 수 없다면 아무 소용이 없다. 하나씩 진행해 보도록 하자. 웹 게임에 필요한 것은 여러가지가 있지만, 기본적으로 필요한 것은 몇 가지 없다. ` 웹브라우저, html5, css3, javascript `를 사용할 수 있으면 된다. 다만, 이것을 학습하는 것이 어려울 뿐이다. 단순히 코드를 만들고 프로그램을 만드는 것이 아닌  그래픽적인 요소부터 알고리즘과 데이터구조 등을 이해할 필요가 있는 것이 게임 분야이다. 간단한 게임도 여러가지 기술들이 사용된다. 준비물 html5를 사용한 웹게임을 개발하기 위해 필요한 것을 나열해 보면 다음과 같다. 코드를 익혀야 하고, 프로그래밍을 할 줄 알아야 하며, 알고리즘과 데이터 구조 등도 학습해야 된다. 점점 어려워진다. 하지만, 기본적인 코딩을 익히는 것이 순서이다. Modern Web Browsers html5 css3 canvas three.js unity unreal 웹 게임 제작을 하기 위해 필요한 것들은 이 정도로 정리할 수 있다. 상대적으로 익히기 쉽다고는 하지만, 어디까지나 상대적일 뿐,  절대 쉽지 않기 때문에 빠르게 웹 게임 제작을 학습하려면  위의 것들 중에서도 필요한 것만 학습하는 것이 좋을 것이다. 시작을 하면 끝도 없는 것이 공부...

바이오리듬 뜻 생체 리듬 측정하기 그래프로 나의 상태 파악하기

바이오리듬을 이용하면 현재 나의 상태를 파악할 수 있다고 한다. 신체, 감성, 지성의 3가지 요소가 일정 패턴으로 주기적으로 움직이는 데이터를 보고  현재 자신의 상태를 파악해 가장 최적의 활동성을 찾도록 하는데 참고하고 있다. 하지만, 과학적으로 증명된 것은 없지만, 자신의 상태를 수치화된 데이터로 볼 수 있다는 점에서 흥미롭다. Biorhythm - Biological Ppattern 바이오리듬 뜻 생체 리듬 측정하기 / 나의 상태는 어디쯤 ?? 과거 바이오리듬이 유행했었다. 신체, 감성, 지성의 데이터 수치는 신뢰할만 했고, 각 분야마다 적용하기 시작했다. 사람들은 바이오리듬을 보고 최상의 컨디션을 찾고 그 때마다 중요한 일을 하기도 했다. 운동선수들의 경우  신체와 지성이 높은 시기에 주전선수로 선택되고 엔트리되기도 했다. 바이오리듬이 과학적으로 입증되고 증명된 사례는 없다. 실제 연구기관에서 테스트 했을 경우 맞지 않는 부분들이 더 많았기 때문. 바이오리듬에서 신체 상태는 최상이지만, 실제 측정했을 경우 컨디션이 최악일 경우도 있었다. 다만, 뇌를 속여 자신의 상태를 높이는 일시적이고 심리적인 효과는 노려볼 수 있을 것이다. 뜻과 그래프  모든 생물은 활동하면 휴식을 취하는 반복적인 기본적인 패턴을 가진다. 사람이 최상의 상태로 활동을 하는 조건을 찾기 위한 과학적인 연구도 꾸준하다. 사람에게 필요한 요소는 많지만,  대표적으로 ` 신체, 감정, 지성 `이 있다. 이 3가지는 사람이 사회생활을 하는데 필수적인 요소이며, 바이오리듬은 이 요소를 이용해 사람의 상태를 그래프로 보여준다. ` 바이오리듬 `은 ` 신체, 감정, 지성 `의 3가지 요소가 반복적인 주기를 가지는 이론으로, 사람의 출생일을 기준으로 반복적인 사인곡선으로 최상 또는 최하의 상태를 그래프로 보여준다. ` 신체, 감정, 지성 `의 컨디션의 상태를 살펴보고, 자신이 오늘 어떻게 활동을 해야 할지 파악할 수 있다. 그래프 종류 바이오리듬( Bior...

css display flex 사용 가로 또는 세로 정렬하기

이미지
` display: flex `는 웹페이지의 레이아웃을 만들 때 자식 요소들을 수평 또는 수직 방향으로 위치를 지정할 때 사용된다. `display: flex`가 지정된 html 요소는 `flex-direction, justify-content, align-items`을 사용하여 내부의 다른 html 요소들을 쉽게 배치할 수 있다. 각각 배치 방향(flex-direction), 가로 정렬(justify-content), 세로 정렬(align-items)을 뜻한다. 단순히 방향과 정렬만 지정해 주면 요소들을 쉽게 배치할 수 있기 때문에, 자주 사용된다. 또한, 위에서 언급한 4가지는 같이 사용되기 때문에 기록해 두자. Using CSS Display FLEX Property CSS `display: flex` 사용하기 화면에 구성 요소를 배치하는 레이아웃 작업은 번거롭다. 때문에 css의 ` display: flex `를 사용하면  html5 요소들을 가로 또는 세로 정렬하여 편하게 구성할 수 있다. 단순히 container로 사용할 div 요소에 설정하면, 자식 html5 요소들을 가로 또는 세로로 배치할 수 있다. 특히, 반응형 웹을 위해 레이아웃을 구성할 때 ` display: flex `는 괜찮은 방법 중 하나이다. 함께하는 요소 4가지 ` display: flex `를 사용하여 레이아웃 또는 자식 html 요소들을 배치할 때  거의 함께하는 요소들이 있다. 4가지 정도이며, 의미 정도는 알아두자. display: flex flex-direction 자식 요소들을 배치하는 주축 방향 설정 justify-content 주축 방향 정렬 방법 align-items 교차축 방향 정렬 방 flex-wrap 줄바꿈 여부 주축과 교차축 ` display: flex `를 사용할 때 중요한 개념이 주축과 교차축이다. 주축과 교차축은 ` flex-direction `에 지정된 값으로 결정된다. 주축은 main axis, 교차축은 cross axis...

구글 서치콘솔 DNS 소유권 확인 가비아 TXT 레코드 추가하기

이미지
구글 서치콘솔에 도메인을 추가할 경우 ` DNS 소유권 확인 `을 통해 웹 서비스 인증을 할 수 있지만, 별도의 메세지가 나타나는 경우 TXT 레코드를 추가하는 방법으로 소유권 인증을 할 수 있다. 구글의 경우 자세한 설명을 하고 있으니 메세지를 참고하자. 2차 도메인이 아닌 루트 도메인의 경우 TXT 레코드 추가를 요청할 수 있으며, 가비아를 사용 중이라면 가비아 서비스의 ` DNS 관리툴 `를 사용하여 TXT 레코드를 추가할 수 있다. Add Google Search Console DNS TXT Record For Ownership Verification 구글 서치콘솔 DNS 소유권 확인 가비아 TXT 레코드 추가하기 도메인의 소유권을 확인하는 작업은 중요하다. 방문자 트래픽에 신경쓰는 사용자라면 SEO에도 민감할 것이다. 구글 서치 콘솔에서 ` 도메인 소유권 확인 ` 메세지가 표시된다면  가급적 빨리 등록을 해 두는 것이 좋으며,  서치 콘솔에서 소유권 확인이 완료되면 검색결과부터 트래픽, 노출 실적 등의 실적에 도움을 받을 수 있다. 그리고, 도메인을 이용한 악의적 사용을 방지할 수 있다. DNS 레코드 도메인 소유권 확인 도메인을 구글 서치 콘솔에 등록했을 때  ` 도메인 소유권 확인 `이 나타나는 경우가 있다. 본인의 경우 루트 도메인의 소유권이 확인되지 않아 나타난 문제이다. 오히려 2차 하위 도메인들의 경우 나타나지 않았다. 도메인은 ` 가비아 `를 통해 관리되고 있다. `가비아`를 이용해 도메인을 구매했고, 구글 서치 콘솔에서 소유권 확인을 물어본다면, ` 가비아 `에 접속하여 ` DNS 관리툴 `에서 해당 도메인에 대한 ` TXT 레코드 `를 등록하면 된다. 작업 순서는 다음과 같다. 소유권 확인이 요청된 속성( 도메인 ) 확인 가비아 접속, 로그인 DNS 관리툴 이동 TXT 레코드 등록 10분 기다리기 적용 확인 준비물 DNS 소요권 확인을 위해 ` 구글 서치 콘솔의 속성 `을 클릭하면, ` TXT 레코드 `를 보여...

데이터베이스 개념 DCL, DDL, DML, TCL 뜻과 명령어 종류

이미지
데이터베이스(이하 DB) 명령어는 크게 DCL, DDL, DML, TCL 있다. 데이터를 관리하기 위한 명령어로 사용자 권한(DCL), 데이터 구조(DDL), 데이터 조작(DML), 트랙잰션(TCL)을 관리한다. 각각의 명령어는 몇 개 없지만, 기억해 두면 편하다. 데이터베이스 DCL DDL DML TCL DCL, DDL, DML, TCL meaning and command types 데이터베이스 개념 DCL, DDL, DML, TCL 뜻과 명령어 종류 과거에 비해 SQL의 활용 범위가 줄어든 느낌이다. 관계형 DB를 사용하는 경우 SQL의 활용범위는 넓어지고 필요성은 높아진다. MySQL의 경우 ` DCL, DDL, DML, TCL `로 구분되고, 단어의 개념을 익히면 명령어들의 개념을 익히기 수월해 진다. 아래는 DB의 개념을 나열해 본 것이다. DCL / Data Control Language 사용자에게 DB 사용에 대한 권한을 부여한다. GRANT 사용자 권한 부여 REVOKE 사용자 권한 해제 DDL / Data Definition Language 데이터 객체의 구조를 관리한다. CREATE 데이터 객체 생성 ALTER 데이터 객체 수정 TRUNCATE 데이터 객체 초기화 ( 데이터 ) DROP 데이터 객체 삭제 ( 구조, 데이터 ) DML / Data Manipulation Language 테이블의 데이터를 관리한다. SELECT 데이터 조회 INSERT 데이터 생성 UPDATE 데이터 수정 DELETE 데이터 삭제 TCL / Transaction Control Language 데이터 관리의 동작 여부를 관리한다. SET TRANSACTION 트랜잭션 설정 COMMIT 변경 내용 저장 ROLLBACK 변경 내용 취소 SAVEPOINT 중간 변경 내용 설정 ✅DCL / Data Control Language DB를 설치하고 처음 사용할 때 ` root `계정을 이용해 학습을 진행할 것이다. ` DCL ( Data Control Language ) `는...

photopea 모자이크 효과 만들기 인터넷 포토샵 사용

이미지
이미지에 모자이크(Mosaic)를 적용하면 특정 부분을 왜곡하여 가리고 노출을 방지할 수 있다. 포토피아 (Photopea)에서 선택도구와 필터를 사용하면 모자이크 효과를 적용할 수 있다. 간단하다. 모자이크를 설정할 이미지의 특정영역을 선택도구로 선택한 후, 필터에서 모자이크 항목을 선택하면 된다. Creating a Photopia Mosaic Effect Photopea 모자이크 효과 만들기 인터넷 포토샵 사용 블로그나 웹사이트 등 콘텐츠를 발행할 때  특정 업체, 지명 또는 인명 등의 정보는 민감하고 가릴 필요가 있다. 물론, 이런 이미지들을 사용하는 경우는 거의 없을 것이지만 말이다. 이미지의 특정 부분을 모자이크 하면 그 부분은 왜곡이 되고, 노출과 공개를 방지할 수 있다. photopea 접속하기 이미지 불러오기 선택 도구 선택 필터 선택 > 픽셀화 선택 > 모자이크 선택 > 확인 모자이크된 왜곡된 이미지 확인 순서는 위의 순서와 같다. 하나씩 진행 해보자. 1. photopea 인터넷 포토샵 접속하기 photopea ( 이하 포토피아 )는 보통 인터넷 포토샵으로 유명하다. 과거 구버전의 포토샵과 비슷한 화면구성을 하고 있으며, 단축키도 비슷하다. 물론, 웹이라는 한계가 있기에 차이가 존재하긴 하지만, 어지간한 기능들은 모두 사용할 수 있다. 단점이라면 의도치않은 광고들이 나타난다는 점인데, 무료로 사용하는 만큼 이정도는 감내하자. 포토피아로 접속하는 주소는 다음과 같다. [ 포토피아 바로가기 ] 포토피아(photopea) 메인 2. 이미지 불러오기 포토피아의 좋은 점은 이미지를 불러오는 방법이 여러가지에 있다. 내 PC에 있는 이미지를 열기 할 수 있지만, 외부 이미지 URL을 알고 있다면 그대로 열기 할 수 있다. 포토피아 이미지 열기 인터넷에 있는 이미지를 아무거나 가져오기 할 것이다. 지금은 이미지를 구하는 곳이 여럿 존재한다. 본인은 ` URL에서 열기 `를 통해 이미지를 아무거나 하나 가져올 것이다. 마침, 재미...

동적 페이지 네비게이션 바 만들기 html5, css3, javascript 사용

` 페이지 네비게이션 `은 많은 정보를 보여주기 위한 사용자 인터페이스이다. ` 이전 | 다음 | 페이지 번호 | 다음 | 끝 `의 형태를 가지고 있으며,  과거엔 ` 페이징 `이란 단어를 사용하기도 했다. 페이징은 DB의 SELECT 구문과 같이 사용할 수 있다. 페이지 네비게이션은 사용자로 하여금 수많은 자료를 검색하고, 페이지를 탐색할 수 있도록 도와주며, 동적으로 동작할 수록 사소하지만, 사용자에 많은 편의성을 제공할 수 있다. Creating A Dynamic Page Navigation Bar 동적 페이지 네비게이션 바 만들기 html5, css3, javascript 사용 페이징 또는 동적 페이지 네비게이션은 게시판을 만들 때 중요한 것 중 하나이다. 많은 데이터를 정해진 갯수로 한 화면에 표현하여  사용자가 데이터를 편하게 찾아 보도록 하는데 있다. 지금은 거의 간략화 되어 이전, 다음의 형태만 있거나  혹은 자동 스크롤을 많이 사용한다. 하지만, ERP, MES, LMS 등의 업무 화면인 경우 업무 담당자를 위한 페이징의 기능은  많아질 수 있다. 기본적인 구조부터 살펴보면 다음과 같다. 필요한 것 / 데이터와 기능 `동적 페이지 네비게이션`의 구조를 먼저 살펴보면 다음과 같다. ` 처음, 이전, 페이지 번호 10개, 다음, 마지막 `의 기능을 가지고 있다. 각 페이지는 개발자가 지정한 갯수( 보통 한 페이지당 10개 게시물)만큼 화면에 보여주도록 한다. 페이지 번호에 따라 데이터를 보여줘야 하기 때문에 필요한 데이터는 ` 전체 데이터 갯수 `가 된다. `전체 데이터 갯수`를 알고 있다면 전체 페이지 갯수와 함께 페이지 번호를 알 수 있다. 페이지 번호는 DB에서 사용할 Offset Index가 될 것이다. 모든 데이터를 화면에 나눠서 보여줘야 하기 때문에 몇가지 기능이 필요하다. ` 처음, 이전, 페이지 번호, 다음, 마지막 `이다. 각 항목은 클릭할 때마다 지정된 페이지 번호에 맞는 데이터를 화면에 보여주...