개발자도구여는 법 

- Ctrl+Shift+I

- 마우스 우 클릭 > 리스트에서 '검사' 클릭



Device Mode

'디바이스 아이콘' 클릭하면 Device Mode 접근 가능


디바이스 사용자 추가 방법은

Responsive옆에 '▼' 클릭 한 후 나오는 리스트에서 'Edit..' 클릭



여기에서 디바이스 추가 및 커스텀이 가능하다.


Add custom device... 클릭해서 수치 넣고 Add 


리스트에서 확인 가능!


저 막대기 바를 눌러서 크기 변경 가능


옵션 아이콘을 눌러서 Show media queries 누르면

사용된 미디어 쿼리가 확인 가능.



마우스 올려두면 확인가능하지만

파란색이 max-width 고 주황색이 min-width


옵션에서 show rulers누르면



이렇게 설정됩니다.



그리구 capture screenshot을 하게 되면

현재 페이지의 스크린샷을 저장!



현재 페이지 캡쳐가 필요할때 유용할 것 같다~










저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

void 0 이란?  (0) 2018.10.23
let 키워드, const 키워드  (0) 2018.10.23
ES6 매개변수 기본 정의  (0) 2018.10.16
javascript .map() 메서드를 알아보자  (0) 2018.09.17
javascript .filter() 메서드를 알아보자.  (0) 2018.09.17
이메일 인증하기 view단 validation 제작  (0) 2018.09.11
html, css, javascript 주석  (0) 2018.07.05
브라우저 언어 변경 방법(ie, 크롬, 파이어폭스, 오페라)  (0) 2018.07.01

호스팅, 도메인 등록 방법 알아보기


호스팅 업체 등록 시 워드프레스 설치를 자동으로 해주지 않는다면 어떻게 설치를 하는지에 대해 알아보겠습니다.


FTP란? 

파일 전송 프로토콜은 TCP/IP 프로토콜을 가지고 서버와 클라이언트 사이의 파일 전송을 하기 위한 프로토콜이다. 파일 전송 프로토콜은 TCP/IP 프로토콜 테이블의 응용 계층에 속하며, 역사는 오래 되었지만 지금도 인터넷에서 자주 사용된다............ 블라블라  - 출처 : 구글사전


간단히 말하면 파일 전송 프로토콜입니다.

FileZilla는 웹 서버에 내가 소스(파일,이미지, 동영상등..)를 올릴 때 사용하는 프로그램입니다.


1.
워드프레스 파일 설치
워드프레스 홈페이지에 접속 합니다. 
https://wordpress.org/ 
https://ko.wordpress.org/

두 사이트 모두 워드프레스 공식 홈페이지이며 워드프레스 파일을 다운로드 할 수 있습니다.


메인 페이지 좌측 상단에 'get wordpress' , '워드프레스 얻기' 버튼을 클릭하여 다운로드 페이지로 이동합니다.




다운로드 페이지에서 가운데에 있는 다운로드 버튼을 클릭하면 워드프레스 파일을 받을 수 있습니다. 
(버전은 다를 수 있습니다)



받은 파일 압축을 풀어주면 압축이 풀린 파일이 받아지는데, 

이 파일이 서버에 올라가야 워드프레스 설치가 완료되는 것 입니다. 


이 파일을 FTP로 올리는 작업을 할 것 입니다. (그러기 위해서는 도메인,호스팅 등록 작업을 진행 한 후어야 합니다.


2.

FTP 프로그램을 다운로드


서버에 워드프레스 파일을 업로드하기 위해서는 FTP 파일이 필요한데,

저는 FTP 파일 중에 '파일질라' 프로그램을 이용 할 것 입니다.

이 프로그램을 이용하는 이유는 사용하기 쉬우며, 유명하며, 오픈 소스 (자유 소프트웨어) = 무료 이기 때문입니다.




다운로드 받기 위해서 검색 포털에서 '파일질라 다운로드' 검색 후에 download 페이지로 이동해줍니다. ( 다운로드 바로가기 )




다운로드 페이지에서 자신의 운영체제를 확인 한 후 다운로드를 진행해줍니다.

Download FileZilla Client 클릭 > Download 클릭


다운로드 완료 후 다운 받아진 .exe 파일을 실행 해 줍니다.

 FileZilla 다운로드 매니저가 실행됩니다.



I Agree 클릭 



사용 옵션 선택 후  Next > 클릭

(해당 컴퓨터 모든 유저가 사용할 것인지, 오직 나만 사용할 것인지를 결정하여 진행하면 됩니다.)



components 다운로드 되는 것 같은데 그냥 Next >



다운로드 경로를 변경하고 싶다면 변경하고 아니라면 Next >



Next > 



저기 체크되어있는 부분 해제하고 Next >  

( Avast Free Antivirus 프로그램 다운로드 받고 싶다면 체크 한 상태로 Next > )



저기 체크 부분 해체 후 Next > 

(Opera 브라우저 다운로드 받고 싶다면 체크 한 상태로 Next > )



다운로드 로딩 창으로 변경이 되었다가(순식간에 되버려서 캡쳐를 못했습니다.)

다운로드가 완료되면 Finish 버튼이 있는 창으로 변경되는데 Finish 버튼을 클릭해 줍니다.



파일질라 프로그램 접속 화면 입니다. 


여기서 내 호스팅 서버에 연결을 하려면

빨간 박스 상자 안에 있는 호스트, 사용자명, 비밀번호, 포트정보를 입력한 후에 빠른 연결을 눌러주면 됩니다.

포트 같은 경우는 공백으로 둬도 됩니다.(공백일 경우 기본 포트 (21) 사용합니다)


호스트, 사용자명, 비밀번호 등의 정보는 본인이 호스팅등록을 할 때 입력하게 됩니다.


그 정보를 이용해서 FTP 연결하면 됩니다.



연결이 되었다면 좌측은 내 로컬(내 컴퓨터)이고 우측은 호스팅 서버입니다.(이미지는 서버연결이 안 된 상태라 문구가 뜨고 있습니다)

서버 쪽 파일 루트는 아무것도 없는 상태이기때문에 '/' 이렇게 나와있을 것입니다. 


워드프레스 파일을 서버에 올려서 설치를 완료하려면 

좌측의 내 로컬에 있는 wordpress 폴더 루트를 찾아서 파일을 드래그해서 우측에 있는 내 호스팅 서버에 드롭해 주면 됩니다.

혹은 파일 우측마우스 > 업로드 버튼 클릭을 해주면 워드프레스 설치 완료입니다.





저작자표시 비영리 변경금지

'~2022 > Wordpress' 카테고리의 다른 글

워드프레스 기초 홈페이지 제작하기(6.1) - [플러그인] 로그인페이지 url 변경(보안)  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(5) - 무료 테마 설치 및 사용자 정의하기(사이트 이름, 메뉴 생성)  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(4) - 관리자 페이지_닉네임 변경  (0) 2018.11.26
NEW 워드프레스 기초 홈페이지 제작하기(3) - 도메인 호스팅 등록  (0) 2018.11.26
window 버전 확인하기  (0) 2018.08.19
워드프레스 기초 홈페이지 제작하기(2) - 웹 벤치마킹  (0) 2018.08.16
워드프레스 기초 홈페이지 제작하기(3) - 도메인 호스팅 등록  (0) 2018.08.12
워드프레스 기초 홈페이지 제작하기(1) - 워드프레스란?  (0) 2018.08.12

1. ctrl + x 누르면 옵션 창 뜹니다.


2. Windows PowerShell(l) 클릭하거나 l(L) 누르면 창이 하나 뜹니다.


3. 'winver' 친 후에 엔터를 누르면 버전 정보가 적혀있는 팝업창이 뜹니다.



저작자표시 비영리 변경금지

'~2022 > Wordpress' 카테고리의 다른 글

워드프레스 기초 홈페이지 제작하기(6.1) - [플러그인] 로그인페이지 url 변경(보안)  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(5) - 무료 테마 설치 및 사용자 정의하기(사이트 이름, 메뉴 생성)  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(4) - 관리자 페이지_닉네임 변경  (0) 2018.11.26
NEW 워드프레스 기초 홈페이지 제작하기(3) - 도메인 호스팅 등록  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(3.1) - 워드프레스 파일 FTP를 이용하여 설치  (0) 2018.08.19
워드프레스 기초 홈페이지 제작하기(2) - 웹 벤치마킹  (0) 2018.08.16
워드프레스 기초 홈페이지 제작하기(3) - 도메인 호스팅 등록  (0) 2018.08.12
워드프레스 기초 홈페이지 제작하기(1) - 워드프레스란?  (0) 2018.08.12


웹 벤치마킹(Benchmarking)


'기업이 우수한 타기업의 제품이나 기술, 경영 방식을 배워서 응용하는 일. 미국 기업에 처음 도입되어 다른 나라에 확산되고 있는 새로운 경영 수법임.' 

 - 출처 : 구글 사전

간단히 말하면 다른 사이트의 디자인, 기획, 기술 등을 참고해 사용한다는 것 입니다.


그러기 위해서는 먼저 내가 어떤 홈페이지를 제작할 것인가를 정해야 합니다.

정하지도 않고서는 어떠한 곳도 벤치마킹 할 수 없습니다.

(카페 차릴 건데 자동차 정비소 디자인 보고 있으면 시간낭비죠?)


저는 강아지를 주제로 잡았다고 예시를 들겠습니다. (쇼핑몰x)


1.
관련 키워드를 검색하는 방법

주제의 키워드를 검색 포털(네이버, 구글, 다음 등)에 검색합니다. 


- 강아지 

- 펫

- 애완견 


검색해보겠습니다.


검색하고 나온 사이트들을 방문하여 벤치마킹하면 됩니다.


2. 

웹 사이트들을 소개, 평가하는 홈페이지들을 참고

EX ) 굿디자인 웹  , 디비컷 


상단 - 제작사별, 타겟층별, 표현방법, 디자인컨셉, 색상별 확인 가능합니다.

좌측 - 카테고리로 정리되어 있는 부분 확인 가능합니다.


만약 원하는 카테고리가 없다면 상단에 제작사별, 타겟층별, 표현방법, 디자인컨셉, 색상별에서 본인이 원하는 것을 골라 찾아봅시다.

저는 강아지가 주제인데 애견관련 카테고리가 없었기 때문에 상단의 디자인 컨셉에서 골랐습니다.


강아지 = 귀여움 




자 이렇게 열심히 사이트를 찾았지만 무엇을 벤치마킹 하라는 건지...라고 생각이 드실 것 입니다.


간단히 몇가지만 정리해보면 도메인주소, 홈페이지 테마(색상), 레이아웃(메인, 서브페이지, 팝업), 디자인, 콘텐츠, 기능 등...이 될 수 있습니다.

(저는 기획자 + 디자이너가 아니기 때문에 이 정도만...)

※ 참고하는거지 통째로 베끼면 안됩니다.


1. 도메인주소

도메인 주소는 무엇을 참고하냐면? 강아지관련 사이트면 puppy, dog 관련 키워드가 들어가면 사용자가 기억하기 쉽다 = 사이트 주소 입력 방문이 쉽다.

www.dog.com = 찾아오기 쉽겠죠?

www.dogzzang.com = 찾아오기 쉽겠죠?


이러한 점을 이용하거나.. 아니면 내 사이트명과 사이트 주소을 맞추어도 됩니다.

많은 사이트들이 그렇습니다.


네이버 = naver.com

다음 = daum.net

구글 = google.com

삼성 = samsung.com


2. 테마, 레이아웃, 디자인, 콘텐츠, 기능 등

'카카오헤어샵'과 '튼튼 쑥쑥 어린이 박람회' 사이트를 예로 들어보겠습니다. (시간이 지남에 따라 사이트 디자인이 다를 수 있습니다)


빨간 영역은 큰 레이아웃으로 대충 나누어 둔 부분입니다.


- 카카오헤어샵은 카카오의 테마에 맞추어 노란 색상이 주를 이룹니다.

- 제품 소개페이지다보니 서브페이지들이 존재하지 않고 단일 페이지입니다. (메인하나)

- 메인 이동이 간편하게 오른쪽 동그라미 네비게이션이 존재합니다.

  클릭 시 해당 영역으로 스크롤 이동.(기술)

- 공유를 목적으로 둔 소셜공유 버튼이 존재합니다.


'튼튼 쑥쑥 어린이 박람회' 사이트 입니다.

빨간 영역은 큰 레이아웃으로 대충 나누어 둔 부분입니다.


- 최상단에 메인 네비게이션이 존재합니다.

  페이지가 존재하기 때문에 필요합니다.

- 원하는 페이지로 갈 수 있는 서브 네비게이션이 있습니다.

  박람회 관련된 페이지들을 다이렉트로 갈 수 있게 해두었습니다.

- 서브페이지들을 참고 할 수 있습니다. 

  회사소개페이지, 게시판페이지 등..

- 노출되길 원하는 게시판이 있기 때문에 메인에서 한 눈에 볼 수 있도록 해두었습니다.

- 주최, 후원하는 회사 또는 단체의 로고를 메인에 넣어두었습니다.

- 회사 카피라이터를 하단에 작성해두었습니다.


카카오 헤어샵과는 다르게 튼튼쑥쑥 어린이 박람회 사이트의 레이아웃 박스가 여러개로 나뉘는 이유를 생각해보는 것도 좋습니다.

제 생각으로는 카카오헤어샵 사이트는 단지 제품을 소개, 광고하는 페이지이기때문에 심플한 것이고 

튼튼쑥쑥 어린이 박람회 사이트는 카카오헤어샵과는 목적자체가 다르기 때문이라고 생각합니다.(많은 정보가 필요)


이런식으로 크게크게 나누어서 레이아웃을 참고하다 보면 내 사이트는 어떻게 해야 좋을 것일까 어떤 게 필요할까 등이 어느정도 보일 것 같습니다.


또한 홈페이지 주제 말고 목적도 중요합니다.

강아지를 주제로 삼고 목적이 없다면 둘 다 사용가능하기 때문에 벤치마킹이 힘들어집니다.


강아지 소개 사이트 = 카카오 헤어샵

유기견 모임 사이트 = 쑥쑥 어린이 박람회


주제 + 목적 등을 결정하여 벤치마킹해야 좋은 결과를 얻을 수 있을 것 같습니다!


저작자표시 비영리 변경금지

'~2022 > Wordpress' 카테고리의 다른 글

워드프레스 기초 홈페이지 제작하기(6.1) - [플러그인] 로그인페이지 url 변경(보안)  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(5) - 무료 테마 설치 및 사용자 정의하기(사이트 이름, 메뉴 생성)  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(4) - 관리자 페이지_닉네임 변경  (0) 2018.11.26
NEW 워드프레스 기초 홈페이지 제작하기(3) - 도메인 호스팅 등록  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(3.1) - 워드프레스 파일 FTP를 이용하여 설치  (0) 2018.08.19
window 버전 확인하기  (0) 2018.08.19
워드프레스 기초 홈페이지 제작하기(3) - 도메인 호스팅 등록  (0) 2018.08.12
워드프레스 기초 홈페이지 제작하기(1) - 워드프레스란?  (0) 2018.08.12
Javascript도 잘 못하는 내가... ReactJS를 해야 할 때가 왔다.
예전에 인프런에서 ReactJs 강좌 동영상을 본 적이 있었는데..
너무 어려워서 한 번 듣고 따라해보고.. 포기했었다.

근데 이번에 정.....말 필요해져서 다시 들어볼까하고 인프런에서 강좌 찾고 있었는데,
니꼴라스(노마드코더) 동영상이 있는 것을 보았고 간혹 소셜에서 접했었던 사람이라 궁금해서 시청하기 시작했다.
주제도 어려워 보이지 않았고
처음에는 그냥 듣기만 했고, 다 보고 나서 따라 코딩했는데 정말 쉽고 좋았다.
돌 머리인 내가 어느정도 이해가 갔다면 확실히 니꼴라스가 잘 가르쳐준것 같다 + 자막도 최고

하지만 다들 알아야한다 v16.3 업데이트 전 내용이라 참고하고 다른 학습도 해야한다.


영상 주소
https://www.inflearn.com/course/reactjs-web/

ReactJS로 웹 서비스 만들기 학습 정리

※ 예제로 나오는 코드는 니꼴라스가 작성한 코드다.
create-react-app을 install 받아서 npm start

1. import 

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  //'react' 모듈에서 React 정의된 객체, 함수, 속성 등을 import 하겠다는 구문.
  // ReactDOM = 웹서비스, ReactNative = 모바일이라고 하더라.
  // 컴포넌트 최상단에 위치한다.

  // {Component}는 React.Component 클래스 속성을 import 하겠다는 것 같은데?
  import React, { Component } from 'react';
// ReactDOM.render 를 이용해서 app 컴포넌트를 엘리먼트 #root에 render시킨다.
ReactDOM.render(<app>, document.getElementById('root'));
+ 코드 플러그인 내부에 넣으니까 자꾸 <app>을 닫아주는 태그를 생성한다.....

2. JSX 문법을 쓴다.

Javascript + XML의 합성어
자바스크립트 내부에 HTML을 넣기 위해 사용된다.
JSX는 작성한 그대로 적용되는게 아니라 트랜스파일러를 통해 변환된다고 한다.
// <movie> {} className render() return() 같은 것들일까?
<div className={movies ? "App" : "App-loading"}>
{movies ? this._renderMovies() : 'loading...'}
</div>

3. class app extends React.Component

app은 컴포넌트 함수명임. 변경가능. 
  // React.Component 클래스 속성을 상속해서 컴포넌트를 생성하는 방식
  // class 컴포넌트는 state가 존재하는 function이어서 state function이라고 한다.
  class App extends Component {
    ..........
  }

  // state가 존재하지 않는 function은 stateless function이라고 하며 기존의 자바스크립트 function을 말한다.
  // stateless function은 props만 있으며 return하기 위해 사용한다고 한다.
  function Movie({title, poster, genres, synopsis}){
    return(
     ..............
    )
  }
사용 이유에 따라 두 가지를 적절히 나누어 사용하라고 한다.

4. LifeCycle

v16.3으로 버전 업데이트가 되면서 니꼴라스 강의에서 나온 lifeCycle이 달라졌음을 알게되었다.

componentWillMount()
componentWillUpdate()
componentWillReceiveProps() 

세가지가 없어졌다. 
- 기존에 사용하던 것들을 대체하기 위해 메서드 앞에 prefix로 UNSAFE_를 붙이면 사용할 수 있다.
- UNSAFE_componentWillMount()

componentWillMount() 
여기서 하던 작업은
constructor(), componentDidMount를 사용한다고 한다.

componentWillUpdate()
여기서 하던 작업은
getSnapshotBeforeUpdate()를 사용한다고 한다.
getSnapshotBeforeUpdate(prevProps, prevState){
  if(prevState.value !== this.state.value){
    return ........ ; 
  }
}

componentWillReceiveProps() 
여기서 하던 작업은 
static getDerivedStateFromProps()로 대체 한다고 한다.
사용방법은 이런 식이라고 한다.
static getDerivedStateFromProps(nextProps, prevState){
  if(nextProps.value !== prevState.value){
   // value값이 다를 경우, return
   return  ........... ; 
  }
}

솔직히 바뀐건 아직 확실히 잘 모르겠다.
더 공부해야지..

render
remove
update

각각 다른 LifeCycle을 가진다.

-render
componentWillMount() > render() > componentDidMount()
render 전 > render > render 후
대충 활용 예시를 보면 api 호출, loading 애니메이션 등의 작업 > render > loading 애니메이션 제거

-remove
props, state 삭제 시에 한번만 사용된다.
componentWillUnmount()

-update
props, state가 업데이트 되면 실행된다.
componentWillReceiveProps() > shouldComponentUpdata() > componentWillUpdate() > render() > componentDidIpdate()
props를 새로 받았을 때 > 과거 state, props와 비교하여 다르다면 true 반환 > true일때 upadte 실행 > render > render 후
state가 update되면 componentWillReceiveProps() 단계는 건너 뛰고 shouldComponentUpdata()부터 실행된다.

5. props와 state 속성

props는 컴포넌트 mounting, updating 프로세스 시점에 값이 할당될 뿐, 내부에서 값을 변경할 수 없다.
상황에 따라 변경되어야 하는 값은 state를 이용해야한다.

state는 초기에 작성할 수도 있다. 
  _getMovies = async () => {
      const movies = await this._callApi()
      // state는 직접적으로 변경해서 사용하면 안된다. (this.state.name = '스어'; 콘솔에러..)
      // this.state.movies = movies; (x)
  
      // setState() API를 통해 추가하거나 업데이트 해야 한다.
      this.setState({
        movies
      })
 }
state = 컴포넌트 내부에서 변경 가능
props = 컴포넌트 내부에서 변경 불가능

6. propTypes는 props type을 체크하여 validation해준다.

  
  // 사용하기 위해서는 propTypes 모듈을 install한 다음 import하여 사용해야 한다.
  import PropTypes from 'prop-types';
  
  function MoviePoster({poster,alt}){
    return(
      {alt}
    )
  }
  // props을 사용하는 .js 내부에 사용한다.
  MoviePoster.propTypes = {
    poster: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired
  }

7. Ajax

  
  // async는 비동기 형식으로 실행된다.
  _getMovies = async () => {
    // await은 함수가 종료되고 나서 진행한다는 의미, api 호출이 종료 되면 movies에 할당하고 다음 라인 실행
    const movies = await this._callApi()
    // this.state.movies = movies; (x)
    this.setState({
      movies
    })
  }
  _callApi = () => {
   // fetch에서 api를 호출
    return fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')
    .then(response => response.json()) // 데이터를 json 형식으로 변환
    .then(json => json.data.movies) // movies 데이터 return
    .catch(err => console.log(err))
  }

8. export

app은 컴포넌트 함수명임. 변경가능. 
  
  // 다중 export
  export app1, app2, app3...;

  // *(asterisk / 별표) 는 파일 내 정의된 모든 객체, 함수, 속성 export
  export *;

  // default : 모듈의 기본 값, 파일 내 한 번만 호출 가능 
  export default App;
ReactJS
https://reactjs.org/docs/hello-world.html



저작자표시 비영리 변경금지

'~2022 > FE-React' 카테고리의 다른 글

React 기초 학습 8.배열에 push할때 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)  (0) 2020.04.21
React 기초 학습 7.자식 컴포넌트로 props 전달 / 주석 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)  (0) 2020.04.21
React 기초 학습 6.반복문에서 key (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)  (0) 2020.04.21
React 기초 학습 5.클래스를 Hooks로 바꿔보자 (Zerocho님 강의 학습 후기)  (0) 2020.04.21
React 기초 학습 4.파일 수정 후 자동으로 빌드되게하자! (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)  (0) 2020.04.21
React 기초 학습 3. 필요한 파일들에 대해 알아보자(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)  (0) 2020.04.21
React 기초 학습 2. node환경에서 해보자! 필요한 패키지 다운로드.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)  (0) 2020.04.18
React 기초 학습 1. HTML에서 React를 사용해보자.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)  (0) 2020.04.10

목표! 

 1.도메인 등록

 2.호스팅 등록



도메인/호스팅 등록


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

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

(가입형 주소 : 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

ex) okayoon.dothome.co.kr/wp-admin

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

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



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





저작자표시 비영리 변경금지

'~2022 > Wordpress' 카테고리의 다른 글

워드프레스 기초 홈페이지 제작하기(6.1) - [플러그인] 로그인페이지 url 변경(보안)  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(5) - 무료 테마 설치 및 사용자 정의하기(사이트 이름, 메뉴 생성)  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(4) - 관리자 페이지_닉네임 변경  (0) 2018.11.26
NEW 워드프레스 기초 홈페이지 제작하기(3) - 도메인 호스팅 등록  (0) 2018.11.26
워드프레스 기초 홈페이지 제작하기(3.1) - 워드프레스 파일 FTP를 이용하여 설치  (0) 2018.08.19
window 버전 확인하기  (0) 2018.08.19
워드프레스 기초 홈페이지 제작하기(2) - 웹 벤치마킹  (0) 2018.08.16
워드프레스 기초 홈페이지 제작하기(1) - 워드프레스란?  (0) 2018.08.12

+ Recent posts

티스토리툴바