본문 바로가기

작업 공간/프로그래밍에는23개의 포스트가 있습니다.

2020. 10. 13. billboard.js 라이브러리 네이버에서 만든 웹에서 그래프를 표현하기 좋은 라이브러리입니다. 티스토리 스킨에도 적용할 수 있습니다. 공식 사이트 naver.github.io/billboard.js Git github.com/naver/billboard.js 문서 페이지 naver.github.io/billboard.js/release/latest/doc Step 1. D3.js와 billboard.js 불러오기 > 홈페이지 하단에 보이는 billboard.js 와 billboard.css를 다운받아 [스킨 > 파일 업로드]에 올립니다. > 다음을 Html 부분에 붙여넣습니다. > 다른 테마를 적용하고 싶으면 테마 파일도 다운 받아서 올립니다. // 테마파일 Step 2. DIV 홀더 지정 블로그에 글을 쓸 때 HTML 모드로 전환하..
2020. 4. 18. [우분투/Linux] 웹 서버 루트 디렉토리 변경 우분투에 apache2를 깔게 되면 기본적으로 /var/www/html이 루트 폴더가 된다. 이것을 변경하고 싶다면 아파치 설정파일을 수정해 줘야한다. 1. apache2.conf 수정 $ sudo nano /etc/apache2/apache2.conf 부분을 찾아 수정한다. 2. 000-default.conf 수정 $ sudo nano /etc/apache2/sites-available/000-default.conf 관련 디렉토리로 가서 000-default.conf 파일에 루트 디렉토리 경로를 수정한다. 3. 아파치 서버 재시작 아파치 서버를 중지했다가 다시 시작한다. $ sudo service apache2 stop $ sudo service apache2 start
2020. 3. 2. [티스토리] 코드 블럭 CSS 꾸미기 # 티스토리 코드 블럭 꾸미기 지금 보이는 OSX 윈도우 스타일로 코드 블럭을 바꿔봅시다. 1. 플러그인 설정 티스토리 플러그인 항목으로 가서 코드 문법 강조를 활성화시켜 주세요. 추천 테마는 Atom One Dark입니다. 2. CSS 편집 아래 내용을 스킨 css의 적당한 곳에 붙여 넣기 합니다. 저는 Noto San KR이라는 웹폰트를 사용 중이라 이 폰트도 적용해 봤습니다. /* code css */ .hljs { margin: 10px 0; font-family: "Noto Sans KR"; /* 자신이 사용하는 웹폰트를 쓰세요. 지우셔도 됩니다. */ font-size: .83em; border-top: 26px solid #3d454e; border-radius: 5px 5px 0 0 !im..
2020. 2. 14. [미디어위키] 틀(Template) 만들기 <2> 틀을 만들 때 사용되는 태그는 3가지가 있습니다. 틀에 포함되는 내용. 틀에는 포함되지만 이 문서에는 포함되지 않음. 이 문서만 포함되는 내용. 보통 설명을 씁니다. 또한 변수를 만들 땐 다음과 같은 치환자를 사용합니다. {{{변수이름|값}}} 이것만 알아도 대부분의 틀을 구성할 수 있습니다. 너무 복잡하게 생각하지 마세요. 이번 포스팅에선 위키에 빈번하게 사용되는 인용문 틀을 만들어보겠습니다. 1. 틀:인용문 만들기 먼저 /틀:인용문 페이지를 만듭니다. /틀:인용문 또는 /index.php?title=틀:인용문 이 틀은 인용문을 사용할 때 앞으로 사용될 틀입니다. 소스는 아래와 같습니다. 보기 쉽게 소스를 조금 풀어서 썼습니다. "{{{내용|}}}" ''-- {{{출처|}}}'' 태그 안에 style ..
2020. 2. 14. [미디어위키] 틀(Template) 만들기 <1> 여러 문서에 포함할 기본 글이 있다면, 미디어 위키 틀 기능이 유용하게 쓰입니다. 확장 도구나 미디어 파일과는 다르게 틀에는 중앙 저장소가 없습니다. 틀은 새로 작성하거나, 또는 기존의 작업을 위키피디어와 같은 다른 위키에서 복사하여 목적하는 위키로 불러올 수 있습니다. - 위키미디어 도움말:틀 틀(Template)은 알람이나 경고, 도움말, 인용문등 미리 그 양식을 저장해놓고 다양한 상황에 사용되는 문서를 말합니다. 기본적인 사용법은 /틀:틀이름 페이지에 형식을 작성한 후 다른 페이지에서 {{틀이름}}으로 불러올 수 있습니다. 이문서는 Liberty 스킨을 기준으로 하고 있습니다. 1. 틀의 기본적인 사용법 가장 먼저 알림바를 만들어 봅시다. 위키의 고유 주소에 따라서 웹 브라우저로 아래의 페이지로 접..
2020. 2. 13. [일반서버] 위키 사이트를 만들어 보자 <3> 앞서 두 위키 포스트는 GCP에 설치하는 방법과 수동 커스텀 하는 방법을 다뤘습니다. 이 포스팅은 일반 서버나 개인 호스팅에 설치하는 방법입니다. 1. 일반 호스팅 서버에 설치하기 GCP이 아닌 일반 호스팅에 설치하는 방법입니다. 자신의 호스팅에서 ssh에 접속했을 때 git이 깔리지 않는다면 그냥 미디어 위키 홈페이지에서 파일을 수동으로 내려 받아 ftp로 설치하세요. 1-1. 수동) 파일 다운 로드 후 서버에 넣기 https://www.mediawiki.org/wiki/Download/ko 1-2. 자동) git 이용하기 루트로 이동하거나 설치를 원하는 폴더로 이동해 아래 명령어를 사용합니다. sudo git clone https://gerrit.wikimedia.org/r/mediawiki/core..
2020. 2. 10. [GCP] 위키 사이트를 만들어 보자 <2> 앞 포스팅에 이어서 위키 추가 설정을 해보겠습니다. 여기서 포스팅을 한 내용만 있어도 충분히 위키를 활용할 수 있지만, 개인 용도에 따라 추가적으로 기능을 붙이면 됩니다. 인터넷에서 '미디어 위키 확장 기능'을 검색해 보면 더 많은 자료를 찾아보실 수 있습니다. 미디어 위키 폴더 위치 서버 환경마다 다른 설치 위치를 가지고 있겠지만 GCP x Bitnami의 위키 설치 폴더는 아래와 같습니다. 미디어 위키 설치 폴더 /home/bitnami/apps/mediawiki/htdocs/ 확장 기능 설치 폴더/extensions 스킨 설치 폴더/skins 미디어 위키 설정 파일 설치 폴더/LocalSettings.php 로고 바꾸기 Liberty 스킨의 로고는 /skin/img/logo.png를 수정하면 됩니다..
2020. 2. 9. [GCP] 위키 사이트를 만들어 보자 <1> 1. 위키 설치하기 구글 클라우드 플렛폼을 이용하면 간단하게 위키 사이트를 만들 수 있습니다. 다양한 위키 플렛폼이 있으나 여기에선 미디어 위키 (MediaWiki)를 사용하여 사이트를 제작하도록 하겠습니다. 1-1. 마켓플레이스로 들어갑니다. GCP 마켓 플레이스 검색 창에 mediawiki를 검색합니다. 1-2. MediaWiki Certified by Bitnami 미디어위키 가상 머신을 선택합니다. 저는 Bitnami 버전을 선택했습니다. 비트나미는 AMP(아파치, Mysql, PHP)를 풀 패키지로 설치해주는 서버 설치 프로그램입니다. 1-3. 기본 설정 기본 설정을 해줍니다. 이름을 쓰고 지역은 서울 리전인 asia-northeast3-x를 선택해 줍니다. 머신 타입과 디스크 크기를 설정해줍니..
2020. 2. 3. PHP 스터디를 위한 기본 설정 php는 아파치 웹서버 위에서 돌아가는 인터프리터 언어이기 때문에 서버를 컴퓨터에 설치해야 된다. 여간 번거로운 일이 아니기 때문에 웹서버 동작에 필요한 3가지 프로그램 AMP (Apache, Mysql, PHP)을 모아서 한 번에 설치하는 툴을 사용한다. 비트나미 홈페이지에 들어가 관련 도구를 다운로드 받는다. https://bitnami.com/stack/wamp/installer 다양한 프레임워크가 나오는데 PhpMyAdmin만 체크하고 설치한다. 설치가 완료되면 AMP가 모두 깔린 것이다. 이제 php.ini 설정을 해야 한다. 설치폴더/php/로 들어가서 php.ini 열고 opcache.enable를 0으로 바꿔준다. 저장 후 아파치 서버를 재실행한다. Bitnami WAMP Stack 매니저..
2020. 2. 1. Git x Github 의 기본적인 사용법 GIT은 코드의 히스토리를 관리하는 도구이다. 우리가 흔히 듣는 Github는 구분을 해야 한다. Github는 말 그대로 이런 Git을 활용한 많은 코드를 관리해 주는 인터넷 저장소의 개념이다. Github를 이용하면 코드의 공유과 협업이 가능해진다. 먼저 아래의 사이트로 들어가 깃을 설치해보자. https://git-scm.com/ Git git-scm.com Git GUI를 실행하고 깃을 적용해줄 폴더를 설정해주기 위해 먼저 cd 명령으로 프로젝트 폴더까지 이동한다. 깃을 초기화 하고 $ git init 현 위치의 모든 디렉터리 파일을 추적하고 $ git add . 첫 번째 커밋을 작성한다. $ git commit 혹은 간단하게 아래와 같이 입력해도 된다. git commit -m "first co..
2020. 1. 30. [GCP] 구글 클라우드 플랫폼에서 SFTP 사용하기 구글 클라우드 플랫폼은 말 그대로 호스팅이 아닌 가상 서버를 빌려주는 것이기 때문에 사용자가 뒷단에서 몇가지 작업을 해줘야 합니다. 이 게시글은 클라우드 서버에 FTP 연결을 하는 방법입니다. 이렇게 연결하더라도 퍼미션 문제 때문에 SSH 또한 같이 사용해야 한다는 것이 함정.. 먼저 아래 주소에서 PuTTY SSH를 다운로드 합니다.https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.htmlDownload PuTTY: latest release (0.73)This page contains download links for the latest released version of PuTTY. Currently this is 0.73, released on..
2020. 1. 29. [GCP] 워드프레스 고유 주소 404 에러 해결 방법 구글 클라우드 플랫폼에서 Compute Engine을 통해 워드프레스를 설치한 경우 아래와 같이 고유 주소를 변경하고자 할 때 뜬금없는 404 에러를 만나게 됩니다. 이럴 땐 SSH로 접속해 간단하게 해결해 봅시다. 1. AllowOverride 수정 sudo nano /etc/apache2/apache2.conf 위의 명령어를 실행한 후 의 AllowOverride를 ALL로 수정합니다. 2. htaccess 수정 sudo nano /var/www/html/.htaccess 그다음 위 명령어를 입력하고 워드프레스의 .htaccess를 수정합니다. RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILE..