WEB1 - HTML & Internet

웹서버 운영하기

웹서버 소개

 

 

---

 

 

이번 시간에는
내 컴퓨터에 웹서버를 설치해서
다른 컴퓨터에서 웹페이지를
볼 수 있도록 해 보겠습니다.

이 과정은
꽤 많은 지식이 필요하므로
좀 어렵습니다.

 

 

대신 인터넷이 동작하는 원리를
알 수 있다는 것은 큰 장점입니다.

그리고 한 가지 당부드리고 싶은 것은
실습이 잘 작동하지 않을 가능성이 매우 높아요.
인터넷은 실제로는 매우 복잡한 시스템이거든요.
제대로 작동하는 이유는 한 가지입니다만,
작동하지 않는 이유는 수십 가지가 넘기 때문입니다.

혹 작동하지 않는다고 걱정할 필요는 없습니다.
실제로는 웹호스팅을 많이 사용하거든요.
그냥 제대로 동작하고 있다고 치면 됩니다.
우리에게는 상상력이 있잖아요.

물론,
문제를 해결하기 위해서 노력하는 것은
언제나 좋은 자세입니다.
대신,
이것만 기억해 주세요.

 

 

우리가 하나의 문제를 해결하는데
며칠이 걸릴 수도 있습니다.

하지만
그 과정에서 수많은 지식과 경험을 얻게 됩니다.
하나의 문제를 해결했을 뿐이지만, 
더 많은 문제를 해결할 수 있는 능력을 갖추게 된 것입니다. 

우선 우리가 해야 할 일은
자신의 컴퓨터에
웹서버라는 프로그램을
설치해야 합니다.

웹브라우저는
제품명이 아니라
제품군이죠?

 

 

웹서버도 마찬가지입니다.
웹서버라는 제품군에는
여러 제품이 있습니다.

 

 

Apache
IIS
Nginx

 

 

이 중에서
우리가 사용할 소프트웨어는
Live server입니다. 

 

 

 

 

 

 

이 도구는 아주 작지만, 실용적인 웹서버입니다. 
visual studio code의 확장 기능으로서 실행되는 프로그램입니다. 

Visual studio code에 대한 사용법을 모르신다면
아래 토픽을 먼저 봐주세요. (소요시간 5분)
HTML 코딩 실습 준비

 

 

 

Visual studio code의 확장기능에서 
Live server를 검색하고 
설치합니다. 

 

 

 

 

 

 

오른쪽 아래에 Go Live 버튼이 생깁니다. 

 

 

 

이 버튼을 클릭하면 Port : 5500이 표시됩니다. 
성공적으로 웹서버가 실행되었습니다!

 

 

 

동시에 
http://127.0.0.1:5500/ 주소로 
웹페이지가 실행됩니다. 

직접 구축한 웹서버를 통해서 
웹사이트를 서비스할 수 있게 되었습니다. 
축하합니다!  

 

 

 

참고로,
Live Server는
클라이언트의 요청이 들어왔을 때 
Visual Studio Code의 프로젝트 폴더에서 파일을 찾습니다. 
경로에 파일명이 없으면 index.html 파일을 응답해줍니다. 
예를들면 아래와 같습니다.
http://127.0.0.1:5500/1.html => 1.html 응답
http://127.0.0.1:5500/ => index.html 응답

 

 

 

Live server의 또 다른 기능은
실시간 편집 기능입니다. 
코드를 수정하면 
웹페이지를 새로고침 하지 않았음에도 
내용이 실시간으로 변경됩니다.
대박이죠!

 

 

 

웹서버의 존재감을 확인해보기 위해서
웹서버를 꺼보세요.
웹사이트가 열리지 않습니다. 

다시 켜고 접속해보면 정상적으로 웹페이지가 열립니다. 

 

 

 

웹서버를 통해서 웹페이지를 여는 것과 
파일 찾기를 통해서 웹페이지를 여는 것은 구체적으로 어떤 차이가 있을까요? 

 

 

 

주소를 비교해보겠습니다. 

파일 찾기로 열었을 때 : file///Desktop/web/index.html
웹서버를 통해서 열었을 때 : http://127.0.0.1:5500/index.html
이것을 그림으로 나타내면 아래와 같습니다. 

 

 

 

웹서버로 접속한 주소를 자세히 살펴볼까요?

http는 HyperText Transfer Protocol로서 
웹페이지를 주고받기 위한 통신규약이라는 뜻입니다. 

 

127.0.0.1은 Internet Protocol Address로서 
인터넷에서 사용하는 주소를 의미합니다. 
IP Address는 0.0.0.0부터 255.255.255.255까지의 주소가 존재합니다. 
약 43억 개의 주소가 존재합니다. 
이렇게 많은 주소 중에서
127.0.0.1은 내 컴퓨터 자신을 가리키는 특별한 주소입니다. 

 

Port는 컴퓨터에 여러 개의 서버가 동작하고 있을 때 
서버를 구분하는 정보입니다.
위의 그림에서는 주소의 port 번호가 5500이므로
5500에서 동작하고 있는 Web Server와 통신하게 됩니다. 

 

 

그런데 같은 컴퓨터에 설치된 
웹브라우저와 웹서버가 정보를 주고받는 것은 
현실 세계의 웹과는 다르죠?
혼잣말 같은 것입니다. 
서로 다른 컴퓨터끼리 정보를 주고받을 수 있어야 합니다. 

그런데 컴퓨터가 한 대밖에 없다고요?
아닐걸요? 스마트폰이 있잖아요!
스마트폰은 전화기의 탈의 쓴 컴퓨터입니다. 

 

 

 

스마트폰에 설치된 웹브라우저와 
실습용 컴퓨터에 설치된 웹서버가 
서로 통신할 수 있다면 얼마나 좋을까요? 
해봅시다!

 

 

 

그런데 시작하기 전에 강조 드릴 것이 있습니다. 
이 작업은 10명 중 1명 정도만 성공할 것입니다. 
성공하는 이유는 하나인데 실패하는 이유는 백 가지가 넘거든요. 
혹시 실패했다고 해도 성공했다고 간주해주세요. 
믿으면 됩니다. 

 

 

 

우선 해야 할 일은 
스마트폰과 컴퓨터를 같은 네트워크에 연결해야 합니다. 
쉽게 말해서 같은 와이파이에 접속해주세요. 
예를 들어서 노트북이 ego-5G에 접속되어 있다면 
스마트폰도 ego-5G에 접속되어야 합니다. 

 

 

 

또 하나 해야 할 것이 있습니다. 
웹서버가 설치된 컴퓨터의 IP address를 따내는 것입니다. 
Visual studio code의 확장 기능 중 ip address를 설치합니다. 

오른쪽 아래에 ip address가 표시 됩니다. 

위의 그림을 보면 우리가 사용할 주소는 
http://172.30.1.83:5500/ 입니다. 
접속해보세요.

 

 

 

 

축하합니다. 

한 대의 컴퓨터를 초월해서 
전 세계에 있는 수많은 컴퓨터를 
마치 내 컴퓨터인 것처럼 사용할 수 있게 된 
웅장한 진보를 목격하신 것입니다!

댓글

댓글 본문
  1. Sansol Park
    영상에서 설명된 내용에 따르면, HTML 파일은 컴퓨터와 핸드폰이 같은 네트워크에 연결되어 있어야 제대로 작동합니다. 즉, 컴퓨터와 핸드폰이 동일한 와이파이에 접속되어 있어야 합니다. 또한, 컴퓨터의 IP 주소를 알아내어 핸드폰에서 접근할 수 있도록 설정해야 합니다.

    따라서, 한글로 만든 HTML 파일이 컴퓨터에서는 잘 작동하지만 핸드폰에서는 문제가 발생한다면, 두 가지를 확인해봐야 합니다:

    컴퓨터와 핸드폰이 같은 네트워크에 연결되어 있는지 확인하십시오. 예를 들어, 집에 있는 공유기의 이름이 ego-5g라면, 컴퓨터와 핸드폰 모두 ego-5g에 접속해야 합니다.
    컴퓨터의 IP 주소를 정확히 알아내어 핸드폰에서 접근할 수 있도록 설정했는지 확인하십시오.
    위 두 가지 조건이 충족되지 않으면 핸드폰에서 HTML 파일이 제대로 작동하지 않을 수 있습니다.
    대화보기
    • 안성
      완료
    • 야생의코린이
      2024-05-05 완료
    • 코딩앤수학
      2024-05-04 완료
    • 이사야
      2024-05-01 완료!
    • nathan
      2024-04-23 완료!
    • 마우스오른쪽버튼
      진짜진짜 좋은 강의!!
    • 김태규
      24.4.1 완료
    • 2024.03.16
    • Sansol Park
      ChatGPT 4의 답변입니다.

      질문에 대한 답변을 드리기 전에, 정말 좋은 질문을 해주셨네요! 이해를 돕기 위해 간단하게 설명해 드릴게요.

      ### 같은 와이파이 네트워크에서의 통신

      먼저, 라이브 서버를 켠 노트북과 클라이언트인 폰이 같은 와이파이에 접속해야만 서로 통신할 수 있는 경우를 보겠습니다. 이 경우, 두 기기는 같은 로컬 네트워크 내에 있으며, 이 네트워크는 주로 사설 IP 주소를 사용하여 통신합니다. 사설 IP 주소는 외부 인터넷에서는 직접 접근할 수 없으며, 같은 로컬 네트워크 내에서만 유효한 주소입니다. 따라서, 노트북과 폰이 같은 와이파이에 연결되어 있을 때, 이들은 직접적인 통신이 가능합니다.

      ### 인터넷을 통한 통신

      반면에, 네이버와 같은 웹사이트에 접속할 때는 상황이 다릅니다. 여기서는 인터넷이라는 거대한 네트워크를 통해 통신이 이루어집니다. 인터넷은 전 세계의 수많은 컴퓨터와 네트워크를 연결하는 역할을 합니다. 이때 사용되는 것이 공인 IP 주소와 도메인 이름 시스템(DNS)입니다.

      - **공인 IP 주소**: 인터넷에 연결된 모든 기기는 고유한 공인 IP 주소를 갖습니다. 이 주소를 통해 인터넷상의 다른 기기들과 통신할 수 있습니다.
      - **도메인 이름 시스템(DNS)**: 사용자가 'www.naver.com'과 같은 도메인 이름을 입력하면, DNS 서버는 이를 해당 서버의 공인 IP 주소로 변환해줍니다. 이렇게 해서 사용자의 컴퓨터는 네이버 서버의 실제 위치를 알 수 있게 되고, 인터넷을 통해 네이버 서버에 요청을 보낼 수 있게 됩니다.

      ### 차이점

      - **네트워크 유형**: 같은 와이파이 네트워크에서의 통신은 로컬 네트워크 내에서 이루어지는 반면, 인터넷을 통한 통신은 전 세계 어디서든 연결될 수 있는 공인 IP 주소를 사용합니다.
      - **주소 체계**: 로컬 네트워크 통신은 주로 사설 IP를 사용하고, 인터넷 통신은 공인 IP 주소와 DNS를 사용합니다.

      결국, 이러한 시스템 덕분에 우리는 네이버와 같은 웹사이트에 접속할 수 있고, 전 세계 어디서나 정보를 주고받을 수 있는 거죠. 인터넷의 복잡하고도 매력적인 요소 중 하나입니다. 혹시 더 궁금한 점이 있다면 언제든 물어봐 주세요!
      대화보기
      • 심해
        궁금점이 있습니다.
        해당 예제 실습에서 웹서버(라이브서버를 켠 노트북컴퓨터)와 클라이언트(폰), 두 호스트가 통신하기 위해서 같은 와이파이에 접속해야만 통신할 수 있습니다만, 저희가 네이버주소(도메인 또는 ip주소)를 입력했을때는 네이버서버와 제 컴퓨터가 같은 네트워크로 연결된게 아닌데 어떻게 주고 받을 수 있는거죠? 인터넷 덕인거 같긴한데,,, 구체적으로 어떤 차이 때문에 이런 차이가 발생하는지 궁금합니다
      • 심해
        2024.03.13
      • 사슴튀김소스
        2024.03.01
      • beginner
        20240301
      • 안제경
        2024.02.17
      • 4월의눈꽃
        20240211
      • 미래도비
        0207
      • 드솔
        24.02.06
      • 01.30 완료
      • 로삶
        2024.01.26 완료
      • 레나
        2024.01.21 완료
      • ECLECTIC
        시작
      • 축구는개발,마음은개발
        24.01.08
        WEB1 - 19
      • 김현지
        2024.1.6
      • sonsasungji
        세상은 넓지만 재미있는 것들이 너무 많네요. 아주 흥미롭습니다!!!
      • 20231218 done
      • PigeonLabs
        감동받아서 울었습니다. 감사합니다.
      • 실시간으로 반영되는거 신기하다..
      • 집게사장
        2023.11.23 수강완료
      • 므갱이
        2023.11.07 완료
      • 므갱이
        2023.11.06 완료
      • KunWoo
        231031
      • 샌디에고러버
        231019 수강 완
      • 4Tomorrow
        웹호스팅 이용과 웹서버 구축 해봄.
        port의 의미가 와닿지가 않네요.231015

        검색을 해보니
        모든 웹서버에는 포트가 있더군요. 보통 http는 80, https는 443. 근데 이건 표준적인 거라 굳이 포트번호를 쓰지 않아도 자동으로 이 포트로 진입하도록 한것.
        우리는 5500이란 특정한 포트를 쓰므로 주소창에 꼭 포트번호를 써줘야 통신이 가능해짐. ㅎㅎ 재밌게 배웠어요.
      • 우창규
        되는데 이상한건가요
      • 리니웹
        230928 완료
      • 굴러들어온돌맹이
        230908 완
      • 정윤수
        군부대 안에서는 특정 시간에만 완료가 가능한 과제입니다...
        23.09.05 1114i 실패....
      • carpediem
        2023.09.02 완료!!
      • 소연
        230901 완료
      • 30늦은나이아니라고해줘
        20230823완료
      • 나쵸
        230821 완료
      • 양념묻은비니
        230821 완료
      • 총각배추
        대단함에 연속입니다.
        배움의 길을 열어주신것에 한번 더 감사합니다.
      • 니코니코드
        2023.08.14.
      • 오옹오옹
        23.08.05
      • 후리후리
        2023.07.27
      • 코딩두
        23.07.06 완료
      • 아멜리아
        2023.07.05
      • 맑고 묽게
        2023.07.01
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기