Peep

도메인/호스팅 등록

워드프레스는 가입형과 설치형이 있습니다.

가입형은 네이버, 티스토리 블로그와 같이 운영이 되는 것이고 설치형은 워드프레스 소스코드를 설치하는 방식입니다.

(가입형 주소 : wordPress.com)

1 도메인 등록

도메인에 대해 사전을 검색해보면

'로마자로 나타낸 인터넷 사이트 주소. 숫자로만 구성된 아이피(IP) 주소의 단점을 보완하기 위해 사용함.  

예를 들어, 청와대의 도메인 이름은 www.bluehouse.go.kr 임.' 이라고 나옵니다. 

- 출처 : 구글 사전

위 사전에서도 적혀있듯이 더 간단히 말하면 집 주소 = 홈페이지 주소라고 생각하면 됩니다.

집 주소가 있어야 손님이 오겠죠? 

그래서 필수로 있어야 합니다.

포털에서 '도메인' 이라는 키워드만 검색해도 많은 도메인 회사 사이트가 검색됩니다.

여기서 제가 추천을 드릴 수는 없습니다.

왜냐하면 회사마다 서비스와 가격의 차이가 나기 때문입니다.

다양하기 때문에 여러군데 확인해보고 비교해보고 본인이 원하는 곳에서 하시길 바랍니다.

[도메인 구매 예시]

저는 닷홈(https://www.dothome.co.kr/)이라는 사이트에서 도메인 구매 예시를 보여드리겠습니다. 

1.닷홈에 들어가서 도메인 탭을 클릭합니다.

2.도메인 신청을 눌러 들어가면 도메인 검색하는 창이 나오는데, 본인이 사용하고자하는 주소를 적고 검색을 눌러줍니다.

  www.okayoon.com이라는 홈페이지 주소를 가지고 싶다면 'okayoon'을 적어주고 하단에 체크 박스에 .com을 체크해 줍니다. 

  (그 외 원하는 것을 체크해서 가격을 확인 할 수 있습니다.)

3. 검색버튼을 누르게 되면 가격을 확인 할 수 있습니다.

   작성한 도메인 확인이 되고, 구매 기간설정을 할 수 있습니다.

   신청하기 누르면 결제할 수 있습니다.

   혹시 내가 작성한 도메인 결과가 안나오면 사용하고 있는 도메인입니다.

4. 결제를 진행하게되면 도메인은 내 소유가 됩니다. (기간은 연장가능합니다.)

2 호스팅 등록

필수 작업인 호스팅 등록 작업입니다.

호스팅이 무어냐 하면... 내 홈페이지를 공유하기 위해서 서버에 빌리는 작업을 말합니다.

서버가 있어야 내가 업로드한 내용들을 저장하고, 공유할 수 있기 때문입니다.

[호스팅 구매 예시]

위와 같이 저는 사이트 찾는게 귀찮기 때문에... 같은 회사(닷홈)에서 예시를 보여드리겠습니다.

다시 한 번 말씀드리지만 본인이 원하는 서비스와 가격이 합당한 사이트에서 하길 바랍니다.

1.무제한 웹 호스팅 탭에서 무제한 웹호스팅 신청 클릭합니다. 

  타 사이트도 거의 비슷하게 되어 있기 때문에 예시를 보고 다른 사이트에서 진행해도 무리 없을 것으로 보입니다.

2. 호스팅 종류 확인 후 결정하여 신청하기 누릅니다.

   타 호스팅 사이트에서도 보통 종류가 나누어져 있을 겁니다.

   도메인 연결이라는 항목이 있을 건데, 이건 타 사이트에서 구매한 도메인도 가능합니다. 

   다만 같은 사이트에서 호스팅, 도메인 둘 다 진행하면 분명 특혜는 있을 겁니다.

   따라서 내가 이런거 잘 모른다 하면 한 군데 정해서 도메인, 호스팅을 같이 하시는 것도 나쁘지 않습니다.

3. 예시로 무료호스팅 신청하기 를 진행했습니다. 

   (무료 웹 호스팅은 닷홈에서 구매한 도메인이 있어야 합니다.)

4. 결제 정보를 작성해야 합니다. 

   (정보가 채워져 있는 부분도 있고 넣어야하는 부분도 있었는데 개인정보를 보호하기 위해 지웠습니다.)   

5. 테마선택하기 부분에서 워드프레스를 눌러줍니다.

  그러면 ↓아래 이미지처럼 테마 선택가능한 영역이 나옵니다.

  워드프레스 기본설치 눌러줍니다.

  요즘은 호스팅 사이트에서 워드프레스를 기본으로 설치해주는 곳이 많습니다.

  없을 경우에 대한 포스팅도 별도로 진행하도록 하겠습니다.

6. 약관 동의 읽어보고 동의 후 진행합니다.

   이때 자신의 웹 호스팅 정보 / 계정정보 를 잘 알고 있어야 합니다.

   나중에 로그인 시 사용하거나 커스텀을 할 경우에 FTP를 이용하기 위해서 필요할 수 있습니다.

7. 신청하기 클릭

신청 완료가 되면 내 도메인, 호스팅 등록이 잘 되었는지 확인하는 작업이 남았습니다.

본인의 도메인 주소를 인터넷 주소창에 넣고 접속하면 됩니다.

닷홈에서 무료로 실험 해 볼 경우에는 '계정아이디.dothome.co.kr'을 주소창에 넣은 뒤 접속 해보면 됩니다.

사이트가 연결되어 있으면 도메인, 호스팅 설정이 완료 된 것입니다.

또한 워드프레스 설치가 되었는지 확인 하려면 본인의 주소 뒤에 /wp-admin을 붙여주면 됩니다.

ex) www.okayoon.com/wp-admin

로그인하는 화면이 아래와 같이 나오면 성공적으로 도메인, 호스팅 등록 + 워드프레스 설치 작업이 완료 되었습니다.

(로그인 페이지의 디자인은 버전에 따라 다를 수 있습니다)

다음에는 워드프레스 관리자 설정에 대해 알아보도록 하겠습니다.

워드프레스 기초 홈페이지 제작(1)

워드프레스(wordpress) 란?

2003년에 만들어진 홈페이지를 제작, 관리하는 프로그램입니다.

웹 사이트를 만들고 관리하는 것 중, 전 세계의 1/4이 사용할 만큼 사랑 받고 있고

타 CMS(content management system) 툴과 압도적인 차이로 세계 1위라고 합니다.

CMS 툴이라고 하며 CMS는 Contents Management System의 약자입니다.

쉽게 설명하자면 개발자가 코드로 홈페이지를 제작하는 것이 아닌, 툴을 사용해서 홈페이지를 제작할 수 있는 시스템입니다.

티스토리 블로그도 CMS에 해당합니다.

사용하려는 툴의 장점을 알아보고 진행하도록 하겠습니다.

내가 사용하는 툴이 이렇구나 하고 간단히 슥~ 읽고 가면 되겠습니다.

1. 간단한 interface로 쉽게 홈페이지를 제작 할 수 있습니다.

- 어드민 페이지를 사용하기 쉽다는 뜻으로 생각하면 될 것 같습니다.

2. 반응형 웹을 쉽게 만들 수 있습니다.

- 반응형 웹은 pc, 태블릿pc, 모바일 등의 디스플레이에서 최적화된 홈페이지라는 뜻입니다.

  (냉장고 문에 붙어있는 디스플레이 일수도 있고, 네비게이션이 될 수도 있습니다.)

  여기서 한 번 짚고 넘어갔다가 나중에 다시 말씀 드리겠지만,

  워드프레스 = 반응형 웹 은 아닙니다.

  워드프레스에 있는 테마가 반응형 웹을 지원할 수 있다는 것으로 알고 가셔야 합니다.

3. 수 많은 테마와 플러그인 존재합니다.

- 내가 개발하지 않고 남이 개발한거 가져다가 사용할 수 있다는 뜻입니다.

  그것도 글로벌하게 만든 것을 사용할 수 있습니다.

  조합만 잘해도 홈페이지 만들 수 있다? 라고도 생각하면 좋을 것 같습니다.

  (슬라이드, 데이터 폼, 메뉴 바 등)

4. 저렴한 구축 비용입니다.

- 생각하기 나름입니다, 내가 제작하기 때문에 저렴한 구축 비용이라고 하는 건데...

  만들어진 테마 구매해서 제작한다고 해도, 어느정도 공부하지 않으면 불 가능 하기 때문입니다.   

5. 세계적으로 많이 쓰다보니까 사용자 포럼이 잘되어있습니다.

- 글로벌 서비스이다보니, 본인이 영어를 잘하면 잘 할 수록 도움이 많이 됩니다.

  그렇다고 국내 포럼이 없는 것이 아니니 잘 이용하면 도움이 많이 됩니다. 

- 도움 되는 사이트 링크 작성해 두겠습니다.

한국 워드프레스 사용자 모임 같은 경우는 사용자 게시판에 질문하면 운영진께서 답변을 해주십니다. 도움이 많이 됩니다.

워드프레스로 제작되어 운영되고 있는 홈페이지 참고 사이트 두 곳 링크

참고사이트를 보면, 사이트는 같은 툴을 사용한다고 해도 어떻게 만들기 나름입니다.

다음에는 웹 벤치마킹하는 방법에 대해 알아보도록 하겠습니다.

12byte를 초과하면 작성이 더는 안되게 해달라는 요구사항의 작업을 하였다.

코드

$(function(){ 

  // byte 체크 할 타겟 (input, textarea) 
  var $target = $('#name'); 

  // 값이 들어올때는 input, 커서가 들어오고 나갈때는 focus, focusout 
  $target.on('input focus focusout', function(){ 
  	bytesValidationChk($(this),12); // 12자까지 
  }); 

  // 체크 함수 
  function bytesValidationChk(target, maxByte) { 
	  // byte 체크 할 때 사용하는 함수들 선언 
    var returnVal = ''; 
    var currentLength = 0; 
    var codeByte = 0; 

    // input의 value 
    var targetVal = target.val(); 

    // input.length만큼 반복
    for(var i = 0; i < targetVal.length; i++){ 
      // 한글, 영문 등의 byte만큼 codeByte를 증가 
      var oneChar = escape(targetVal.charAt(i)); 

      // 한글 = 2byte 나머지 = 1byte 
      if(oneChar.length > 4) {
        codeByte += 2;
      }else {
        codeByte++;
      } 

      // length 체크 
      // codeByte 값이 내가 지정한 maxByte보다 작을 때 = currentLength 값을 1씩 증가 
      if(codeByte <= maxByte) {
        currentLength = i + 1;
      } 

    } 
  
    // codyByte가 내가 지정한 maxByte보다 커지면 
    if(codeByte >= maxByte){ 
      // currentLength만큼 targetVal를 잘라줘서 returnVal에 담아줌 
      returnVal = targetVal.substr(0, currentLength); // 한글로 12byte면 currentLength가 6임 

      // maxByte만큼 자른 returnVal를 target(input)에 value로 넣어줌 
      target.val(returnVal)	; 
    } 
  } // bytesValidationChk

});

여기서 문제가 된건....
ie8에서 input 이벤트가 적용되지 않는 것이었다.

(focus와 상관 없이 자판을 쳤을때 체크해서 복+붙 시에도 체크가 가능해야 했다)

따라서 key 이벤트를 당연히.. 넣어줬어야 했는데, 이렇게 되면 ctrl+a(전체선택)이 적용되지 않는다.
큰 문제는 아니지만, 누군가는 당연히 복+붙을 할터이니.. 이슈로 돌아올게 분명하다.

+ firefox 버전 61.0.1(2018.07.11 기준으로 최신)에서는 한글에 key 이벤트 적용이 안된다.
과거부터 있던 이슈라는데, 한글이 완성형 글자라서 그러느니 뭐라느니, 그래서 이때는 input태그를 필수로 사용했다.★

그래서 처음 해본게.
value값을 새로 넣는게 아니라 target.attr('maxlength')값에 접근해서 cuttrneLength값을 넣어주는 방법도 했는데,
이 방법은 복+붙 시에 완전히 적용되지 않더라...
(byte가 maxByte가 되면 maxlength 추가, 아니면 제거 형식)

그래서 그냥 ie8은 key이벤트를 추가하여.. ctrl+a를 포기하기로 했다. (이 이하는 아몰랑)
마우스로 드래그하면 적용이 되니까....(흑흑)

수정된 코드이다.

$(function(){

  var $linkBtnInput = $('.domain-link-btn-wrap').find('.link-input');

  // 링크 이벤트를 기본으로 선언...
  var linkEvent = 'input focus focusout';

  // 브라우저 property를 사용해서 버전을 return받고
  var isIE = function(){
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
  };
  
  // 비교하여 ie8이면 이벤트를 재 선언한다..
  if (isIE () == 8) linkEvent = 'input keyup focus focusout';

  // 아래는 위와 같다. 
  $linkBtnInput.on(linkEvent, function(){
  	bytesValidationChk($(this),12);
  });

  function bytesValidationChk(target,maxByte){
    var returnVal = '';
    var currentLength = 0;
    var codeByte = 0;
    var targetVal = target.val();
    
    for (var i = 0; i < targetVal.length; i++) {
      var oneChar = escape(targetVal.charAt(i));
      
      if(oneChar.length > 4) {
          codeByte += 2;
      }else{
          codeByte++;
      }

      if(codeByte <= maxByte){
          currentLength = i + 1;
      }
    }
    
    if(codeByte >= maxByte){
      returnVal = targetVal.substr(0,currentLength);
      target.val(returnVal);
    }
  }
  
});

더 좋은 방법을 알았으면 좋겠다 (헝헝 ㅠㅠ)

몇일 전 업무보던 중에 주석때문에 오류난 경험이 있어 적어두려 한다.
바.보.같.이...

html 태그를 오랜만에 작성하게 되어 주석 넣을 일이 생겼는데,
이때..

이런식으로 써버렸다.
이거 때문에 뒤에 숏코드가 적용되지 않는 에러가 생겼다.
곧 문제를 찾을 수 있었지만..

업무 중 intellij를 쓰는데 보통 단축키로(ctrl + /) 주석을 해왔어서 기억을 못한 이유도 있다.
세상이 발전할 수록 인간은 바보가 된다는 말이 기억난다.

그래서!! 또 이런 일이 생길까봐 다시한번 기억하자는 의미로 간단히 주석에 대해 정리했다!

HTML 

<!-- 내용 작성 --!>

<!-- 
	여러줄도 가능합니다.
--!>

CSS

/* 내용작성 */

/*
	여러줄도 가능합니다.
*/

JS

/*
	여러줄 주석입니다.
*/

// 한줄 주석입니다.

그 외 주석 태그

/*
	TODO : 리팩토링 작업이 필요할 때, (발전) 해야 할 작업에 대해 작성
*/

/*
	FIXME : 코드에 문제가 있어 차후 수정해야 할 때 이외에도 많지만 안써봤기 때문에 패스!
*/