Front-end
-
[가이드] 리스트 렌더링 - 필수요소 | VueFront-end/Vue.js 2020. 8. 13. 13:16
v-for로 배열을 요소에 매핑 v-for 지시문을 사용하여 배열을 기반으로 목록을 렌더링할 수 있습니다. v-for 지시문을 사용하려면 item in items 형식의 특수 구문이 필요합니다. 여기서 items은 소스 데이터 배열이고 item은 반복될 배열 요소의 별칭입니다. {{ item.message }} v-for 블록 내부에서는 부모 범위 속성에 대한 전체 액세스 권한이 있습니다. v-for는 현재 항목의 인덱스에 대해 선택적 두 번째 인수를 지원합니다. {{ parentMessage }} - {{ index }} - {{ item.message }} in 대신에 of 구분자를 사용하여 iterators에 대한 JavaScript 구문에 더 가깝습니다. 객체와 v-for v-for를 사용하여 객..
-
[가이드] 클래스와 스타일 바인딩 - 필수요소 | VueFront-end/Vue.js 2020. 8. 12. 18:06
일반적으로 데이터 바인딩은 요소의 클래스 목록과 인라인 스타일을 조작해야 합니다. 둘 다 속성이기 때문에 v-bind를 사용하여 처리할 수 있습니다. 즉, 표현식을 사용하여 최종 문자열만 계산하면 됩니다. 하지만 문자열 연결에 간섭하는 것은 짜증나고 오류가 발생하기 쉽습니다. 이러한 이유로 Vue는 v-bind를 class 및 style과 함께 사용할 때 특별히 향상된 기능을 제공합니다. 문자열뿐만 아니라 개체 또는 배열도 평가할 수 있습니다. HTML 클래스 바인딩 객체 구문 v-bind:class에 개체를 전달하여 클래스를 동적으로 전환할 수 있습니다. 위의 구문은 active 클래스의 존재 여부가 isActive 데이터 속성의 true/false에 따라 결정된다는 것을 의미합니다. 개체에 더 많은 ..
-
[가이드] Computed와 Watch - 필수요소 | VueFront-end/Vue.js 2020. 8. 12. 13:10
Computed Properties 템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것입니다. 템플릿에 논리를 너무 많이 넣으면 템플릿이 비대해지고 유지 관리가 어려워질 수 있습니다. 예를 들면 다음과 같습니다. {{ message.split('').reverse().join('') }} 이 시점에서 템플릿은 더 이상 단순하고 선언적이지 않습니다. message를 거꾸로 표시한다는 것을 깨닫기 전에 잠시 살펴봐야 합니다. 이 문제는 반전된 메시지를 템플릿에 두 번 이상 포함하려는 경우 더 심각해집니다. 그렇기 때문에 복잡한 논리에 대해 computed 속성을 사용해야 합니다. 기본 예제 Original message: "{{ message }}" Computed reversed message: "..
-
[가이드] 템플릿 문법 - 필수요소 | VueFront-end/Vue.js 2020. 8. 11. 17:49
Vue.js는 HTML 기반 템플릿 구문을 사용하여 렌더링된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있습니다. 모든 Vue.js 템플릿은 규격을 준수하는 브라우저 및 HTML 파서(구문 분석기)로 구문 분석할 수 있는 유효한 HTML입니다. 내부적으로 Vue는 템플릿을 Virtual DOM 렌더링 함수로 컴파일합니다. Vue는 반응성 시스템과 결합하여 최소 개수의 구성요소를 지능적으로 파악하여 애플리케이션 상태가 변경될 때 최소한의 DOM 조작을 적용할 수 있습니다. Virtual DOM 개념에 익숙하고 JavaScript의 원시 기능을 선호하는 경우 옵션인 JSX 지원을 사용하여 템플릿 대신 렌더링 함수를 직접 작성할 수도 있습니다 . 보간법(Interpolations) 본문..
-
[가이드] Vue 인스턴스 - 필수요소 | VueFront-end/Vue.js 2020. 8. 11. 15:31
Vue 인스턴스 생성 모든 Vue 애플리케이션은 Vue 함수를 사용하여 새 Vue 인스턴스 를 만드는 것으로 시작됩니다 var vm = new Vue({ // options }) MVVM 패턴 과 엄격하게 관련되지는 않았지만 Vue의 디자인은 일부+ 영감을 받았습니다. 일반적으로 Vue 인스턴스를 참조하기 위해 변수 vm(ViewModel의 줄임말)을 사용하는 경우가 많습니다. Vue 인스턴스를 생성하면 options 객체를 전달합니다.이 가이드의 대부분은 이러한 옵션을 사용하여 원하는 동작을 만드는 방법을 설명합니다. 참고로 API 참조 에서 전체 옵션 목록을 찾아 볼 수도 있습니다 . Vue 애플리케이션은 new Vue로 생성된 루트 Vue 인스턴스로 구성되며, 선택적으로 중첩되고 재사용 가능한 컴포..
-
[가이드] 시작하기 - Essentials | VueFront-end/Vue.js 2020. 8. 11. 14:25
시작하기 index.html : 또는 ※ 동영상 강의 : Scrimba 튜토리얼 시리즈 선언적 렌더링 {{ message }} 더 이상 HTML과 직접 상호 작용할 필요가 없습니다. Vue 앱은 단일 DOM 요소 ( #app이 경우)에 자신을 연결 한 다음 이를 완전히 제어합니다. HTML은 우리의 진입점이지만 다른 모든 것은 새로 생성 된 Vue 인스턴스 내에서 발생합니다. 다음과 같이 요소 속성을 바인딩 할 수 있습니다. Hover your mouse over me for a few seconds to see my dynamically bound title! ※ v- (지시문) : Vue에서 제공하는 특수 속성임을 나타 내기 위해 접두사가 붙으며, 렌더링 된 DOM에 특수 반응 동작을 적용 조건부 및..
-
[가이드] Vue CLI 사용하기Front-end/Vue.js 2020. 8. 10. 17:51
Vue CLI 시작하기 설치 $ npm install -g @vue/cli // vue-cil 3.x $ npm i -g vue-cli // vue-cil 2.x $ yarn global add @vue/cli 버전 확인 $ vue --version 업그레이드 $ npm update -g @vue/cli $ yarn global upgrade --latest @vue/cli 새 프로젝트 생성 프로젝트를 생성할때 2.x 버전에서는 eslint, unit test, night watch 등등 낯선것들에 대해 선택을 해야만 했는데, 3.x 에서는 default (babel, eslint) 를 선택하면 가장 기본적인 설정으로 프로젝트가 생성됩니다.(나중에 언제든지 옵션을 추가할 수 있습니다.) $ vue cre..
-
4. react-async 로 요청 상태 관리하기 - API 연동 | 벨로퍼트Front-end/React.js 2020. 7. 24. 17:15
react-async 는 우리가 지난 섹션에서 만들었던 useAsync 와 비슷한 함수가 들어있는 라이브러리입니다. 이 라이브러리 안에 들어있는 함수 이름도 useAsync 인데요, 사용법이 조금 다릅니다. 만약에 여러분이 매번 프로젝트를 만들 때 마다 직접 요청 상태 관리를 위한 커스텀 Hook 을 만들기 귀찮다면, 이 라이브러리를 사용하시면 됩니다. 정말 많은 기능들이 내장되어있답니다. 다만, 사용법이 조금 다릅니다. 우리가 만들었던 커스텀 Hook 은 결과물을 배열로 반환하는 반면 이 Hook 은 객체 형태로 반환합니다. 우선, 해당 라이브러리를 설치해주세요. $ yarn add react-async react-async 의 README 에 있는 공식 사용법을 확인해볼까요? import { useA..