SlideShare uma empresa Scribd logo
1 de 40
Baixar para ler offline
리스펙토링
두 번째 세션
목차  웹 이해하기
 Node.js, NPM이란?
 Express 프레임워크를 사용한
간단한 서버 환경 구축
 Restful이란?
 REST API 실습
웹 이해하기
우리가 어떻게 네이버 화면을 볼 수 있을까?
사용자 브라우저 웹 통신 서버
Frontend
프론트엔드
Backend
백엔드
클라이언트 사이드 네트워크 서버 사이드
요청
응답
요청(Request) : html 파일 내놔 응답(Response) : 여기 html 파일
클라이언트 여행
URL 창에 네이버를 치는 순간 일어나는 일들
브라우저의 역할 ( https://www.naver.com/ )
 사용자가 입력한 URL을 해석
 프로토콜 확인(http, https, ftp, file, mailto…)
 요청 메시지( GET ‘www. naver . com’ HT T P/1. 1) 를 만든다
 도메인을 DNS 서버에 보내 해당하는 IP 주소를 요청
ex) www.naver.com => 232.123.12.1 (모름)
 메시지와 IP 주소를 네트워크 기능을 갖고 있는 OS에 넘김
=> OS 내부의 TCP/IP 소프트웨어가 이를 통해 서버와 통신
네트워크 시간에 배워요..
TCP/IP라는 무언가에게
‘어디의’ ‘누구’와 통신하고 싶은지 알려주어야 한다.
IP 주소 + 포트 번호
네이버의 IP 주소
(www.naver.com 도메인을 통해 알아냄)
웹 서버의 경우 일반적으로
80번 포트 사용 (URL에서 보통 생략)
URL을 통해 페이지 요청
클라이언트의 역할을 쉽게 생각하자면..(get일 때)
*URL에는 클라이언트가 서버한테 원하는 사항들이 적혀있다.
리스펙토링 세미나 - 웹 브라우저 동작 개념, Node.js를 통한 서버 이해, REST API
Request Message(요청 메시지)
 리퀘스트 라인, 리퀘스트 헤더, 리퀘스트 바디로 구성
 ‘무엇을’ ‘어떻게’ 해야 하는가가 적혀 있다.
Request Method => ‘어떻게’
Get = “페이지 내놔”
‘ / ’ => 루트 디렉터리를 의미
• / 뒤에 Index.html 파일이 생략
• index는 기본 파일을 의미
• (index가 아닐 수도 있음: 다른 이름)
index.html => ‘무엇을’
클라이언트 요청 흐름 정리
URL 입력
요청 메시지 만들기
어디로 보낼지 찾아보고 송신
(네트워크 통신)
메시지 확인
서버 여행
Node.js로 간단한 로컬 서버 환경 구축
설치
Git Bash
Node.js
Node.js
 구글의 V8 자바스크립트 엔진 기반
 JavaScript를 사용하는 서버사이드 언어
 생산성이 높고, 빠른 고성능 네트워크 서버
 *비동기 모델 (= 논 블로킹 I/O 모델 )
 싱글 스레드와 이벤트 루프 사용
 초기 구축이 간단 ( 프로토타이핑이 빠르다 )
NPM (Node Package Manager)
 Node에서 사용하는 소스코드 모듈, 라이브러리,
프레임워크 등을 관리
 누군가 미리 만들어 놓은 모듈을 사용할 수 있어
수고를 덜어줌
 Node 파일 간의 *의존성 해결
 Node 모듈 설치, 삭제, 업데이트 등을 편리하게 제공
NPM 기초 명령어
 npm init: Node 프로젝트를 위한 package.json
파일 생성 => 초기화
 npm install, npm uninstall : 패키지 설치 및 삭제
 npm update : 패키지 버전 업데이트
 npm list : 설치된 패키지 목록 확인
 -g 옵션 : 컴퓨터 자체에 설치, 없으면 해당 폴더에만
Node.js, NPM 버전 확인
 node –v : Node.js 버전 확인
 npm -v : NPM 버전 확인
 Node 최신 버전 설치
- sudo npm cache clean –f
- sudo npm install –g n
- sudo n stable
 NPM 최신 버전 설치
- sudo npm install –g npm
로컬 서버 실행 (출처: https://nodejs.org/ko/about/)
Express 프레임워크 사용
 프레임워크 : 기존 개발환경보다 좀 더 편리하고 쉽게 개발할 수
있도록 더 잘 만들어 놓은 틀 ( 귀 찮 은 작 업 을 줄 여 줌 )
라우팅(Routing) (참조 : http://expressjs.com/ko/starter/basic-routing.html)
 클라이언트의 요청 방식(원하는 사항)에 맞추어
응답 방법을 결정하는 기능
 어떤 요청 사항에 따라 다르게 처리, 구분할까?
- 경로 및 URI
- HTTP 요청 메소드(get, post, put, delete …)
 app.METHOD(PATH, HANDLER)
- app : express 인스턴스
- METHOD : http 요청 메소드
- PATH : 서버에서의 경로
- HANDLER : 경로(라우트)가 일치할 때 실행되는 함수
서버 요청 흐름 정리
메시지 확인
- 라우팅에서 캐치
- URI , HTTP 요청 메소드 분석
서버 구동
파일 탐색 &
데이터 처리
응답 메시지
만들기
응답 데이터 작성
브라우저로 전송
생략
리스펙토링 세미나 - 웹 브라우저 동작 개념, Node.js를 통한 서버 이해, REST API
웹 브라우저는
텍스트로 적혀 있는 html, css
파일들을 어떻게 화면에 표시해줄까?
웹 브라우저의 렌더링 엔진
 응답 파일의 내용을 브라우저 화면에 표시
 렌더링 엔진은 응답 받은 데이터 (html, css, image …)
파일들의 형식(Content-Type)에 따라 다르게 처리
 동작 과정
 DOM 트리 구축을 위한 HTML 파싱 -> 렌더트리 구축 ->
렌더트리 배치 -> 렌더트리 그리기
 렌더 트리 이전에 CSS 파싱도 함께 이루어져 HTML과 연결 (어테치먼트)
 자세한 내용은 “브라우저는 어떻게 동작하는가?” 참고
REST API
효과적인 클라이언트 요청 방식
http:// 기존 요청 방식의 아쉬운 점
잘 설계 되어 있는 웹의 장점들을
최대한 활용하지 못하는 점
HTTP 요청 방식과 URI 표현
http:// 우리가 자주 사용하던 HTTP 요청 방식
GET
- 특정 데이터, 정보를 얻기 위해 서버에 요청
- 질의 정보는 URI(URL)에 담는다.
POST
- 특정 데이터를 서버에 저장 및 변경하기 위한 요청
- 데이터는 요청 메시지의 Request Body 안에
작성되어 보내진다.
http:// 실제로는 많은 요청 방식이 존재
 GET
 POST
 HEAD
 OPTIONS
 PUT
 DELETE
 TRACE
 CONNECT
http:// 기존에 라우팅을 위한 URI 표현
/recipes/create : 레시피 추가
자원 (명사) 행위 (동사)
/recipes/show/pie
파이 레시피 조회
/recipes/update/pie
파이 레시피 변경
/recipes/delete/pie
파이 레시피 삭제
자원(resource) + 요청행위(verb)
http:// 이렇게 표현하다 보면..
 다양한 요청 방식 활용 부족
 GET, POST만 보고 어떤 요청을 하는지 잘 모르겠음
=> URI를 자세히 확인해야 됨
 URI는 명사, 동사 섞여있어 혼잡
=> 이런 라우팅이 수도 없이 많다면 복잡하지 않을까..
=> URI 표현을 위한 서버 – 클라이언트 개발자 간의
불필요한 소통 증가 ( 자 원 및 방 식 둘 다 고 려 )
=> 개인마다 다른 URI 이해 방식
명 사 는 확 실 한 데 . . 동 사 는 애 매 한 느 낌 . . ( r e a d - s h o w & u p d a t e – p a t c h … )
http:// 이를 안타까워하던 로이 필딩
REST 발표
Representational State Transfer
http:// REST에서 URI 표현
ex) 레시피 추가
POST /addToRecipes (X)
POST /recipes/create (X)
POST /recipes (O)
URI는 정보의 자원을 표현
http:// REST의 HTTP 요청 방식
GET /recipes (조회)
POST /recipes (생성)
PUT /recipes/pie (변경)
DELETE /recipes/pie (삭제)
GET, POST + PUT, DELETE
http:// REST API 이점
 URI는 계층구조로 표현되기 때문에 자원 분류가 명확
 자주 쓰이는 데이터 요청 형식을 HTTP 메서드로 다루어
URI 표현이 간결해지며 의미를 파악하기 쉬움
 서버와 클라이언트 간의 역할이 명확히 분리되어
의존성 문제 해결
 보다 더 자세히 알게 되면 추가..
Vue.js 프레임워크와 Axios 라이브러리를
사용한 REST API 맛보기
CDN 이용
src = https://unpkg.com/vue@2.5.16/dist/vue.js
src = https://unpkg.com/axios/dist/axios.min.js
실습 코드
https://github.com/kkodu/rest-api-practice
감사합니다

Mais conteúdo relacionado

Mais procurados

실무로 배우는 시스템 성능 최적화 - 4부. 프로세스 이해하기
실무로 배우는 시스템 성능 최적화 - 4부. 프로세스 이해하기실무로 배우는 시스템 성능 최적화 - 4부. 프로세스 이해하기
실무로 배우는 시스템 성능 최적화 - 4부. 프로세스 이해하기Minchul Jung
 
안드로이드 DB, 서버 연동하기
안드로이드 DB, 서버 연동하기안드로이드 DB, 서버 연동하기
안드로이드 DB, 서버 연동하기은아 정
 
Express framework tutorial
Express framework tutorialExpress framework tutorial
Express framework tutorial우림 류
 
[NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기 [NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기 YoungSu Son
 
막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js연웅 조
 
HTTP 완벽가이드- 19장 배포시스템
HTTP 완벽가이드- 19장 배포시스템HTTP 완벽가이드- 19장 배포시스템
HTTP 완벽가이드- 19장 배포시스템박 민규
 
Mongodb 관리
Mongodb 관리Mongodb 관리
Mongodb 관리흥배 최
 
서버성능개선 류우림
서버성능개선 류우림서버성능개선 류우림
서버성능개선 류우림우림 류
 
HTTP 완벽 가이드 / 20장 리다이렉션과 부하균형
HTTP 완벽 가이드 / 20장 리다이렉션과 부하균형HTTP 완벽 가이드 / 20장 리다이렉션과 부하균형
HTTP 완벽 가이드 / 20장 리다이렉션과 부하균형Minchul Jung
 
웹 서버 실행 환경
웹 서버 실행 환경웹 서버 실행 환경
웹 서버 실행 환경성균 전
 
Node.js
Node.jsNode.js
Node.jsymtech
 
Fiddler 피들러에 대해 알아보자
Fiddler 피들러에 대해 알아보자Fiddler 피들러에 대해 알아보자
Fiddler 피들러에 대해 알아보자용진 조
 
리눅스 간단 강의 4강
리눅스 간단 강의 4강리눅스 간단 강의 4강
리눅스 간단 강의 4강Junsu Kim
 
Mongo DB 활용가이드 Tip 35 ~ 41
Mongo DB 활용가이드 Tip 35 ~ 41Mongo DB 활용가이드 Tip 35 ~ 41
Mongo DB 활용가이드 Tip 35 ~ 41cosmosyc
 
리눅스 간단 강의 2강
리눅스 간단 강의 2강리눅스 간단 강의 2강
리눅스 간단 강의 2강Junsu Kim
 

Mais procurados (20)

Gfs Kyu
Gfs KyuGfs Kyu
Gfs Kyu
 
실무로 배우는 시스템 성능 최적화 - 4부. 프로세스 이해하기
실무로 배우는 시스템 성능 최적화 - 4부. 프로세스 이해하기실무로 배우는 시스템 성능 최적화 - 4부. 프로세스 이해하기
실무로 배우는 시스템 성능 최적화 - 4부. 프로세스 이해하기
 
안드로이드 DB, 서버 연동하기
안드로이드 DB, 서버 연동하기안드로이드 DB, 서버 연동하기
안드로이드 DB, 서버 연동하기
 
Express framework tutorial
Express framework tutorialExpress framework tutorial
Express framework tutorial
 
[NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기 [NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기
 
막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js
 
HTTP 완벽가이드- 19장 배포시스템
HTTP 완벽가이드- 19장 배포시스템HTTP 완벽가이드- 19장 배포시스템
HTTP 완벽가이드- 19장 배포시스템
 
Mongodb 관리
Mongodb 관리Mongodb 관리
Mongodb 관리
 
서버성능개선 류우림
서버성능개선 류우림서버성능개선 류우림
서버성능개선 류우림
 
HTTP 완벽 가이드 / 20장 리다이렉션과 부하균형
HTTP 완벽 가이드 / 20장 리다이렉션과 부하균형HTTP 완벽 가이드 / 20장 리다이렉션과 부하균형
HTTP 완벽 가이드 / 20장 리다이렉션과 부하균형
 
Docker
DockerDocker
Docker
 
웹 서버 실행 환경
웹 서버 실행 환경웹 서버 실행 환경
웹 서버 실행 환경
 
게이트단의 보안
게이트단의 보안게이트단의 보안
게이트단의 보안
 
Node.js
Node.jsNode.js
Node.js
 
Node.js 기본과정
Node.js 기본과정Node.js 기본과정
Node.js 기본과정
 
Fiddler 피들러에 대해 알아보자
Fiddler 피들러에 대해 알아보자Fiddler 피들러에 대해 알아보자
Fiddler 피들러에 대해 알아보자
 
Mongodb tip42 50
Mongodb tip42 50Mongodb tip42 50
Mongodb tip42 50
 
리눅스 간단 강의 4강
리눅스 간단 강의 4강리눅스 간단 강의 4강
리눅스 간단 강의 4강
 
Mongo DB 활용가이드 Tip 35 ~ 41
Mongo DB 활용가이드 Tip 35 ~ 41Mongo DB 활용가이드 Tip 35 ~ 41
Mongo DB 활용가이드 Tip 35 ~ 41
 
리눅스 간단 강의 2강
리눅스 간단 강의 2강리눅스 간단 강의 2강
리눅스 간단 강의 2강
 

Semelhante a 리스펙토링 세미나 - 웹 브라우저 동작 개념, Node.js를 통한 서버 이해, REST API

DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요
DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요
DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요dgmit2009
 
Tensorflow service & Machine Learning
Tensorflow service & Machine LearningTensorflow service & Machine Learning
Tensorflow service & Machine LearningJEEHYUN PAIK
 
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rdPark Jonggun
 
WoO 2012-Web 서비스 기술
WoO 2012-Web 서비스 기술WoO 2012-Web 서비스 기술
WoO 2012-Web 서비스 기술Changhwan Yi
 
막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)연웅 조
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용Jin wook
 
2Naver Open Android API Translation At DCamp
2Naver Open Android API Translation At DCamp2Naver Open Android API Translation At DCamp
2Naver Open Android API Translation At DCampJeikei Park
 
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석Tommy Lee
 
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 SeongHyun Ahn
 
CoreDot TechSeminar 2018 - Session2 Ji Donghyun
CoreDot TechSeminar 2018 - Session2 Ji DonghyunCoreDot TechSeminar 2018 - Session2 Ji Donghyun
CoreDot TechSeminar 2018 - Session2 Ji DonghyunCore.Today
 
Internship backend
Internship backendInternship backend
Internship backendYein Sim
 
Web server page_ed10
Web server page_ed10Web server page_ed10
Web server page_ed10hungrok
 
Ksug 세미나 (윤성준) (20121208)
Ksug 세미나 (윤성준) (20121208)Ksug 세미나 (윤성준) (20121208)
Ksug 세미나 (윤성준) (20121208)Sungjoon Yoon
 
Web App Security 2015.10
Web App Security 2015.10Web App Security 2015.10
Web App Security 2015.10Chanjin Park
 
RESTful API 설계
RESTful API 설계RESTful API 설계
RESTful API 설계Jinho Yoo
 
ASP.NET Web API를 활용한 RESTful 서비스 개발
ASP.NET Web API를 활용한 RESTful 서비스 개발ASP.NET Web API를 활용한 RESTful 서비스 개발
ASP.NET Web API를 활용한 RESTful 서비스 개발SangHoon Han
 
제 4회 DGMIT R&D 컨퍼런스 : REST API - 리소스 지향적 아키텍처
제 4회 DGMIT R&D 컨퍼런스 : REST API - 리소스 지향적 아키텍처제 4회 DGMIT R&D 컨퍼런스 : REST API - 리소스 지향적 아키텍처
제 4회 DGMIT R&D 컨퍼런스 : REST API - 리소스 지향적 아키텍처dgmit2009
 
Browser Principle에 대해 알아보자.pdf
Browser Principle에 대해 알아보자.pdfBrowser Principle에 대해 알아보자.pdf
Browser Principle에 대해 알아보자.pdfHo Jeong Im
 
IT 일반기술 강의자료_ed10
IT 일반기술 강의자료_ed10IT 일반기술 강의자료_ed10
IT 일반기술 강의자료_ed10hungrok
 

Semelhante a 리스펙토링 세미나 - 웹 브라우저 동작 개념, Node.js를 통한 서버 이해, REST API (20)

DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요
DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요
DGMIT 제3회 R&D 컨퍼런스 r&d1 team : HTTP 프로토콜 개요
 
Tensorflow service & Machine Learning
Tensorflow service & Machine LearningTensorflow service & Machine Learning
Tensorflow service & Machine Learning
 
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd
 
WoO 2012-Web 서비스 기술
WoO 2012-Web 서비스 기술WoO 2012-Web 서비스 기술
WoO 2012-Web 서비스 기술
 
막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)막하는스터디 두번째만남 Express(20151025)
막하는스터디 두번째만남 Express(20151025)
 
One-day-codelab
One-day-codelabOne-day-codelab
One-day-codelab
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용
 
2Naver Open Android API Translation At DCamp
2Naver Open Android API Translation At DCamp2Naver Open Android API Translation At DCamp
2Naver Open Android API Translation At DCamp
 
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
 
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄
 
CoreDot TechSeminar 2018 - Session2 Ji Donghyun
CoreDot TechSeminar 2018 - Session2 Ji DonghyunCoreDot TechSeminar 2018 - Session2 Ji Donghyun
CoreDot TechSeminar 2018 - Session2 Ji Donghyun
 
Internship backend
Internship backendInternship backend
Internship backend
 
Web server page_ed10
Web server page_ed10Web server page_ed10
Web server page_ed10
 
Ksug 세미나 (윤성준) (20121208)
Ksug 세미나 (윤성준) (20121208)Ksug 세미나 (윤성준) (20121208)
Ksug 세미나 (윤성준) (20121208)
 
Web App Security 2015.10
Web App Security 2015.10Web App Security 2015.10
Web App Security 2015.10
 
RESTful API 설계
RESTful API 설계RESTful API 설계
RESTful API 설계
 
ASP.NET Web API를 활용한 RESTful 서비스 개발
ASP.NET Web API를 활용한 RESTful 서비스 개발ASP.NET Web API를 활용한 RESTful 서비스 개발
ASP.NET Web API를 활용한 RESTful 서비스 개발
 
제 4회 DGMIT R&D 컨퍼런스 : REST API - 리소스 지향적 아키텍처
제 4회 DGMIT R&D 컨퍼런스 : REST API - 리소스 지향적 아키텍처제 4회 DGMIT R&D 컨퍼런스 : REST API - 리소스 지향적 아키텍처
제 4회 DGMIT R&D 컨퍼런스 : REST API - 리소스 지향적 아키텍처
 
Browser Principle에 대해 알아보자.pdf
Browser Principle에 대해 알아보자.pdfBrowser Principle에 대해 알아보자.pdf
Browser Principle에 대해 알아보자.pdf
 
IT 일반기술 강의자료_ed10
IT 일반기술 강의자료_ed10IT 일반기술 강의자료_ed10
IT 일반기술 강의자료_ed10
 

리스펙토링 세미나 - 웹 브라우저 동작 개념, Node.js를 통한 서버 이해, REST API

  • 2. 목차  웹 이해하기  Node.js, NPM이란?  Express 프레임워크를 사용한 간단한 서버 환경 구축  Restful이란?  REST API 실습
  • 3. 웹 이해하기 우리가 어떻게 네이버 화면을 볼 수 있을까?
  • 4. 사용자 브라우저 웹 통신 서버 Frontend 프론트엔드 Backend 백엔드
  • 5. 클라이언트 사이드 네트워크 서버 사이드 요청 응답 요청(Request) : html 파일 내놔 응답(Response) : 여기 html 파일
  • 6. 클라이언트 여행 URL 창에 네이버를 치는 순간 일어나는 일들
  • 7. 브라우저의 역할 ( https://www.naver.com/ )  사용자가 입력한 URL을 해석  프로토콜 확인(http, https, ftp, file, mailto…)  요청 메시지( GET ‘www. naver . com’ HT T P/1. 1) 를 만든다  도메인을 DNS 서버에 보내 해당하는 IP 주소를 요청 ex) www.naver.com => 232.123.12.1 (모름)  메시지와 IP 주소를 네트워크 기능을 갖고 있는 OS에 넘김 => OS 내부의 TCP/IP 소프트웨어가 이를 통해 서버와 통신
  • 8. 네트워크 시간에 배워요.. TCP/IP라는 무언가에게 ‘어디의’ ‘누구’와 통신하고 싶은지 알려주어야 한다. IP 주소 + 포트 번호 네이버의 IP 주소 (www.naver.com 도메인을 통해 알아냄) 웹 서버의 경우 일반적으로 80번 포트 사용 (URL에서 보통 생략)
  • 9. URL을 통해 페이지 요청 클라이언트의 역할을 쉽게 생각하자면..(get일 때) *URL에는 클라이언트가 서버한테 원하는 사항들이 적혀있다.
  • 11. Request Message(요청 메시지)  리퀘스트 라인, 리퀘스트 헤더, 리퀘스트 바디로 구성  ‘무엇을’ ‘어떻게’ 해야 하는가가 적혀 있다. Request Method => ‘어떻게’ Get = “페이지 내놔” ‘ / ’ => 루트 디렉터리를 의미 • / 뒤에 Index.html 파일이 생략 • index는 기본 파일을 의미 • (index가 아닐 수도 있음: 다른 이름) index.html => ‘무엇을’
  • 13. URL 입력 요청 메시지 만들기 어디로 보낼지 찾아보고 송신 (네트워크 통신) 메시지 확인
  • 14. 서버 여행 Node.js로 간단한 로컬 서버 환경 구축
  • 16. Node.js  구글의 V8 자바스크립트 엔진 기반  JavaScript를 사용하는 서버사이드 언어  생산성이 높고, 빠른 고성능 네트워크 서버  *비동기 모델 (= 논 블로킹 I/O 모델 )  싱글 스레드와 이벤트 루프 사용  초기 구축이 간단 ( 프로토타이핑이 빠르다 )
  • 17. NPM (Node Package Manager)  Node에서 사용하는 소스코드 모듈, 라이브러리, 프레임워크 등을 관리  누군가 미리 만들어 놓은 모듈을 사용할 수 있어 수고를 덜어줌  Node 파일 간의 *의존성 해결  Node 모듈 설치, 삭제, 업데이트 등을 편리하게 제공
  • 18. NPM 기초 명령어  npm init: Node 프로젝트를 위한 package.json 파일 생성 => 초기화  npm install, npm uninstall : 패키지 설치 및 삭제  npm update : 패키지 버전 업데이트  npm list : 설치된 패키지 목록 확인  -g 옵션 : 컴퓨터 자체에 설치, 없으면 해당 폴더에만
  • 19. Node.js, NPM 버전 확인  node –v : Node.js 버전 확인  npm -v : NPM 버전 확인  Node 최신 버전 설치 - sudo npm cache clean –f - sudo npm install –g n - sudo n stable  NPM 최신 버전 설치 - sudo npm install –g npm
  • 20. 로컬 서버 실행 (출처: https://nodejs.org/ko/about/)
  • 21. Express 프레임워크 사용  프레임워크 : 기존 개발환경보다 좀 더 편리하고 쉽게 개발할 수 있도록 더 잘 만들어 놓은 틀 ( 귀 찮 은 작 업 을 줄 여 줌 )
  • 22. 라우팅(Routing) (참조 : http://expressjs.com/ko/starter/basic-routing.html)  클라이언트의 요청 방식(원하는 사항)에 맞추어 응답 방법을 결정하는 기능  어떤 요청 사항에 따라 다르게 처리, 구분할까? - 경로 및 URI - HTTP 요청 메소드(get, post, put, delete …)  app.METHOD(PATH, HANDLER) - app : express 인스턴스 - METHOD : http 요청 메소드 - PATH : 서버에서의 경로 - HANDLER : 경로(라우트)가 일치할 때 실행되는 함수
  • 24. 메시지 확인 - 라우팅에서 캐치 - URI , HTTP 요청 메소드 분석 서버 구동 파일 탐색 & 데이터 처리 응답 메시지 만들기 응답 데이터 작성 브라우저로 전송 생략
  • 26. 웹 브라우저는 텍스트로 적혀 있는 html, css 파일들을 어떻게 화면에 표시해줄까?
  • 27. 웹 브라우저의 렌더링 엔진  응답 파일의 내용을 브라우저 화면에 표시  렌더링 엔진은 응답 받은 데이터 (html, css, image …) 파일들의 형식(Content-Type)에 따라 다르게 처리  동작 과정  DOM 트리 구축을 위한 HTML 파싱 -> 렌더트리 구축 -> 렌더트리 배치 -> 렌더트리 그리기  렌더 트리 이전에 CSS 파싱도 함께 이루어져 HTML과 연결 (어테치먼트)  자세한 내용은 “브라우저는 어떻게 동작하는가?” 참고
  • 29. http:// 기존 요청 방식의 아쉬운 점 잘 설계 되어 있는 웹의 장점들을 최대한 활용하지 못하는 점 HTTP 요청 방식과 URI 표현
  • 30. http:// 우리가 자주 사용하던 HTTP 요청 방식 GET - 특정 데이터, 정보를 얻기 위해 서버에 요청 - 질의 정보는 URI(URL)에 담는다. POST - 특정 데이터를 서버에 저장 및 변경하기 위한 요청 - 데이터는 요청 메시지의 Request Body 안에 작성되어 보내진다.
  • 31. http:// 실제로는 많은 요청 방식이 존재  GET  POST  HEAD  OPTIONS  PUT  DELETE  TRACE  CONNECT
  • 32. http:// 기존에 라우팅을 위한 URI 표현 /recipes/create : 레시피 추가 자원 (명사) 행위 (동사) /recipes/show/pie 파이 레시피 조회 /recipes/update/pie 파이 레시피 변경 /recipes/delete/pie 파이 레시피 삭제 자원(resource) + 요청행위(verb)
  • 33. http:// 이렇게 표현하다 보면..  다양한 요청 방식 활용 부족  GET, POST만 보고 어떤 요청을 하는지 잘 모르겠음 => URI를 자세히 확인해야 됨  URI는 명사, 동사 섞여있어 혼잡 => 이런 라우팅이 수도 없이 많다면 복잡하지 않을까.. => URI 표현을 위한 서버 – 클라이언트 개발자 간의 불필요한 소통 증가 ( 자 원 및 방 식 둘 다 고 려 ) => 개인마다 다른 URI 이해 방식 명 사 는 확 실 한 데 . . 동 사 는 애 매 한 느 낌 . . ( r e a d - s h o w & u p d a t e – p a t c h … )
  • 34. http:// 이를 안타까워하던 로이 필딩 REST 발표 Representational State Transfer
  • 35. http:// REST에서 URI 표현 ex) 레시피 추가 POST /addToRecipes (X) POST /recipes/create (X) POST /recipes (O) URI는 정보의 자원을 표현
  • 36. http:// REST의 HTTP 요청 방식 GET /recipes (조회) POST /recipes (생성) PUT /recipes/pie (변경) DELETE /recipes/pie (삭제) GET, POST + PUT, DELETE
  • 37. http:// REST API 이점  URI는 계층구조로 표현되기 때문에 자원 분류가 명확  자주 쓰이는 데이터 요청 형식을 HTTP 메서드로 다루어 URI 표현이 간결해지며 의미를 파악하기 쉬움  서버와 클라이언트 간의 역할이 명확히 분리되어 의존성 문제 해결  보다 더 자세히 알게 되면 추가..
  • 38. Vue.js 프레임워크와 Axios 라이브러리를 사용한 REST API 맛보기 CDN 이용 src = https://unpkg.com/vue@2.5.16/dist/vue.js src = https://unpkg.com/axios/dist/axios.min.js