본문 바로가기

전체 글502

13. Vue - 조건부 렌더링 1. 조건부 렌더링이란? 공식문서 바로가기 조건부 렌더링 | Vue.js 조건부 렌더링 v-if v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. Vue is awesome! 1 v-else와 함께 “else 블록”을 추 v3.ko.vuejs.org a) v-if 디렉티브 위의 코드는 awesome 이라는 값이 true인 경우, h1 태그가 출력된다. awesome이 true가 아닌 경우, v-else 디렉티브를 갖고 있는 h1 태그가 출력된다. 조건부가 true일 때만 값을 반환한다는 점을 잊지말자. * 꿀 Tips 여러 태그를 조건부 렌더링 하는 경우, 다음의 사진처럼 div 태그를 이용하여 요소들을 묶어줄 것이다. 하.. 2021. 5. 19.
12. Vue - 클래스와 스타일바인딩 1. 예제 코드를 통한 개념이해 Hello?(isActive = {{ isActive }}) 위의 코드를 이용해서 하려는 것은 다음과 같다. 특정 값을 지정해서 해당 값이 true인 경우, 클래스 선택자를 HTML 태그에 삽입하도록 하는 것이다. h1 태그의 class를 보면 v-bind를 사용하여 데이터와 클래스명을 연결시켜 놓았다. h1 태그의 class 속성값으로 active라는 이름을 사용하는데, isActive라는 key 값에 따라서 적용결과가 달라지는 것이다. 아래의 사진을 보면 더욱 쉽게 이해할 수 있을 것이다. isActive의 값이 false인 경우, h1 태그의 class 속성이 추가되어 있으나 active라는 값은 없다. h1 태그를 클릭하면 activate() 메소드가 작동하게 되고.. 2021. 5. 18.
11. Vue - watch 속성 1. 기본 코드 및 설명 msg = {{ msg }} computedMessage = {{ computedMessage }} computedMessage() 메소드: 이전 포스팅에서 사용한 것으로, 글자를 뒤집는 기능 changeMessage() 메소드: 첫번째 h1 태그를 클릭하면 내용 변경 2. Watch란? watch 속성은 데이터의 변경 사항을 감시하는 기능이다. 다음 예시코드를 보면서 어떻게 watch 속성이 동작하는지 알아보자. 이처럼 watch 속성에 등록된 data는 계속해서 감시된다. 감시를 받고있는 data의 값이 변경되면 watch에 작성된 로직을 수행하게 된다. 일종의 이벤트 핸들러와 같은 방식으로 동작한다고 보면 된다. 3. watch와 computed의 차이 a) computed.. 2021. 5. 18.
10. Vue - Getter & Setter 1. Getter란 무엇인가? Getter란 값을 얻어내는 방식을 의미한다. Getter는 값을 변경할 수 없으며 오직 값을 읽는 것만 가능하다. (Read Only) 이전 포스팅에서 배웠던 computed 또한 Getter의 하나이다. 다음 예제를 통해서 Getter의 의미를 알아보자. a) computed는 왜 Getter 일까? ADD {{ computedMessage }} {{ computedMessage }} {{ computedMessage }} {{ computedMessage }} 해당 코드는 이전 포스팅에서 이어지는 프로젝트의 App.vue에 작성된 내용이다. 버튼을 누르면 add 메소드가 동작하여 computedMessage의 내용에 문자열 '!?'을 추가하여 출력하도록 한다. 아무리 .. 2021. 5. 18.
9. Vue - computed 속성 1. Computed 란? computed는 script 태그에서 사용할 수 있는 속성 중 하나다. computed에 등록된 어떤 변수나 조건, 메소드 등은 계속해서 감시 및 추적된다. computed를 통해 특정 값을 감시하고, 해당 값의 변화에 따라 웹 페이지 또는 컴포넌트가 알맞게 반응하도록 설정할 수 있다. computed는 기존의 어떤 데이터 값을 후처리하여 사용하고 싶을 때 이용하는 기능이다. 2. 예제코드 및 경로 a) 파일 경로 b) App.vue Fruits {{ fruit }} c) Fruits.vue Fruits {{ fruit }} d) 코드 해설 computed라는 속성값을 통해서 hasFruit() 메소드를 등록한다. section 태그에서 v-if를 사용하여 조건에 hasFru.. 2021. 5. 17.
8. Vue - 템플릿 문법 https://v3.ko.vuejs.org/guide/template-syntax.html 템플릿 문법 | Vue.js 템플릿 문법 Vue.js는 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파 v3.ko.vuejs.org - 위 링크는 템플릿 문법에 대한 Vue 공식문서입니다. - 설명 및 예시가 너무 잘 설명되어 있어, 이번 파트는 공식문서로 대체합니다. - 추가적으로 같이 알면 좋은 부분을 아래에 링크로 첨부하겠습니다. 1. v-bind와 v-on 약어 해당 부분 공식문서 바로가기 2. 동적 전달인자 해당 부분 공식문서 바로가기 2021. 5. 17.
7. Vue - 인스턴스와 라이프사이클 - 이번 포스팅의 내용을 더 깊고 자세히 참고할 수 있는 공식 문서입니다. https://v3.ko.vuejs.org/guide/instance.html 어플리케이션 & 컴포넌트 인스턴스 | Vue.js 어플리케이션 & 컴포넌트 인스턴스 어플리케이션 인스턴스 생성하기 모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작합니다 : const app = Vue.create v3.ko.vuejs.org 1. Vue 인스턴스란? a) Vue 인스턴스 생성과정 Vue 객체 또는 인스턴스는 하나의 화면을 의미한다. 다음 예시를 통해 인스턴스를 어떻게 생성하는지, 왜 이런 코드가 쓰이는지부터 알아보자. import {createApp} from 'vue' impor.. 2021. 5. 14.
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.

티스토리툴바