계란 블로그

Vue.js 2 에서 Vue.js 3로 바꾸기 CDN 라이브러리가 달라진다. https://vuejs.org/guide/quick-start.html#using-vue-from-cdn Note) 실행 결과 라이브러리만 바꿨는데 다음과 같이 오류가 난다. Vue는 더이상 생성자가 아니라는 오류가 난다. 기존 Vue 2 Vue 3 createApp() 안에 기존 옵션들을 집어 넣는다. mount()를 이용해서 view의 ele를 넣어준다. methods{}는 동일하게 작성하지만 data{}를 넣었던 부분이 다음과 같이 바뀐다. Ex) 변경하기 new Vue => createApp() ele 는 맨 뒷부분으로 빠진다. data 가 메서드로 바뀐다. 반환값을 넣어준다. 적용하고난 코드 Vue.createApp(..

Vue 코드의 기본 구조 Model을 심어준다. section을 "calc-app"이라는 이름으로 범위를 설정한다. 위 사진의 왼쪽은 new Vue()는 Vue 2에 해당한다. 중괄호 안에 객체(Options API)를 담아서 전달한다. 이러한 형식이 약속된 방식이므로 인터페이스와도 같다. Ex) Vue 2를 이용한 계산기 프로그래밍 지난 포스팅에서 Vue 없이 페이지를 만든것과 다르게 이번에는 뷰를 적용하려고 한다. HTML 페이지는 동일하며 JavaScript 코드만 바뀐다. Vue 사이트에서 라이브러리를 가져온다. https://v2.vuejs.org/v2/guide/ html 페이지 만들기 기존 자바스크립트 파일의 내용을 아래와 같이 모두 지운다. 그리고 기존에 있던 new Vue({ el: "#..

Vue 의 다양한 사용 방식 Standalone script Embedded Web Components Single Page Application fullstack / SSR JAMStack / SSG Beyond the web Vue 2.xx => Vue 3.xx 변한 부분 Composition API: Vue2에서 쓰던 방식과 호환된다. 기존에 쓰던 Options API를 대체한다. 혹은 두 개를 같이 쓸 수도 있지만 강사님은 둘 중 하나 선택하는 것을 권장하신다. SFC(Single File Component) 위 두 가지가 등장했다. 다양해지고 체계가 생겼다. Global API: 애플리케이션을 만들 때 new Vue() 를 이용했던 부분이 createapp() 이라는 정적 메소드를 이용해서 만들..

DOM(윈도우) 프로그래밍과 MVW 방식의 차이 Ex) 다음과 같이 클릭하면 덧셈이 되도록 하는 경우 그런데 이 코드를 아래와 같이 표현 가능하다. 노드를 조작하는 코드를 제거한다. document 객체 아래와 같이 모델만 남는다. x, y, z 라는 모델을 뷰에 바인딩한다? 연결된 변수가 모델이다. vue 프레임워크를 쓰면 DOM을 안 써도된다. MVC 패턴의 이해 mvc는 1970년대에 시작됐다. Model 기반의 코드 Smalltalk(객체 지향 언어의 일종)를 이용해서 윈도우를 만들었다. 누군가 데이터를 수정하면? 데이터가 변했다는 걸 인지하고 다른 화면도 바뀌도록 한다. 전체적인 UI 관리가 더욱 쉬워졌다. 출력할 변수(모델)을 이미 마련한 코두와 그렇지 않은 코드 비교하기 왼쪽: 제어와 출력이..

사전 지식 HTML / CSS JavaScript(ES56) DOM 프로그래밍 JSX/TSX Typescript NodeJS - 모듈, npm이해하기 SPA(Single Page Application) 페이지 요청은 한 번만 하고 그 다음부터는 데이터만 요청하는 방식으로 바뀌었다. Vue.js는 Angular.js의 장점만 가지고 나왔다. 여러 기능도 추가했다. 예전에는 JavaScript와 Ajax 없이 HTML 기능만을 이용해서 이뤄졌다. 클라이언트가 요청할 때마다 서버가 새로운 페이지를 보낸다. 서버와 클라이언트 모두 비효율적이다. 최근에는 JavaScript와 Ajax까지 사용한다. 서버는 클라이언트에 맨 처음 요청에만 페이지를 보내고 그 다음부터는 필요한 데이터만 보내준다. 사용성이 좋아진다. ..