안녕하세요~2020.07.23일 오전 12:15분입니다. 오늘은 일 끝나고 낮잠을 2시간 정도 잤더니 매우 상쾌하네요 ㅎㅎ 일, 공부에 지쳐서 요즘은 스트레스를 먹는 걸로 풀다 보니 살이 찌고 있네요 ㅠㅠ 내일부터는 열심히 운동도 병행할 예정입니다. 지난 시간에 배운 내용은 웹서버의 전반적인 내용을 배웠습니다. 그중에서도 저희 같은 초심자들을 위해 웹서버를 제공해주는 사이트에 대해서 설명을 해드리려고 합니다. 오늘 소개해드릴 웹서버 사이트는 GitHub입니다. 사이트는 아래를 참조해주세요~
위 의 주소로 들어가게 되면 다음과 같이 GitHub 홈페이지가 나타납니다
이 곳에서는 수많은 오픈소스를 프로그래머들에게 제공을 해주기 때문에 매우 유명한 사이트입니다. 또한 이번 글의 주 목적인 웹 서버 제공 역할도 해줍니다. 그것도 무료로요^^. 자 그러면 우측 상단의 sign up을 눌러서 회원가입을 해주시고 sign in을 눌러 로그인을 해주세요. 이 부분은 간단하므로 설명 생략하겠습니다.
로그인까지 완료가 되셨다면 다음과 같은 화면이 나올 겁니다. 그 후에 우측 상단 + 버튼을 누른 후 new repository를 클릭해 주세요. Repository는 일종의 저장소 같은 개념입니다. 우리가 만들어 놓은 코드를 여기에 저장을 하는 것이죠. 클릭을 하셨다면 다음과 같은 화면이 나타날 겁니다.
Repository name 에는 프로젝트 명을 적으시면 됩니다. 저는 pringles 저장해보겠습니다. Description 은 냅두고 Public 체크하고 밑에 initiallize 부분 꼭 체크해주시기 바랍니다.(사진에는 체크 안 되어있지만). 여기까지 하시고 아래 초록색 버튼을 눌러주시면 다음곽 같은 화면이 나타납니다.
오른쪽 중상단에 Add File 을 누르시고 Upload files를 누르시면 다음과 같은 화면이 나타납니다.
가운데 부분에 Drag files 가 보이시나요? 저 부분을 클릭하면 우리가 바탕화면에 저장했던 web 폴더에서 atom으로 편집한 코드들을 집어넣을 수가 있습니다. 지금까지 저와 함께 현재 강의까지 따라오신 분들이라면 4개의 파일들이 있을 겁니다. 그 파일 4개를 전부 선택해서 열어주시면 됩니다.
그럼 다음과 같이 파일이 업로드가 됩니다. 그리고 아래 Commit changes는 firts version 이라고 적어주겠습니다. 여기까지 완료되었다면 아래 초록색 버튼 "Commit changes"를 눌러주세요
그럼 다음과 같이 업로드가 완료된 화면을 보실 수 있습니다. 자 다음은 서버운영을 위해서 상단 부분 가운데 setting를 눌러줍니다.
그럼 다음과 같은 화면으로 넘어오는데 그 중에서 GitHub Pages라는 소제목을 찾아주시고 source 부분의 None을 master branch로 바꿔주시면 됩니다. 여기까지 되셨다면 몇 초후 자동으로 새로고침 되면서 다시 GitHub Pages 라는 소제목으로 가면 다음과 같이 뜰 겁니다.
your site is 이 부분의 파란색 주소가 보이시나요? 이게 저의 사이트가 될 것이며 저 주소를 친 모든 사람이 제 사이트로 들어올 수 있게 되는 겁니다. 한번 눌러보겠습니다.
최초에 pringles 밖에 뜨지 않습니다. 당황하지 않고 사이트 주소 뒤에 /1.html을 붙혀줍니다. 그러면 다음과 같이 뜹니다.
그럼 다음과 같이 제가 제 컴퓨터에서만 볼 수있던 사이트가 전 세계 모든 인원이 볼 수 있도록 가능해졌습니다.
자 그럼 오늘 배운 내용을 정리해보도록 하겠습니다. 우리는 웹서버를 배우기 이전에 atom으로 코드를 편집해서 그 코드를 저장하고 임의의 사이트에서 atom 코드를 불러와서 페이지를 띄웠습니다. 하지만 이것은 오직 우리 컴퓨터에서 저만 볼 수 있었죠.
그러다가 문득 모든 사람이 내 사이트를 볼 수 있게 하고 싶다는 생각이 들었습니다. 그 기능을 해주는 게 웹서버지요. 즉 비유를 하자면 우리 집에 있는 내 책 한 권을 편집하거나 수정하면 저만 그 책을 볼 수 있습니다. 하지만 이 책을 웹서버라는 도서관에 넣으면 도서관을 이용하는 모든 사람이 볼 수가 있는 개념이지요. 그래서 우리는 웹서버를 무료로 제공해주는 GitHub에 대해서 알아보았습니다. 이로써 우리는 웹서버까지 배워보았습니다. 지금까지 배운 것을 이용해서 여러분만이 사이트를 한번 만들어 보세요! 같이하고 서로 만든 사이트 공유해요 ㅎㅎ
오늘도 제 자료를 봐주셔서 너무 감사드리고 도움이 되셨다면 구독, 댓글 부탁드리겠습니다. 구독은 우측 상단, 글 하단 공유하기 옆에 있습니다. 감사합니다 좋은 하루 보내세요~!
'웹개발' 카테고리의 다른 글
12강. 웹페이지에 댓글 기능 삽입(DISQUS) (0) | 2020.08.02 |
---|---|
11강. 윈도우에서 웹 서버 설치 (APACHE) (0) | 2020.07.25 |
9강. 웹 브라우저와 웹 서버의 관계 (0) | 2020.07.22 |
8강. 웹 사이트 완성하기 (0) | 2020.07.19 |
7강. 링크 태그 <a> 속성 href, title, target (0) | 2020.07.18 |