Front-end/Vue343 6. Vue - 기초문법 - 이전 포스팅에서 만든 프로젝트와 이어지는 내용입니다. 1. 조건문 이전 포스팅에서 숫자를 클릭하면 숫자가 증가하는 간단한 프로젝트를 만들었다. 이번에는 조건문을 이용하여 숫자의 크기를 담는 count 변수가 4보다 큰 경우 메세지를 출력해보도록 하자. {{ count }} 4보다 큽니다! div 태그 내부에 v-if 라는 속성을 사용하여 조건문을 작성할 수 있다. v-if의 속성 값에는 조건이 들어가는데, 조건문에서 사용하는 변수는 script 태그에 선언되어 있어야 한다. a) 출력 화면 b) 디렉티브(Directive) 이번 예제에서 사용해본 조건문과 동일하게 v-로 시작하는 속성을 디렉티브라고 한다. 2. 반복문 {{ count }} 4보다 큽니다! {{ fruit }} script 태그에서 f.. 2021. 5. 13. 5. Vue - 기본 동작원리 및 반응성 - 이전 포스팅까지는 Vue를 사용한 개발환경을 구축해보았다. - 이번 포스팅부터는 Vue에 대해서 하나씩 배워보도록 하자. 1. vue의 개념 SPA 디자인 패턴에서는 메인 프레임이 되는 App.vue를 제외하고 컨텐츠 영역의 화면이 전환된다. 이 컨텐츠 영역에 들어가는 각 페이지 또는 화면을 우리는 컴포넌트라고 부른다. vue가 이 컴포넌트의 역할을 하기 때문에 vue는 하나의 화면을 의미한다. 이와 같은 이유로, vue를 SFC(Single File Component)라고도 부른다. 2. vue의 기본 동작원리 3. 실습 예제 vue의 기본적인 개념과 작동원리를 이해하기 위해 간단한 실습예제를 만들어보자. 해당 예제는 브라우저의 숫자를 클릭하면 해당 숫자 값이 증가한다. 아래 코드는 App.vue에.. 2021. 5. 13. 4. Vue - ESLint 설정 0. ESLint란? 코드를 여러사람이 작성하다 보면, 코드 작성 규칙이 통일되지 않아 가독성이 떨어지는 경우가 있다. 이를 방지하기 위해, 프로젝트의 코드 작성 규칙을 설정하는 기능이다. 1. 패키지 설치 터미널 입력: npm i -D eslint eslint-plugin-vue babel-eslint a) .eslintrc.js 파일 생성 및 작성 루트 경로에 .eslintrc.js 파일을 생성한다. vue와 eslint의 코드작성 규칙을 다음과 같이 설정한다. module.exports = { env:{ browser: true, node: true }, extends: [ // vue 작성 규칙 설정 (2단계로 설정) //'plugin:vue/vue3-essential', // 1단계 코드 규칙 .. 2021. 5. 12. 3. Vue - 이미지 파일 연결 및 경로 별칭 설정 1. 파일 확장자 생략을 위한 설정 webpack.config.js 파일에서 위의 사진과 같이 resolve 속성에 extensions를 설정한다. js와 vue 파일을 import하거나 링크하는 경우, 확장자를 따로 명시하지 않아도 동작하도록 해주는 설정이다. 이 외에도 다른 확장자 이름을 등록하면 해당 확장자 없이 파일을 연결할 수 있다. 해당 설정을 마치면 아래와 같이 확장자명을 기입하지 않고 사용할 수 있다. 2. 이미지 연결 및 경로별칭 설정 src폴더 내부에 components 라는 폴더를 생성한다. 기존에 static 폴더에 있던 images 폴더를 src 폴더 내부로 옮긴다. 기존의 images 폴더의 이름을 assets로 변경한다. HelloWorld.vue에 다음과 같이 작성한다. 이 .. 2021. 5. 12. 2. Vue - webpack을 이용한 프로젝트 생성 0. 시작하기 전에 - webpack 포스팅에서 생성한 프로젝트를 기반으로 Vue 프로젝트를 만들 예정입니다. - 필요하신 분은 아래에 있는 제 github 주소를 사용하여 해당 프로젝트를 사용하셔도 됩니다. github.com/akaRaphael/webpack-basic.git akaRaphael/webpack-basic basic webpack project. Contribute to akaRaphael/webpack-basic development by creating an account on GitHub. github.com 1. webpack 프로젝트 가져오기 터미널 입력: npx degit github.com/akaRaphael/webpack-basic.git 원하는프로젝트이름 해당 명령어는 .. 2021. 5. 11. 1. Vue - 친해지기 1. Vue에 대해 알아보자. - 앞으로 더욱 자세히 알아보겠지만, 이번 포스팅에서는 간단하게 Vue를 이해하기 위해 필요한 기본적인 개념을 살펴보자. a) Vetur 설치 지난 포스팅에서 생성한 vue 프로젝트를 열어보면 src 폴더안에 App.vue가 있다. 처음 열어보면 코드가 구분되지 않고 text 형태로 아무런 색상이 없다. VSCode를 기준으로 Vetur라는 extension을 설치해주면 아래와 같이 코드에 색이 입혀진다. b) Vue의 기본구조 App.vue 파일을 살펴보면 vue는 template, script, style 3가지 구성요소를 갖는다. Template은 HTML을 담당한다. Script는 자바스크립트를 담당한다. Style은 CSS를 담당한다. 이처럼, vue 프레임워크는 .. 2021. 5. 11. 0. Vue - 시작 준비 0. 시작에 앞서 webpack 포스팅에서 사용된 프로젝트가 본 포스팅에서 사용될 예정입니다. webpack 포스팅을 먼저 읽고난 후, 본 포스팅을 따라하는 것을 권장합니다. 1. Vue 는 무엇인가? Vue 는 프론트 개발을 더욱 효율적이고 쉽게 할 수 있도록 돕는 프레임워크다. HTML, CSS, JS를 Vue라는 구조를 통해 더욱 간편하게 작성할 수 있게 된다. Vue의 대표적인 특성은 SPA(Single Page Application)를 쉽게 만들수 있도록 해준다는 것이다. 하나씩 배워보면서 Vue에 대해서 알아보자. 2. Vue 설치하기 터미널 입력: npm i -g @vue/cli cli.vuejs.org/guide/installation.html Installation | Vue CLI In.. 2021. 5. 11. 이전 1 2 3 4 5 다음
