개요

vue.js로 화면을 개발하기 위해 생성해야 하는 필수 단위이다.

 

작성법

- 인스턴스 생성자

- 인스턴스 옵션 속성 : data, template, el, methods, life cycle hook 등 속성을 설정할 수 있다.

- 커스텀 로직 : created, mounted, updated, destroyed 등 인스턴스 라이프사이클마다 수행할 로직을 정의할 수 있다.

인스턴스 라이프사이클 초기화

인스턴스 초기화 시, 다음 작업을 수행한다.

- 데이터 관찰

- 템플릿 컴파일

- DOM에 객체 연결

- 데이터 변경시 DOM 업데이트

 

출처 : joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

Vue.js 입문서 - 프론트엔드 개발자를 위한

Vue.js를 시작하기 위한 소개, 구성요소, 구조, Vue Router, HTTP 통신 라이브러리 등

joshua1988.github.io

 

반응형

'■ 웹 개발 > Vue.js' 카테고리의 다른 글

[6] Vue 템플릿  (0) 2020.11.16
[5] Axios  (0) 2020.11.16
[4] Vue 라우터  (0) 2020.11.16
[3] Vue 컴포넌트  (0) 2020.11.16
[1] Vue.js의 개요와 MVVM 패턴  (0) 2020.11.16

개요

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리이다.

 

특징

- '데이터 바인딩'과 '화면 단위'를 '컴포넌트' 형태로 만드는 관련 API를 제공한다.

- '양방향 데이터 바인딩'을 제공한다. (=AngularJS)

- 컴포넌트 간 통신의 기본 골격은 '단방향 데이터 흐름(부모 -> 자식)'을 사용한다. (=React)

- 타 프런트엔드 프레임워크에 비해 가볍고 빠르다.

- 문법이 단순, 간결하여 진입장벽이 낮다.

 

MVVM 패턴이란?

- Backend(DB 데이터 처리 & 서버의 비즈니스 로직)와 Frontend(마크업 & 데이터 표현단)을 분리하기 위한 구조이다.

- View와 ViewModel은 '양방향 데이터 바인딩'되어 ViewModel에서 데이터 갱신이 일어났을 경우 View도 갱신된다.

- ViewModel은 Backend에서 넘어온 데이터를 Model에 담아 View로 넘어가는 중간 지점이다.

 

출처 : joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

Vue.js 입문서 - 프론트엔드 개발자를 위한

Vue.js를 시작하기 위한 소개, 구성요소, 구조, Vue Router, HTTP 통신 라이브러리 등

joshua1988.github.io

 

반응형

'■ 웹 개발 > Vue.js' 카테고리의 다른 글

[6] Vue 템플릿  (0) 2020.11.16
[5] Axios  (0) 2020.11.16
[4] Vue 라우터  (0) 2020.11.16
[3] Vue 컴포넌트  (0) 2020.11.16
[2] Vue 인스턴스  (0) 2020.11.16

Ajax의 등장 배경 : teach9186.tistory.com/42

 

Ajax의 등장 배경

■Ajax(Asynchronous Javascript And XML) 등장 배경 - 웹 브라우저의 정보 요청에 서버는 해당 정보를 포함한 전체 페이지를 전달했다. - 브라우저와 서버는 매번 전체 페이지를 렌더링, 생성해야 했기에

teach9186.tistory.com

 

■개요

- 용어 : Ajax(Asynchronous Javascript And XML)

- 비동기적인 정보 교환 기법이다.

- XML이라고 명시되어 있지만, JSON이나 일반 텍스트 등 다른 데이터 오브젝트도 사용할 수 있다.

- 주로 JSON 형식이 많이 사용된다.

 

■원리

1. 브라우저가 사이트에 접속하면, 서버는 사이트의 기본 구조를 담은 '템플릿'을 전달한다.

2. 브라우저는 수신 받은 템플릿 HTML과 CSS를 해석해 화면의 기본 모양을 그린다.

3. 계속해서 서버는 데이터의 요청 방식과 가공 방식을 기술한 자바스크립트 파일을 전달한다.

4. 브라우저는 자바스크립트 파일을 해석하여 파일에 기술된 방식대로 서버에 추가 데이터를 요청한다.

5. 서버는 순수 데이터를 응답으로 되돌려 준다.

6. 브라우저는 수신한 데이터를 해석하여 데이터 가공 방식에 따라 템플릿의 적절한 위치에

  데이터의 삽입, 변경, 삭제를 수행한다.

 

■단점

- Ajax는 '동적 페이지 렌더링'을 하기 때문에 자바스크립트를 해석하지 못하는 검색엔진에서는 검색되지 않는다.

- 레이아웃이 복잡한 사이트는 웹 브라우저가 렌더링을 하는 데 힘겨워 할 수 있다.

- Ajax는 최소 2번의 데이터 요청(일반적으로 4회 이상, HTML, CSS, JS 로딩 후 Ajax call)을 해야 해서

  필연적으로 속도 저하가 발생한다.

   -> 이런 경우, '서버 사이드 렌더링'이라고 하여 의도적으로 옛방식 그대로 서버가 모든 페이지를 그려 전달함.

- 자바스크립트를 반드시 사용해야 한다. 자바스크립트를 끄면 Ajax 기반 사이트는 화면의 일부만 그려진다.

   -> 스크립팅 기능이 제한되는 특수 목적 기기나 자바스크립트 엔진을 돌릴 여건이 안되는

      초저성능 임베디드 기기에서는 문제가 발생할 수 있다.

 

출처 : namu.wiki/w/AJAX

 

AJAX - 나무위키

아래의 예제에서는 모두 "//namu.wiki/raw/틀:틀%20모음/" 의 내용을 가져와서 뿌려주는 자바스크립트 코드이다.

namu.wiki

 

반응형

'■ 웹 개발 > JavaScript' 카테고리의 다른 글

ESLint란?  (0) 2020.11.18
Babel이란?  (0) 2020.11.18
JavaScript란?  (0) 2020.11.10
웹 개발 디자인패턴이란?  (0) 2020.11.09
JavaScript Framework란?  (0) 2020.11.09

Ajax란? : teach9186.tistory.com/43

 

Ajax란?

Ajax의 등장 배경 : teach9186.tistory.com/42 Ajax의 등장 배경 ■Ajax(Asynchronous Javascript And XML) 등장 배경 - 웹 브라우저의 정보 요청에 서버는 해당 정보를 포함한 전체 페이지를 전달했다. - 브라우..

teach9186.tistory.com

■Ajax(Asynchronous Javascript And XML) 등장 배경

- 웹 브라우저의 정보 요청에 서버는 해당 정보를 포함한 전체 페이지를 전달했다.

- 브라우저와 서버는 매번 전체 페이지를 렌더링, 생성해야 했기에 부담이 되었다.

* Ajax를 사용하지 않는 사이트가 특유의 깜빡거림 현상을 보이는 이유는 매번 페이지를 싹 지우고

  처음부터 렌더링 하기 때문이다.

 

■Ajax(Asynchronous Javascript And XML) 역사

- 1999.3  개념이 정립되어 IE5에 등장하였지만, 윈도우에 탑재된 ActiveX를 거쳐 사용해야 했기에 성능 문제로

  잘 사용되지 않았다.

- 2004.4  구글이 발표한 GMail과 구글 지도가 플러그인 없이 Ajax로 구현된 Web App이라는 사실이 밝혀진 열흘 후,

  Jesse James Garret에 의해 Ajax라는 용어로 불려 고유 명사로 굳어졌다.

* axios나 oboe등 라이브러리는 비동기 HTTP 요청을 전문적으로 처리한다.

 

출처 : namu.wiki/w/AJAX

 

AJAX - 나무위키

아래의 예제에서는 모두 "//namu.wiki/raw/틀:틀%20모음/" 의 내용을 가져와서 뿌려주는 자바스크립트 코드이다.

namu.wiki

 

반응형

'■ 웹 개발 > 웹 역사' 카테고리의 다른 글

HTML의 등장 배경  (0) 2020.11.13
Node.js의 등장 배경  (0) 2020.11.12
Javascript의 등장 배경  (0) 2020.11.12

■HTML 연대표

■배경 지식

1. HTML(Hyper Text Markup Language)

- HyperText(다른 페이지로 이동할 수 있도록 하는 링크가 달린 텍스트) 기능을 가진 문서를 만드는 언어이다.

- Markup언어는 문서를 <>태그로 표현하는 문서 작성 형식이며, HTML은 SGML을 계승했다.

 

2. 웹 페이지(Web Page)

- www(World Wide Web)상에 있는 개개의 문서를 의미한다.

- HTML은 .htm, .html의 확장자를 가지며, 웹 브라우저가 <>태그의 구조를 해석하여 화면에 표현한 것이 웹 페이지다.

 

3. www(World Wide Web)

- 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 의미한다.

- 간단히 웹(Web)이라고 부르는 경우가 많다.

- 웹과 인터넷은 동의어가 아니다. (인터넷은 모든 컴퓨터를 하나의 통신망에 연결(Inter Network)하고자 하는 의도에서 이를 줄여 InterNet이라고 명명한 것에 어원을 두고 있다.)

 

4. W3C(World Wide Web Consortium)

- www를 위한 표준을 개발하고 장려하는 조직으로 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발한다.

 

5. 시멘틱 마크업(Semantic Markup)

- 종종 POSH(Plain Old Semantic HTML)라고도 불리며, 평범하고 오래된 의미론적인 HTML이라는 뜻이다.

- HTML은 문서의 콘텐츠 정보를 설명하는데 사용되는 마크업 언어이므로 그 역할에 집중하는 것이다.

- 적절한 HTML 요소를 올바르게 사용하는 것에서 시작한다.

ex) 웹 사이트의 제목은 <title> 태그를 사용하는 것.

 

HTML의 등장 배경

- '유럽 핵입자 물리 연구소'에 근무하던 '팀 버너스 리'가 기존의 'SGML(Standard Generalized Markup Language)'에

<a> 태그(하이퍼 링크 시스템)를 추가한 언어가 'HTML(HyperText Markup Language)'이다.

- 연구자들의 자료, 논문을 하이퍼링크 기술을 통해 손쉽게 참조하려는 목적이 아니었을까 유추해본다.

 

HTML 1.0 등장

- 텍스트 위주의 정보전달 목적으로 사용되었다.

 

W3C(World Wide Web Consortium) 등장

- 팀 버너스 리를 중심으로 한 웹의 표준을 정의하는 국제 기구이다.

- HTML 사용자 증가에 따라 문서가 다양한 브라우저에서 동일하게 표현되기 위한 표준을 정의한다.

 

HTML 2.0 ~ 3.2

- 당시 각 브라우저들은 표준화되어 있지 않아 브라우저마다 표현되는 태그가 각기 달랐다.

- www 일반 사용자가 증가하고, 사용자는 더 많은 정보를 표현하기를 원했다.

- 웹의 열풍으로 다양한 브라우저가 보편화되어 공통적으로 태그를 표현할 수 있도록 표준 정의에 관심을 가진다.

 

HTML 4.01

- 'CSS(Cascading Style Sheet)'가 등장하여 디자인적인 요소를 구분하고, HTML은 문서의 구조만 명시할 수 있게 되었다.

- 정보와 디자인을 구분하여 생각한 것이다.

 

XHTML 1.0

- W3C는 XML과 HTML을 합성, 태그를 확장하고 엄격한 문법 검사를 적용한 새로운 표준인 XHTML을 만들었다.

- 단, XML은 버전과 버전사이의 하위 호환성을 지원하지 않아서 이전의 태그들로 작성된 문서가 표현되지 않는 문제와 문법의 엄격함에 따른 높은 진입장벽으로 인해 사용자가 등을 돌렸다.

 

* 'XML(eXtensible Markup Language)'

  - W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다.

  - XML은 SGML의 단순화된 부분 집합으로, 더 많은 종류의 데이터를 기술하는 데 사용할 수 있다.

  - XML은 주로 다른 종류의 시스템, 특히 인터넷과 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의    한계를 극복할 목적으로 만들어졌다.

 

WHATWG(Web Hypertext Application Technology Working Group)

- W3C가 XHTML을 표준으로 삼으려는 움직임에 대항하여 기업들이 HTML을 계승하는 자신들만의 표준을 만든다.

- 이는 HTML5의 시초가 된다.

 

HTML5

- W3C도 XHTML을 표준에서 탈락시키고 WHATWG에서 정의한 표준을 따르기로 한다.

- HTML5와 CSS가 표준으로 확정되고, 지금의 HTML 표준이 완성된다.

 

출처

hyoje420.tistory.com/22

 

[HTML]HTML의 역사

문득 우리가 웹페이지를 생성하기 위해 사용하는 HTML이 어떻게 탄생하게 되었는지 궁금해져서 이 글에 정리해볼까 한다. 아래의 그림은 대략적인 HTML의 발전과정을 연도별로 그린 것이다. SGML(S

hyoje420.tistory.com

webclub.tistory.com/608

 

#1 HTML 이란 무엇인가?

HTML 이란 무엇인가? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사

webclub.tistory.com

 

반응형

'■ 웹 개발 > 웹 역사' 카테고리의 다른 글

Ajax의 등장 배경  (0) 2020.11.13
Node.js의 등장 배경  (0) 2020.11.12
Javascript의 등장 배경  (0) 2020.11.12

■Node.js

 

1. 개요
- 서버 환경에서 동작하는 자바스크립트 프레임워크로 DB-클라이언트-서버를 모두 자바스크립트로 구성할 수 있게 되었다.

2. 등장 배경
- 자바스크립트 활용도의 증가
- 웹 브라우저를 벗어나 사용하려는 움직임이 시작
- 2008/9~ 구글 크롬 발표, V8 자바스크립트 엔진의 등장, 자바스크립트의 단점인 '속도'가 개선, 코드를 공개
- 2009/1~ 자바스크립트를 웹 브라우저 외에서 사용하기 위한 표준을 만들자는 의견 증가로 CommonJS 표준 발표

- Ryan Dahl은 CommonJS 표준과 V8 자바스크립트 엔진을 기반으로 Node.js를 개발


3. 기존 어플리케이션과 Node.js 어플리케이션의 차이

- 기존 웹 서버는 대부분 스레드를 기반으로 하는 동기 방식으로 네트워크 입출력을 처리

- Node.js는 이벤트를 기반으로 하는 비동기 방식으로 네트워크 입출력을 처리

 

4. 이벤트 기반 비동기 방식이란?
예) 재래 시장에서 4개의 가게를 들러 장을 보는 상황이다.
- 동기 방식(멀티 스레드, 멀티 프로세스)
: 몸을 복제해 동시에 여러 가게에 가서 줄을 선다.
- 비동기 방식(이벤트 기반)
: 시장에 대기 시스템을 도입 후, 각 가게를 돌면서 대기표를 받고, 번호가 불리면(이벤트 발생) 물건을 받아온다.

- 동기 방식은 작업 요청이 들어올 때마다 스레드를 여러 개 만들어 동시에 일을 처리한다.
  일과 스레드의 양은 비례하므로 메모리 사용량이 증가한다는 단점이 있다.

 

- Node.js가 사용하는 '이벤트 기반 비동기 방식'은 스레드를 단 하나만 생성하므로 몸은 하나이고, 이벤트를 사용하므로
  빠르게 일을 처리할 수 있다. 일은 많아도 어쨋든 몸은 하나이므로 메모리 사용량과 같은 시스템 리소스 사용량에는 변화가 거의 없다.
  따라서 대규모 네트워크 프로그램을 개발하기 적합한 형태이다.
  단점은, 그 한명이 쓰러지는 순간 프로그램 전체에 문제가 발생한다.

  * Node.js 내부는 여러 스레드가 스레드 풀로 동작한다. 또한 실제 웹서버를 운용할 때에는 코어를 분산해서

    관리하므로 하나의 스레드만 사용한다고 볼 수 없다. 중요한 것은 스레드의 운용을 플랫폼이 담당하며, 

    개발자는 스레드를 의식하지 않고 프로그래밍을 할 수 있다는 점이다.

 

5. Node.js의 장단점

- 장점
  1) 자바스크립트를 사용하기 때문에 웹 개발자의 진입 장벽이 낮다.
  2) 구글의 V8 자바스크립트 엔진을 사용하기 때문에 앞으로도 계속 성능 개선의 여지가 있다.
  3) C++을 이용한 기능 확장이 가능하다.
  4) 'Non-blocking I/O'와 '단일 스레드 이벤트 루프'를 통한 높은 Request 처리 성능을 가지고 있다.
      DB에서 대량의 데이터를 취득, 웹페이지에 표시하는 처리의 경우, 일반적으로 DB 처리에 대기시간(blocking)이 

      발생하기 때문에 웹페이지 표시가 지연되는 현상이 발생한다.
      'Non-blocking I/O'는 비동기 처리를 실시하므로 DB 처리와 웹페이지 표시를 별도 진행하여 

      스트레스 없이 웹페이지 표시가 가능하다.

  5) Node.js에는 Socketio라는 실시간 통신을 실현하는 라이브러리가 있어 대량의 데이터 처리와 실시간 통신을 

     구현할 수 있는 기능을 모두 갖추고 있다.

- 단점
  1) 자바스크립트를 사용하기 때문에 C나 C++로 개발된 서버 어플리케이션보다 느리다.

 

출처 : zbulletjournal.tistory.com/85

 

[nodejs] 등장 배경과 장단점

* <모던 웹을 위한 nodejs프로그래밍>, http://poiemaweb.com 를 참고하여 정리 Node.js는 서버 환경에서 작동하는 자바스크립트이다. 자바스크립트의 활용도가 높아지자 웹 브라우저를 벗어나 자바스크

zbulletjournal.tistory.com

반응형

'■ 웹 개발 > 웹 역사' 카테고리의 다른 글

Ajax의 등장 배경  (0) 2020.11.13
HTML의 등장 배경  (0) 2020.11.13
Javascript의 등장 배경  (0) 2020.11.12

+ Recent posts