728x90

ajax

ajax가 등장하기 전에는 웹 브라우저가 데이터를 요청하면 서버는 페이지에 대한 해당정보를 통째로 보내주게 되어 있었다.(html anchor tag) 이는 서버 및 클라이언트에 큰 부하를 일으키고 각 페이지 파일에 중복된 내용을 입력하게 만들었다.

그래서 이를 해결하고자 렌더링 후에도 비동기적으로 데이터를 요청하고
해당 정보를 바탕으로 url 변경없이 페이지의 일부만 수정할 수 있는 웹 개발 기법이 필요하게 되었다.

이를 AJAX라고 부르게 되었다.

AJAX의 특징은 다음과 같다.

  • 페이지 새로고침 없이 서버에 데이터 요청
  • 서버로부터 데이터를 받고 작업 수행

AJAX의 적용을 하고 있는 사례를 보고 싶으면 구글 연관검색어 서비스를 보면된다.

우리가 구글 검색창에 글자를 입력하면 서버에 현재 입력에 대한 연관검색어 요청과 응답을 받게 된다. 이동안 URL이 변경되거나 페이지가 새로고침 되는 현상은 없었다.

 

이제 AJAX를 도입함으로써 클라이언트, 서버의 부하를 줄일 수 있게되었고

변경사항에 대한 유지보수가 편리해졌다.(html파일들의 공통 요소를 모두 찾아 바꿀 필요가 없어졌기때문)

 

※ 그냥 html로 구현된 페이지가 서버한테 받은 데이터를 바탕으로 뷰 변경이 있을때

_ 새로고침과 URL 변경이 없다면 AJAX가 발생했다고 생각하자_

  • SPA(Single Page Application)는 AJAX를 활용하는 컨텐츠인가?

SPA는 index.html에 하나의 tag에 DOM manipulation을 할 수 있는 main.js를 matching 하여 페이지를 띄우는 기술이다.

이 SPA가 AJAX와 어떤 관계가 있는지 알아보자.

우리가 SPA을 구동할때 index.html을 실행한다. index.html은 다음과 같은 구조로 생겼다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>simplex-execution-monitoring</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/vue/assets/images/favicon.png" type="image/x-icon">
    <link rel="icon" href="/vue/assets/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="//cdn.materialdesignicons.com/5.3.45/css/materialdesignicons.min.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="/vue/dist/build.js"></script> // 번들파일
  </body>
</html>

우리는 bundle.js를 서버에 요청해 읽은 bundle.js를 바탕으로 <div id="app"></div>의 내용을 바꾼다. 이 때 이 요청으로 인해 페이지 새로고침이 일어나지않으며 URL변경도 발생하지 않는다.(만약 URL이 바꼈다면 mount 이후 route redirect 가 발생한 것이다)

 


 

XMLHttpRequest(XHR)

AJAX를 실현시켜주기 위해 만들어진 초창기 API이다.

이름과 다르게 XML뿐만 아니라 json을 비롯한 모든 종류의 데이터를 받아오는데 사용할 수 있다.

브라우저에서 기본적으로 제공해준다. stage가 low한 만큼 사용법이 까다롭다.

 

사용법은 다음과 같다.

var httpRequest;
if (window.XMLHttpRequest) {
  httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 이하
  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);

httpRequest.onreadystatechange = function(){
  // 서버의 응답에 따른 로직을 여기에 작성합니다.
};
  • XML?

tag의 형식을 사용하여 데이터를 주고받을 수 있는 데이터 구조이다.

대표적인 XML형식을 사용하는 경우로 html 파일이 있다.

minify하여 enter없이 한줄로 전송된다.


 

jquery.ajax

XMLHttpRequest를 쓰다보니 쓰이지 않는 기능도 많고 사용법이 어려웠다.

그래서 이후에 등장한 것이 jquery.ajax 이다.

 

사용법은 다음과 같다.

$.ajax({
  url: 'http://localhost:3000/single-json',
  type: 'GET'
}).done((data, textStatus, jqXHR) => {
  console.log('성공');
}).fail((jqXHR, textStatus, errorThrown) => {
  console.log('실패');
}).always((param1, param2, param3) => {
  console.log('종료');
}).then((data, textStatus, jqXHR) => {
  console.log('성공 캐이스')
})

 


 

fetch

jquery.ajax() 이후에 등장하였다.

이제 jquery를 꼭 이용하지 않더라도 AJAX를 쉽게 구현 할 수 있게 되었다. 또한 구조는 비슷하지만 훨씬 간결해졌다.

jqeury.ajax()가 그러했듯이 최하단에서는 XMLHttpRequest를 사용한다.

 

XMLHttpRequest와 비교하여 fetch가 가지는 특징은 다음과 같다.

  • Promise 기반의 api이다.
  • 라이브러리를 import하지 않고도 사용할 수는 있지만(XHR과 동일) 지원하지않는 브라우저도 있다.
  • 전송된 요청에 대해서 취소할 수있는 기능이 없다(request aborting 불가)
  • timeout API가 존재하지 않는다.
  • 코드상에 then 이후에 catch가 있을 때 reject 시 then도 실행하고 catch도 실행한다.

사용법은 다음과 같다.

fetch('http://example.com/movies.json')
.then(function(response) {
  return response.json();
})
.then(function(myJson) {
  console.log(JSON.stringify(myJson));
});

 


 

axios

fetch가 가지고있지 않은 기능이 많아 이를 보완하는 api 이다.

axios가 가지는 특징은 다음과 같다.

  • Promise 기반의 api이다.
  • library를 import해야하지만 모든 브라우저에서 지원된다.
  • request aborting이 가능하다.
  • response로 받은 데이터는 json 형태로 자동 변환 된다.
  • 코드상에 then 이후에 catch가 있을 때 reject 시 catch만 실행한다.

사용법은 다음과 같다

let url = 'https://someurl.com';
let options = {
  method: 'POST',
  url: url,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    property_one: value_one,
    property_two: value_two
  }
};
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
  let data = await response.data;
  // do something with data
}

'HTTP' 카테고리의 다른 글

HTTP 1.0 / 1.1 / 2  (0) 2021.07.23
Basic HTTP Request/Response  (0) 2021.07.23
CSR vs SSR  (0) 2021.02.10
RESTful API 란?  (0) 2021.01.16
728x90

Document Object Model 이 무엇인지 알아보고
Documnet Object Model이 어떻게 Javascript가 HTML의 Tag 및 여러 속성을 바꿀 수 있게 하는지 알아보자

 

웹 개발에 있어 3개의 필수 요소가 있다.

  1. HTML
    • 웹페이지의 구조를 표현한다
    • <div>, <section>과 같은 Tag를 사용한다
  2. CSS
    • 웹페이지에 스타일을 추가한다
    • HTML element를 참조하기위해 id,class,tag등을 이용한다
  3. JS
    • 웹페이지에 동적 요소를 추가한다
    • 웹페이지에 validation 체크, 효과, 이벤트등의 기능을 추가한다.

Document Object Model - DOM

<html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        <h1>Heading</h1>
        <div id="div">
            <p>P Tag1</p>
        </div>
        <div id="div2">
            <p class="p2">P Tag2</p>
        </div>
    </body>
</html>

Javascript는 이 HTML document를 어떻게 이해할까?

Document
|
└ head
  |
  └ title
    |
    └ My Title
|
└ body
  |
  └ h1
    |
    └ Heading
  |
  └ div id ="div1"
    |
    └ p
      |
      └ p Tag1
  |
  └ div id="div2"
    |
    └ div id="div2"
      |
      └ p class="p2"
        |
        └ p Tag2

HTML document가 browser에 load 되는 순간 Document Object Model(DOM)이라는 또다른 형태의 document가 생성된다

Javascript는 HTML Doucument를 DOM으로 변환한 후 해석할 수 있으며 비로소 각각의 속성을 변화 시킬 수 있는 것이다.

Nodes

Document Object Model에는 3가지 타입의 Node가 있다.
javascript 는 아래 3가지 형태의 Node에 접근하여 DOM을 변환할 수 있다.

  1. Element Node
    • tag 가 변환되어 생기는 Node
    • 각각의 tag는 DOM에서 Object로 표현된다.
    • div, title, h1, ...
  2. Attribute Node
    • tag 에 지정되는 속성 (ex. id, class, style ...)
    • id="div1", id="div2", ...
  3. Text Node
    • element node안에 있는 content (innerText)
    • My title, Heading, ...
728x90

prototype은 ES6 이전 class 키워드가 존재하지 않았을 때까지 javascript코드를 객체지향적으로 구현하기위해 사용하였다.

prototype으로 객체를 정의할 수 있음은 물론 상속을 구현할 수도 있었기 때문에 class의 대체가 되었지만,

많은 객체지향언어에서 class의 개념이 완벽히 고정되어 많은 개발자들 사이에서도 class가 사용하기 편한 세상이 되었기 때문에 ES6부터 class를 지원하게 되었다.

ES6이후에도 class를 사용하면 기본적으로 해당 class안에 정의된 함수는 prototype에 정의된다. javascript의 class 지원은 개발자의 편의성을 위한 것이지 여전히 javascript는 prtotype based language인 것이다.

객체지향 언어의 개념(class의 개념)을 알고 있다면 prototype에 대한 이해는 쉬울 것이다.

차이점이라곤 객체를 함수를 통해 정의한다는 것 뿐이다.

이제부터 prototype을 프로토타입 자신을 통해 만들어질 객체의 원형이라고 생각하자.

class vs prototype

class

다음과 같이 선언된 class가 있다.

let PersonC = class {
  constructor(nm,id){
    this.name = nm;
    this.id = id;
  }
  getDetails(){ // exist on prototype of PersonC
    return `${this.name} :: ${this.id}`
  }
}

let bob = new PersonC('Bob',123); 
console.log(bob.getDetails(),bob.name); // Bob :: 123 Bob

let EmployeeC = class extends PersonC{ //EmployeeC prototype links to PersonC prototype
  constructor(nm,id,salary){
    super(nm,id);
    this.salary = salary;
  }
  employeeInfo(){ // exist on prototype of EmployeeC
    return `${this.name} :: ${this.id} :: ${this.salary}`;
  }
}

let noomi = new EmployeeC('Noomi',456,800);
console.log(noomi.employeeInfo()); //  Noomi :: 456 :: 800

먼저 class로 구현된 PersonC의 구조를 보자. 앞에서 말했듯이 javascript는 prototype based language이기 때문에 prototype으로 재정의되어 저장되어있다.

class 안에 getDetails는 prototype에 저장되어있다. 이렇게 class 안에 선언된 메서드는 prototype에 저장되게 된다.

PersonC 를 상속받고 있는 EmployeeC의 구조는 복잡하다. 하지만 한가지만 알면된다. PersonC의 getDetails 가 선언된 장소가 prototype안에 constructor안에 prototype 안에 있다. 이 의미는 바로 EmployeeC 클래스 안에 getDetails 메서드가 override 되어있지 않으면 getDetails 메서드의 정의를 찾을 때까지 prototype을 깊게 탐색한다는 것이다.

만약 EmployeeC에 getDetails 메서드가 override되어 있었다면 해당 getDetails 메서드를 호출할 것이다.

new means call this function as a constructor changing context

prtotype

위의 class로 구현된 부분을 똑같이 prototype으로 구현해보겠다.

let PersonP = function(nm,id){
  this.name = nm;
  this.id = id;
}

PersonP.prototype.getDetails = function() {
  return `${this.name} :: ${this.id}`;
}

let fred = new PersonP('Fred',321);
console.log(fred.getDetails(),fred.name); // Fred :: 321 Fred

let EmployeeP = function(nm,id,salary){
  PersonP.call(this,nm,id);
  this.salary = salary;
}

Object.setPrototypeOf(EmployeeP, PersonP.prototype); //extends,EmployeeP prototype links to PersonP prototype

EmployeeP.prototype.employeeInfo = function(){
  return `${this.name} :: ${this.id} :: ${this.salary}`
}

let mary = new EmployeeP('mary',345,100);
console.log(mary.employeeInfo()); // mary :: 345 :: 100

prototype에는 extends 키워드가 존재하지 않기때문에 상속을 구현하기 위해서는 setPrototypeOf 키워드를 사용한다.

class에서 사용하던 super도 없기때문에 super대신 상속받은 상위 객체의 cosntructor를 직접 호출하여 prototype변수를 초기화한다.

prototype 객체안에 객체를 선언하기 위해서는 class선언 결과에서 보았듯이 객체의 prototype에 함수를 직접 정의하면된다.


prototype object & prototype link

prototype은 prototype object, prototype link 이 두가지의 개념으로 구성되어있다.

prototype object

함수형으로 객체를 정의할때 Object 타입의 prototype을 부여받는다. 다음 예제를 통해 prototype object가 어떤 구조를 가지고 있는지 보도록하자.

function Person(){}

Person 객체 정의시

Person 객체Person 함수의 프로토타입 객체가 생성되며

각 객체는 서로 연결 되어 있다.

위의 구조가 어떤의미를 가지고 있는지 알아보도록 하자.

  1. new를 통해 해당 함수에 constructor(생성자) 자격을 부여한다
  2. 해당 함수의 prototye object 생성 및 연결
    • 함수의 prototype은 prototype object를 연결하고 prototype object의 constructor는 함수를 가르키기 때문에 prototype object또한 하나의 property처럼 변수 또는 함수를 추가하며 자유롭게 이용 가능하다.
    • __proto__로 prototype link이며 상속의 개념을 가지도록 하였다.

prototype link

함수 생성시 prototype object에서 같이 정의 되었던 __proto__이다.

prototype내에 선언된 변수 또는 함수를 객체가 직접 prototype object에 들어가지 않아도 참조할 수 있게 해주는 역할을 한다.

__proto__는 객체가 생성될때 조상이었던 함수 Prototype Object를 가르킨다. 위의 예제에서 __proto__는 Object Prototype Object를 가르킨다.

javascript는 기본적으로 본인이 가지고 있지않은 변수 또는 메서드를 찾을때까지 __proto__를 타면서 하위 prototype부터 최상위 prototype까지 훑어 올라간다.

Object는 항상 prototype object의 최상위 객체이다.

이것이 상속의 개념이 토대가 되며 상속은 보통 \_\_proto\_\_를 직접 선언해서 정의한지않고 setPrototypeOf 함수를 이용하여 상속을 정의한다.

'Javascript' 카테고리의 다른 글

await event  (1) 2021.07.30
Image Lazy Loading  (0) 2021.07.24
var vs let (const)  (0) 2021.01.13
비동기 처리 - async/await  (0) 2020.12.27
비동기 처리 - Promise  (0) 2020.12.20
728x90

CI(Countinuous Integration) - 빌드/테스트 자동화

  • 개발자를 위해 빌드 및 테스트를 자동화 해준다
  • 새로운 소스코드의 빌드, 테스트, 병합
  • CI 절차 예시
    1. 개발자는 자신의 로컬에서 코드를 수정하고 Github에 해당 내용을 Push한다.
    2. CI 도구에서 변경된 코드로 인해 빌드와 테스트를 새로 수행하고 결과를 피드백해준다.
    3. 개발자는 자신이 개발한 소프트웨어의 소스코드를 공통된 버전 관리시스템(github 등)에 저장합니다.
    4. 소스코드상에 변동이 생기면 버전 관리 시스템에서는 CI 툴 (Jenkins)로 소스코드 변경을 알립니다.
    5. CI툴에서는 변경된 소스코드를 대상으로 Build, Test, Merge를 진행합니다. 이 과정들이 완료되면 슬랙, 카카오톡, 메일 등을 통해 통합 결과를 알립니다.

CD(Continuous Delivery/Continous Deployment) - 배포 자동화

  • CI 로 새롭게 빌드된 파일을 서비스 중인 서버에 자동으로 배포한다.

  • 변경사항이 레포지토리를 넘어, 고객의 프로덕션 환경까지 릴리즈

  • 자동화 수준에 따라 아래 2가지로 구별 가능하다

    • Continous Delivery(지속적인 배송) : 프로덕션 환경에 수동 배포

      • - 빌드파일을 배포(서비스)까지는 하지않고 스테이징까지만 한다.
      • - 배포는 운영팀이 직접한다.
    • Continous Deployment(지속적 배포) : 프로덕션환경에 자동 배포

      • 빌드파일을 배포까지 자동으로 한다. 이 경우 배포 중 서비스가 잠시 끊기게된다.

        ※ 스테이징 환경: 운영환경과 거의 동일한 환경을 만들어놓고, 여러가지 비 기능적인 부분을 검증하는 환경

        ※ 프로덕션 환경: 실제 서비스를 위한 운영환경

  • CD 절차 예시

    1. CI가 정상적으로 수행되고 나면 빌드된 파일을 CD에 전달한다.
    2. CD에서는 빌드가 완료된 파일을 받아서 전처리 / 후처리 등을 수행한다. 아
      • 기존에 동작하던 애플리케이션을 종료시키고 업데이트된 빌드 파일로 애플리케이션을 구동
      • 새로 업데이트된 파일을 다른 포트에 풀어놓고 구동이 완료되면 프락시에서 들어오는 요청을 스위칭함. (무중단 배포)
  • CI/CD 합친 예시

    CI/CD pipeline
    1. Github에 소스코드를 푸시하면 Github에서는 Jenkins로 Web Hook을 날립니다.
    2. Jenkins에서 빌드-테스트를 진행하고 검증된 소스코드로 도커 이미지를 만듭니다.
    3. Jenkins 내부에 설정된 스크립트로 만들어진 도커 이미지를 Docker hub로 푸시합니다.
    4. Jenkins에서 프로덕션 서버로 스크립트 실행 명령을 날립니다. 해당 스크립트를 받은 운영서버는 Docker hub에서 이미지를 다운로드한 후 애플리케이션을 배포합니다.****

'기타' 카테고리의 다른 글

Blocking vs Non-Blocking / Synchronous vs Asynchronous  (0) 2021.06.05
MVC 란?  (0) 2021.05.19
library vs framework  (0) 2021.03.07
728x90

Web Application의 역사

1990년대 static site

  • 이미 잘 만들어진 html 문서를 서버가 가지고 있어 사용자가 해당 서버에 접속하면 서버에 배포되어있는 html 파일을 보여준다

아직 dynamic한 상황을 구현할 수 있는 JS가 등장하지 않아 <a>태그를 이용해 링크 버튼을 클릭하면 다른 html 파일을 불러와서 페이지를 업데이트한다. (MultiPageApplication)

매 링크마다 페이지 전체가 새로 로드된다는 점과 사용성이 떨어진다는 단점을 가지고 있다.

1996년 <iframe> 태그

  • 페이지의 각 화면 요소를 html파일로 Component화 시켜 부분적으로 받아와 업데이트 할 수 있다는 점이 바뀌었다.

문서내에서 또다른 문서를 가져올수 있는 iframe 태그가 도입되기 시작하였다.

아직 JS가 도입되지않아 html로만 이루어져있다는 점은 static site와 유사하지만 좀 더 복잡한 페이지를 쉽게 만들 수 있게 되었다. 하지만 아직 동적 페이지를 구성하는데 어려움이 남아 있었다.

1998년 XML HTTPRequest

  • XML HTTPRequest(흔히 우리가 아는 fetch)가 개발이 되어 html문서 전체가 아니라 JSON포맷으로 서버에서 필요한 데이터만 가져올 수 있게 되었다.

여기서부터 dynamic한 상황을 구현 할 수 있는 JavaScript와 비동기 통식방식인 XML HTTPRequest가 도입되었다..
비동기적으로 정보를 요청하고, 요청한 데이터를 바탕으로 동적으로 html요소를 생성해서 페이지에 업데이트할 수 있게 되었다.

const makeAJAXCall = (method,url,successCB, errorCB) =>{
  const xhr = new XMLHttpRequest;
  xhr.open(method,url,true);
  xhr.send();
  xhr.onload = (successCB,errorCB)=>{
    if(status >= 200 && status <=300){
      successCB();
      console.log('great');
    }else{
      errorCB();
      console.log('failed');
     }
  }
}

2005년

  • Single Page Application(SPA) 와 Client Side Rendering(CSR) 방식이 탄생하였다.

    SPA

    • 처음에는 빈 html파일을 서버로 부터 받아온 후 필요한 데이터를 서버로부터 가져와 html 파일을 해당 데이터로 업데이트 하는 방식이 도입되었다.

    CSR

    • SPA방식과 더불어 사용자 PC 성능이 좋아지고 JS도 표준화가 되어짐에따라 vueJS,react,angular와 같은 framework가 생김게 되었고 사용자 측에서 해당 페이지를 구성하는 CSR이 대두되었다.

CSR vs SSR

동적인 사이트를 다루게 되면서 렌더링 방식에 따라 CSR과 SSR로 나뉘게 된다. 각각의 특징에 대해 알아보도록 하자.

 

CSR

사용자 측에서 JS로 부터 받은 동적 정보를 바탕으로 페이지를 구성하는 방식이다.

CSR 작동 방식

순서

  1. 사이트 접속
  2. index 파일(html 파일)을 받아옴
  3. 링크되어있는 로직이 담겨있는 JS파일(app.js)을 요청함
  4. 해당 JS파일을 서버로부터받음
    • 이 app.js에는 vue,react,angular와 같은 framework도 있어 사이즈가 굉장히 크다
  5. 웹 페이지가 사용자에게 보여지게되고 클릭에 대한 반응(동적 반응)이 생김.
    • TTV 와 TTI가 동시에 가능하게됨

특징

  • 처음에 서버로 부터 받는 html파일에는 실제 사용자에게 보여질 id=root속성을 가진 tag와 어플리케이션에서 동적 상황에 필요한 app.js링크만 들어있다
  • 추가로 필요한 데이터는 서버로 요청해서 데이터를 받아d온다

단점

  • 첫화면을 보기까지 오래걸린다.
    • webpack과 같은 번들링툴을 이용해 분할하여 필수적인 요소부터 사용자에게 뿌리게한다.
  • SEO 가 좋지않다
    • 검색엔진이 html 기반으로 검색어를 추출하는데 CSR 웹 어플리케이션의 경우 빈 html파일로 구성되어있기 때문

SSR

static site 에서 영감받은 SSR이 탄생하였다. CSR에서 웹페이지 구성을 Client가 담당하였다면 SSR에서는 Server에서 웹페이지를 구성하여 html로 사용자에게 뿌려준다.

SSR 작동 방식

순서

  1. 사이트 접속
  2. 서버에서 js파일과 view 파일(ex. html)을 이용하여 index 파일(html)을 구성하여 사용자에게 보내준다
  3. 사용자는 해당 화면을 볼 수 있다(TTV)
  4. 동적으로 제어할수있는 JS파일(app.js)은 아직 못가져와 아직 동적 기능이 대입되지 않은 상태이다. 사용자는 이제 서버에게 JS파일을 요청한다.
  5. JS를 가져오면 동적 기능을 실행 할 수 있다.(TTI)

특징

  • 서버에서 필요한 데이터를 사용하여 html 파일을 만들어 사용자에게 보내고 html과 동적으로 제어하기위한 소스코드와 함께 가져온다

장점

  1. 페이지로드 빨라진다.
  2. 효율적인 SEO

단점

  1. 페이지를 구성하는 동적 정보가 바뀔때마다 빈 화면이 나타나는 blinking(flickering) 이슈
    •  
  2. 사용자가 몰리면 서버에 과부하가 걸리기쉽다
  3. 빠르게 웹페이지를 확인할수는 있지만(빠른 TTV) 동적으로 데이터를 처리하는 JS 를 늦게 받아와 반응을 없을경우가 있다.(느린 TTI)
    • TTV TTI의 갭을 줄이도록 매끄러운 UI 와 UX 를 제공하도록 한다.

SSG (static site generation)

  • react로 만든 webapplication을 정적으로 웹페이지를 생성해 미리 서버에 배포
    추가적으로 데이터를 가져오거나 동적으로 처리하는 로직이 있다면 JS를 받아오기때문에 처리가능함
  • react + gatsby, react + nextJS(원래 SSR지원)를 주로 사용한다

'HTTP' 카테고리의 다른 글

HTTP 1.0 / 1.1 / 2  (0) 2021.07.23
Basic HTTP Request/Response  (0) 2021.07.23
AJAX  (0) 2021.03.07
RESTful API 란?  (0) 2021.01.16
728x90
.
├─ README.md
├─ index.html
├─ webpack.config.js
├─ package.json
└─ src
   ├─ main.js
   ├─ App.vue
   ├─ components        컴포넌트
   │  ├─ common
   │  └─ ...
   ├─ routes            라우터
   │  ├─ index.js
   │  └─ routes.js
   ├─ views             라우터 페이지
   │  ├─ MainView.vue
   │  └─ ...
   ├─ store             상태 관리
   │  ├─ auth
   │  ├─ index.js
   │  └─ ...
   ├─ api               api 함수
   │  ├─ index.js
   │  ├─ users.js
   │  └─ ...
   ├─ utils             필터 등의 유틸리티 함수
   │  ├─ filters.js
   │  ├─ bus.js
   │  └─ ...
   ├─ mixins            믹스인
   │  ├─ index.js
   │  └─ ...
   ├─ plugins           플러그인
   │  ├─ ChartPlugin.js
   │  └─ ...
   ├─ translations      다국어
   │  ├─ index.js
   │  ├─ en.json
   │  └─ ...
   ├─ images            이미지
   ├─ fonts             폰트
   └─ assets            기타 자원
  • README(default) : 프로젝트에 대한 설명, 프로젝트 세팅방법, 프로젝트 구동 방법 등이 명시되어있다.
  • index.html(default) : SPA(Single Page Application)에서 보여지는 웹페이지가 반영되는 곳이다.
  • webpack.config.js(default) : webpack
  • package.json(default) : 프로젝트 실행 script, 프로젝트 세팅시 설치되는 package들이 명시되어있다.
  • src
    • main.js(default) :  vue 인스턴스를 새로 만들고 시작하는 부분으로, 전역으로 처리해야 할 일이 있으면 여기서 처리한다.
    • App.vue(default) : 최상위 Vue 파일
    • components : page의 요소가 될 UI들을 모아놓는다. components의 종류에따라 (ex. chart, dialog, ...) 폴더로 묶어 관리한다.
    • routes : page 이동을 관리한다. 보통 index.js에서 관리하며, 
    • view : App.vue에 반영될 사용자가 웹페이지에서 보게되는 page의 단위
    • store : VueJS 상태관리 역할을 하는 파일들을 모아놓는 폴더. module로 쪼개 관리한다.
    • api : api들을 모아놓은 폴더. api 기능별로 파일로 묶어 관리한다
    • utils(optional) : 여러 component에서 재사용되는 함수(ex. regex value testing),상수(ex. role),필터를 모아놓은 폴더.
    • mixins : 여러 component에서 재사용되는 기능들(ex.created,mounted,data,methods...)을 모아놓은 폴더.
    • plugins : Vue에 전역수준으로 추가하기 원하는 기능(ex. vuex,chartJS...)들을 모아놓은 폴더.
    • translation(optional) : 다국어를 지원. vue i18n이라는 플러그인(자동번역 아님)에 통합하여 주로 사용한다. 
    • images(optional) : page에서 사용하는 이미지들을 모아놓는 폴더
    • fonts(optional) : 폰트들을 모아놓는 폴더
    • assets(default) :  css 또는 favicon.ico 같은 image나 font를 제외한 자원들을 모아놓는 폴더

 

'VueJS' 카테고리의 다른 글

Vue3 - 3.Type Fundamentals  (0) 2021.12.28
Vue3 - 2. Vue3 + Typescript  (0) 2021.12.28
Vue3 - 1. Composition API  (0) 2021.12.11
vue3 - 0.주요 특징  (0) 2021.12.10
array / object prototype  (0) 2021.06.27
728x90

REST란?

  • Representational State Transfer 라는 용어의 약자로 웹에 존재하는 모든 resource(이미지,동영상,DB 자원)에 고유한 URI를 부여해 자원을 정의하고 자원에 대한 주소를 지정해 활용하는 방법론

RESTful API

  • REST 특징을 지키면서 API를 제공하는 것을 의미.(Coding Convention과 비슷)

REST API의 구성

개념 REST API
자원 URI( = endpoint)
행위 HTTP Method
표현 행위 + 자원
  • HTTP의도에 맞게 활용한다는 것
  • URI는 정보의 자원을 표현
  • 하나의 자원에 대한 행위는 HTTP Method(GET,POST,PUT,DELETE)로 표현. 
    • 하나의 endpoint로부터 서로 다른 요청을 4개까지 할 수 있다.
  • 표현은 이 둘의 조합으로 동사 목적어 처럼 사용하면 된다.
    • ex) DELTE localhost:3000/resources/myResource.jpg

REST의 특징

  1. Uniform Interface
    • HTTP 표준만 따른다면 모든 플랫폼(안드로이드/IOS)에서 언어나 기술에 종속되지 않고 사용가능하다.
  2. Stateless
    • HTTP의 특성을 이용하기 때문에 서버에서 어떤 작업을 하기위해 상태정보를 기억할 필요가 없고 들어온 요청에 대해서만 처리해주면 된다.
      • 상태정보란?
        • 이전에 무엇을 했고, 지금은 무엇을 했는지에 대한 정보. 예를들어 로그인 요청에 대한 AuthToken을 발급하는 Backend 서버의 경우, 상태 정보란 로그인 요청 이후의 해당 사용자의 로그인 이력과 AuthToken을 의미한다.
      • 웹 브라우저(클라이언트)의 요청에 대한 응답을 한 후, 해당 클라이언트와의 연결을 다음 요청이 올때까지 끊기 때문에 상태정보를 저장하지 못한다.
    • 상태정보(stateful) 유지를 위해 Cookie(client에 저장)와 Session(server에 저장) 기술을 사용한다.
  3.  Cacheable
    • HTTP라는 웹 표준을 사용하기 때문에 기본 브라우저에서 사용하는 인프라를 그대로 사용가능하다
  4.  Self-descriptiveness
    • Method + URI로 표현되어있어(body가 있다면 JSON형식) 메시지 포맷을 보고 직관적 이해가 가능하다.
  5. Client - Server 구조
    • Client는 유저와 관련된 처리를 서버는 REST api를 제공함으로써 각각의 역할이 확실하게 구분되고 일관적인 인터페이스로 분리되어 작동할 수 있게 한다.

'HTTP' 카테고리의 다른 글

HTTP 1.0 / 1.1 / 2  (0) 2021.07.23
Basic HTTP Request/Response  (0) 2021.07.23
AJAX  (0) 2021.03.07
CSR vs SSR  (0) 2021.02.10
728x90

100%

  • gives the element 100% height of its parent container.#innerDiv is going to have height: 50px
  • <div style="height: 50px"> <div id="innerDiv" style="height: 100%"></div> </div>

auto

  • means the element height will depend upon the height of its children.#innerDiv is going to have height: 10px
  • <div style="height: 50px"> <div id="innerDiv" style="height: auto"> <div id="evenInner" style="height: 10px"></div> </div> </div>

inherit

  • inherit the height value from it's parent.
    • absolute value inherit#innerDiv is going to have height: 50px;
    • <div style="height: 50px"> <div id="innerDiv" style="height: inherit"> <div id="evenInner" style="height: 10px"> </div> </div> </div>
    • relative value inherit#innerDiv is going to have height : 50%; (= 25% of page height)
    • <div style="height: 50%"> <div id="innerDiv" style="height: inherit"> <div id="evenInner" style="height: 10px"> </div> </div> </div>

'CSS' 카테고리의 다른 글

transform / transform-origin  (0) 2020.12.08
7. 위치 속성 CSS - Flex  (0) 2020.12.01
6. 위치 속성 CSS - 정렬  (0) 2020.12.01
5. CSS 위치 속성 - float, clear, overflow  (0) 2020.11.30
4. 위치 속성 정보 - position  (0) 2020.11.25

+ Recent posts