생활코딩 WEB1 - html 편 (3/3)

[웹호스팅 & 웹서버 설치]

1-16. 원시 웹

웹의 역사

인터넷	웹
도시 운영체제	건물 프로그램 하나
즉, 인터넷 안에 웹이라는 서비스가 포함된 것. (인터넷 안에는 FTP, email, web등의 다양한 서비스가 있음) 1960 인터넷의 등장 1990 웹(WEB)의 등장 -스위스

* 참고 -> 표의 html 태그

<table>
<tbody>

<tr>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
</tr>

</tbody>
</table>

---

1-17. 서버와 클라이언트


인터넷이 작동하기 위해 두대의 컴퓨터 필요 (서버-클라이언트)

팀 버너스리 : 웹브라우저, 웹서버 (두대의 컴퓨터로)

웹브라우저와 웹서버

웹서버 : 정보를 응답 / 웹브라우저 : 정보를 요청


자신의 웹사이트를 모두가 가질 수 있도록 공유하는 방법엔 두가지가 있음.

1) 웹 호스팅 서비스 이용

2) 자신의 컴퓨터에 웹 서버 설치하여 서버-클라이언트 이용

---

1-18. 웹 호스팅 (깃허브, gitHub)

https://github.com/

GitHub: Where the world builds software

 

<깃허브 가이드>

https://guides.github.com/activities/hello-world/

Hello World · GitHub Guides

 

Repository = 레파지토리 = 저장소(저장하는 공간)

https://github.com/thisisyjin/website1/settings/pages
setting-> webpages-> source에서
main - /root 하고 save누르기

***주의

바탕화면에 있는 작업한 폴더명이랑 레파지토리 이름이랑 같아야함
ex) 나는 바탕화면에 web폴더에 .html문서들이랑 .jpg 이미지들을 올린거니까 레파지토리 이름도 web으로 해야함.

<깃헙 웹호스팅으로 구현한 내 웹사이트>

https://thisisyjin.github.io/web/

BE A FRONT-END DEVELOPER!

static web hosting = 정적 웹호스팅 (cf. dynamic = 동적 ->php등)

---

1-19. 웹 서버 설치/운영


** 아파치 (apache) - 오픈소스, 무료.

검색어 - how to install apache http server windows
cr. https://knowledgebase.progress.com/articles/Article/How-to-install-Apache-HTTP-Server-on-Windows-Server

Apache HTTP 서버를 설치하려면: 1단계: Apache 웹 사이트로 이동  - ( httpd.apache.org ) 최신 안정 버전을 보려면 " 다운로드 " 링크를 클릭하십시오. 다운로드 페이지로 리디렉션된 후 " Files for Microsoft Windows " 를 선택합니다. 바이너리 배포를 제공하는 웹사이트 중 하나를 선택하십시오(예:  Apache Lounge ). " Apache Lounge " 웹사이트( https://www.apachelounge.com/download/ ) 로 리디렉션된 후 선택: Apache xxxx Win64 링크 다운로드 후 httpd-xxxx-Win64-VC15.zip 파일을 C:/에 압축을 풉니다. 2 단계: 명령 프롬프트 열기: 관리자 권한으로  실행 c:/Apache24/bin 디렉토리로 이동합니다. Apache를 Windows 서비스로 추가:   httpd.exe -k install -n "Apache HTTP Server"  다음 오류가 발생하면 3단계를 따르고 그렇지 않으면 4단계로 이동합니다 . " 컴퓨터에 VCRUNTIME140.dll이 없기 때문에 프로그램을 시작할 수 없습니다. 이 문제를 해결하려면 프로그램을 다시 설치해 보십시오. " Apache를 Windows 서비스로 구성한 후 시작에 실패하고 이 오류를 보고하는 경우 "Windows가 로컬 컴퓨터에서 Apache HTTP 서버를 시작할 수 없습니다." 다른 프로세스가 동일한 포트를 사용하고 있기 때문에 Apache는 기본 포트(보통 80)를 사용하지 못할 수 있습니다. 관리 명령 프롬프트를 열고 "netstat -anbo" 명령을 실행합니다. Apache가 수신하도록 구성된 포트를 다른 프로세스가 사용 중인 경우 Apache 설치의 httpd.conf 파일에서 수신 포트를 수정하여 다른 프로세스에서 아직 사용하지 않는 포트를 사용합니다. 또는 Apache가 이 포트에서 수신 대기할 수 있도록 다른 포트를 사용하도록 포트를 보유하는 프로세스를 변경하십시오. 3단계: Apache Lounge 웹사이트 에서 메인 페이지의 " Apache 2.4 VC15 Windows 바이너리 및 모듈 " 섹션을 확인 하십시오. vc_redist_x64 링크에서 파일을 다운로드합니다 (예:  https://aka.ms/vs/15/release/VC_redist.x64.exe ). Visual C++ 2017 파일 설치 2단계 반복 4단계: Windows 서비스를 열고 Apache HTTP 서버를 시작하십시오. 웹 브라우저를 열고 주소 표시줄에 컴퓨터 IP를 입력하고 Enter 키를 누릅니다.  "It works!" 라는 메시지 가 표시되어야 합니다.

-> 과정 복잡함


how to easy install apache server window?
-> BITNAMI wamp 이용

* Bitnami WAMP = Window / Apache, MySQL , Php

Go to Application을 누르면 localhost로 이동한다.(index.html문서로)

http://localhost/index.html = http://127.0.0.1/index.html
= IP 주소


*** index.html 파일의 위치

apache 폴더에 htdocs 폴더안에 있다.

Manage Servers를 누르면 apache서버를 start,stop등 관리할수있다

**내가 만들었던 웹사이트를 apache서버에서 구현하려면
위에서 나온 apache폴더의 htdocs폴더안을 다 비워버리고
web파일(내가만든웹사이트가 있는 폴더) 을 모두 복사해서 붙여넣으면 된다.

이제 관리도구에서 go to application 누르면?

우리가 만들었던 웹페이지가 뜬다!

http://127.0.0.1/index.html

http://라고 적는다는 것은? - 웹브라우저가 웹서버에게 문서를 요청하는 것임.

Ctrl+O눌러서 index.html 파일을 여는 것	file://C:/Bitnami/wampstack-7.4.6-1/apache/index.html	웹브라우저가 직접 index.html파일 을 불러서 읽음
위와 같이 아파치 서버로 http:// 형태의 주소로 index.html을 요청하는것	http://127.0.0.1/index.html = http 프로토콜을 이용	웹브라우저가 웹서버에게 index.html 파일을 요청하고 웹서버는 index.html파일을 찾아 웹브라우저에게 전달함

 

---

 

<웹서버와 웹브라우저의 통신>

 

노트북이라 무선 (wi-fi) 기준

웹서버 = 172.30.1.33 이므로
웹브라우저에서 다음과 같이 접속 가능함.
http://172.30.1.33/index.html

** 모든 컴퓨터가 자기 자신을 127.0.0.1이라 하기로 약속되어있다.

즉, http://127.0.0.1/index.html

스마트폰도 컴퓨터다!
스마트폰 웹브라우저에 들어가서 내 ip주소를 입력하면 다음과 같이 웹사이트가 뜬다!
신기하다.
-> but. 같은 네트워크 상에 있기 때문에 가능하다. (즉, 컴퓨터의 무선네트워크인 wi-fi와 휴대폰에 연결된 wi-fi가 같기 때문에 가능한 일)

-> 다른사람들이 접속할 수 있게하려면 ? -> 더 복잡하다. DNS나 기타 문제들을 해결해야한다.

 

---

 

생활코딩 WEB1 - HTML 편을 마치며.


처음 접해보는 웹 강의.
초심자인 나에게 흥미를 이끌어주고 너무 자세하고 어려운 파트는 언급되지 않아 좋았고,
코딩 뿐만 아니라 인생에 대해 생각해보게 된 강의였다.

내가 비록 대학에 와서 배우고싶었던 코딩과는 거리가 있는 과목들을 공부해왔지만,
늦은 감이 없지않아 있어도 나는 하고싶었던 공부를 시작하였다.

'시작이 반이다' 라는 말이 있듯이, 난 초심을 잃지 않고 이 마음가짐 그대로 매일을 열심히 살 것이다.
평생을 공부해야하는 개발자. 몇년 사이에 웹 개발도 트렌드가 계속 바뀔 것이고, 어쩌면 아예 새로운
프로그래밍 언어가 개발될지도 모른다.

그럼에도 내가 이 길을 가야겠다고 생각한 이유는 무엇인가.
나는 공부를 싫어한다. 공부는 그저 어쩔 수 없이 하는 존재이고 여지껏 죽어라 무언가를 공부해본 경험은
없다.

나는 지금은 존재하지 않지만, 초등학생 때 한창 유행했던 '플래시 게임'이 떠올랐다.
어도비 플래시 프로그램으로 애니메이션을 만들듯 게임을 만든 것인데, 나는 어린 나이에도
플레시 게임을 직접 만들어보고 싶어서 부모님께 플래시 강좌 책과 프로그램 설치를 부탁했었다.
그 때는 몰랐다. 그것 또한 '내가 하고 싶어서' '스스로' '자발적으로' 했던 공부였음을.

매년마다 희망 직업이 바뀌던 나에게, 고등학생 때 접했던 게임은 인생의 전환점과도 같았다.
게임을 즐겨 하면서, 이런 게임을 내가 개발해보면 어떨까? 싶었다.
그래서 시작한 것이다. 개발자가 되어야겠다는 생각을.

고등학생인 나는 전혀 관련 지식이 없었다. 심심풀이로 C언어를 아주 살짝 배웠었다.
혼자서 하려니 버거워서 책을 구매했다.
반복문, 조건문까지 하고나니 배열. 이게 뭐지 싶어서 책을 덮었다. 거기까지였다.

대입을 준비하던 나는 문득 포트폴리오를 작성해야겠다고 생각했고, 사람들에게 도움이 되는 프로그래머가
되고 싶다는 것을 어필해야 겠다고 생각하였다.

나는 19살, 한창 바쁠 시기에 html과 css를 급하게 배워서 간단한 웹사이트를 제작했었다.
아무래도 한두달 내에 했던 것이고, 기초 지식만으로 제작했기 때문에 지금 생각해보면
'그것도 웹사이트라고 만든건가?' 싶긴 하다.

그러나 나는 웹사이트를 제작하면서 '행복'을 느꼈다.
나는 사람들의 편의를 위한 자가건강검진 웹사이트를 제작했다.
간단한 설문을 통해 자신이 어디가 아프고 병원의 어느 과에 가야하는지에 대한 정보를 나타내주는 사이트였다.
사실 DB나 웹서버, 동적웹 등에 대한건 아무것도 넣지 않아서 '빈껍데기'뿐인 웹사이트였다.

로그인 창도 만들었으나 로그인은 할 수 없는 웹사이트. 지금 생각해보면 참 웃기다.
하지만 그때는 내가 매일 들어가는 웹사이트들도 이런식으로 html 태그들로 이루어져있구나, 싶어서
내가 웹사이트를 만들고있다는 희열이 느껴졌었다.

한번 사는 인생, 내가 하고싶은 일을 해보고싶었다.
개발. 요즘 취업 잘 되니까 시작한 거 아니야? 라고 묻는 사람도 많다.

물론 21세기 IT강국인 우리나라에서 개발자 수요가 많은 것은 사실이다.
그에 따라 개발자를 준비하는 사람도 급증하고 있고.

그러나 나는 기계적으로 코딩하는 개발자가 아닌,
사용자 중심으로 생각하고, 모두의 편의를 위한 웹앱을 만들고 싶다.

그게 전부이다.

아직은 잘 모르겠다.
얼른 더 공부해보고싶다.

https://www.youtube.com/watch?v=bTSDDyuMuUo