계란 블로그

컴포넌트의 필요성 같은 코드의 중복을 없애고 간편하고 효율적으로 개발하기 위해 컴포넌트가 필요하다. 컴포넌트의 활용은 여러 번 사용하는 것을 전제로 한다. 지난 포스팅에서 살펴본 것과 다르게 여러 개의 끝말잇기를 한 페이지에 여러 개 진행하려면? Ex) 컴포넌트를 적용하지 않은 끝말잇기 게임 복사해서 여러 개의 submit 메서드를 만든다. {{word}} 입력! {{result}} {{word1}} 입력! {{result1}} {{word2}} 입력! {{result2}} Note) 실행 결과 아래와 같이 세 개의 끝말잇기를 만들었으나 중복되는 부분이 너무 많다. 이런 비효율성을 해결할 수 있는 것이 "컴포넌트"이다. 최소 단위를 재사용한다. 컴포넌트 적용하기 component() 안에는 파스칼, 케밥..

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() 이라는 정적 메소드를 이용해서 만들..