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

리스펙토링
두 번째 세션

목차  웹 이해하기
 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에는 클라이언트가 서버한테 원하는 사항들이 적혀있다.

Request Message(요청 메시지)
 리퀘스트 라인, 리퀘스트 헤더, 리퀘스트 바디로 구성
 ‘무엇을’ ‘어떻게’ 해야 하는가가 적혀 있다.
Request Method => ‘어떻게’
Get = “페이지 내놔”
‘ / ’ => 루트 디렉터리를 의미
• / 뒤에 Index.html 파일이 생략
• index는 기본 파일을 의미
• (index가 아닐 수도 있음: 다른 이름)
index.html => ‘무엇을’

클라이언트 요청 흐름 정리

URL 입력
요청 메시지 만들기
어디로 보낼지 찾아보고 송신
(네트워크 통신)
메시지 확인

서버 여행
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 요청 메소드 분석
서버 구동
파일 탐색 &
데이터 처리
응답 메시지
만들기
응답 데이터 작성
브라우저로 전송
생략

웹 브라우저는
텍스트로 적혀 있는 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

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

More Related Content

What's hot

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

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