(주)큐넷

우분투 업그레이드 후 eth0를 못찾아 네트워크가 안될때 해결방법

이금성 — Tue, 3 Apr 2018 22:16:25 +0900

우분투 14.x -> 16.x 업그레이드 하고나서 갑자기 네트워크가 안되어서

systemctl status networking.service 명령어로 살펴보니 아래와 같은 에러가 발생하였습니다.

Cannot find device "eth0"
Failed to start Raise network interfaces.

이런 저런 삽질 끝에 해결하였습니다.

/etc/network/interfaces 에 등록된 네트워크인터페이스 명과 새로 변경된 인터페이스 명이 달라서 발생한 오류 인것 같습니다.

/etc/network/interfaces 에는 eth0 로 등록되어 있는데 ifconfig -a 명령어로 살펴보니 ens192로 되어 있었습니다.

인터페이스명을 ens192로 변경하던지 eth0를 그대로 사용하고 싶으면 아래와 같이 하시면 됩니다.

/etc/udev/rules.d/10-rename-network.rules 파일을 새로 만들어서 아래와 같은 내용을 넣어 주시면 됩니다.

00:00:00:00:00:00:00 부분은 ifconfig -a 명령어를 실행해서 나온 MAC Address(HWaddr)를 입력해주어야 합니다.

SUBSYSTEM=="net", ACTION=="add", ATTR{address}=="00:00:00:00:00:00", NAME="eth0"

저장하고 재부팅 해주시기 바랍니다.

snort 실행시 Invalid keyword '}' for server configuration 오류

이금성 — Thu, 1 Feb 2018 00:56:04 +0900

snort 실행 시에

Invalid keyword '}' for server configuration

위와 같은 오류가 날 경우에는 snort.conf 의 버전이 현재 룰에서 제공하는 버전과 맞는지 확인해봐야 합니다.

snort -V

위 명령으로 snort 버전을 확인 후에 해당 버전의 룰을 내려 받아서 사용하시면 해결 됩니다.

[예시]
wget https://www.snort.org/rules/snortrules-snapshot-29111.tar.gz?<Oinkcode> -O snortrules-snapshot-29111.tar.gz

_default_ VirtualHost overlap on port 443, the first has precedence 오류

이금성 — Thu, 27 Apr 2017 14:45:15 +0900

[warn] _default_ VirtualHost overlap on port 443, the first has precedence

아파치 가상호스트(VirtualHost)에 SSL 적용하고 재시작했는데 위와 같은 에러가 난다면 NameVirtualHost *:443 을 추가해주면 해결된다.

/etc/httpd/conf.d/ssl.conf 나 /etc/httpd/conf/httpd.conf 등에 추가하면 된다.

git에서 라인 구분(Line Separator) 처리

이금성 — Fri, 31 Mar 2017 03:55:10 +0900

저장소에 올릴때만 CRLF->LF로 변경#

shell> git config --global core.autocrlf input

크로스플랫폼과의 호환성을 위해 될 수 있으면 이처럼 input으로 설정하는 것을 권장함

저장소에 올릴때 CRLF->LF로 변경하고 내려받을때는 다시 LF->CRLF로 변경#

shell> git config --global core.autocrlf true

자동변환 끄기#

shell> git config --global core.autocrlf false

참고

git config --global core.eol lf

우분투에서 [drm:drm_edid_block_valid] 에러 나는 경우

이금성 — Tue, 28 Mar 2017 16:22:51 +0900

우분투를 설치했는데 콘솔화면에서 다음과 같은 에러가 주기적으로 나왔습니다.

[drm:drm_edid_block_valid] *ERROR*

실제 서버구동에 지장은 없으나 계속 거슬러서 구글링 해보니 일부 그래픽카드와 모니터에서 나오는 문제 같았습니다.

해결 방법은 /etc/default/grub 파일을 열어서 다음과 같이 GRUB_CMDLINE_LINUX_DEFAULT 값을 nomodeset 으로 변경 해주면 됩니다.

GRUB_CMDLINE_LINUX_DEFAULT="nomodeset"

CentOS7에 텐서플로우(TensorFlow) 설치하기

이금성 — Thu, 23 Mar 2017 12:25:05 +0900

Ubuntu에서는 잘 되던 텐서플로우(TensorFlow)가 CentOS 7에서는 한번에 설치가 안되서 약간의 삽질(?)후 정리해보았습니다.

1. 개발도구 및 라이브러리 설치

yum groupinstall -y "Development tools"

2. pip 설치

1
2
shell> yum install -y epel-release #EPEL Repository 추가
shell> yum install -y python-pip #pip 설치

3. tensorflow 설치(GPU용은 별도 문서 참고)

shell> pip install --upgrade https://storage.googleapis.com/tensorflow/linux/cpu/tensorflow-1.0.1-cp27-none-linux_x86_64.whl 

참고사항

경우에 따라 numpy, protobuf 제거 후 재설치 필요함

<예시>

1
2
3
shell> pip uninstall numpy
shell> easy_install numpy
shell> pip install -U numpy

Textarea에 Naver Smarteditor 적용하기

Choi Hyun Seok — Thu, 6 Oct 2016 00:14:03 +0900

NAVER에서 제공하는 SmartEdit사용하기

단순한 문자만 입력할 수 있는 textarea 태크를 사용 하지않고

다음에디터, 네이버에디터 등 많은 곳에서 편집기 오픈소스를 제공하고 있어

저작권없이 오픈소스를 다운받아 사용하고 변경하여 자신이 원하는

디자인을 사용할 수 있습니다.

먼저 네이버개발자페이지에 접속해 스마트에디트를 다운받습니다.

NAVER Developers - SmartEditor Basic Download Page

그리고 다운받고자 하는 오픈소스 파일을 다운받는데

저는 2.3.10.11329버전을 다운받았습니다.

다운받아 압축을 풀고 내부의 모든 파일을

프로젝트 폴더로 옮깁니다.

node.js에서는 public이라는 파일만 global하게 공유되어 있어서

외부에서 크롬개발자모드로 검색해 내부 파일들을 볼 수 있고

작성중인 코드에서 파일을 include하여 편리한 곳이 public 폴더이기 때문에

저는 이 public 폴더 안에 "smartedit"라는 폴더를 하나 더 만들어

그 안에 압축을 푼 파일을 모두 옮겨 두었습니다.

그리고 head 부분에 /smarteditor/js/HuskyEZCreator.js를 include 시키고,

jquery를 사용해야 되기 때문에 jquery도 같이 include 합니다.

그리고 Button을 누르면 특정 이벤트가 발생하도록 설정합니다.

head 부분에 JQuery를 사용하여

버튼을 클릭하게 되면 contents라는 id를 가진 textarea에

에디터를 대입하게되고 form을 submit하도록 이벤트를 걸었습니다.

그 윗 부분은 프레임을 설정하는 부분으로

textarea id를 설정하고, sSkinURI는 글씨체와 색상 등의 설정을 가져오는 부분이고,

htParams는 툴바나 입력창의 크기조절바, 모드탭을 사용할 지의 여부를 설정합니다.

모두 사용하기 위해 전부 true로 설정합니다.

기존의 textarea에서

네이버에서 제공하는 Smarteditor가 적용됬습니다.

사진을 업로드 기능은 따로 서버URL를 셋팅해야 하는데

그 부분은 예제(/smarteditor/smarteditor2.js)가 포함되어 들어있으므로

코드를 복사해 붙여넣으면 된다.

그리고 서버URL을 세팅은 사진을 업로드하면 저장할 곳을 지정해주면 되는데

/smarteditor/photo_uploader/popup/file_uploader_html5.php

/smarteditor/photo_uploader/popup/file_uploader.php

두 파일의 $uploadDir와 &sFileURL에 저장경로를 입력해주면 세팅은 완료됩니다.

ex) $uploadDir="http://127.0.0.1:3000/upload/";

ex) $&sFileURL="http://127.0.0.1:3000/upload/".urlencode(urlencode($name));

소스트리(SourceTree)에서 system.componentmodel.win32exception 오류 해결

이금성 — Wed, 3 Aug 2016 04:34:44 +0900

어느날 갑자기 소스트리(SourceTree)를 실행하는데 아래 그림과 같이 'system.componentmodel.win32exception 지정된 파일을 찾을 수 없습니다.' 라는 오류가 나서 확인해 보니 내장 git를 사용해서 생기는 문제였습니다.

★ [도구 > 옵션 > Git ]에서 '시스템 Git 사용' 체크하고 git.exe 위치 지정해주었더니 해결됨

HTML 문서의 구조

알 수 없는 사용자 — Fri, 22 Jul 2016 14:00:04 +0900

HTML 문서의 구조

웹 문서는 아무리 길더라도 다음과 같은 기본 구조로 이루어져 있고 <head> ~ </head> 부분과 <body> ~ </body> 부분에 대부분의 소스가 표시 된다.

-HTML 문서와 DOCTYPE

웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용하는 것이 ‘문서 유형(document type)’을 지정하는 <!doctype>이다. 문서 유형은 웹 브라우저에서 “이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.”고 알려주는 것이다. <!doctype>은 태그가 아니지만, 웹 문서를 만들 때 함께 사용해야 하는 요소이다.

HTML에서는 대소문자 구별이 없지만 doc-type을 좀더 강조하기 위해 대문자로 사용하기도 한다. HTML5은 복잡한 과정 없이 단 한 줄로 문서 유형을 선언한다.

<!DOCTYPE html> 또는 <!doctype html>

웹 브라우저는 이 소스만 보고 ‘HTML5에 맞춰 문서를 해석하면 되구나’라고 이해하게 된다. 문서라는 점만 표기하는 것으로 문서 유형 선언이 끝난다.

-언제나 시작은 <html> 태그

문서 유형을 선언한 후에 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html>태그이다. <html>태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹 문서가 끝났다는 뜻이다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 예를 들어 한국어라면 korea의 약자인 ko를 사용하면 된다. 언어 표기는 ko처럼 두 자리를 사용할 수도 있고 en-US처럼 네 자리를 사용할 수도 있는데, 두 자리로 표기할 경우 주요 국가별 언어 코드는 다음과 같다.

<html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 부분과 실제 화면에 보이는 문서 내용을 입력하는 <body> 부분을 만든다.

-브라우저에게 정보를 주는 <head>태그

웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 모두 <head> 부분에 입력한다. 문서에게 사용할 외부 파일들도 이곳에서 링크한다. <head> 태그와 </head> 태그 사이에서 문서 정보를 표시하기 위해 사용할 수 있는 주요 태그는 다음과 같다.

<title> 태그 – 문서 제목

<head> 태그 안에서 가장 중요한 태그를 꼽으라면 <title> 태그일 것이다. <title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고, 해당 페이지를 방문하는 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측할 수 있다.

è <title> 문서제목 </title

<head> 태그 안에서 <meta> 태그는 여러 용도로 사용된다. 그 중에서 가장 중요한 것은 문자 인코딩을 지정하는 것이다. 한글을 화면에 표시하는 방법은 영문과 달라서 문자 인코딩 방법을 utf-8로 지정하는데 charset 속성만 사용해서 간단하게 지정할 수 있다.

è <meta charset = “utf-8”>

이 외에도 <meta> 태그를 이용하여 <title> 태그에서는 표시할 수 없었던 문서의 키워드와 요약 정보를 지정할 수 있다.

-문서의 몸통은 <body> 태그

문서 유형을 정의하고 문서 정보까지 입력했다면 <body> 태그와 </body>태그 사이에 실제 브라우저에 표시될 내용을 입력한다. 이 책에서 설명하는 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들이다.

Phaser로 웹 게임 만들기

Choi Hyun Seok — Tue, 19 Jul 2016 13:00:09 +0900

Phaser로 웹 게임 만들기

1. Phaser란?

게임 프레임워크로 MIT에서 제공하는 라이센스이며,

HTML5로 게임을 만들 수 있도록 지원하는 오픈소스(자바스크립트 모듈)다.

특히 모바일 게임 제작에 강하며, HTML5 게임 엔진에서 순위를 살펴보면

Phaser(페이저)가 얼마나 많이 사용되고, 유지보수가 잘 되고 있는 지 알 수 있다.

2. Editor 선택

제작자가 추천하는 Editor로 Sublime, Basic Studio, IDE 가 있지만,

그 외 이클립스나 아톰 등의 에디터를 사용해도 무방하다.

본인은 Editor를 Atom으로 사용할 것이며, 웹 코딩 외에 별도의 특별한 Editor기능을

사용하지 않기 때문에 어느 Editor든 상관 없다.

3. Phaser 다운로드

Phaser 사이트에서 Phaser.min.js 파일 다운로드한다.

사이트에는 Phaser.js와 Phaser.min.js 두 가지 형태의 파일이 있는데

Phaser.js는 풀버전의 개발자용 버전이며, Phaser.min.js는 압축버전의 일반 사용자 버전으로

사용에 맞게 맞춰 사용하면 된다. 풀버전의 경우 용량이 크기 때문에 웹페이지의 로딩 속도가 증가하고

방문자가 불러와야 하는 파일의 용량이 크기 때문에 웹사이트를 로드하는 속도가 느려질 수 있다.

또한 지금 만들려는 게임은 모든 기능을 전부 사용하지 않기 때문에 가벼운 min.js 사용한다.

4. 게임 제작환경 만들기

작업은 아주 기본적인 자바스크립트 지식을 가졌다는 가정하에 진행하겠다.

간단한 웹 게임 제작환경을 구성하고, 다음 단계부터 ‘포켓볼 피하기 게임’을 만들어 볼 것이다.

먼저 ./js에 phaser.min.js 파일을 옮겨두었고,

images 폴더도 하나 생성했다.

4-1. game.html를 만들고 다음과 같은 코드를 작성한다.

- phaser.min.js를 include한다.

현재 커서가 위치한 부분에 자바스크립트 코드로 게임을 작성할 것이다.

4-2. script 태그 안에 Phaser.Game()의 파라미터를 사용해서 매개변수로 사이즈와 그 외 매개변수를 입력한다.

800*600 사이즈이며, 캔버스의 유형으로 Phaser.CANVAS를 입력한다.

Phaser.AUTO / WEBGL은 백그라운드위에 이미지가 띄워지지 않는다.

4-3. 기본적으로 생성해야하는 함수 preload(), create(), update()를 작성한다.

- preload() 함수는 데이터를 불러 올 때 사용하는 함수이다.

- create()는 처음 게임을 실행할 때 수행되는 함수이다.

- update()는 주기적으로 수행하는 함수이다.

4-4. 코딩이 완료되었다면 html파일을 실행시켜 확인해본다,

위와 같이 검은창이 생성되었다면 성공한 것이다.

4-5. 기본적인 게임 배경 작성

4-5-1. 게임의 속성 설정. (아케이드)

4-5-2. 게임의 기본배경 설정.

4-5-3. 위쪽에 현재 점수를 보여주기위해 개별적인 창을 하나 더 생성한다.

다음과 같이 뒷 배경이 완성되었고, 간단한 게임 제작환경이 구성됐다.

5. 테두리 감싸기

* 이제 게임을 만들기 위해 투명한 박스를 score부분을 제외한 나머지 배경의 테두리를 감싼다.

- 투명한 박스에서 공격이 생성되도록 하고, 플레이어가 창 밖으로 못 나가도록 하기 위함이다.

- 투명한 박스에 플레이어가 접근하여 충돌하면 이를 박스가 감지해 플레이어의 동작을 멈추게 하도록 한다.

5-1. 먼저 preload()에서 읽어온다.

- 4-3에서 말했듯이 preload()는 단순히 데이터를 읽어오는 용도로 사용한다.

- 먼저 데이터를 저장할 images 폴더를 하나 만들고 그 폴더에 투명한 이미지를 넣어뒀다.

5-2. script 태그에 전역변수로 box를 하나 선언하고, create()함수에서 그룹으로 묶어준다.

5-3. 각 테두리 면마다 box를 생성하고 box가 충돌을 감지하되, 플레이어가 박스를 밀어내 움직이지 않도록 설정한다.

테두리에 이렇게 배치되었을 것이다. (예시로 주황색 표시를 해둔 것이다. 이미지는 투명한 걸 사용한다.)

6. 플레이어 생성 및 방향키 이벤트 생성

* 먼저 player의 이미지를 images폴더에 담아둔다.

* 플레이어를 생성해 키보드의 방향키 입력에 반응하도록 설정한다.

6-1. player라는 전역변수를 선언하고, player 이미지도 preload() 함수로 불러온다.

6-2. create()함수에 player의 좌표 위치와 이미지를 설정하고, 게임 상에 띄운다.

다음과 같이 중앙에 player가 배치되었다.

6-3. 아직 방향키 설정을 하지 않아 방향키를 눌러도 반응하지 않을 것이다. 방향키 설정을 한다.

* 전역변수 inputKey를 선언해 방향키 이벤트 객체를 생성한다.

* 변수 velocity를 선언해 속도를 담아두고, 나중에 쉽게 수정할 수 있도록 한다.

* create() 함수에 방향키 이벤트를 생성하고, update()에서 주기적으로 수행하도록 방향키를 설정한다.

7. box와 player 충돌 설정

* 5-3에서 미리 박스에 충돌감지만 시켜두고 충돌을 하도록 update()에 정의하지 않았다.

* 현재 방향키로 player를 움직이면 창 밖으로 나갈 것이다. update() 함수에서 주기적으로 확인할 수 있도록 설정하도록 한다.

8. 공격하기

* 먼저 images에 포켓볼 이미지를 담아둔다.

- ball이라는 전역변수를 선언하고, ball 이미지도 preload() 함수로 불러온다.

* 게임 창에서 공격을 하게 되면 공이 밖으로 나가는 것과 존재여부를 잡아야 한다.

- ball : 공격하는 공이다.

- ballAlive : ball이 창 밖으로 나가게 될 경우, ball이 존재하는지의 여부이다.

- ballArray : 창 밖으로 나간 ball들을 담을 곳이다. (다시 뿌려주기 위해)

일단 이미지를 불러오고, 전역변수를 생성한다.

8-1. create() 함수에서 키보드 이벤트 위에 ball의 속성을 입력한다.

* ball.createMultiple(30, "ball")부분에서 '30'은 공격하는 공의 개수이다.

* ball.setAll("outOfBoundsKill", true)와 ball.setAll("checkWorldBounds", true)는 balldl 창 밖으로 나갈 시 kill하는 역할이다.

8-2. update() 함수에 ball을 생성하고, 존재 여부를 보고 재생성되도록 설정한다.

8-3. score 부분으로 ball이 넘어가는 현상 제거

* 이전 score 속성 부분으로 돌아가 마찬가지로 충돌속성을 준다.

* 이제 score부분을 넘어갈 경우(overlap), update() 함수에서 ball을 kill하도록 설정한다.

8-4. ball과 player가 충돌할 경우 ball을 kill하도록 설정하기

* 8-3과 마찬가지로 score에서 ball과의 충돌이벤트를 score와 ball로 하나 더 추가하면 된다.

8-5. player가 ball의 공격에도 무한히 살아있으므로, 생명력을 줘서 생명이 없을 시 player동작을 멈출 수 있도록 한다.

- player 생명을 전역변수 playerLife에 담는다.

- player가 ball과 충돌할 때 생명을 깎고, 생명이 없을 경우 멈추도록 한다.

9. 점수 주기와 player 멈출 시 'GAME OVBR'메시지 띄우기

9-1. 텍스트로 상단에 score 점수 보여주기

- 전역변수로 score_Event를 선언한다.

- create() 함수에 텍스트 설정과 score 점수가 오르도록 이벤트를 걸고, 생명이 없을 시 score도 오르지 않도록 설정한다.

9-2. player 생명 없을 시 'GAME OVER' 텍스트 띄우기

- 앞에서 했던 것과 동일하다. 전역변수로 gameover_Text를 선언한다.

- 텍스트를 띄워주되, 생명이 없을 때 띄워주는 걸로 설정한다.

- GAME OVER 표시

< 완성 >