돔이란 :

웹브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Brower Object Model)이라고 부른다. 이 브라우저 객체 모델을 이용하여 Brower와 관련된 기능들을 구성한다. DOM은 BOM 중의 하나이다. DOM은 document object model의 약자이다. 문서 객체 모델인데, 문서 객체란 <html> < body>와 같은 html문서의 태그들을 javascript가 이용할 수 있는 개체로 만드는 것. 그것을 문서 객체라고 한다.

또 뒤에 model이 붙어 있는데 여기서는 문서 객체를 인식하는 방식정도로 해석하면 좋을 것 같다.

즉 웹브라우저가 html 페이지를 인식하는 방식이다. 


보통은 데이터가 변화하게 되면 양방향 바인딩으로 처리


변화(Mutation)
=> 특정 변화가 있으면 모델에 변화를 일으키고, view에 로직을 만들어준다.
그리고 화면에 다시 띄어준다.

 

페이스북에서는 다른 생각

만약에 변화가 일어나야 하면 mutation하지말고
기존에 있던 view를 날려버리고 새로 만들어버리면 어떨까?
=> 브라우저는 돔기반으로 작동하기 떄문에, 성능적으로 엄청난 문제가 있을 수 있다.

그래서 virtual dom이 나왔다.

가상의 돔이다. 

변화가 일어나면 브라우저의 돔에 새로운 것을 넣는 것이 아니라 javascript로 이루어진 가상의 돔에 랜더링을 하고 기존의 돔과 비교를 하고 정말 비교가 필요한 부분만 업데이트 한다 

 

 

 

어떤 변화가 일어나면 가상의 돔에 그린 다음에 실제 돔에 변화를 준다.

따라서 성능적으로 굉장히 우수하다.

 
저작자표시

'프론트엔드' 카테고리의 다른 글

SPA에서 서버사이드랜더링 하지 않고 SEO 우회하기  (4) 2020.12.05
react datetime 한글(년월일)로 변경하기  (1) 2020.11.10
React 웹폰트 초간단 적용하기  (0) 2020.11.07
리액트 구조잡기  (0) 2020.09.06
리액트 시작하기  (0) 2020.09.06

리액트 다운로드 => npx create-react-app .
를 진행하면 아래와 같이 자동적으로 여러가지 폴더들을 생성해준다.

 

 

terminal을 열어서 npm run start를 하면 처음 리액트 화면을 만나 볼 수 있다. (감동 ㅠㅠ)

 

리액트의 시작은 package.json에 있는 

"scripts": {

"start": "react-scripts start",

이 부분이 시작된다.

react-script는 src 에 있는 index.js이고 index.js를 보면

ReactDOM.render(

<React.StrictMode>

<App />



</React.StrictMode>,

document.getElementById('root')

);

이런 부분이 있다. 이 말은 root id라는 부분에다가 

app이라는 부분을 채워넣어주겠다는 것인데, 여기서 app은 src/app.js이고

root id는 public/index.html에 가면 id="root"라고 설정해놓은 부분이 있다.

여기 div안에 app.js 파일이 들어간다고 생각하면 된다.

주의 => react의 webpack은 src 폴더 안에 있는 애들만 정리해서 주므로, public 폴더 안에 파일을 넣지 않도록 주의하자.

저작자표시

'프론트엔드' 카테고리의 다른 글

SPA에서 서버사이드랜더링 하지 않고 SEO 우회하기  (4) 2020.12.05
react datetime 한글(년월일)로 변경하기  (1) 2020.11.10
React 웹폰트 초간단 적용하기  (0) 2020.11.07
리액트 dom  (0) 2020.09.20
리액트 시작하기  (0) 2020.09.06

리엑트는 라이브러리다.
페이스북에서 만들어졌고, 2013년도 발표가 되었다.

컴포넌트로 이루어져 있어서, 모듈처럼 재사용성이 굉장히 뛰어나다.

virtual DOM => real Dom vs virtual Dom

real DOM은 list가 10개가 있는 것 중 1개가 변화가 일어나면, real Dom에서는 모든 것을 없애고 다시 가져온다.

virtual DOM에서는 하나만 가지고 올 수 있다.

어떻게 업데이트 된 것만 가지고 올 수 있냐면 => 스냅샷을 찍어놓고, 스냅샷을 찍어 둔 것과 차이를 분석해서, 바뀐 부분만 real DOM에서 바꾸어 준다.

Babel : 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 
최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜줌

webpack : 웹사이트를 만들 때 단순하게, 자바스크립트 몇개 파일 html이런게 아니라 라이브러리, 프레임워크를 사용하면서 굉장히 복잡하게 되었다. 이렇게 복잡하게 된 것을 webpack을 활용해서 간단하게 묶어 준다. => src폴더만 모아준다.

원래 리액트 앱을 처음 실행하기 위해선 webpack이나 babel 같은 것을 설정하기 위해
엄청 나게 많은 시간이 걸렸으나 지금은 create-react-app Command로 바로 시작할 수 있다.

react 다운 받을 때 => npx create-react-app .

npm vs npx의 차이는?
npm => 라이브러리들이 저장되어 있는 곳? npm run build package.json에 모두 저장되어 있다. (node package manger)

-g => global로 다운로드(usr/local/bin) / 따로 하지 않으면 local에 다운로드 된다.(node module)

옛날에 react를 다운 받을 때는 global에 다운받아서 사용했으나,
이제는 npx를 이용해서 그냥 npm registry에 있는 것을 사용할 수 있다.
disk space를 낭비하지 않고 항상 최신 버전을 사용할 수 있다.

 

저작자표시

'프론트엔드' 카테고리의 다른 글

SPA에서 서버사이드랜더링 하지 않고 SEO 우회하기  (4) 2020.12.05
react datetime 한글(년월일)로 변경하기  (1) 2020.11.10
React 웹폰트 초간단 적용하기  (0) 2020.11.07
리액트 dom  (0) 2020.09.20
리액트 구조잡기  (0) 2020.09.06

+ Recent posts

티스토리툴바