[생활코딩|WEB1#6] 웹사이트 완성, 인터넷을 여는 열쇠:서버와 클라이언트, 웹 호스팅 2019.12.26

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)

---

#0. 

사실.. 오늘은 이미 한 챕터 공부가 끝났지만,

남은 분량이 2회 정도의 분량이기에 기분좋게 금요일에 마무리하고 싶어서

오늘 1회 더 포스팅하기로 결정하였습니다.

결정적으로, 방학도 했고, 아직 인턴 출근까지 시간이 조금 남았거든요,

 

#1.

생활코딩의 웹사이트 완성은 링크에 대한 설명과 그 예제 소스를 첨부해주는 방식으로 끝나게 됩니다.

그러면, 저희 나름대로 간단한 웹페이지를 한 번 제작해 볼까요?

그전에, 오늘은 이어서 결과물을 github에 까지 올려보려고 합니다.

그러니, 본격적인 코딩에 앞서서, 웹서버와 호스팅에 관한 이야기를 먼저 해야겠습니다.

 

#2.

먼저 인터넷이 동작하기 위해서는 컴퓨터가 최소 몇 대가 있어야 할까요?

정답은 2대입니다.

물론 3대도 괜찮습니다. 하지만 저희는 지금 최소의 경우를 따지고 있습니다.

본질적으로 말하고 싶은 바는 2대 이상의 컴퓨터가 통신을 한다는 점입니다.

출처 :https://opentutorials.org/course/2614/14790

서버는 어떤 특정 서비스를 제공하는 제공자이고, 이런 서버를 요청하는 자가 클라이언트입니다.

만약 그 특정 서비스가 채팅이라면,

채팅 서버를 제공하는 서버와 그 채팅을 이용하는 클라이언트의 관계로 확인할 수 있을 것입니다.

처음에 용어가 다소 낯설게 느껴질 수 있지만,

알고 보면 저희가 일상을 영위하며 살아올 때 수없이 마주친 것들입니다.

그렇게 낯설지많은 않죠?

생활코딩에서는 이후 학습에 두가지 갈림길을 제시해 주었습니다.

하나는 웹호스팅을 업체를 이용하는 방법과 다른 하나는 본인의 컴퓨터에 웹서버를 설치하는 방법입니다.

그리고 바로 다음에 제가 포스팅 할 내용이 본인의 컴퓨터에 서버를 설치하는 방법입니다.

 

#3.

다시 #1으로 돌아가서, 먼저 오늘은 직접 코딩한 html 파일을 웹호스팅업체에 등록을 해보려고 합니다.

그리고 이번시간에 사용해볼 사이트는 깃헙입니다.

Build software better, together

프로그래밍을 공부하다 보면, 정말정말 많이 들여다 볼 사이트이자,

받은 공로를 다시 돌려줘야 할 사이트입니다.

오늘은 이 깃헙에서도 페이지 기능을 이용해보고자 합니다.

회원가입 및 로그인 절차는 생략하도록 하겠습니다.

먼저 저장소를 만들어보겠습니다.

처음에 Repository name은 말 그대로 저장소 이름을 의미합니다.

그 이전에 owner는 여러분들의 github아이디입니다.

기본적으로 여러분들의 저장소에 대한 접근권한은 여러분들에게 주어지지만, 그 권한을 공유하는 것 역시 가능합니다.

public과 private는 저장소의 공개여부를 결정하는 것입니다.

만약 private로 설정하셨다면, 접근권한이 없는 사람들에게는 저장소의 소스코드가 공개되지 않습니다.

그리고 Initialize this repository with a README의 박스를 체크해주시길 바랍니다.

README.md파일을 자동으로 생성해주는 기능입니다.

여기서 리드미는 후에 깃플로우를 학습하며 더 자세히 공부해 볼 예정이니, 지금은 체크해주시면 됩니다.

이렇게 성공적으로 저장소가 생성되었습니다.

commit, branch, package, releases, contributor...

위 단어들을 처음 보신다면, 낯설고 어려우실 수 있습니다.

하지만 지금은 크게 중요하지 않으니, Upload files를 누르기 전에!

코딩을 마저 끝내보도록 하겠습니다.

 

#4.

저희가 구현하고 싶은 것은 웹페이지입니다.

다시 말하여 html파일의 집합체입니다. 그리고 파일간 연결성은 링크로 이루어져있습니다.

그렇다면 다수의 html 파일이 필요하단 것입니다.

그렇다면 이때까지 배운 내용을 하나의 웹페이지로 만들어볼까요?

<title>생활코딩_wEB</title><br>
<h1><strong>생활코딩_WEB</strong></h1>
<ol>
  <li><a href="intro.html"target="_self"title="intro">들어가며...</a></li>
  <li><a href="ready.html"target="_self"title="ready">실습환경 준비</a></li>
  <li><a href="tag.html"target="_self"title="tag">태그 실습</a></li>
</ol>

1번 목차는 intro.html로,

2번 목차는 ready.html로,

3번 목차는 tag.html로 링크를 각각 걸어둔 다음, 각 파일에 내용을 채웠습니다.

그렇다면 저희가 구현한 웹페이지를 다시 git에 올리도록 해볼까요?

 

#5.

commit이란 변경된 내용을 기록하는 것입니다.

자세한 내용은 이 사이트를 참조해주세요.

변경을 기록하는 커밋 【Git의 기본】 | 누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

지금은 실습을 위한 용도이니 간단히 add html file정도만 기입하겠습니다.

이후 commit change를 누른다면 파일을 업로드하게 됩니다.

다시 setting에서 github pages의 source를 master branch로 바꾼다음,

다음과 같은 주소를 확인할 수 있습니다.(주소는 각 개인마다 다르겠죠?)

혹시 이 사진처럼, 단순히 저장소 이름만 웹사이트에서 나온다면,

당황하지 마시고, 받은 사이트 주소 / 이후 본인의 html파일을 입력해보세요.

이렇게 저희가 만든 파일을 직접 웹에 호스팅해보았습니다.

어때요?

정말 감동스럽지 않나요?

그렇다면 다음 마지막 시간에서 뵙도록 하겠습니다.