개발자 데뷔!

Vue.js 가상돔 본문

웹/Front End

Vue.js 가상돔

물꼮이 2021. 9. 3. 13:03

Front-End  사용 프레임워크 및 라이브러리 종류 !! ( 발전과정 )

프레임워크 삼대장) 

angular(프레임워크)   장점) 양방향 바인딩
react(라이브러리)     장점) 가상돔
vue(프레임워크)    장점) 양방향 바인딩 + 가상돔

* 프레임워크와 라이브러리의 차이 : 제어권의 역전!  라이브러리는 주권이 개발자 ! 프레임워크는 전체적인 틀에 일부를 개발자가 변경 ! 

 

 

* 프론트엔드 프레임워크의 필요성 : Component 기반 웹 개발 &  빠른 돔제어 의 필요성  ****** 

 

 

this) 

" 함수 호출 시점에 바인딩 (정해진다)

1. 일반 함수로 호출 -> 전역객체      bbq() -> window.msg, window.nextMsg

2. 메서드로 호출 -> 그 메서드를 소유한 객체 (함수이름 앞)   app.bbq() -> app.msg(),  app.nextMsg

 

배열, 객체 차이)
배열 : index가 있기 때문에 탐색 용이(같은 자료형들의 집합)        : 삽입, 삭제 에서 불리 (index 있기 때문 )
객체 : 다양한 자료구조(type)을 담을 수 있다는 장점                   : key를 알아야 해 탐색에서 불리  (삽입,삭제는 유리 )
      배열, 함수 또한 Java Script에선 객체, 즉 메서드로 사용 가능 

 

 

 vue 다운로드 !!! )

1. 터미널 -> 새터미널 열기 

2. 그 터미널에서 power shell 말고 cmd 창 open !  (powershell 에서는 실행 안됨 !)

3. npm i -g @vue/cli 명령어 입력

4. vue --version으로 잘 다운되었나 확인 ! 

 

vue 실행 !! )

1. vue create [프로젝트명] 명령어 입력

2. Manually select feautres 선택

3. -> lint 어쩌구  space바 눌러서 해제(삭제)해줌<

4. 그후 나머지 default로 전부다 enter~~~

    +

vue 확인 !! ) 

5. 터미널 창에서 권유하는 대로 명령어 입력 

      cd responsive

      npm run serve

6. 터미널 창에 옳게 나왔으면, 

   local host : 하고 적혀있는 ip 주소 클릭 ! (그냥 클릭하면 안되니 ctrl + 클릭)

7. 해당 주소 따라 이동하면 vue 홈페이지 뜸 

여기 까지 옳게 된다면 문제 없음 !!! 

' > Front End' 카테고리의 다른 글

06. [FE] CSS Display 디스플레이 요소  (0) 2022.01.12
04. [FE] CSS 기본  (0) 2022.01.12
03. [FE] HTML 기본  (0) 2022.01.12
01. [FE] VS code 기본 & 시작하기  (0) 2022.01.12
00. [FE] 웹기술  (0) 2022.01.12