WEB1 – 19.2.2. 웹서버와 http (맥)

자 그럼 이번시간에는 우리가 설치한 웹서버의 요모조모를 살펴보면서 웹서버라는 것이 무엇일까 또 인터넷이라는 것은 어떻게 동작하는가 이런 것들에 대한 예를 넘어서서 익숙해지는 시간을 가져보도록 하겠습니다 자 저는 화면을 두 개로 쪼개놨는데요 하나는 우리가 웹서버를 설치한 직후에 자동으로 열렸던 웹페이지구요 오른쪽은 파인더입니다 그래서 왼쪽에 있는 이 웹페이지가 화면에 출력되고 있는데 그렇다면 이 웹페이지는 결국에 html이란 말이에요 이 html은 도대체 어디에 있는 것일까 자 여러분 '응용프로그램'이라고 하는 폴더가 있을겁니다 영문판은 Application 이구요 그 중에 우리가 설치한 'mampstack'으로 시작하는 디렉토리가 있을텐데요 거기에 보면은 우리가 Apache를 설치한 것이니만큼 'apache2'라고 하는 디렉토리가 있을겁니다 거기에 'htcdocs' 'ht'는 hypertext, 'doc'는 문서라는 뜻입니다 즉 '웹페이지들'이라는 뜻이죠 라고하는 디렉토리에 보면 이렇게 여러 파일들이 잔뜩 있는데 지금 제가 접속한 이 주소를 보시면 127

001:8080/indexhtml입니다 즉 indexhtml파일을 우리가 연거다 라는 것을 추론할 수 있단 말이죠 그렇다면 index

html 파일은 누구이냐 바로 얩니다 그럼 제가 그걸 증명하기 위해서 파일의 이름을 제가 index2html로 바꿨습니다 자 그리고 리로드를 하면 보시는 것처럼 '파일을 찾을 수 없다'라고 뜨죠 그리고 여기 index를 index2로 바꾸면 보시는 것처럼 다시 파일을 찾을 수가 있습니다 자 이것을 통해서 우리가 추론할 수 있는 것은 이렇게 생긴 주소로 우리가 접속했을 때 여기에 나오는 이 파일은 어디에 있냐 application 밑에, 응용프로그램 밑에 mampstack의 디렉토리 밑에, apache2의 디렉토리 밑에 htdocs라고 하는 디렉토리 안에 그 파일들이 저장되어있다 라는 것을 알 수가 있습니다 추론을 통해서요 자 그럼 이론적으로 이 상황을 정리해봅시다 자 제가 주소창에다가 http://12700

1:8080/indexhtml 이라고 입력했을 때 어떤 일이 일어나는지를 이론적으로 확인해봐요 자 우리의 컴퓨터가 이렇게 있습니다 이 컴퓨터에는 htdocs라는 디렉토리 안에 저는 indexhtml이라는 파일을 저장해놨어요 사실은 제가 저장한게 아니라 우리가 bitnami를 통해서 apache를 깔면 bitnami가 그 디렉토리 안에 저 파일을 넣어놓습니다 자 그 다음 이 컴퓨터에는 지금 두 개의 프로그램이 깔려있습니다 하나는 웹브라우저고 하나는 웹서버입니다 여기서 여러분이 주목하셔야 할 것은 '12700

1 이라고 하는 것이 뭐냐' 입니다 저것을 들어보신 적이 있을건데 ip라고 하는게 바로 저겁니다 정확하게는 'ip address', 'ip주소'라고 하는겁니다 그리고 거기서 ip는 인터넷 규약이란 뜻의 internet protocol의 약자입니다 그래서 ip address라는 것이 무엇이냐면 인터넷상에 존재하는 인터넷에 연결돼있는 각각의 컴퓨터들의 고유한 주소라고 할 수 있습니다 여러분이 친구에게 전화를 걸려면 친구의 전화번호를 알아야되는 것처럼 여러분의 웹브라우저로 어떤 웹서버에 접속하려면 그 웹서버가 설치되어있는 컴퓨터의 ip address를 알아야합니다 물론 우리는 현실에서는 ip address를 쓰기보다는 도메인을 많이 쓰지만 이 두 가지는 아주 밀접한 관계이고 아마 우리 수업은 도메인은 다루지 않기때문에 여러분은 ip만 보시면 됩니다 자 그럼 이렇게 하면 어떤 일이 생기냐면, 아 그 전에 8080이라고 되어있는거 보이시죠 저 8080이라는 것은 '포트'라는 거거든요 그래서 저 8080은 우리가 맥에는 이미 웹서버가 깔려있었어요 그런데 우리가 실습의 편의성을 위해서 거기에다가 웹서버를 하나 더 깔았단 말이에요 하나의 컴퓨터에 웹서버가 두 개가 되면 혼란스럽잖아요, 그죠? 그래서 두 번째 설치한 웹서버를 첫번째, 원래 있었던 웹서버와 구분하기 위해서 8080이라는 것을 뒤에 붙여준거에요 저렇게 접속하면 두 번째 설치한, 우리가 설치한 웹서버에 접속하는거고 그게 없으면 원래 웹서버에 접속하는겁니다 이해 못해도 괜찮고 그냥 저렇게 쓰면 된다 라고 생각하시면 됩니다 혹시나 여러분들이 지금 실습이 안되면 8080을 떼어내고 접속하시면 또 될 수도 있습니다 혼란스럽죠 자, 그러면 어떤 일이 생기냐면 웹브라우저에 12700

1 이라고 하면 웹브라우저가 설치 되어있는 컴퓨터 자체를 의미하고 그 컴퓨터에 있는 웹서버에 접속이 됩니다 그럼 웹서버에게 웹브라우저가 뭐라고 얘기하는거냐면 '나는 indexhtml 파일을 원해'라고 얘기한겁니다 그럼 웹서버는 같은 컴퓨터에 설치되어있는 htdocs라는 디렉토리에서 Indexhtml 파일을 찾아서 그 파일을 웹브라우저에게 보내주면 웹브라우저가 그 파일을 받아서 그 파일을 받는게 아니죠 그 파일에 저장되어있던 코드를 받아서 그 것을 해석해서 웹페이지에 표시해주게 됩니다 자 그럼 이 그림을 보시는 것처럼 웹브라우저가 12700

1로 접속하면 웹서버에게 indexhtml파일을 건네받는다면 웹서버를 끈다면 건네받을 수 없어야겠죠 정말 그런지 확인해봅시다 저는 기존의 indexhtml 파일을 index2html 로 바꿔놨거든요 다시 원상복귀 시킬게요 그리고 이 것도 이렇게 원상복귀를 하고 그리고 여기에 있는 bitnami 매니저라고 하는 프로그램에서 manage servers로 가서 Apache Web Server라는 프로그램을 stop해서 꺼볼게요 그리고 리로드했을 때 웹페이지가 열리나요? 안열리죠 왜냐, 웹서버라고 하는 프로그램이 꺼졌기 때문에 전달받을 수 없게 되는겁니다 그럼 다시 꺼놨던 웹서버를 켜겠습니다

자 켰어요 리로드, 자 이제 됐죠 그리고 저는 웹페이지를 웹브라우저를 하나 더 켤게요 비교할 게 있어서요 그리고 왼쪽은 http (이건 생략 가능 합니다) 127001로 접속했을 때의 화면이고 오른쪽에서는 command 알파벳o 키를 눌러서 응용프로그램 밑에 mampstack 밑에 apache2 밑에 htdocs 디렉토리에서 indexhtml 파일을 직접 선택해서 열었을 때의 화면을 놓고 한번 비교해봅시다 어때요, 내용이 같은가요 다른가요? 완전히 같습니다 하지만 왼쪽은 앞이 http로 시작하고 오른쪽은 앞이 file로 시작합니다 그리고 왼쪽은 ip address를 사용하고있고 오른쪽은 파일이 위치하고있는 경로를 직접 지정하고 있어요 그럼 이 둘 사이에는 어떤 차이가 있는가를 살펴보면서 좀 더 익숙해져봅시다ㅍ 우선 http:://라고 하는 주소는 이런 상태입니다 우리 컴퓨터에는 웹브라우저와 웹서버가 동시에 설치되어있고 우리는 웹서버를 경유해서 index

html파일을 전달받아서 그 것을 웹브라우저에 뿌려주고 있습니다 또 다른 케이스 보시는 것처럼 파일을 직접 열었습니다 그리고 앞이 file:/// 으로 시작합니다 이 경우에는 어떤 상황이냐면 웹브라우저가 물론 깔려있긴 하지만 웹브라우저는 웹서버를 통하지 않고 직접 indexhtml 파일을 읽어서 화면에 표시하는겁니다 차이가 있죠 같은 컴퓨터에 웹브라우저와 웹서버가 모두 설치되어있다면 결과는 다르겠지만 우리가 지금 하려고 하는 것은 인터넷을 통해서 두 대의 컴퓨터가 한 대는 웹브라우저, 한 대는 웹서버가 설칭되어서 주고받으려면 각각의 역할에 맞는 프로그램이 깔려있어야 되거든요 그래서 왼쪽의 http라고 하는 저 약자가 무엇의 약자냐면 hypertext, 웹페이지라는 뜻입니다 transfer protocol transfer는 전송하다 protocol은 규약이라는 뜻입니다 즉 웹페이지를 전송하기위해서 고안된 통신규약이라는 뜻이에요 그래서 이걸 이용하시면 여러분이 인터넷 환경에서는 완전히 다른 차원으로 갈 수 있게 되죠 아직까지는 똑같지만요 자 그러면 대충 인터넷, 웹이 어떻게 동작하는지 127001이 뭔지 알았으니까 이제 우리 지금까지 작업했던 소스코드를 htdocs로 옮겨서 실습을 할 준비를 좀 해봅시다 보시는 것처럼 오른쪽 화면에 보시면 아랫쪽은 지금까지 우리가 작업해왔던 소스코드가 위치하고 있는 디렉토리 위쪽은 htdocs 입니다 저는 기존에 있었던 htdocs의 파일들을 삭제했구요 그리고 우리가 열심히 만들었던 예제를 이렇게 옮겼습니다 (카피를 하는게 낫겠네요) 이렇게 복사한 다음에 리로드를 하면 어떻게 될까요 짜잔 🙂 ㅎ

ㅎ 기분이 좋네요 자 이렇게 이렇게 됩니다 그리고 이렇게 클릭해보면 보시는 것처럼 우리 예제가 잘 동작하는 것을 볼 수가 있죠 여기까지 하겠습니다