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 => ‘무엇을’
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
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 … )
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