[세션] 온보딩_프론트엔드

1. 웹의 역사

WEB 1.0

브라우저를 통해 웹 서버로부터 HTML 파일을 받아오는 형식

정적인 서비스를 제공하며 단순 정보를 제공

HTML, CSS 주로 사용

WEB 2.0

동적인 서비스 개발 필요 → javascript 추가됨

아직 프론트, 백엔드 구분하지 않았다.

WEB3.0

-자바스크립트가 메인(동적인 기능이 메인), 그 안에 일부 HTML, CSS 가 포함

 

SPA(Single Page Application)

   = 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한 번만 다운로드 함

[ 기존 방식 ]
= 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, Data)를 매번 전송으로 인한
    → 서버의 과부화, 불필요한 로딩

[  SPA 방식 ]
= 제일 처음 전송된 단일 HTML 페이지에 포함되어 있는 JavaScript 에서 필요한 데이터를 API 서버로부터 호출하여 필요한 화면을 dynamic 하게 새롭게 구성해주는 방식

 

1) 파일은 처음 한 번만 송수신. 그 뒤로는 실시간 데이터(JSON으로 전달)만 주고 받음.
→ 전체적인 트래픽 갱신

2) 전체 페이지 다시 랜더링이 아닌 부분만 갱신 → 새로고침을 하지 않으므로  → 네이티브 앱과 유사한 사용자 경험

=> 이러한 특징으로 인해 눈에 보이는 부분(UX, UI)를 담당하는 Frontend와 데이터의 가공, 관리를 담당하는 Backend로 분리

 

 

2. 리액트란

가장 많이 사용하먀 좋은 라이브러리임

 

리액트의 특징

1) component-based

재사용 가능한 컴포넌트를 기반으로

컴포넌트란 UI를 재사용 가능한 조각

💛 컴포넌트 단위로 개발하게 되면 기능의 재사용성의 증가하여 애플리케이션의 유연성이 높아짐

2) virtual DOM

가상 DOM 을 만들어 실제 DOM과 비교해 변경된 부분만 실제 DOM에 반영

DOM = document of model( 문서 객체 모델 )
DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔
브라우저가 트리구조로 만든 객체 모델

1) DOM 은 nodes와 objects로 문서를 표현

  이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당

2) 웹 페이지는 일종의 문서(document)
   이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다.

 

 

문제점

   웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페     인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비

 

💛 가상 DOM의 필요성

     - DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능

        → 성능 향상

     - 가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경이 있을 경우 해당 변경을 반영함

 

3) props / state

랜더링 결과물에 영향을 주는 정보를 갖고 있음

[ props ]

  = (“properties”의 줄임말) 컴포넌트 외부에서 상속 받음, 부모 컴포넌트가 자식 컴포넌트에게 주는 값

     직접 수정 불가

[ state ]

   = 일반 JavaScript 객체, 컴포넌트 내부에서 선언, 내부에서 값을 변경할 수 있음

      구성 요소에 의해 유지, 유동적, 컴포넌트의 상태 변화 가능