Vue9 Vue #9 - 할 일 관리 앱 만들기 뷰 CLI를 이용한 프로젝트 생성 터미널에 vue create vue-todo 를 입력하여 프로젝트를 생성한다. 세팅 설정은 Vue2로 선택한다. 프로젝트 초기 설정 어썸 아이콘 CSS 설정 애플리케이션의 예쁜 UI를 위해 버튼은 일반 문자열 대신 어썸 아이콘을 활용한다. 구글의 머티리얼 아이콘보다 더 많은 종류를 제공하며 대중적으로 사용되는 아이콘 CSS다. 폰트와 파비콘 설정 애플리케이션의 예쁜 UI를 위해 버튼은 일반 문자열 대신 어썸 아이콘을 활용한다. 구글의 머티리얼 아이콘보다 더 많은 종류를 제공하며 대중적으로 사용되는 아이콘 CSS다. 컴포넌트 생성하고 등록하기 대상 컴포넌트는 TodoHeader, TodoInput, TodoList, TodoFooter 총 4개다. 컴포넌트 생성 프로젝트 .. 2021. 12. 12. Vue #8 - 뷰 CLI 뷰 CLI 싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있느 형태의 파일로 변환해 주는 웹팩이나 브라우저리파이와 같은 도구가 필요하다. 웹팩은 웹 앱의 자원들을 자바스크립트 모듈로 변환해 ㄹ하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러다. 브라우저리파이도 웹팩과 유사한 성격의 모듈 번들러지만 웹팩과 다르게 웹 자원 압축이나 빌드 자동화 같은 기능이 없다. 그래서 뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 뷰 코어 팀에서 CLI도구를 제공한다. CLI는 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구다. 뷰 CLI 설치 명령 프롬트 창에 npm install vue-cli -global 입력 뷰 CLI로 프로젝트 생성하기 명령 프롬트.. 2021. 12. 12. Vue #7 - 싱글 파일 컴포넌트 체계 싱글 파일 컴포넌트 체계 싱글 파일 컴포넌트 체계란 .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다. 의 export default { } 코드는 ES6의 자바스크립트 모듈화와 관련된 문법이다. 2021. 12. 12. Vue #6 - 뷰 템플릿 뷰 템플릿이란? 뷰의 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수 있는 형태의 HTML로 변환해 주는 속성이다. 템플릿 속성을 사용하는 방법은 두 가지로, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법이다. // ES5에서 template 속성 new Vue({ template: 'Hello {{ message }}' }); 여기서 템플릿 속성에 대해 한 가지 알아둘 특징이 있다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 .. 2021. 12. 12. 이전 1 2 3 다음
