더 이상 참을 수 없었던 셀프호스팅 워드프레스의 한계 셀프 호스팅 워드프레스를 버전 업데이트 없이 너무 오래 방치했더니 나도 모르게 취약점에 의해 악의적인 코드가 주입되어 간헐적으로 이상한 웹사이트로 리디렉션된다는 사실을 최근에 파악했다. 처음에는 악성 크롬 익스텐션이나 다른 스크립트 문제인 줄 알았는데, 알고보니 워드프레스 자체에 악성 코드가 삽입되어 있었던 것이다. 공식 플러그인 중 하나인 akismet의 파일 중 하나에 이런 코드가 심어져있었다. 어떤 취약점을 통해 이렇게 된 것인지 까지는 파악 실패했으나 얼핏 봐도 수상하길래 ChatGPT에 물어보니 공격자가 나중에 POST로 원하는 명령을 보내서 동적으로 코드 실행이 가능한 백도어라고 한다. ...
기존에 설치하여 사용하고 있던 워드프레스에서 wp-config.php 파일의 $table_prefix를 변경하려면 다음 스텝에따라 진행하자. 본 포스팅에서는 다음 상황을 가정하고 설명할 예정이다. 기존 $table_prefix = ‘wp_’ 변경된 $table_prefix = ‘newprefix_’ 1. DB 테이블명 변경 DB에 접속해서 변경된 prefix를 가지도록 DB명을 변경한다. DB명을 변경 후 워드프레스 사이트에 로그인 해보면 정상적인 로그인이 되고 사이트가 작동하는것을 볼 수 있다. 하지만 기존 사용자들의 capability와 role이 인식이 제대로 되지 않는것을 발견 할 수 있다. 이를 고치기 위해서 2번 스텝을 진행한다. ...
웹사이트 이전을하면서 도메인을 변경하는 경우 기존에 쌓아왔던 많은 데이터들에 대한 일괄적인 변경이 필요하다. 이를 워드프레스의 글/옵션들 하나하나 찾아다니면서 검색하기는 매우 힘들기때문에 Database에서 sql 구문으로 한번에 변경하면 빠르게 일괄 처리가 가능하다. 일괄변경을 하기전에는 문제가 생기거나 실수를 할 수 있으니 꼭 DB를 백업해두고 작업을 진행하도록 하자. 1. wp_options 변경 다음 쿼리를 이용하여 기존 사이트 주소와 직접적으로 연관이된 옵션설정값들을 일괄로 확인하는것이 가능하다. SELECT * FROM wp_options WHERE option_value LIKE '%기존주소%' siteurl, home 변경 워드프레스의 경우 위의 두 값을 기반으로해서 모든 퍼머링크나, 메뉴링크, 자바스크립트/CSS 링크 등을 출력하므로 위 두개 사항은 필수적으로 확인하여 수정하여여한다. ...
아파치(Apache)와 엔진엑스(NginX)의 특성들을 비교한 글들은 많이 있으니 여기서 다루지 않고, 실제 AWS EC2 micro에 적용했을때 어떤 차이를 보였는지만 눈으로 쉽게 볼 수있도록 이 글을 작성한다. 본 테스트가 진행된 웹서버에서는 워드프레스 기반의 사이트가 운영되고 있으며 일간 페이지뷰는 800~1000뷰 정도 된다. 처음에 아파치를 설치해서 사용할 떄는 CPU점유율이 5분이상 100%를 넘을때가 너무 많았다. 마이크로 인스턴스의 특성상 CPU 사용률 100%가 일정시간 이상 지속되면 먹통이 되는데 덕분에 하루에 4~5회정도 사이트 접속이 불가능한 시간들이 있었다. 서버를 스몰 인스턴스(small instance)로 업그레이드 하긴 좀 아까워서 웹서버를 엔진엑스, php-fpm조합으로 교체하여 테스트 해 본 결과 매우 성공적인 성능 향상을 가져왔다. ...
맥용 패키지 설치 프로그램인 홈브루(Homebrew)가 설치되어 있다는 것을 가정하에 진행한다. 홈브루가 없을경우 http://brew.sh/ 에서 다운로드하여 설치한다. 홈브루가 설치되어있을경우 다음 명령어를 통해 홈브루 포뮬러들을 업데이트 해두는 것이 좋다. brew update NginX 설치 brew install nginx NginX 설치를 위해서는 pcre 라이브러리가 필요한데, 디렉토리 권한문제로 다음과같은 에러가 날때가있다. Warning: Could not link pcre. Unlinking... Error: The `brew link` step did not complete successfully The formula built, but is not symlinked into /usr/local You can try again using `brew link pcre' 이경우 다음과같이 해결해주면 된다. ...
PHP기반의 웹사이트에서 증명서 발급, 영수증 발급, 견적서 발급 등 자동으로 PDF를 생성할일이 많은편이다. 추가적인 라이브러리 설치와 셋업과정 없이 기본적인 PHP 디폴트 설치 상태에서도 잘 동작하는 두가지 대표적인 오픈소스 프로젝트를 소개해 보려 한다. R&OS 홈페이지: http://sourceforge.net/projects/pdf-php/ 트루타입 폰트(TTF)를 지원하지만 유니코드 폰트(예: 맑은고딕, 나눔고딕 등) 지원이 제대로 안되서 한글이 포함된 PDF 문서를 생성하기가 쉽지 않다. 라이브러리에서 유니코드 트루타입폰트를 로딩하면 예외가 발생해서 사용이 불가능하다. 유니코드가 아닌 트루타입 폰트를 사용할경우 한글이 지원되지만(예: 아리따글꼴 등) 해당 폰트를 생성된 PDF문서에 포함(embed) 시켜야만 한다 (포함시키지 않을경우 문서가 깨짐). 그러다보니 한글 폰트가 포함되어 문서용량이 커지고 로딩이 길어지는 것을 감수해야 한다. ...
한글 웹사이트의 경우 브라우저 및 OS마다 기본폰트도 다르고, 폰트 렌더링 방식도 제각각이다보니 웹사이트 제작시 디자이너-개발자-웹사이트디자인 의뢰인 간에 폰트를 이미지화 해서 쓸 것인지 항상 말이 많다. 영어폰트같은 경우에는 용량이 작아서 부담없이 여러 폰트들을 웹폰트 형식으로 임포트해서 사용가능하지만, 한글폰트의경우 기본적으로 1M가 넘어가는 대용량이기 때문에 하나이상의 폰트를 웹사이트에 사용하는 것은 웹사이트 로딩속도에 치명적인 영향을 끼친다. 하지만 결국 검색엔진 최적화(SEO)와 유지보수 관리의 용이성 때문에 이미지화 시킨 텍스트보다는 실제 폰트를 이용하여 렌더링된 텍스트가 여러모로 장점이 많다. 워드프레스의 메뉴나 위젯등 대부분이 텍스트를 이용한 타이포그라피를 이용하여 만들어진 디자인이 많기때문에 원활한 활용을 위해 한글 웹폰트의 필요성이 더 커지고 있다. 최근에는 네이버에서 무료로 배포하는 나눔고딕 덕분에 폰트선택의 폭이 많이 늘어나서 상황이 많이 좋아진 편이며, 더군다나 구글 웹폰트에서 earlyaccess 형식이긴 하지만 한글폰트를 지원하기 시작했고, 여기에 나눔고딕이 포함되어 있어서 매우 편리하게 나눔고딕을 웹폰트로 사용할 수 있게 되었다. ...
액세스 컨트롤 에러 웹사이트에서 XMLHttpRequest를 이용한 ajax 요청을 보낼 때, 현재 웹사이트의 도메인과 ajax 요청을 보낼 웹사이트의 도메인이 다른 경우 브라우저 차원에서 보안을 위해 다음과 같은 액세스 컨트롤 에러를 발생시킨다. XMLHttpRequest cannot load http://www.example.co.kr/wp/wp-admin/admin-ajax.php?action=get_portfolio_item_action&postid=178. Origin http://example.co.kr is not allowed by Access-Control-Allow-Origin. 위 예시와 같이 상위 도메인이 같더라도, 서브도메인만 달라지면 액세스 컨트롤 에러가 발생한다. 따라서 웹사이트가 www.example.co.kr 로 접속하거나 example.co.kr로 접속했을때 동일한 페이지를 보여준다고 해도 엄연히 다른 사이트에 접속한것으로 웹브라우저가 인식한다. 따라서 위와같이 동일사이트에 접속했다고 생각했음에도 불구하고, 생각치 않게 액세스 컨트롤 에러가 발생하는 실수를 할 수 있기 때문에, 이러한 실수를 막으려면 둘중에 하나의 도메인으로 통일해서 강제 redirection을 걸어놓는 것이 좋다. ...
워드프레스로 요즘 유행하는 리스폰시브 테마를 구현하다가 비디오를 임베딩 할일이 생겼다. 유튜브(YouTube)나 비메오(Vimeo)의 경우 보통 iframe을 사용해서 로딩되기 때문에 가로세로 길이를 고정하지 않고 CSS만 갖고 동적으로 표현하려니 쉽지 않았다. 그냥 jQuery로 계산해서 처리하려다가 혹시나 해서 구글링 해보다가 http://avexdesigns.com/responsive-youtube-embed/ 글을 발견했다. 계산식도 없이 CSS만 갖고 리사이징을 하는 구현 아이디어를 보니 무릎이 탁 쳐진다. 역시 세상에 참 똑똑하신 분들 많은걸 새삼 깨닫는다. HTML 코드 CSS 코드 .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 동작 원리 iframe에 width:100%, height:100% 속성을 줘서 일단 부모 엘리먼트를 꽉채우도록 만들어 둔다. ...
워드프레스로 블로깅을 하다보면 All In One SEO Pack 플러긴만 설치해두면 구글에는 엄청나게 검색이 잘되는 것을 금방 알 수 있다. 워드프레스 자체의 고유주소(permalink)시스템 + 자동 생성되는 메타정보(키워드나 컨텐츠 내용) 들이 이미 구글 봇이 수행하는 인덱싱에 최적화 되있기 때문이다. 덕분에 큰 노력 없이도 구글에 최상단 노출이 되는 경우가 많다보니, 블로그 트래픽의 구글검색을 타고 들어오고 있다. 하지만 글을 올리고 몇달이 지나도 국내 검색 엔진들에는 전혀 검색이 되지 않길래 이것저것 검색을 해보니, 아니 웬걸. 네이버 검색엔진님께 내가 직접 RSS 피드을 등록을 해줘야 검색이 된다는 황당한 설명을 발견. 네이버 신디케이션 서비스도 그렇고 네이버측에서는 구글처럼 봇으로 긁어오는게 해당 사이트에 무리를 줄 수 있다는 핑계를 대긴 하지만 실제로 이렇게 되어있는 이유가 궁금할 따름이다. 아래는 네이버측의 설명이다 ...