TIL - HTML&CSS(2)

# 웹의 작동 방식

출처 : HTTP MODEL, https://www.zentut.com/jsp-tutorial/introduction-to-jsp/

• 웹 페이지 구축의 두 가지 방법

  • web hosting

    • 대행업체로부터 서버를 대여

  • web server

    • 사용자 컴퓨터에 직접 웹 서버 설치

• Github

  • 개발자들이 코드를 올리고 공유할 수 있는 플랫폼으로 오픈 소스 개발자들의 성지와 같은 곳

  • 공짜로 웹 서버를 제공

    • 무료 웹 호스팅 서비스를 이용할 수 있다.

# Github

• 파일 업로드

  • 계정 로그인 👉 Your repositories 페이지로 이동 👉 새로운 repository 생성 👉 repository name 입력 👉 options 선택(Public 체크, Add a README file 체크) 👉 파일 upload

  • 업로드한 파일은 반복 수정 및 업데이트가 가능하다.

• 브라우저에 출력

  • Settings 👉 GitHub Pages 항목의 Source를 main으로 설정 👉 Save 클릭 👉 할당받은 URL을 주소창에 입력하여, 업로드한 파일이 정상 출력되는지 확인

# Apache

• Apache

  HTTP 웹 서버. HTTP 아파치 서버로 불리며, BSD, 리눅스 등 Unix계열뿐만 아니라 윈도우 등 여러 기종에서 사용이 가능한 소프트웨어다. 오픈소스이며 무료이다.

• 설치 방법

  • Google에서 'bitnami wamp stack'으로 검색 👉 본인 컴퓨터의 운영체제에 맞는 WAMP INSTALLER 다운로드 👉 다운로드한 파일을 열고 Install 👉 MySQL 'root' Account Password 설정 👉 Launch wampstack in the cloud with Bitnami 체크 박스 해제 👉 방화벽 Access 허용 👉 Finish

• 설치 확인

  • 설치 폴더 내부의 manager-windows 파일 클릭 👉 출력된 창에서 Go to Application 클릭 👉 Bitnami manager 설치를 환영하는 웹페이지가 출력되면 설치가 잘 됐다는 의미

• Web 서버 열고 닫기

  • manager-windows 프로그램 열기 👉 창(window) 상단의 Manager Servers 항목 클릭 👉 stop 및 start 버튼 클릭으로 Apache 웹 서버를 열고 닫을 수 있다.

• Web 서버로 HTML 파일 출력하기

  • Apache 설치 폴더로 이동 👉 apache2 폴더👉 htdocs 폴더 👉 폴더 내부 내용 모두 삭제 👉 해당 폴더에 출력할 HTML 파일 붙여 넣기 👉 브라우저 주소창에 http://127.0.0.1/index.html 입력 👉 폴더에 붙여 넣었던 index.html 파일이 출력되는 것을 확인할 수 있다.

• "http 웹 주소를 통한 html 파일 출력"이 갖는 의미

  "http://"로 시작하는 주소가 입력됐다는 것은 컴퓨터 내부의 Web Browser가 Web Server에게 요청이 이뤄졌고, Web Server가 요청에 대한 응답으로 index.html 파일을 Web Browser에게 전송했음을 의미한다.

# HTTP

• 의미

  HTTP란 Web Browser와 Web Server가 서로 통신할 때 사용하는 통신 규약인 HyperText Transfer Protocol을 이용해서 데이터를 가져오는 것을 의미한다.

  HyperText : 웹페이지를 의미
  Transfer : 전송하다
  Protocol : 규약, 약속

  서로 다른 컴퓨터에 있는 Web Browser와 Web Server가 통신을 하기 위해서는 반드시 http를 사용해야 된다.

# Web Browser와 Web Server가 웹 페이지를 주고받기 위해 필요한 요소

• IP Address

  • 특정 컴퓨터의 Web Browser가 다른 컴퓨터의 Web Server에게 요청할 때는 Web Server의 주소(IP)가 필요함

  • http:// + 192.168.0.13/ + index.html

    • ip 주소가 192.168.0.13에 해당되는 Web Server에게 index.html을 요청한다는 의미

• IP Address 확인 방법

  • Web Server가 설치된 컴퓨터의 ip주소는 Window 사용자의 경우 다음 경로를 통해 확인 가능하다.

    제어판 > 네트워크 및 인터넷 > 네트워크 및 공유센터 > 활성 네트워크 보기 항목 > 연결 항목 클릭 > 상태 창(window) 출력 > 자세히(E) button 클릭 > IPv4 주소 속성 값이 IP Address이다.

  • http://127.0.0.1/index.html vs http://192.168.0.13/index.html
    • 127.0.0.1 : 자신의 컴퓨터를 의미하는 ip 주소
    • 192.168.0.13 : 자기 자신이 아닌 다른 컴퓨터의 ip 주소