본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section2] 15. 보간법 및 데이터바인딩 Vue가 제어하는 HTML코드에서 데이터를 출력하려면, 해당 영역에서만 사용 가능한 특수 구문이 존재. Vue앱은 보이지 않는 곳에서 해당 HTML 코드를 스캔해서 지원되는 기능과 구문을 감지한다. 데이터를 출력하고자 하는 구문은 열고닫는 중괄호를 두개씩 적어야 한다. → {{ }} 기본 HTML 코드에서는 이런 구문을 사용해도 변화가 없다. 그냥 화면에 {{ }} 이렇게 출력되기만 한다. Vue가 제어하는 HTML코드에서 {{ }} 구문을 사용하면 특별한 동작이 실행된다. {{ }} 사이에는 반환된 data의 객체 프로퍼티를 참조할 수 있다. index.html Vue Course Goals My Course Goal {{ courseGoal }} app.js const app = Vue.createA..
[Udemy Vue 완벽가이드 Section2] 14. Vue앱 인스턴스 생성 및 연결하기 Vue기능을 사용할때 가장 먼저 해야할 일은, HTML코드와 Vue를 연결하는 일. → HTML코드 중, '어떤 부분'을 Vue가 관리해야하는지 Vue가 인식하도록 한다. Vue로 제어할 수 있는 부분에 대해서만 Vue를 사용할 수 있기 때문. 1. 먼저 할 일은 'Vue 앱 생성하기'. - Vue앱으로 HTML 코드를 조정하려면 가장 먼저 거쳐야하는 단계. - index.html 파일에서 CDN으로 Vue를 불러왔기 때문에, 전역적으로 사용 가능한 객체 : Vue - Vue 객체에서 createApp을 불러올 수 있다. 이름에서도 알 수 있듯이 Vue앱을 생성한다. - createApp함수를 사용하여 새로운 '앱 인스턴스'를 생성! **기존에 Vue 2.xx버전에서는 Vue 생성자 함수를 이용하여 앱 ..
[Udemy Vue 완벽가이드 Section1] 8. Vue vs 순수 JS Vue Vue에서는 최종 결과만 찾은 다음, HTML코드로 된 특수한 기능을 활용해서 HTML을 Vue앱 관리 데이터(data 속성)와 로직(methods속성)에 연결. 결과를 선언하는 '선언형 접근법'을 따르면서 매우 큰 앱도 문제없이 구축할 수 있다. 명령형 vs 선언형 프로그래밍 Imperative programming is HOW you do something, and declarative programming is more like WHAT you do. 즉, 명령형(절차적) 프로그래밍 : 일을 '어떻게' 할 것인가에 관한 것 선언적 프로그래밍 : '무엇을' 할 것인가에 관한 lion284.tistory.com 순수 JavaScript JavaScript만 사용할 때는 앱의 크기가 클 경우, 얼..
[Udemy Vue 완벽가이드 Section1] 7. Vue로 앱 재구축하기 Vue를 추가하는 방법은 여러가지가 있다. 그 중, package설치가 가장 쉬운 방법은 아니다. 가장 쉽게 설치하려면 CDN에서 나의 페이지로 Vue패키지를 불러오기를 추가한다. 이를 위해 script태그를 가져올 수 있다. **CDN에서 Vue를 사용하는 경우, '빌드 단계'가 필요하지 않다. 따라서 설정이 훨씬 간단해지며 정적 HTML을 향상시키거나 백엔드 프레임워크와 통합하는데 적합하다. 하지만 싱글 파일 컴포넌트(SFC)구문은 사용할 수 없다. Q. 싱글파일 컴포넌트란? 빌드도구를 사용하는 대부분의 Vue프로젝트에서는 HTML과 유사한 싱글 파일 컴포넌트(Single-File Component:SFC, *.vue 파일이라고도 함)라는 파일 형식을 사용하여 Vue 컴포넌트를 작성한다. Vue SF..
[Udemy Vue 완벽가이드 Section1] 5. JavaScript만으로 첫번째 앱 만들기 JavaScript만으로 위와같이 input칸에 입력을 하고, 'Add Goal'버튼을 누르면 아래에 입력값이 나오도록 하는 간단한 앱을 만들어보자. index.html Goal Add Goal html코드를 보면 body요소 안에 input, button, 그리고 ul태그가 있고, 자바스크립트 파일인 app.js를 연결시켜주었다. js코드에서는 app.js const buttonEl = document.querySelector('button'); //button태그에 접근 const inputEl = document.querySelector('input'); //input태그에 접근 const listEl = document.querySelector('ul'); //ul태그에 접근 function ad..
[Udemy Vue 완벽가이드 Section1] 4. Vue 대안 알아보기 Vue(뷰) Complete component-based UI framework, includes most core features. A bit less popular than React & Angular. - 완전한 컴포넌트 기반 UI 프레임워크이고, 모던웹애플리케이션을 구축할 때 필요한 핵심 기능을 갖춘 프레임워크. React(리액트) Lean and focused component-based UI library. Certain features (e.g. routing) are added via community packages. - UI 렌더링에 집중하고, 라우팅 등 Vue가 기본으로 제공하는 기능이 없다. ui를 만드는 '기능'만 제공. - 인기가 많지만, 커뮤니티 패키지에 꽤 의존적이다. 반면 ..
[Udemy Vue 완벽가이드 Section1] 2. 'Vue.js'란 무엇인가? What is Vue.js(or just 'Vue')? - Vue.js 또는 Vue는 무엇인가? Vue.js(Vue) is a 1) JavaScript 2) framework that makes building interactive and 3)reactive 4)webfronts(=browser-side web applications) easier. 1) JavaScript A prgramming language that is supported by all browsers. It allows you to manipulate the already-running page and hence provide richer user experiences. JavaScript는 브라우저에서 사용할 수 있는 프로그래밍 ..
순수 자바스크립트를 왜 바닐라 자바스크립트(Vanilla JS)라고 할까? '바닐라 자바스크립트'라는 단어를 정말 많이 들었는데 정확한 의미를 몰랐다. 그래서 '바닐라 자바스크립트(Vanilla JS)'의 정확한 의미를 찾아보았다. 바닐라 자바스크립트란? : 프레임워크 또는 라이브러리가 적용되지 않은 '순수한' 자바스크립트를 의미한다. 즉, jQuery, Angular, Vue, React 같은 라이브러리/프레임워크를 사용하지 않은 순수한 자바스크립트를 말한다. 여기서 궁금한건, 이렇게 '순수한' 자바스크립트에 왜 '바닐라'라는 단어를 붙였을까? '바닐라'는 그 바닐라맛 아이스크림에서 그 '바닐라' 아닌가? 바닐라에 다른 의미도 있는건가? 궁금증이 많은 나는 또한번 구글링을 해보았다. 결론부터 말하면, vanilla에는 우리가 아는 그 바닐라맛의 '바닐라' 의미 뿐만 아니라 '..

티스토리툴바