[공부 기록 02] 웹 서버, 웹 호스팅, 동영상 추가로 업데이트 시키기

1. 웹 브라우저 & 웹 서버

Web Browser (client) <-------> Web Server (server)
                           request ->
                                        <- response
우리가 현재 만드는 건 웹 브라우저, 이걸 전 세계로 보낼 수 있는 건 웹 서버가 한다.
이때 웹 서버를 운영하는 건 2가지 방법이 있는데, 대행업체, 회사인 github page로 웹 호스팅을 하는 방법과 직접 VSCode Live server로 웹 서버를 운영하는 방법이 있다.
 
 

---

 2. 웹 호스팅 생성하기: GitHub page

인터넷에 연결된 컴퓨터 각각을 Host라 하는데, 이런 컴퓨터를 빌려주는 사업을 Hosting 또는 Cloud라 한다. 여기서 소프트웨어까지 설치해서 운영해 주는 것이 바로 Web Hosting이다. 그리고 이 작업은 대표적으로 깃허브에서 사용해 볼 수 있다. 방법은 다음과 같다.
 
1) 깃허브에서 새로운 repository를 만든 후, 코드와 이미지들이 저장되어 있는 파일을 업로드 한다.

업로드가 완료된 모습

 
 
2. 해당 repository의 (위 화면) settings -> pages로 들어가서 Branch의 None을 main으로 바꾼 뒤 오른쪽 save를 누른다. 그럼 잠시 뒤 페이지가 생성된다. (작업상황은 Actions 탭에서 볼 수 있음)

 
 
3) 작업이 완료되고 나면 상단에 사이트 주소가 나타난다. 클릭해 보면 기존에 만들었던 웹이, 인터넷이 연결된 컴퓨터라면 어디서든지 접속할 수 있는 웹 사이트로 바뀌어서 뜬다!! 주소는 깃허브 이름.github.io/레파지토리 이름/ 으로 되는 것 같다.

우하하 짱 신기~!~!!

 

---

 
 

2-2. 파일을 수정할 경우

1) 만약 코드를 수정하여서 다시 웹 사이트에 반영하고 싶은 경우, 해당 레파토리지에 들어가서 +버튼으로 Upload files를 누른다. 그리고 파일들을 전부 다시 올린 뒤 Commit changes 한다.

 
 
2) 그러면 자동으로 수정된 파일만 정보가 업데이트된다.

Actions 탭에서 기록들을 볼 수 있다.

 
 
3) 다시 사이트에 들어가 보면 수정된 것을 볼 수 있다.

다른 그림 찾기 정답: 제목에 '--' 추가

 
 

★결론
우리가 만든 코드(index.html)를 호스팅 업체에 보내면, 업체는 웹 서버를 활성화시켜서 받은 코드를 가지고 도메인에 이름을 부여해 준다. 방문자들은 웹 브라우저에서 해당 도메인으로 접속한다. 그러면 웹 서버가 코드를 읽고 방문자에게 소스 코드를 전달한다.

 
 

---

 

3. 웹서버 운영하기: VSCode Live server

VSCode에서 확장 프로그램으로 Live server를 설치한다. 그리고 하단의 'Go Live'를 클릭하면 바로 사이트가 생성되면서 나타난다. 여기서 좋은 점은, 코드를 편집할 때 실시간으로 해당 사이트가 수정된다는 점이다. 또한 다시 클릭하면 웹 서버가 꺼지면서 해당 주소로 사이트를 접속할 수 없게 된다. 
 
사이트의 주소는 http://127.0.0.1:5500으로 되는데, 뜻은 다음과 같다.
-http: Hyper Text Transfer Protocol
-127.0.0.1: Internet Protocol Address (=IP, 여기서 127.0.0.1은 자신의 컴퓨터를 가리키는 주소로 약속됨)
-5500: Port (각각의 서버는 다른 포트 번호를 가지고 있다. 여기서 웹 브라우저는 5500 포트의 웹 서버와 연결된다.)
 
VSCode의 확장 프로그램 중, IP Address를 설치하면 현재 접속하고 있는 주소가 뜬다. 이때 두 대의 컴퓨터(컴퓨터+핸드폰도 됨)가 서로 같은 와이파이에 접속하고 있으면, 다른 기기에서 해당 IP 주소를 인터넷에 검색 시 사이트가 뜬다!
 
 

---

 

4. 동영상 삽입: <iframe>

1) 먼저 삽입하고 싶은 동영상(유튜브)의 공유 버튼을 클릭하면, 그냥 주소 링크 말고 퍼가기 버튼 즉 소스를 볼 수 있는 링크가 나온다. 해당 링크를 복사해서 코드의 넣고 싶은 위치에 붙여 넣기 한다.

<span style="font-size: 20px;">
  <strong>겨울의 추천 노래는?</strong>
</span>

<p>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/zuoSn3ObMz4?si=XTu_HrywpkX2tFw5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</p>

 
 
2) 저장 후 웹에서 새로 고침 해 보면 자동으로 완성~!!

테키워더체키위더팀쇼솔드아웃우드버이미더팀송디제이풋어스펠온미라잌어더비홀업. 아~~~~~~~~~~~~~캔디!!!!!!!!!

 
 

---

 

5. 기존 웹 수정

[공부 기록 01]에서의 웹은 정말,,, 그냥 테스트용으로 만들기 시작한 거라 딱히 쓸모도 없는 페이지였다. 그런데 이번에 여러 기능들을 추가하면서 업데이트 됐다!!
 
체크박스 기능 배움 -> J 80% 나오는 인간으로서 체크리스트 꼭 만들고 싶었음
동영상 추가 기능 배움 -> 노래도 맨날 플리에 분류별로 저장해 놓는데 이것도 추가하고 싶었음
 
=> 그래서 결국 계절에 대한 아무 말은 tmi로 뒤로 빼고, 계절마다의 체크리스트, 각 추천 노래를 정리하는 것을 이 사이트의 목적으로 하였다!!
더 기능을 배우면서 내가 원하는 기능들을 그에 맞게 추가하고... 진짜 타 웹 사이트처럼 보기 좋게 꾸미면 하나의 프로젝트가 될 거 같다. 필요한 걸로 구현해서 진짜 내가 쓰는 용으로 만들기! 원래 내가 쓸데 있다고 느껴야 그 공부가 하고 싶음 그래서 그냥 외우는 과목 싫어하는 듯
 
아무튼 진짜 프로젝트답게 업데이트 노트도 아래에 썼다... <-이거 꼭 한번 써보고 싶었음
쓰는 법은 여기 참조
->https://tech.kakaoenterprise.com/113

[TW] Release Note 톺아보기

 

---

 대충 메인 화면 구성...

 
근데 솔직히 아직 허접하다... 체크 박스도 체크해봤자 저장도 안 되고 그 밑줄 쳐지는 그런 효과도 없다. 또 나만 이용할 게 아니라 내용을 추가해서 저장하는 식으로 해야 됨!! 근데 그건 js로 해야 할 듯...
그리고 지금 생각난 건데 계절이 주제니까 그때마다 입었던 옷 스타일 등을 저장해놓는 것도 좋겠담 맨날 작년 이 맘때 뭐 입었었는지 기억 안나서 갤러리 뒤져봄

암튼 아직은 딱히 뭐가 없지만 그래도 점점 나아져 가고 있다는 점에 만족~!~! 끝