윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 76강 - 웹 서버 기본 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 76강 - 웹 서버 기본

페이지 정보

조회: 1,532

본문

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

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

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

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 먼 3판 76 관객이

있구요
이번 강의에서는 웹 서버를 만드는 기본적인 방법에 대해서 살펴보도록
하겠습니다
일단 책에서는 노드 js 를 굉장히 많이 설명하고 있는데요
굉장히 간단하게 다루고 있기 때문에 유튜브에서 모던 앱을 위한 노드 js
정도 라고 입력을 하시게 되면 모던 웹을 위한 노드 js 강의가 24개가
제공이 되거든요 그래서 요 내용을 간단하게 살펴 보시면 좋을 것 같습니다
우리는 자바스크립트 클라이언트에서 서버를 사용할 수 있게 하는 가장
기본적인 구성에 대해서만 살펴보도록 하겠습니다
일단 웹 서버와 웹 클라이언트가 문제부터 짚고 넘어가야 할 텐데요
웹서버 라는 것은
어떠한 위치에 중앙에 있는 거라고 생각을 해 주시면 되겠구요
클라이언트 라는 것은 여기에 붙어서 무언가를 제공 받는 것이라고 생각을
해 주시면 좋겠습니다
뭐 간단하게 이야기를 하면 서버 같은 경우에는 뭐 기업이나 회사 같은
걸어 생각을 해 주시면 되겠구요
클라이언트는 손님이라고 생각을 해 주시면 좋겠습니다
우리가 음식점 이라던지 은행 이라던지 가 바로 서버라고 할수 있겠구요
우리가 은행이 가게 되면 여러 손님들이 참고 에 앉아서 은행원 을
기다리게 되죠
그러한 손님들이 모두 클라이언트 라고 보시면 되겠습니다
웹의 세계에서는 서버 라는 것은 어딘가에 있는 컴퓨터 위에 프로그램이라고
생각을 해 주시면 되겠구요
클라이언트는 대부분 웹브라우저 라고 생각을 해 주시면 좋겠습니다
물론 웹브라우저 이 외에도 우리가 입 안쪽으로 스마트폰에서 사용하는
애플리케이션들이 대부분 웹서버를 사용해서 통신을 하기 때문에 그러한
애플리케이션도 일종인 클라이언트 라고 볼 수 있겠습니다
우리가 지금까지 배웠던 것은 모두 클라이언트 프로그램 이라고 보시길
보시면 되겠구요
일반적으로 우리가 웹브라우저에서 는 프로그래밍 언어로서 자바스크립트 만
사용할 수 있습니다
물론 우리가 알트 js 라고 부르는 다른 프로그래밍 언어를 자바스크립트로
변환을 하는 언어들이 있습니다
예를 들어서 커피 스크립트 라던지 타입 스크립트 라던지 아니면 호텔 인
이라든지 고 라든지 등이 모두 알트 js 라는 기능을 가지고 있다고
보시면 되겠는데요 어쨌건 이런걸 다 떠나서 웹브라우저에서 돌릴 수 있는
가장 기본적인 프로그래밍 언어는 바로 자바 스크립트 입니다
그리고 반대로 서버 같은 경우에는 굉장히 다양한 프로그래밍 언어를 사용할
수 있어요
뭐 php 라던지 잡아 라던지
루비 라던지 파이썬 이라든지 뭣이 # 이라던지 굉장히 여러가지 프로그래밍
언어를 사용해서 서버 프로그램을 구성할 수 있습니다
어쨌거나 2010년도 이후로는 자바스크립트를 사용해서 도
서버 프로그램을 구현할 수 있게 됐고요 이로 인해서 우리 모던 f 시리즈
에서는 자바스크립트를 사용해서 클라이언트와 서버를 개발하는 방법을 모두
배우게 됩니다
어쨌거나 일반적으로 서버 라는 것은 중앙에서 그냥 앉아 있는 녀석을
뜻하게 되는데요
우리가 은행에 가고 싶어서 뭔가를 입금 처리를 한다.고 해도 은행원이
우리집까지 와 주지는 않잖아요 그래서 서버 는 가만히 있는거고
클라이언트가 이리저리 왔다 갔다 하면서 무언가를 요청을 하게 되고 서버
는 그때그때 무언가를 응답을 해 주게 됩니다
웃어 다시 정리를 해 보게 되면
클라이언트가 서버에 무언가를 말하는 것을 요청 리퀘스트 라고 부르게
되고요
반대로 이 때 서버가 클라이언트에게
너가 볼 원하는지 알았으니까 내가 너에게 원하는 걸 제공해 주겠다고 하는
것을 응답 리스폰스 라고 부르게 됩니다 그럼 조금 더 자세히 살펴볼 때
요청 이라는 것은 우리가 무언가가
원하는 것이 있어야 되요 예를 들어서 우리가 은행에 가서 계좌를 개설하고
싶습니다 라고 말하게 되면 우리의 요청이 목적은 계좌 개설이 되는 거고요
돈을 다른 사람에게 붙여 주세요 라고 그러면 우리의 요청은 다른 사람에게
무언가를 붙여 달라는 것이 됩니다
따라서 목적이 무엇인지를 명확하게 서버에게 전달해줄 수 있는 방법이
필요한데요
일반적으로 클라이언트가 서버에 무언가를 전달해줄 때 http 라는
통신에서는
메써드 라는 것과 유아 레 대 다는 것을 사용해서 목적을 전달하게 됩니다
이러한 것들을 확인을 하게 되면 서버 는 클라이언트가 무엇을 원하는지
확인을 하고 아니 계좌를 개설해 주세요 라고 그러면 제자를 열심히 개설을
해서 응답을 해 주게 되고 돈을 다른 사람에게 붙여주세요 라 그러면 돈을
다른 사람에게 붙여준 이후의 모든 것이 처리되어 따고 응답을 하게 됩니다
이때 요청이 제대로 처리가 되었는지 처리가 되지 않았는지 따라서 상태가
표현이 되겠죠
제대로 통신이 되었으면 일반적으로 200 ok 라는 말을 띄우게 되구요
너가 뭘 원하는 지 모르겠고 난 그런 기능이 없다 그러면
자 0낮 파운드 라는 것을 출력하게 됩니다
아마 인터넷을 모시게 되면서 모사 공사나 파운드 라는 오류는 굉장히 많이
보셨을 거라고 생각을 해요
최근 인터넷을 돌아다니다가 보았던 간단한 예 인데요
인터넷에서 요렇게 40라고 되어있는 40에러
아니면 페이지가 없다 뭐 40에러 라든지 뭐 여기 에러코드 04
라고 되어 있죠
다양한 사이트를 돌아 도전하시는 더 보면 이러한 40페이지를 출력하는
모습을 많이 보실 수 있습니다
그래서 이러한 숫자를 우리가 상태 코드 라고 표현을 하게 되고요
영어로는 테이터 쓸 코드 라고 표현을 하게 됩니다
그리고 내가 너의 응답을 어떻게 요청을 어떻게 처리를 했다는 거래
응답해 다와 응답 본문 이라는 것으로 알려 주게 됩니다
추가적으로 클라이언트에서 서버로 요청을 걸 때도 뭐 메서드와 url 이
외에도
요청 헤더와 요청 본문을 가지고 있는 경우도 있습니다
어쨌거나 다시 간단하게 네이버 메인 페이지를 보면서 어떠한 식으로 요게
동작이 되는지 살펴보도록 할게요
네이버 메인 페이지를 여신 다음에 fcb 를 여서 개발자 도구를 뛰어
주신 다음에 네트워크 탭 이라는 걸 보게 되면 이렇게 네트워크의 상태를
기록할 수 있는 게 나오거든요
여기에서 애플을 상콤하게 눌러 주셔서 새로고침을 해 주시게 되면 어떠한
데이터가 오고가는 지 확인할 수 있습니다
보시면 굉장히 다양한 것들이 나오게 되는데요 네이버 다컴 이라는 것에
요청을 할때 보시게 되면 리퀘스트 url 과 리퀘스트 메소드가 나오는
모습을 볼 수 있고
스테이터스 코드가 나오는 모습을 볼 수 있습니다
요리 퀘스트 라고 되어있는 부분은 클라이언트가 서버로 요청을 걸 때
어디에 뭘 요청하는 거라고 의미를 생각해 주시면 되겠는데요
www.naver.com 을 제 타게 해 달라 달라 는 뜻이죠
이렇게 요청을 걸면 서버 가 응답해 다와 응답 본문을 이렇게 전달을 해
주면서
스테이터스 코드를 200 ok 로 전달을 하는 모습을 볼 수 있습니다
그래서 가끔 인터넷을 들어 다지면서 얘는 무엇을 요청을 하고 어떻게
요청을 하고 헤더 에는 무엇이 들어가고
이 속성은 무엇인지 등을 하나하나 확인을 해 보시다 보면 조금 더
웹서버에 쉽게 익숙해질 수 도 있을 거라고 생각을 합니다
전반 설명이 쓸데없이 길었는데 요 그럼 실제로 프로그램을 만들어서 서버가
어떻게 실행이 되고 어떻게 구성 되는지 굉장히 간단한 서버를 하나 만들어
보도록 하겠습니다
일단 특정한 폴더에 메인 점 js 라는 파일을 만들어 주시면 되겠구요
저번에 보았던 것처럼 셰프 틀을 클릭하고 마우스 오른쪽을 누르신 다음에
여기서 명령 책 열기를 눌러서 명령 프롬프트 하나를 준비를 해주시면
되겠습니다
이 여성 코드를 입력 을 해보도록 할게요 일단 여기에서는
노드 js 를 사용하실 땐 최신 자바 스크립트 표준을 대부분 사용하실 수
있기 때문에 우리가 지금까지 varo http 를 사용했던 거의 외에
콘서트 를 사용해서 선언을 해 보도록 하겠습니다
일단 http 퀄 리 콰이어 hdcp 를 해 주시게 되면 http 라는
모듈을 읽어 들이게 됩니다
2 http 라는 모듈을 가지고 있는 크레이트 서버 라는
메소드를 사용 하게 되면 서버를 생성할 수 있는데요
이때 콜백 함수를 지정하게 되는데 콜백 함수에 첫 번째 매개 변수에는
리퀘스트 와 관련된 요청 개체 그리고 두 번째 매개 배운 서 에서는
리스폰스 와 관련된 응답 제가 들어오게 됩니다
뭐 자동완성 기능이 나오기 때문에 상콤하게 이해해 주실 수 있을거라고
생각을 하고요
이렇게 만들어 지게 되면 서버 라는 객체가 리턴 되게 됩니다
2 서버 라는 객체 리슨 이라는 메서드를 실행을 하게 되면
그 클라이언트의 응답을 받을 준비를 하게 됩니다
이리스 미라는 메서드의 첫 번째 매개 변수에는 포트번호를 입력을 하게
되는데요
포트와 관련된 설명은 이후에 하도록 하겠고 1탄
5 12273 이라는 전혀 사용되지 않을 것 같은 포트를 지정하도록
하겠습니다
이어서 두 번째 매개 변수에는 콜백 함수를 추정을 하게 되는데요
서버 가 정상적으로 실행이 되었을 때 호출되는 함수 입니당
여기에 성 콘솔 짬 노 구로
서버 러닝 n http 필리 7.0 점 0.15 273 이라고 입력을
해서 서버를 실행 해 보도록 하겠습니다
뭐 현재는 굉장히 쓸데없이 변수를 선언 하긴 했는데요
이렇게 짧게 구성할 수도 있습니다
어쨌거나 응답을 하는 가장 기본적인 방법부터 알아보도록 하겠는데요
음 답을 할 때는 리스폰스 점 & 라는 메서드를 사용 하게 됩니다
근데 그냥 & 만에 선 의미가 없어요 리스폰스 점
라이트 헤드 라는 것을 사용해서 첫 번째 매개 변수의 스테이터스 코드
그리고 두 번째 매개 변수에 해다 와 관련된 객체를 입력을 하게 되는데요
상태 를 200으로 응답을 하고
콘텐트 타입을 텍스트의 html 이라고 전달을 하겠다고 입력을 하시면
됩니다
이어서 응답 본문을 전해줘야 진 웹브라우저의 띄울 내용이 생기거든요
이때는 라이트 라는 함수를 사용하게 되는데요
간단하게 h1 을
헬로 월드 라고 입력을 해서 응답을 하도록 하겠습니다
그렇게 되면 스테이터스 코드 그리고
응답해 더 응답 본 문까지 작성을 해서 응답을 해주는 거라고 생각을 해
주시면 좋겠습니다
어쨌거나 예제에 추가적으로
요청 정보를 확인하는 부분에 대해서 알아보도록 하겠는데요
리퀘스트 와 관련된 정보는 모두 리퀘스트 로 들어오게 됩니다
따라서 이 리퀘스트 라는 녀석을 사용을 하게 되면 어떤 메서드로 요청을
했는지 그리고 어떠한 url 로 요청을 했는지 확인할 수 있습니다
그래서 요 녀석들도 함께 출력을 해 보도록 하겠습니다
어쨌거나 요 위쪽은 이전에 언급했던 요청 메서드와 url 을 출력하는 것
그리고 아래쪽은
요청이 왔을 때 응답과 관련된 내용을 만들어서 사용자에게 응답을 해주는
코드 라고 생각을 해 주시면 좋겠습니다
약간 복잡하죠 그래서 많은 자바스크립트 노드 js 개발자들이 이걸 조금
더 쉽게 사용할 수 있게 제이쿼리 같은 라이브러리를 만들어서 제공을
해줍니다
익스프레스 라는 라이브러리 인데요 책에서는 21.7 절 부터 바로
익스프레스 라는 라이브러리를 사용합니다
그래서 다음 강의에서는 익스프레스 를 사용해서 웹 서버를 만들어 보도록
하겠 구요
이번 강의에서는 간단한 http 요청과 관련된 개요를 설명했다 라고
생각을 해 주시면 되겠습니다
어쨌거나 이렇게 코드를 저장을 해 주신 다음에
노드 파일이 드물 입력을 해서 프로그램을 실행 해 주시게 되면 서버
런닝맨 1 2 7.0 점 0.15 e73 에서 실행이 됩니다 그럼 한번
삶고 막 m 웹브라우저에서
1 2 7.0 점 0.15 e73 에 들어가 보도록 하겠습니다
참고적으로 1 2 7.0 장염 장 일이 뭔지 모르겠다고 생각을 하실 분도
있는데요
요 부분은 인프라와 관련된 내용이고 인프라와 관련된 내용은 이후에 책을
하는 소개하도록 하겠습니다
일단 이렇게 입력을 하고 엔터를 눌러 주시게 되면 헬로 월드 라는 글자를
출력을 하고
크롬 웹브라우저의 개발자 도구에서 네트워크 탭을 확인해 보게 되면
리퀘스트 유아 렐은 1 2 7.0 점 0.15 이질 쌈 메서드는 갯수로
됐고 최종적으로 상태 코드는 200 ok 로 나왔고 응답해 더는 이러한
식으로 그리고 응답 본문 같은 경우에는 h1 헬로 월드 라고 출력되는
모습을 볼 수 있습니다
요 명령 프롬프트 를 보시게 되면 게 타고 짝대기 로 되어 있는 모습을
볼 수 있는데요
루트에 요청을 걸었다는 뜻이고 사실 하나가 더 나오는 모습을 볼 수
있는데
빠세 꾼 점 아이콘 이라는 게 들어가 있어요 요건 요 위쪽에 나오는 요
아이콘이 우리가 일반적으로 파비콘 이라고 부르게 되는데요
웹브라우저가 스스로 뭔가 출력할 게 없으니까 심심하다 라고 생각을 해서
너희 사이트에 출력할 만한 파비콘 이 있냐 라고 물어보는 자 동적인 행위
라고 생각을 해 주시면 되겠습니다 빨아서 딱히 신경쓰지 않으셔도 되고요
이번에는 요 url 뒤에다가
헬로우 라던지 를 입력해 보도록 하겠습니다 보게 되면 이번에는 헬로 라는
url 로 요청이 됐죠
뭐요 뒤에
뭐 헬로우 하 이라고 입력을 하게 되면 마찬가지로 갯수로 헬로우 하
이라고 들어가는 모습을 볼 수 있습니다
그래서 웹브라우저에서 기본적인 요청은 모두 게시 9 0
이후에 에이젝스 를 살펴보면서 갯 이외의 것을 알아 보도록 하겠 꼬
u 아래를 사용을 해서 뭔가 정보를 얻을 수 있다라고 기억을 해 주시면
되겠습니다
만약에 이 푸 조건문을 걸어서
리퀘스트 짬 url 이
헬로 라고 하면 뭐 여기선 세계를 써보도록 할게요
요렇게 쓸 때는 헬로 월드 가 아니라
뭐 안녕하세요 를 출력해 보도록 하겠습니다 그리고
이외의 경우에는 그냥 헬로 월드 를 출력하게 해볼게 염
참고적으로 한글이 깨질 수 있는데요 파일에서 다른 이름으로 저장 을
누르셔서 저장을 하실 때
요녀석이 한국어가 아니라 utf-8 로 되어 있는지 확인을 하시구요
사실 요렇게 한 문장을 전달을 할 때는 웹브라우저가 utf-8 인지
제대로 인식할 수 없을 때가 있거든요 그래서 메타 태그를 입력을 해서
utf-8 이라고 지정을 해 주도록 하겠습니다
그래서 요러한 형태로 코드를 작성을 해주신 다음의 코드를 상콤하게 저장을
하고 상콤하게 실행을 해주시면 되겠습니다
참고적으로 이미 실행중인 프로그램을 끄 실 때는 컨트롤 씨를 연타를
해주시면 됩니다 그럼 메인 프로그램을 다시 실행해 보도록 하겠 고요
웹브라우저로 들어가서 f5 를 눌러 주시게 되면 이전과 마찬가지로 헬로
월드 를 출력하는 모습을 볼 수 있습니다
참고적으로 제가 오타를 냈는데 헬로 5 에 들어가야 되는데 해를 루 라고
입력을 했거든요 그래서 헬로 위치에 들러 가게 되면 안녕하세요 라는
글자를 출력하는 모습을 볼 수 있습니다 그래서 이와 같은 형태로
웹브라우저의 성 접속할 수 있는 웹 서버를 만들 수 있다라고 기억을 해
주시면 좋겠습니다
사실 코드를 입력하는 게 조금 기찬 청 그래서 다음 강의에서는 익스프레스
라고 되어 있는 라이브러리를 사용해서 에이젝스 를 살펴보기 위한 기본적인
서버를 구축해 보도록 하겠습니다
참고적으로 이 코드는 유튜브 아래쪽에 지스트 링크를 걸어 되도록 할게요
어쨌거나 오늘 강의는
여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니당