asd

정적 웹 과 동적 웹의 차이

mvc란 model view controller
model : 데이터를 저장하고 불러오는 작업들에 관한 코드들의 경우

기존 mvc 웹 하나의 function 을 할때마다 서버에서 페이지의 정보를 가져와서 새로고침을 해주어야한다

ajax 의 등장 이후에 특정 대상만을 서버에 보내고 가져오면 됨

서버에서 데이터만 보내준것을 브라우저에서 html. css. js 로 렌더링

spa single page application 하나의 페이지 내에서 각자의 기능들이 돌아감

주어진 데이터에 따라html 웹페이지를 렌더링

기존의 동적 웹에서 서버가 하는 일들을 사용자의 컴퓨터 에서 브라우저가 하는것

spa 는 서버에서 데이터를 받아와야 할때마다 요청을 보내서 반환된 데이터롤 사이트 내용을 갱신
-> 다시 화면을 갱신하지 않고 한번 로드된 화면에서 많은 기능들을 수행할 수 있다
1. 가상 돔
웹브라우저가 네트워크를 통해 html 을 전달 받으면 브라우저의 렌더링 엔진은 html 을 파싱하고 돔 노드로 이루어진 트리를 만든다
노드들이 메소드 호출-> 해당 메소드는 결과값을 객체 형태로 반환
이 과정은 동기적
그다음 레이아웃및 페인팅
이렇게 표시된 html 을 자바스크립트를 사용하여 dom 을 조작하게 되면 다시 레이아웃과 페인팅 과정이 다시 진행되고 이 과정을 다시금 레이아웃하는 것을 리플로우(reflow) 다시금 페인팅 되는것을 리페인팅 이라 한다. 이 리 플로우와 리페인트는 dom 의 각 노드에 대한 연산 관정을 다시 수행함으로 이 과정이 많이 수행될수록 웹서비스의 성능이 저하
따라서 react 는 이 dom 을 가상으로 메모리상에 만드고 가상돔에서 모든 연산을 수행한후 가상 dom 을 갱신하는 순서를 가진다
2. 단방향 데이터 바인딩
일단 양방향 데이터 바인딩이란?
사용자의 ui 데이터 변경을 감시하는 watcher 와 자바스크립트 데이터의 변경을 감시하는 watcher 가 ui 와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식 -> 사용자가 데이터 변경에 따른 동기화를 신경쓰지 않아도 됨
but watcher 가 많아 짐에 따른 성능저하
단방향데이터는
단 하나의 watcher 가 자바스크립트의 데이터 갱신을 감지하여 사용자의 ui 데이터를 갱신(이벤트를 통한다) 성능저하 방지와 데이터 추적의 용이함
jsx (자바스크립트와 html 사용)
데이터 바인딩이란
두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법
양뱡향 바인딩의 경우 사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 될 수 있지만 단뱡향 바인딩의 경우 적절한 event 를 통해서만 코드 상 변수에 데이터 값이 담긴다.
양방향 데이터 바인딩은 데이터의 변경을 프레임뭐크에서 감지하고 있다가 데이터가 변경되는 시점에 dom 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 js 실행부에서 변경한다.
단점, 변화에 따라 dom 객체 전체를 렌더링 해주거나 데이터를 바꿔주므로 성능이 감소되는 경우가 있다.

단방향 데이터 바인딩이란
js -> html만 가능
사용자의 입력에 따라 데이터를 갱신하고 화면을 업데이트 해야 하므로 단방향 데이터 바인딩을 구성하면 데이터의 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해주어야한다.
장점: 데이터의 변화에 따른 성능 저하 없이 domm 객체 갱신이 가능. 데이터의 흐름이 단방향(부모 -> 하위컴포넌트)이어서 코드를 이해하기 쉽소 데이터의 추적과 디버깅이 쉽다.
단점, 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야 한다.

주어진 배열의 값을 두배로 만들어보자
<명령형 프로그래밍>
const double = (arr) => {
let results = [];
for (let i = 0; i < arr.length; i ++) {
results.push(arra[i] * 2);
}
return results;
}
->for문 사용 i변수와 배열의 크기를 사용하여 배열의 값을 하나씩 가져와 두배로 만들고 result 라는 새로운 배열에 값을 추가하고 리턴값으로 반환. 과정 중심

<선언형 프로그래밍>
const double = (arr) => {
return arr.map((elem) => elem * 2);
}
map함수를 사용하여 주어진 배열값을 두배로 만들어 변환

컴포넌트 기반
작고 고립된 코드를 사용하여 ui 를 구성
재사용이 가능하나
유지보수가 쉽다
그럼 컴포넌트 란?
리액트로 만들어진 앱을 이루는 최소한의 단위
컴포넌트는 데이터(props, state)를 입력받아 dom node 를 풀력하는 함수이다.

중요한 것은 서버에서 돌아가는 것이 아니라 사용자의 컴퓨터 즉 브라우저에서 돌아간다는 것이다

react
[리액트란 최대한의 효율성을 위하여 간결화 시킨, 싱글페이지 애플리케이션의 ui 를 생성하는 데 집중한다는 즉 보이는 것에 초점을 둔 자바스크립트의 라이브러리 이다.
리액트의 정의에서 볼 수 있듯, 리액트의 특징은 효율적이라는 것과 간결화하여 보이는 것에 집중했다는 것이 특징이다. 첫번째로 효율적이라는 특징은 가상돔을 사용한 다는 것인데. 가상돔이란 메모리에 실제가 아닌 가상의 돔을 형성하여 거기에서 작업을 한 뒤에 가상돔과 실제의 돔;을 비교하여 다른 부분만 수정하는 것이다 이렇게하면 돔이 게속해서 수정되는 수고를 덜수 있다. 두번째로 간결하여 보이는 것에 집중했다는 것은 코드에서 볼 수 있는데, 명령형 프로그래밍 을 사용하는 것이 아니라 선언형 프로그래밍을 사용하는 것으로 ]
싱글페이지애플리케이션의 ui 를 생성하는데 집중한 라이브러리

dom 이란 무엇인가
우선 브라우저가 서버에서 페이지에 대한 html 응답을 받고 화면에 표시되기 전까지의 단계
1. dom(document object model: html 요소들의 구조화된 표현) 트리 구축
2. csssom(cascading style sheeets object model) 트리 구축
3. javascript 실행
4. 랜더 트리 구축 (html요소들과 이와 관련된 스타일 요소들로 구성
5. 레이아웃 생성
6. 페인팅

DOM(Document Object Modal)(문서 객체 모델)이란?
웹페이지에 대한 프로그래밍 인터페이스 이다
-> 기본적으로 여러 프로그램들의 페이지 콘텐츠 및 구조, 스타일을 읽고 조작할 수 있는 api 를제공

브라우저 = 공장
html = 주문서
html이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응하고 갓을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태

자바 스크립트에 제어는 받지만 자바스크립트의 요소는 아니다
돔은 api(어떤 방식으로 명령이나 요청을 내리면 그것에 따라 기능을 수행할도록 한것)를 가지고 있다

기본적으로 html 요소들은 node 다
dom 은 node 들로 구성 되어 있다
node는 클릭 등의 이벤트가 가해지는 event target 이기 때문에 dom 은 node 들의 이벤트 가해짐의 영향을 받아 제어된다

dom = html 이나 xml 문서를 실체로 나타내는 api

css는 css object model , cssom 이라는 것을 따로 만든다

jquery는 직접 특정 div 등의 요소들ㅇ르 선택해다가 그것의 내용ㅇ르 바꾸는 클래스를 조정하든 여튼 직접 코드로 dom 을 조정
반면 react 는 템플릿으로 html 요소를 코딩해두고 그것들을 어떤 변수 등에 들어간 데이터에 연결만 해 놓으면 그 데이터들에 맞춰서 알아서 화면이 바뀌게 되는것

react는 라이브러리다
사용자가 작성한 react 전용 코드를 브라우저가 가상 돔으로 해석해서 메모리에서 먼저 구현한 다음 최좆ㅇ적으로 실제 dom 에 적용한 것 (사이트가 실행되는 시점 즉 runtime 에서 일어난다 -> 브라우저가 자바 스크립트 파일 받아서 하는 작업이라는 것 가상 돔은 이 런타임이란 제약된 조건하에 브라우저에 로드된 라이브러리로서 dom 에 가해ㅑ지는 변화들르 최소한의 변경으로 구현)
Scelte는 컴파일러다
위의 ()안 묘사된 과정을 런타임에 하는 것이 아니라 사이트가 배포되기 전에 미리 다 해두도록 하는것