잡다한 프로그래밍

1. 사용방법

사용방법으로는 npm, cli, script 같은 방법이 있지만, Vue에 기본적인 부분을 학습하기 위해 다음과 같은 jsfiddle를 통해 기초를 학습한다.

https://jsfiddle.net/chrisvfritz/50wL7mdz/

2. Hello Vue 띄우기

html

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

다음과 같이 작성할 경우 Hello View! 를 확인할 수 있다. 만약 console창에서 다음과 같이 app.message = 'change vue!'를 입력하면 p태그 내부가 change vue! 로 바뀌는 것을 확인할 수 있다.

3. 조건문 & 반복문

if문을 사용하기 위해 v-if를 사용한다.

html

<div id="app">
  <p v-if="seen">보이는 상태</p>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

다음과 같이 작성할 경우 P태그가 보이는것을 확인할 수 있다. 만약 console창에서 다음과 같이 app.seen = false를 입력하면 p태그가 사라지는것을 확인할 수 있다.

for문을 사용하기 위해 v-for를 사용한다

html

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '1번' },
      { text: '2번' },
      { text: '3번' }
    ]
  }
})

다음과 같이 작성할경우 3가지 li가 보이는 것을 확인할 수 있다. 만약 console창에서 다음과 같이 app.todos.push({ text: '4번'})을 입력하면 li태그가 새롭게 추가되는 것을 확인할 수 있다.

1. DOM이란?

돔(DOM)이란 Document Object Model의 약자로 HTML 및 XML 문서를 웹 브라우저가 인식한 객체를 의미(일종의 인터페이스)

DOM은 다음과 같은 다음과 같은 workflow를 따른다. 즉 html를 읽어서 DOM 트리, CSS 트리를 만들고 DOM의 위치를 잡고 거기에 그리고 색을 채운다.

2. DOM의 단점?

단순히 HTML을 서버에서 받아 브라우저에 그릴 때는 문제가 생기지 않는다 하지만 SPA(Single page application) 같은 것들이 생겨나면서 자바스크립트를 이용해 DOM을 변경하려고 브라우저에 요청을 할 경우 다음과 같은 문제가 발생한다. 예를 들어 트위터나 페이스북에서는 스크롤을 내리면 많은 데이터가 로딩이 되고 이는 쉽게 말해 div가 많아진다는 의미인데 이때 javascript를 이용하여 DOM을 조작하면 성능에 이슈가 생긴다. 왜냐하면 위 그림과 같은 workflow가 다시 이루어지기 때문이다. 이때 만약 100번을 요청했다면 100번을 다시 painting 하는데 이러한 이슈가 발생한다.

ex) <ul> 내부에 li를 추가할때 개수가 매우 많아지면 브라우저 속도가 느려지는 이슈 발생

3. Virtual DOM 이란?

DOM의 이슈를 Virtual DOM으로 해결할 수 있다. 100번의 DOM 조작 요청이 오면, 가상 돔은 브라우저 대신 변경 내용을 가상 돔에 반영한다.(이때 화면에 그리지 않음) 변화가 반영되었다면 내용을 브라우저에게 전달하여 그리게 한다.(100번 그리던 것을 1번만 그린다) 따라서 다음과 같은 이슈를 Virtual DOM을 통해 개선할 수 있다.

1. 사전준비

#1) Nodejs 설치하기

https://nodejs.org/ko/에서 LTS버전을 다운받아 설치한다.

#2) yarn 설치하기

다음과 같이 yarn을 설치한다.

npm install --global yarn

#3) react app 생성하기

다음과 같이 리엑트 앱을 생성한다.

npx create-react-app 이름

2. 앱 실행하기

cd를 이용하여 폴더를 이동 후 다음과 같이 프로젝트를 실행한다.

yarn start

#1) 결과

다음과 같은 결과를 확인할 수 있다.

#2) App.js 수정

app.js 의 <p> 태그를 수정하고 저장하면 자동으로 compile되고 자동으로 페이지가 수정된다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> 안녕
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

3. 결론

create react-app를 사용하게 되면 다른 server와 함께 사용할 때 처럼 webpack같은 부분이 모두 이미 포함되어있다.