생활코딩 WEB1 - 19.2.2. 웹서버와 http (맥) > HTML

생활코딩 | WEB1 - 19.2.2. 웹서버와 http (맥)

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

생활코딩님의 HTML강의 청각장애인을 위한 자막

자 그럼 이거 시간에 우리가 설치한 웹서버에 요모조모 를 살펴보면서

웹서버 라는 것이 무엇일까
또 인터넷이라는 것을 어떻게 동작하는 가 이런 것들에 대한
어 이해를 넘어서 익숙해지는 시간을 가져보도록 하겠습니다
자전 화면에 두 개로 쪼개 났는데 하나는 어
우리가 웹 서버를 설치한 즉 구의
자동으로 열렸던 웹페이지 구요 또 오른쪽은
예 그 파인 겁니다
그래서 여기 왼쪽에 있는 이 웹페이지가 지금 화면에 출력되고 있는데
타면 이 웹페이지는
결국에 html 이란 말이에요 그럼 a html 을 도대체 어디에 있는
것일까
자 여러분 그 응용 프로그램 이라고 하는 폴더가 있을겁니다
너무 받은 애플리케이션 이구요 그중에 우리가 설치한 mamp 스택 으로
시작하는 디렉토리가 있을 건데요
거기에 보면 은 우리가 파츠를 설치한 것이니만큼 아파치 투 라고 하는
디렉토리가 있을 겁니다
거기에 ht docs ht 는 하이퍼텍스트 doc 는 문서 라는 뜻입니다
즉 웹 페이지들 이란 뜻이죠
라고 하는 디렉토리에 보면 이렇게 여러 파일들이 잔뜩 이 있는데 지금
제가 접속하니 주소를 보시면 1 2 7.0 점 0.1 8080
인덱스 점 html 입니다 즉 인덱스 점 html 파일을 우리가 0 거다
라는 것을 축원 할 수 있단 말이죠 그렇다면 em html 파일은 누구
있냐 바로 입니다
검 제가 그걸 증명하기 위해서 이 파일의 이름을 제가
인덱스 2.8 2t ml 로 바꿨습니다
자 그리고 리로드를 하면 보시는 것처럼 파일을 찾을 수 없다라고 뜨죠
여기 있는 인덱스를 2 로 바꾸면 보시는 것처럼 다시 파일을 찾을 수가
있습니다
자 이것을 통해서 우리가 음 출원할 수 있는 것은 어 이렇게 생긴 주소로
우리가 접속했을 때 여기에 나오는 이 파일은 어디에 있냐
애플리케이션 밑에 응용 프로그램 밑에 mamp 스틱의 디렉토리 밑에
아파치 2a 디렉토리 밑에 dht docs 라고 하는 디렉토리 안에
그 파일들이 저장되어 있다라는 것을 알 수가 있습니다
출원을 통해 서요 자 그럼 이론적으로 한번 이 상황을 정리해 봅시다
어제가 주소창에 다가 http
땡땡 / 슬래시 1 2.0 점 0.1 8080 인덱스 점 html 이라고
입력했을 때 어떤 일이 일어나는지를 이론적으로 확인해봐요
자서 우리의 컴퓨터가 이렇게 있습니다 제 컴퓨터에는
어 ht docs 라는 디렉토리 안에 저는 인덱스 점 html 이란
파일을 저장해 났어요
사실은 제가 저장한 게 아니라 우리가 비트 남이 를 통해서 아 파츠를 까
이면 비트 나미가 그 디렉토리 안에 저 파일을 넣습니다
예 자 그 다음 이 컴퓨터에는 지금 두 개의 프로그램이 깔려 있습니다 난
웹브라우저 그 하나는 웹 서버 입니다
자 여기서 여러분이 주목하여 야 될 것은 적인 1 2 7.0 점 0.1
이라고 하는 것이 뭐냐 입니다
자 저것을 우리가 이제 들어보신 적이 있을 건데 ip 라고 하는게 바로
져 겁니다
정확하게는 ip 어드레스 ip 주소라고 하는 겁니다
예 그리고 거기서 ip 는 인터넷 규약 이란 뜻의 인터넷 프로토콜의
100 약자입니다
그래서 ip 어드레스 라는 것은 무엇이냐 하면 인터넷 상에 존재하는
인터넷에 연결되어 있는 각각의 컴퓨터들의
고유한 주소라고 할 수 있습니다 여러분이 친구에게 전화를 걸려면 친구의
전화 번호를 알아야 되는 것처럼 여러분의 웹브라우저로 어떤 웹 서버에
접속하려면 그 웹서버가 설치되어 있는 컴퓨터에 ip 어드레스를 알아야
됩니다
예물로 우리는 현실에선 ip 어드레스를 쓰기보다는 도메인을 많이 쓰지만
이 두가지는 아주 밀접한 관계에 이고
담아 우리 수업은 도메인은 다루지 않기 때문에 여러분은 ip 만 보시면
됩니다
자 아무튼 음 자 그럼 이렇게 하면 어떤 일이 생긴다면 아 그전에
8080 이라고 되어 있는 거 보이시죠
예 절 8 0 8 0 이라는 것은 포트 라는 거거든요
예 그래서 저 8080 은 음 우리가
어 매개 는 이미 웹서버 깔려 있었어요 근데 우리가 실습이 어떤 편의성을
위해서
거기에다가 웹 서버를 하나 더 깔아 딴 말이에요
이제 하나의 컴퓨터에 웹서버가 2개가 되면
혼란스럽지 않아요 그렇죠 그래서 두번째 설치한 웹서버를 첫 번째 원래
있었던 웹서버와 9분하기 위해서 8080 이라는 걸 뒤에다 붙여준 거에요
저렇게 접속하면 우리가 두 번째 설치한 우리가 설치한 웹서버에 접속한 은
거고
적이 없으면 원래 웹서버에 접촉하는 겁니다
이 못해도 괜찮고 그냥 저렇게 쓰면 된다 라고 생각하시면 됩니다 혹시나
여러분들이 지금 실습이 안되면 8080 뼈 내고 한번 접속해 보시면 또
될 수도 있습니다
조말론 스럽죠 자 그러면 어떤 일이 생긴다면
자 웹브라우저의 127 첨 0.0 점 일 이라고 하면
웹브라우저가 설치되어 있는 컴퓨터 자체를 의미하고 그 컴퓨터에 있는 웹
서버에 접속이 됩니다
자로 웹서버에 계획 웹브라우저가 뭐라고 얘기하는 거냐 며 난 and x
점 html 파일을 원해 라고 얘기한 겁니다
그럼 웹서버는 어
같은 컴퓨터에 설치되어 있는 ht docs 란 디렉토리에서 인덱스 점
html 파일을 찾아서 그 파일을 웹브라우저 에게 보내주면 웹브라우저가
그 파일을 받아서 그 파일을 받는 게 아니죠 그 파일에 저장되어 있던
코드를 받아서 것을 해석해서 웹페이지에 표시해 주게 됩니다
자 그럼 이 그림을 보시는 것처럼 웹브라우저가 127 첨 0점 0점 일로
접속하면
웹서버 에게 e html 파일을 건네 받는 다면 웹서버를 끈다면 건네
받을 수 없어야 겠죠
정말 그런지 확인해봅시다

자 저는 기존에 and html 파일을 투어 로 바꿨거든요 다시 원보 글
시킬 게요
그리고 또 이렇게 원장 보기를 하고 그 다음에 여기 있는 그 비트 남은
매니저 라고 하는 프로그램에서 매니 지섭 어스 로 가서
아파치 웹서버 라는 프로그램을 스타 패 섞어 볼게요
그리고 리로드 였을때 웹페이지가 열리나요 안열리는 줘 왜 냥 웹서버 라는
프로그램이 거 졌기 때문에 전달 받을 수가 없게 되는 겁니다
자 그럼 다시 거 났던 웹서버를 키우겠습니다
자캐 써요 예 리로드 채 됐죠
자 그리고 저는 웹페이지를 야
웹브라우저를 하나더 킬 게요 비교할게 있어서요
그리고 왼쪽은 우리가 http 가 생략 가능합니다
1 이치죠 명점 0.15 접속했을 때의 화면이고 오른쪽에서는
어 커맨드 알파벳 보 키를 눌러서
예 응용 프로그램 밑에 mamp 스틱 밑에 아파치 to 밑에 hd
docs 디렉토리에서
인덱스 점 html 파일을 직접 선택해서 열었을 때 화면을 놓고 한번
비교해 봅시다
어때요 내용이 같은가요 다른가요 완전히 같습니다
하지만 이 왼쪽은 앞에 가 http 로 시작하고 오른쪽은 앞에 가 파일로
시작합니다
그 왼쪽은 ip 어드레스를 사용하고 있고 오른쪽은 파일이 위치하고 있는
경로를 직접 지정 하고 있어요
그럼 우리 이 둘 사이에는 어떤 차이가 있는가를 살펴 보면서 좀 더
익숙해져 것이다
자 우선 http 땡땡 / / 라고 하는 주소는 이런 상태입니다
우리 컴퓨터에는 웹브라우저 웹서버가 동시에 설치되어 있고 우리는 웹
서버를 경유해서
예 인데 그 점 html 파일을 전달받아서 까지 웹브라우저의 뿌려주고
있습니다
또 다른 케이스 자 보시는 것처럼 파일을 직접 열었습니다 그리고 앞에는
파일 점 땡땡 으로 시작합니다
자의 경우에는 어떤 상황이 냐 면 웹브라우저가 물론 우리 깔려 있긴
하지만 웹 브라우저는 웹 서버를 통하지 않고 직접 인덱스 점 html
파일을 읽어서 화면에 표시하는 겁니다
차이가 있죠 예 같은 컴퓨터에 웹브라우저 웹서버가 모두 설치되어 있다면
결과는 다르겠지만
우리가 지금 하려고 하는 것은 인터넷을 통해서 2 데이에 컴퓨터가 안
되는 웹브라우저
안되는 웹서버가 설치되어 서 주고 밖과 주고 받으려면
각각의 역할에 맞는 프로그램이 깔려 있어야 되거든요
자 그래서 왼쪽에 있는 http 라고 하는 저 약자 가 뭐의 약자 냐 면
하이퍼텍스트 웹페이지 라는 뜻입니다
트랜스퍼 프로토 컬 텔 스포는 전송 아다 프로토콜은 규약 이란 뜻입니다
즉 웹 페이지를 전송하기 위해서 고안된 통신 q 약 이란 뜻이에요
그래서 이걸 이용하시면 여러분이 이제 인터넷 환경에서는 완전히 다른
차원으로 갈 수 있게 되죠
아직까지는 똑같지만 요 자 그러면 우리 대충 인터넷 또 웹이 어떻게
동작하는지 예 1 2000 0점 0점 일이 뭔지 알았으니까 이제 우리
지금까지 작업했던 소스코드를
ht docs 로 옮겨서
이제 실습을 할 준비를 좀 해봅시다
자 보시는 것처럼 오른쪽 화면에 보시면 아래쪽은 지금까지 우리가 작업해
왔던 소스 코드가 위치하고 있는 디렉토리
위쪽은 ht docs 입니다
자 그러면 저는 기존에 있었던 ht docs 에 파일들을 삭제 했구요
그리고 우리가 열심히 만들었던
예제를 이렇게 옮겼습니다 가필 하는게 낫겠네요
자 이렇게 복사한 다음에
리로드를 하면 어떻게 될까요 짜잔
김연선 네요 그래서
자 이렇게 이렇게 됩니다
그리고 이렇게 클릭해보면 보시는 것처럼 우리 예제가 잘 동작하는 것을
볼수가
척 여기까지 하겠습니다.