[스크랩 - 원문] https://ko.wordpress.org/2014/01/01/%EB%82%B4-%EC%BB%B4%ED%93%A8%ED%84%B0%EC%97%90-%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0/

워드프레스가 외국 프로그램이라서 WAMP를 사용해 내컴퓨터에서 워드프레스를 설치할 경우 WAMP가 비밀번호를 설정해야 하는 등 여러 가지 번거로운 점이 있어서 국내 웹서버 프로그램인 오토셋을 이용한 내 컴퓨터에서 워드프레스를 설치하는 방법을 알아봅니다.

내 컴퓨터에 워드프레스 설치하기

Autoset 설치하기

워드프레스는 설치하면 바로 사용할 수 있는 블로그 프로그램이지만 정적인(Static) 콘텐츠가 아닌 데이터베이스와 연동해서 원하는 데이터를 불러와서 동적인(Dynamic) 콘텐츠를 생산하는 PHP에 의해 작동하는 프로그램입니다. PHP는 인터넷 서버 환경에서만 작동하므로 워드프레스를 시험적으로 사용하기 위해 일일이 웹호스팅 서버에 설치할 수는 없는 일이고, 테마를 수정한다거나 새로운 테마를 만들려면 웹호스팅 서버에 업로드해서 작업하기가 불편합니다. 그래서 내컴퓨터에 서버 환경을 만들어 웹호스팅과 같은 환경을 구축할 수 있습니다. 그러자면 서버를 만들기 위한 프로그램을 설치해야 하는데, 이때 3가지 프로그램이 필요합니다. 우선 워드프레스는 PHP 언어로 만들어졌기 때문에 기본적으로 PHP 프로그램이 설치돼 있어야 합니다. 그리고 PHP로 만든 콘텐츠를 인터넷 사용자에게 전달하는 역할을 하는 것이 아파치 웹서버입니다. 또한 워드프레스에서 작성된 모든 글은 데이터베이스에 저장되고 방문자의 클릭에 따라 글이 보여지며, 글의 저장을 담당하는 역할은 MySQL이라는 데이터베이스 프로그램이 담당합니다. 서버 환경을 구축하려면 이러한 세 가지 프로그램을 자신의 컴퓨터에 설치하면 됩니다.

이 세 가지 프로그램을 제각기 설치할 수도 있지만 사용자의 편의를 위해 세 가지 프로그램이 한데 묶인 프로그램을 이용할 수도 있습니다. 별개의 프로그램으로 설치하면 서로 연동하기 위해 설정을 해야 하는 번거로움이 있지만 병합된 프로그램은 이미 서로 연동된 상태로 설치되므로 한번의 설치로 바로 서버 환경을 이용할 수 있습니다. 이러한 프로그램의 조합을 스택(Stack: 쌓아놓은 것, 조합)이라고 합니다. 이 스택은 웹서버인 아파치(Apache), 데이터베이스인 MySQL, 그리고 PHP의 첫 글자를 따서 AMP라 하고, 운영체제에 따라 WAMP(Windows+AMP), MAMP(Macintosh+AMP), LAMP(Linux+AMP)가 있습니다. 국내에서 개발된 프로그램은 Autoset, Amp_setup이 있습니다.

•WAMP: http://www.wampserver.com/en/
•MAMP: http://www.mamp.info/en/index.html
•LAMP: http://bitnami.org/stack/lampstack
•XAMPP: http://www.apachefriends.org/en/xampp.html

모든 운영체제에 설치할 수 있는 크로스 플랫폼인 XAMPP(X:Cross+AMP+Perl)가 있지만 XAMPP는 초보자가 사용하기에는 다소 불편합니다. 이러한 각 스택은 오픈소스 프로그램을 사용하기에 스택도 무료로 내려받아 사용할 수 있습니다. 스택은 내려받아서 설치만 하면 바로 사용할 수 있으며, 여기서는 사용자 비중이 가장 높은 윈도우 환경에 설치할 수 있는 Autoset 8을 설치하는 방법을 알아보겠습니다. 웹브라우저에서 아래 URL로 이동하면 해당 프로그램을 내려받을 수 있는 사이트로 이동합니다.

http://autoset.net/xe/download_autoset_8_0_0

시스템에 따라서 64비트용과 32비트용이 있으니 자신의 컴퓨터에 맞는 프로그램을 내려 받으세요. 서버가 작동을 하지 않을 경우 “네이버 개발자 센터에서 다운로드” 링크를 클릭해서 내려받습니다. 5개의 파일로 나눠져 있으니 모두 내려받아서 압축 해제하면 1개의 파일로 됩니다.

AutoSet800Patch3_x64.exe 파일을 클릭하면 위와 같은 과정을 거쳐서 설치됩니다. 설치하기 전에다른 AMP 프로그램을 사용중이라면 모두 중지하고 실행합니다. 한국어를 선택하고 마지막 화면에서는 설치될 하드디스크를 변경할 수 있습니다.

구성 요소 설치 창에서 스크롤 바를 내려서 보면 워드프레스까지 설치됩니다. 마지막 창에서처럼 경고 메시지가 나오면 Automatically~에 체크하고 다음 버튼을 클릭합니다.

설치가 진행되고 제 경우에는 WAMP 서버가 작동 중에 설치했더니 오류 메시지가 나옵니다. 이럴 경우 제어판에서 프로그램을 제거하고 설치 폴더도 제거한 다음 다시 설치해야 합니다. 최종 화면에서 완료 버튼을 클릭하면 방화벽 차단 관련 메시지가 나오기도 하는데 액세스 허용에 클릭합니다.

오토셋을 처음 실행하면 웹서버(80)만 실행 됩니다. 데이터베이스 프로그램으로 MySQL과 큐브리드가 있는데 여기서는 MySQL을 사용합니다. 제어 메뉴에서 MySQL을 클릭하면 실행됩니다. 설정 메뉴에서 여러 가지 설정을 할 수 있으니 참고하세요. 위 세 번째 그림은 설정–>오토셋 설정–>오토셋 기본 정보를 클릭하면 나오는 내용입니다. 여기서 시작옵션과 종료옵션에 체크하고 아래로 스크롤 해서 변경사항 적용 버튼을 클릭하면 오토셋 종료와 시작 시 이들 프로그램이 자동으로 시작하거나 종료됩니다. 바탕화면에 바로가기 아이콘이 없는 경우 설치 폴더에서 AutoSet.exe 파일을 클릭하면 되고 오른쪽 마우스 클릭해서 바로가기 아이콘을 만듭니다.

위에서 자동 종료되도록 설정했지만 실제로는 윈도우 시작프로그램에서 아파치 웹서버와 MySQL, 큐브리드가 자동으로 시작됩니다. 다른 웹 서버 프로그램(WAMP)을 사용하면 서로 충돌이 일어나서 해당 프로그램 사용할 수 없는 경우가 있습니다. 이러한 자동 실행을 꺼주는 방법을 알아보겠습니다.

윈도우 제어판의 모든 제어판 항목에서 관리도구–>서비스를 선택하면 위와 같은 화면이 나옵니다. AutoSet7_Apache와 Autoset7_MySQL의 행을 오른쪽 마우스 클릭해서 속성을 선택하면 창이 나옵니다. 여기서 자동을 수동으로 전환합니다. 아래로 스크롤해서 Cubrid Service는 “사용안함”으로 설정합니다. 변경사항은 재부팅 후 적용되며 이와 같이 설정하면 오토셋 종료 시 모든 서비스가 종료되므로 WAMP서버를 가동해서 사용할 수 있습니다.

오토셋을 설치하고 설치 폴더에서 public_html 폴더로 들어가면 여러 가지 CMS 프로그램이 들어있습니다. 워드프레스는 영문 버전이므로 한글 언어 파일을 설치하는데 번거로우므로 폴더를 제거합니다. 또한 다른 프로그램도 혼동이 되므로 모두 제거합니다.

https://ko.wordpress.org/

위 링크로 이동해서 파란색의 버튼을 클릭해서 워드프레스 한글 버전을 오토셋 설치 폴더의 public_html 폴더에 저장합니다. 압축을 해제하고 폴더 안으로 들어가서 wordpress 폴더를 복사해서 public_html 폴더에 붙여 넣습니다.

데이터베이스를 만들기 위해 오토셋의 메뉴에서 제어–>phpMyAdmin을 클릭하면 기본 웹 브라우저에 우측 그림처럼 나타납니다. 오토셋의 MySQL은 기본적으로 비밀번호가 설정돼 있습니다. 사용자명에 root, 비밀번호에 autoset을 입력하면 로그인 됩니다.

Database 탭을 클릭하고 입력란에 wordpress를 입력합니다. 이것은 워드프레스가 사용할 데이터베이스 이름입니다. 우측의 만들기 버튼을 클릭하면 좌측 사이드바에 데이터베이스 테이블이 만들어집니다.

웹 브라우저의 주소란에 localhost/wordpress를 입력하고 엔터 키를 누르면 위와 같은 화면이 나타납니다. 위 화면이 나타나지 않는 경우도 있는데 나중에 설명합니다. 환경 설정 파일 만들기 버튼을 클릭합니다.

다음 화면에서 5가지의 정보가 필요하다고 합니다. 1은 이미 만들었고 2와 3은 이미 알고 있는 내용입니다. 3은 localhost이고 5는 다음 화면에서 나타납니다. Let’s go 버튼을 클릭합니다.

위처럼 입력합니다. 테이블 접두어는 하나의 데이터베이스를 사용하면서 여러 개의 워드프레스를 설치할 경우 서로 혼동을 방지하기 위해서 접두어를 다르게 할 수 있습니다. 전송 버튼을 클릭합니다. 간혹 데이터베이스의 사용자명과 비밀번호를 워드프레스 로그인 사용자명과 비밀번호와 혼동하는 경우가 있으니 주의하세요.

이전 과정에서 데이터베이스가 만들어졌으니 이제 워드프레스 설치 과정입니다. 설치 실행하기 버튼을 클릭합니다.

사이트 제목을 원하는 것으로 입력합니다. 사용자명은 워드프레스 로그인 사용자명으로 보통 admin으로 돼있는데 웹호스트에 설치하고 사용할 경우는 해킹을 방지하기 위해서 다른 사용자명을 사용하도록 합니다. 비밀번호 또한 문자, 숫자, 특수문자, 영문 대소문자를 섞어서 만들어주는 것이 좋습니다. 이메일 주소를 입력하고 워드프레스 설치하기 버튼을 클릭합니다.

설치가 모두 완료됐다고 합니다. 로그인 버튼을 클릭하고 아이디와 비밀번호를 입력하고 엔터 키를 누르면 워드프레스 관리자 화면이 나타납니다.

환경설정 파일 만들기

주소창에 localhost/wordpress를 입력하고 엔터 키를 눌렀는데도 정상적으로 설치되지 않는 경우가 있는데 이럴 때는 다음과 같은 방법으로 수동으로 wp-config.php 파일을 만들어야 합니다.

wordpress 폴더에서 wp-config-sample.php 파일을 오른쪽 마우스 클릭하고 텍스트 편집기(Open with Sublime Text)를 선택합니다. 편집기는 아래의 링크에서 내려받아 설치합니다.

http://www.sublimetext.com/2
http://www.sublimetext.com/3

3곳에서 데이터베이스 이름인 wordpress, 데이터베이스 사용자명인 root, 데이터베이스 비밀번호인 autoset을 각각 입력합니다. Ctrl+Shift+S키를 눌러서 –sample을 제거하고 wp-config.php 파일로 이름을 변경해서 저장합니다. 그런다음 주소창에서 localhost/wordpress를 입력하고 엔터 키를 누르면 정상적으로 진행됩니다.

완전 유용한 기사. 공유~

http://news.naver.com/main/read.nhn?mode=LSD&mid=sec&sid1=105&oid=293&aid=0000015203&viewType=pc

“프론트엔드 웹개발자, 자동화 기술 써보세요”

영문 뉴스 음성지원 서비스 듣기본문듣기

기사입력 2014-12-02 11:06 | 최종수정 2014-12-02 11:21 

 1  

2

11월30일 자바 스프링 커뮤니티 ‘봄싹’이 주최한 세미나가 네이버 그린 팩토리 강당에서 열렸다. 200여명이 참여한 세미나에서는 프론트엔드 개발 동향을 전하는 세션도 있었다. 변정훈 개발자는 ‘게으른 개발자’ 이야기를 먼저 꺼냈다. 

“어떤 작가는 이렇게 말하더라고요. ‘개발자는 1시간 반복 작업을 없애기 위해, 7~8시간을 투자한다’고요. 반복 작업을 없애는 프로그램을 만들기 위해서죠. 저는 이 생각에 동의해요. 특히 단순 반복 작업을 없애기 위해 개발자는 여러 노력을 시도하곤 하죠.” 

▲변정훈 개발자

서버 개발은 프론트엔드 개발보다 역사가 오래됐다. 그래서 서버 개발 쪽에서는 개발 환경을 도와주는 도구가 많이 나왔다. 불과 몇 년 전엔 자바 빌드 도구로 ‘엔트’가 주로 쓰였지만 이후 ‘메이븐’이 나오고 최근엔 ‘그래들’까지 나왔다. 이러한 도구들은 이전에 서버 개발자들이 불편해하거나 부족해하던 부분을 채워서 나온 결과물이다. 개발을 더 쉽고 효율적으로 할 수 있게 돕는 도구들이다. 하지만 프론트엔드 개발 분야에선 이러한 노력이 적은 편이었다. 하지만 최근 몇 년새 프론트엔드 분야에서도 자동화 기술들이 속속 나오고 있다. 특히 5년 전에 '노드JS'가 등장하면서 이러한 변화를 이끌고 있다. 

“노드JS가 전체 웹 기술의 일부이지만요. 자바스크립트라는 웹 언어를 사용했다는 점에서 많은 시도들을 이끌고 있어요. 그 중 의존성을 관리하거나 웹서버를 실행하거나 코드 품질을 관리할 때 쓸 수 있는 자동화 기술이 나오고 있죠.” 

의존성 관리 

웹사이트를 만들려면 의존성 관리를 해야 한다. 제이쿼리, 부트스트랩 등 외부 라이브러리를 가져다쓰고 이에 대한 버전 관리를 하는 것을 의존성 관리라고 한다. 과거 개발자들은 이를 위해 인터넷 웹사이트에 들어가 원하는 라이브러리를 검색하고 내려받아 내부 컴퓨터 폴더에 넣었다. 그리고 HTML 문서에 해당 경로를 입력해야 했다. 의존성 관리 도구를 이용하면 이러한 반복과정을 줄일 수 있다. 

대표적인 도구는 ‘보어’가 있다. 보어는 터미널에 명령어를 입력해 의존성 관리를 할 수 있도록 돕는다. 처음 한번만 설치하면 명령어를 간편히 입력하면서 원하는 라이브러리 통합해서 쓸 수 있다. 또한 어떤 버전을 썼고, 다른 팀원이 해당 도구를 썼는지에 대한 기록도 자동으로 남는다. 

이처럼 의존성 관리 도구를 쓰면 라이브러리 파일을 형상관리 도구에 넣지 않아도 되고, 버전 업데이트도 훨씬 쉬워진다. 

▲과거 반복과정이 많았던 의존성 관리(출처: 변정훈 개발자 슬라이드쉐어)

웹서버 실행 
과거엔 웹 서버 실행하는 게 복잡했다. 루트 경로를 따로 지정 해주는 등 관리하기 힘들고, 실행하는데 시간이 오래 걸렸다. 최근엔 프론트엔드 개발을 위한 빌드 도구가 여럿 나오고 있다. 대표적인 게 ‘그런트’나 ‘걸프’다. 이를 통해 프로젝트별로 환경을 자동화할 수 있다. 이 때문에, 다른 포트, 다른 경로를 사용할 수 있으며, 팀 단위로 작업할 때 누구나 똑같은 환경에서 테스트를 할 수 있다. 또한 ‘웹스톰’, ‘아톰’과 같이 여러 에디터를 사용할 수 있어 특정 개발환경에 종속되지 않는다. 

▲과거 웹서버를 실행할 때 관리하거나 실행 속도가 낮았다(출처: 변정훈 개발자 슬라이드쉐어)

▲빌드도구로 웹서버를 실행했을 때 장점(출처: 변정훈 개발자 슬라이드쉐어)

코드 품질 관리 
프론트엔드 개발 쪽에서 유효성이나 코드를 검사하는 것을 ‘린트’라고 한다. 사실 프론트엔드 개발에선 코드에 조금 문제가 있어도 결과를 실행하는 데 이상이 없었다. 하지만 최근엔 린트 도움을 받아 코드 품질을 더 높일 수 있다. 린트 도구로 세미콜론을 빼먹은 걸 알 수 있거나, 어떤 함수를 쓰지 말야야 하는지 등을 알 수 있다. 개발자가 실수할 가능성도 줄어든다. ‘JS힌트’가 대표적이며 페이스북이 만든 ‘플로우’나 트위터가 만든 ‘리세스’등도 있다. 

▲JS힌트와 같은 도구로 코드검사를 할 수 있다(출처: 변정훈 개발자 슬라이드쉐어)

▲JS힌트 도구가 위의 소스 문법을 검색한 결과(출처: 변정훈 개발자 슬라이드쉐어)

테스트는 한번에 

프론트엔드 개발자는 여러 웹브라우저를 동시에 테스트해야 한다. 이러한 과정을 한번으로 줄여주는 도구도 있다. 대표적으로 ‘소스랩’이 있다. 소스랩은CI 서버를 실행시킬 때, 여러 웹브라우저를 연결해 테스트할 수 있다. 이렇게 되면 한번 실행해 인터넷 익스플로러, 크롬, 파이어폭스 등에 제대로 작동하는지 하나의 인터페이스 안에서 간편하게 볼 수 있다. 

변정훈 개발자는 “자동화 기술은 도구이기 때문에 배우는 데 진입장벽이 높지 않다”라며 “상대적으로 쉽게 배울 수 있는 동시에 얻어갈 수 있는 이점이 많아 개발자들과 공유하고 싶었다”라고 설명했다. 또한 “개별적인 도구들이 언제 어떻게 쓰이는지 알 수 있으면 여러 도구를 조합해서 사용할 수 있다”라며 “이로 인해 효율적이고 빠르게 웹 개발을 할 수 있으며, 웹 개발 환경이 어떻게 변화하는지도 알 수 있다”라고 강조했다. 

▲변정훈 개발자

변정훈 개발자가 제안하는 프론트엔드 개발에서 사용할 수 있는 자동화 도구 
http://www.slideshare.net/rockdoli/adieu-springsprout2014 
의존성 관리를 위한 도구 

• 보어 http://bower.io/


• 브라우저리파이 http://browserify.org/

웹서버 실행 

• 그런트JS http://gruntjs.com/


• 걸프JS http://gulpjs.com/

코드 품질 관리 

• JS힌트 http://www.jshint.com


• 플로우 http://flowtype.org/


• 리세스 http://twitter.github.io/recess/


• ES린트 http://eslint.org/


• HTML힌트 https://github.com/yaniswang/HTMLHint


• CSS린트 http://csslint.net/

전처리 

• 사스 http://sass-lang.com/


• 레스 http://lesscss.org/


• 커피스크립트 http://coffeescript.org/


• 스타일러스 http://learnboost.github.io/stylus/

유닛테스트 

• 차이 http://chaijs.com/


• 모카 http://mochajs.org/


• 카르마 http://mochajs.org/


• 재스민 http://jasmine.github.io/

테스트 

• 소스랩 https://saucelabs.com/


• 커버올스 https://coveralls.io/


• 브라우저스택 http://www.browserstack.com/


• 짐내시엄 https://gemnasium.com/

이지현 기자 jihyun@bloter.net

swipe master - jquery plugin

IE7부터 지원되고 심플함.

인디케이터가 없어서 아쉽

https://github.com/thebird/Swipe

Swipe-master.zip