전체 글
-
[가이드] 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..
-
1-2. 도형 그리기 - Canvas API | MDNDOM/Canvas 2020. 7. 28. 21:59
이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치, 곡선 등 의 기본적인 도형을 그릴수 있는지 익히실 수 있을 것 입니다. 캔버스 위에 물체를 그릴 때에는 path를 사용하는것이 필수적이므로 우리는 이것이 어떻게 사용되는지 볼 것입니다. 그리드 드로잉을 시작 하기에 앞서, 캔버스 그리드 혹은 좌표공간 (coordinate space) 에 대하여 이야기 해보겠습니다. 이전 페이지에서 이야기 했던 HTML 골격(skeleton)는 가로 세로 각각 150 픽셀의 캔버스 요소를 가지고 있습니다. 오른쪽에 보시면, 캔버스와 기본 그리드가 놓인것을 보실 수 있습니다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같습니다. 이 그..
-
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..
-
3. useAsync 커스텀 Hook 만들어서 사용하기 - API 연동 | 벨로퍼트Front-end/React.js 2020. 7. 24. 11:51
데이터를 요청해야 할 때마다 리듀서를 작성하는 것은 번거로운 일 입니다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook 을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법을 알아봅시다. src 디렉터리에 useAsync.js 파일을 생성하고, 다음 코드를 작성해보세요. /src/useAsync.js : import { useReducer, useEffect } from 'react'; function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: ac..