윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 77강 - express로 GET 요청 서버 만들기 > javascript

안녕하세요 모던 앱을 위한 자바스크립트 제이쿼리 먼 3판 70 실강
되어있구요 이번 강의에서는 21.7 절에 서버 생성 및 실행 방법부터
살펴보도록 하겠습니다
우리가 지난번에는 노드 js 에서 기본적으로 제공하는 http 라는
모듈을 사용해서 서버를 생성해 보았는데요
이번 강의에서는 익스프레스 라는 모듈을 활용해 보도록 하겠습니다 일단
익스프레스 모듈을 설치 하도록 하겠는데요
해당 폴더에 들어가 주신 다음에 마우스 오른쪽 해서 여기서 명령 챙
열기를 눌러서 명령 창을 열어 주신 다음에 mpm 인스톨 익스프레스
골뱅이 4.1를 입력 그래서 4.1버전의 익스프레스를 설치를
해주시면 되겠습니다
참고적으로 지금 mtm 이라는걸 사용해 보고 있는데요 이 강의 이후에
노드 js 를 보시게 될 거고
아마 그거 이후에 리액터 라던지 앵글러 라던 gpu 를 보시게 될텐데요
그때 굉장히 많이 사용되는 녀석 이기 때문에 뭔지 모르게 써도 일단
모듈을 설치할 때 사용되는 녀석이라고 기억을 해 주시면 좋겠습니다
어쨌거나 명령어를 실행하게 되면 뭔가 열심히 올라가면서 다운로드 되는
모습을 볼 수 있구요
그냥 병 하고 설치가 완료 되었습니다 라고 나오는 모습을 볼 수 있습니다
참고적으로 이때 폴더를 보게 되면 노드 모듈 제 라는 폴더가 추가 돼
있고 다양한 폴더들이 생성이 되어 있는걸 볼 수 있는데요
이것들이 모두 노드 js 에서 사용할 수 있는 추가적인 모듈이 라고
생각을 해 주시면 좋겠습니다
일단 뭐 지금 같은 경우에는 서버를 나가 보는 것보다 클라이언트의 내용을
살펴보는 거기 때문에 그러려니 하면서 보시면 될 것 같습니다
일단 콘서트 를 사용해서 앙금 생성 햇던
익스프레스 라는 모듈을 추출 하도록 하겠구요
익스프레스 라는 모듈을 사용해서 곧바로 실행을 해서
앱 이라는 객체를 생성해 주시면 되겠습니다
참고적으로 자바스크립트 가이드라인에 따라서 작은 따옴표 를 쓰도록 할게요
뛰어서 앱 점 윌리스 늘 사용을 해 주시게 되면
이전과 마찬가지로 보 12273 번 포트에서
서버를 실행할 수 있습니다 요기에 성 서버 러닝 4
http 1 2 7.0 점 0.5
5273 이라고 입력을 해 주도록 하겠습니다
참고적으로 이것 때문에 52,200 73번 포트에서 실행 된다고 생각을
하시는 분들이 있는데요
요건 그냥 출력이 고 5 12273 번 포트를 지정하는 건 여기 부분
되겠습니다
참고적으로 포트가 무엇인지는 책에 설명이 나오기 때문에 요걸 상콤하게
읽어주시면 되겠습니다
어쨌거나 이렇게 저장을 하게되면 52,200 73번 보트에서 실행되는
녀석이 나오게 되는데요
앱 점 개스를 사용을 하게 되면
루트 위치로 들어갔을 때 실행 r 콜백 함수를 지정할 수 있습니다
뭐 이렇게 지정을 하게 되면
루트에 들어갔을 때 요 함수가 호출이 되구요
이전과 마찬가지로 리퀘스트 개체 왕 리스폰 스 리 스
혼수 제체 를 생성하게 됩니다 참고적으로 오탈자가 좀 날수 있는 정도로
긴 녀석들이라 간단하게 이렇게 알이 쭈그리고 알이 s 로 사용하는 경우도
많으니까 함께 기억을 해 주시면 되겠습니다
어쨌거나 이렇게 되면 리스폰스 점 샌드라 는 걸 사용해서
h1 태그를 전달 하거나 하는 등의 활동이 가능해 지게 됩니다
어쨌거나 이렇게 사용하는 것이 기본 이라고 생각을 해 주시면 되겠구요
간단하게 코드를 저장을 하고
실행해 보도록 하겠습니다 실행을 하게 되면
f5 를 눌렀을 때
루트로 들어가 주시면 헬로 월드 라는 글자를 출력하는 모습을 확인할 수
있습니다 그럼 이어서 책의 내용을 계속 살펴보도록 하겠는데요
곧바로 살펴볼 내용은 책에 개 21.9 절에 있는 정적 파일 제공
되겠습니다
정적 파일 제공 이라는 것은 어떤 폴더 내부에 있는 파일들을 모두 서버를
통해 제공해 준다는 말인데요
무슨 말인지 코드를 만들어 보고 수행하면서 알아보도록 하겠습니다
일단 폴더에 퍼블릭 이라는 폴더를 만들어 주시면 되겠고요 이렇게 폴더를
만들어 주신 다음에 이 내부의 다가 간단하게 html 파일 하나를
생성해서 저장 해 주도록 하겠습니다
html 페이지 하나만 들어주시면 되겠구요 며 녀석을 곧바로 퍼블릭 폴더
내부에
인덱스 점 html 이라는 이름으로 저장 해 주도록 하겠습니다
그리고 간단하게 요 안에서는
h1 으로 헬로 월드 라고 출력을 하고 뭐 타이틀은
익스프레스 라고 넣어 보도록 할게요 이렇게 구성을 하게 되면 퍼블릭
이라는 폴더 안에 ex 점 html 이라는 파일이 생성 된 모습을 볼 수
있습니다
요 상태에서 메인 점 js 로 돌아와서
앱 점 유지를 입력을 하고
익스프레스 점 세티 기라고 지정해 주신 뒤 매개변수의 퍼블릭 이라고
입력을 해 주시게 되면 요법을 얘기 라는 것은 지금 이 폴더에 이름이죠
지정 만 해 주시게 되면 저장을 했을 때 저 폴더에 있는 모든 내용을
요렇게 갯수로 자동생성 해주게 됩니다
그래서 코드를 종료를 하고 다시 실행을 했을 때
인덱스 점 html 에 들어가게 되면 html 파일에 들어가는 모습을 볼
수 있는데 둘다 헬로 월드 라고 써서 차이를 알아보기가 힘드네요
헬로 월드 등 에스테틱 파일이라고 지정을 하도록 할게요 m
이렇게 하고 코드를 실행하게 되면 요 파일이 열리는 모습을 확인할 수
있습니다 그럼 이어서 3개 21.1 a 절 응답과 응답 형식에 대해서
살펴보도록 하겠는데요
우리는 데이터 점 html 데이터 점 제이슨 그리고 데이터 점 xml
이라는 3개의 파일 형태로 응답을 제공하는 방법에 대해서 살펴보도록
하겠습니다
왜요 걸 알아 보냐 라고 무르시 게 되면 우리가 다음 장에서 사용을 할
거 기 때문이죠
어쨌거나 데이터를 제공해 주는 것이기 때문에 위쪽에 변수를 하나 선언해
주도록 할게 염 고 실제로 사용을 하게 되면
요녀석은 데이터베이스를 사용을 하게 되겠죠 어쨌거나 이렇게 입력을 해
주신 다음에
요 앱 전 개수를 사용을 해서
3반 붙여 넣어 주시고
데이터 점 html 그리고 데이터 점 j 센 그리고 데이터 점
xml 이라는 것을 제공해 보도록 하겠습니다
매개변수의 문자의 를 넣어서 리턴을 해주면 되겠는데요 일단 html 파일
제공 방법부터 살펴보도록 하겠습니다
책에서는 코드를 간단하게
요렇게 사용을 했는데요 html 문자열을 조합을 해서 생성을 한 다음에
이렇게 만들어진 아 오프 슬 응답을 하고 있습니다
이렇게 되면 아이템 제 내부에 있는 네임과 프라이스 를 사용해서 div
태그와 h1 h2 를 구성해서 응답을 하게 되겠죠
한번 코드를 저장을 하고 실행해서 결과를 확인해 보도록 하겠습니다
실행을 해 주시게 되면
실행하고 데이터 점 html 에 들어갔을 때 우유 2000 홍차 5천
커피 5천 이라는 요 html 을 출력하는 모습을 볼 수 있습니다
그럼 이어 성
제 2 승 출력 방법에 대해서 살펴보도록 하겠는데요
제 2선으로 출력하고 싶을 때는 그냥
자바스크립트 객체를 샌드맨 3rd 의 매개변수로 꼽아 주시면 됩니다
우리가 지난번 엔드 라는 메서드를 사용 했었는데요
샌드라 는 메서드는 익스프레스가 제공을 해주는 추가적인 메서드로 조금 더
편리하게 플라이트 에도 없이 사용할 수 있는 녀석이라고 생각을 해 주시면
되겠습니다
어찌 코난 이렇게 제이슨을 제공을 하게 하면 저장을 한 다음의 코드를
실행 했을 때 데이터 점 제일 쓴 에 들어가게 되면 제이슨 응답을 지금
하는 처럼 보실 수 있습니다
참고적으로 이렇게 예쁘게 나오지 않는 분도 있는데요 지금 여기 예쁘게
나오는 이유는 크롬 확장 프로그램의 제이슨 리더 라는 녀석이 설치되어
있기 때문입니다
어쨌거나 그럼 이어서 xml 응답을 만드는 방법에 대해서 살펴보도록
하겠는데요
xml 은 요 html 과 비슷한 형식인데
열고 닫고 그리고 내부의 글자를 쓰시기 만 하면 됩니다
자세한 내용은 뭐 따로 설명하지 않을 께요 왜냐하면 노드 js 그 무료로
제공되는 별도의 강의해 성 설명을 하고 있거든요 그래서 xml 을
만들어서 리턴을 해주시면 되는데요 이때 xml 같은 경우에는 이걸 xml
이라고 확실하게 컨텐트 타입을 지정을 해서 리턴을 해주셔야 됩니다
그 코드가 바로 코드 21 다시 26 에 나오는 내용인데요
고 코드를 상콤하게 활용해 주시면 되겠습니다
참고적으로 노드 js 에서는 요 세미콜론을 거의 안 쓰는 편이라서
모두 제거해 주도록 하겠습니다 어쨌거나 이렇게 코드를 입력을 하고
마찬가지로 실행을 하게 되면
데이터 점 xml 에 들어갔을 때는 xml 파일을 응답 받는 모습을 볼
수 있습니다
그래서 현재
데이터 점 html 에 들어가게 되면 html 응답을 받고 데이터 점
제이슨 에 들어가게 되면 제이슨 데이터를 응답을 받고 그리고 데이터 점
xml 에 들어가면 xml 데이터를 응답을 받는 웹서버를 간단하게 만들어
봤는데요
다음 강의에서는 인덱스 점 html 에서 제이쿼리 이집트를 활용을 해서
에이젝스 가 무엇인지 알아보고 에이젝스 를 활용하는 방법에 대해서
간단하게 살펴보도록 하겠습니다
오늘 강의는 여기까지 되겠고 다음 강의에서 뵙도록 하겠는데요
참고적으로 오늘이 추석 연휴 에요 그래서 뭐 강의를 실시간으로 보시는
분이라면 즐거운 연예 되시면 좋겠습니다
어쨌거나 그럼 다음 강의 에서 뵙도록 하겠습니다 감사합니당