[TIL-6] 생활코딩 WEB1-19~부록(완강)

19. 웹서버 운영하기 ~ 웹서버 설치 ~ 웹서버와 http ~ 웹서버와 웹브라우저의 통신

• 웹서버 아파치(apache) 이용
• 윈도우에서 아파치 설치하기 위해 bitnami wamp stack 검색. bitnami 다운.
• 설치된 bitnami manager 통해 웹서버 끄고 켤 수 있음.
  • welcome 옆 "manage servers"탭에서 "apache web server"가 초록색이면 켜져있는 것. 켜져있어야 "go to application" 했을 때 "비트나미: 오픈 소스" 창 볼 수 있음.
• 주소창에 "localhost"라 돼있는데 "http://127.0.0.1/index.html"라고 쳐도 똑같은 페이지 나와야 함.
  • 이 index.html은 아파치 파일 안에 존재. "htdocs(하이퍼텍스트 다큐먼츠, 웹페이지가 저장된 곳)"에 있음.
  • 이 파일을 수정하면 (당연하게도) 웹페이지에도 반영됨!
  • 이 주소는 웹브라우저와 웹서버가 설치된 이 컴퓨터에서 index.html 파일을 불러온다는 것. 127.0.0.1은 IP주소. 모든 컴퓨터에서 이 IP주소를 치면 웹브라우저가 설치된 자기 컴퓨터의 웹서버를 가리킴. 그리고 IP주소 뒷부분의 파일을 htdocs 폴더에서 찾아오기로 기본 설정되어있음.
• http : 웹브라우저와 웹서버가 서로 통신. hypertext(웹페이지) transfer(전송) protocol(약속).
  • 그냥 컴퓨터에 저장된 html 파일을 웹브라우저로 여는 것과 질적으로 다름.
  • 서로 다른 컴퓨터에 있는 웹브라우저와 웹서버가 통신하려면 http 사용해야 함.
    • IP주소 알아내기 : 네트워크 및 인터넷 > 네트워크 및 공유센터 > 연결;이더넷 상태 > 자세히 > IPv4 주소
    • 같은 네트워크 사용하는 다른 컴퓨터에서 IP주소/index.html 입력하면 접속 가능.

 

부록 - 코드의 힘 : 동영상 삽입

• 유튜브 등 동영상 서비스에서 공유하기 > embed(퍼가기, 소스)
• html 코드 나옴. <iframe> 태그. 복사해서 필요한 위치에 넣으면 됨.
• [서치] 가운데정렬 : <center> html 이미지 넣기 및 가운데 정렬 방법 (tistory.com)

 

부록 - 코드의 힘 : 댓글 기능 추가

• 댓글 기능 직접 추가하려면 백엔드까지 알아야 함.
• 누가 만들어놓은 댓글 코드를 베껴쓰기!
• disqus, livere 등
• 웹서버를 통해 접속했을 때 댓글 사용 가능.

 

부록 - 코드의 힘 : 채팅 기능 추가

• 방문자와 채팅하는 기능. 이것도 무료로 베껴옴.
• tawk.to
  • 오른쪽 하단에 초록색 아이콘 생김. 채팅이라기보다는 문의 기능.

 

부록 - 코드의 힘 : 웹사이트 방문자 분석기

• 구글 analytics
• 추적코드(태그) 찾기 바뀜...
  • 관리 > 속성 > 데이터 스트리밍 > 계정 선택 > "태그하기에 대한 안내"에서 "새로운 온페이지 태그 추가" 아래 첫번째 "전체 사이트 태그(gtag.js) 웹사이트 작성 도구 또는 CMS에서 호스팅하는 사이트를 사용하는 경우 이 태그 사용" 선택
• 헤드 태그 안쪽에 코드를 넣어야 함.