[VUE.JS] 01 SPA와 REST API

 VUE.JS를 이해하기 위해선 먼저 SPA와 REST API에 대한 이해가 선행되어야 한다.

 그래서 한번 알아보자!!

 

1. SPA(Single Page Application)

 SPA란 단일 페이지 어플리케이션를 뜻하며 하나의 페이지 안에서 변화가 필요한 영역 부분만 새로고침(동적) 하는 형태를 말한다.
 SPA는 적은 트래픽 양으로 서버를 움직일 수 있다는 장점이 있지만 최초의 페이지 로딩시 모든 JS+CSS를 가져와야 해서 초기 로딩 속도가 느리다는 특징이 있다.

 이 단일 페이지는 다양한 컴포넌트들로 구성이 되어있다.

1) 컴포넌트(Component)
 컴포넌트는 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹페이지 내의 다양한 UI 요소를 뜻하며 재사용 가능하도록 구조화 한 것이다.

2) 웹프론트엔드 프레임워크
 이렇게 컴포넌트들을 생성해주고 다루는 것에 있어서 컴포넌트(Component)기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프레임워크들이 있다.

 가장 크게 알려진 것이 바로 많이 들어본 Anglar, React, 그리고 지금 배워보려고 하는 Vue이다.

 

 이런 프레임 워크를 사용하면 모바일 앱을 사용하는 것과 같은 성능을 구현할 수 있다.

 또한 이 프레임 워크들은 자바스크립트 라이브러리이기 때문에 자바스크립트에 대한 기본적인 이해가 없이는 절대 다룰 수 없으며 한 페이지에서 모든 요소를 불러와서 동작시킨다(페이지 이동하지 않는다).

3) 라우팅
 라우팅이란 웹페이지간에 이동하는 방식을 뜻하며 SPA에서는 미리 해당하는 모든 컴포넌트를 받아놓고, 라우팅을 이용해서 그 부분만 갱신하는 하는 방식으로 페이지를 표현한다.
 라우팅을 이용해서 화면 전환을 함(React, Vue, Angular)

 

 

2. REST API (Representational safe transfer)

   ※ 유튜브 참조 동영상 : 얄코 https://www.youtube.com/watch?v=iOueE9AXDQQ
   ※ 참조 : https://poiemaweb.com/js-rest-api

REST API | PoiemaWeb

 

 API(Application Programming Interface)는 소프트웨어가 다른 소프트웨어로부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단을 뜻한다. 하나의 URI은 하나의 고유한 리소스를 대표할 수 있도록 URI를 설계해야 한다는 개념이며 정보를 주고 받을 때, 개발자들 사이에 널리 쓰이는(HTTP 요청을 보낼때, 어떤 URI에 어떤 메소드를 할지와 같은 형식을 정해두는) 개념이다.

 그리고 REST API는 클라이언트와 서버간 통신 과정에 있어서(API) REST한 방식으로 데이터를 주고 받는다는 뜻이다.

 

 REST한 방식이 무엇일까?

 REST는 Representational State Transfer의 줄임말이다.

 즉 URL에 정보의 자원 내용을 꼭 표현해야하며 자원에 대한 행위(GET, POST 등등)를 나타내야함을 뜻한다. 

 

 이런 API는 리소스 / 메소드 / 메세지로 분류되는데 아래 예시를 살펴보자

     .리소스 : 여행지, 카페, 유저, 드라마
     .메소드 : 여행지를 등록하다 / 불러오다 / 수정하다 / 삭제하다
     .메세지 : 여행지 12번의 이름을 '용두암'으로 변경하다

   - 메세지는 JSON으로 구현이 되며 메소드는 HTTP프로토콜의 메소드로 한다.
     -----------------------------------
     메소드이름    의미
     -----------------------------------
     GET           얻어오기(SELECT)
     POST          입력(INSERT)
     PUT           수정(UPDATE)
     DELETE        삭제(DELETE)
     -----------------------------------

   - 예) 요청을 보내는 주소만으로도 대략 뭘 하는 요청인지 파악 가능함 (RESTful Web Service)
    --------------------------------------------------------------
        URL                          메소드    설명
    --------------------------------------------------------------
        http://localhost/cafes       GET       카페리스트 페이지
        http://localhost/cafes       POST      카페 입력
        http://localhost/cafes       PUT       없음
        http://localhost/cafes       DELETE    없음
        http://localhost/cafes/5     GET       5번 카페 상세페이지
        http://localhost/cafes/5     POST      없음
        http://localhost/cafes/5     PUT       수정
        http://localhost/cafes/5     DELETE    삭제
    --------------------------------------------------------------