문돌이 Theo

Vuex statement manage pattern + library for vue.js 상태 관리 패턴 + 라이브러리 상태를 전역 저장소로 관리할 수 있도록 지원하는 라이브러리 state가 예측 가능한 방식으로만 변경될 수 있도록 보장하는 규칙 설정 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 Vue의 공식 devtools와 통합되어 기타 고급 기능을 제공 State state는 data이며 해당 어플리케이션의 핵심이 되는 요소 각 컴포넌트에서 관리 (.html의 경우 new Vue({}), SFC에서는 .vue에 해당) DOM은 data(state)에 반응하여 DOM을 렌더링 Pass props & Emit event 각 컴포넌트는 독립적으로 데이터를 관리 데이터는 단방향 흐름으로 ..

Component 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움을 줌 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 즉, 컴포넌트 개발을 함에 있어 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공 Vue 컴포넌트 === Vue 인스턴스 Vue Component 구조 예시 SFC Single File Component Vue의 컴포넌트 기반 개발의 핵심 특징 하나의 컴포넌트는 .vue라는 하나의 파일 안에서 작성되는 코드의 결과물 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리 즉, .vue 확장자를 가진 싱글 파일 컴포넌트를 통해 개발하는 방식 V..

Concepts of Vue.js MVVM 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴 구성 요소 Model View View Model Model Vue에서 Model은 JavaScript Object JavaScript의 Object 자료 구조 이 Object는 Vue Instance 내부에서 data로 사용되는데 이 값이 바뀌면 View(DOM)가 반응 View Vue에서 View는 DOM Data의 변화에 따라서 바뀌는 대상 ViewModel Vue에서 ViewModel은 모든 Vue Instance View와 Model 사이에서 Data와 DOM에 관련된 모든 일을 처리 ViewModel을 활용해 Data를 얼마만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것 Quick..

Vue.js란? Front-End Development 프론트엔드 개발은 HTML, CSS 그리고 JavaScript를 활용해서 데이터를 볼 수 있게 만들어 줌 이 작업을 통해 사용자는 데이터를 눈으로 볼 수 있고 데이터와 상호작용 할 수 있음 대표적인 프론트엔드 프레임워크 Vue.js, React, Angular What is Vue.js 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 현대적인 tool과 다양한 라이브러리를 통해 SPA(Single Page Aplication)를 완벽하게 지원 SPA 단일 페이지 애플리케이션 (Single Page Aplication) 현재 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션 단일 페이지로 구성되며 서버로부터 처음에만 페이지를 받아..

Axios ref : https://axios-http.com/docs/intro Promise based HTTP client for the browser and node.js 브라우저를 위한 Promise 기반의 클라이언트 원래 'XHR'이라는 브라우저 내장 객체를 활용해 AJAX 요청을 처리하는데, 이보다 편리한 AJAX 요청이 가능하도록 도와주는 기능 확장 가능한 인터페이스와 함께 패키지로 사용이 간편한 라이브러리를 제공 Installing npm 사용 시 $ npm install axios CDN 사용 시 jsDelivr CDN unpkg CDN Axios 예시 const URL = 'https://jsonplaceholder.typicode.com/todos/1/'..

Promise Promise object 비동기 작업의 최종 완료 또는 실패를 나타내는 객체 미래의 완료 및 실패와 그 결과 값을 나타냄 미래의 어떤 상황에 대한 약속 성공(이행)에 대한 약속 .then() 실패(거절)에 대한 약속 .catch() Promise의 상태 대기 (pending) 이행하거나 거부되지 않은 초기 상태 이행 (fullfilled) 연산이 성공적으로 완료됨 거부 (rejected) 연산이 실패함 Promise methods .then(callback) 이전 작업(이 또한 promise 객체)이 성공했을 때(이행했을 때) 수행할 작업을 나타내는 콜백 함수 각 콜백 함수는 이전 작업의 성공 결과를 인자로 전달 받음 따라서 성공했을 때의 코드를 콜백 함수 안에 작성 .catch(call..

Callback Function (콜백 함수) & Promise 다른 함수에 인자로 전달된 함수 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료함 동기식, 비동기식 모두 사용됨 비동기 작업이 완료된 후 코드 실행을 계속하는데 사용되는 경우 비동기 콜백이라고 함 JS의 함수는 "일급 객체" 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체(함수) 일급 객체의 조건 인자로 넘길 수 있어야 함 함수의 반환 값으로 사용할 수 있어야 함 변수에 할당할 수 있어야 함 Async callbacks (비동기 콜백)로 활용 백그라운드에서 코드 실행을 시작할 함수를 호출할 때 인자로 지정된 함수 백그라운드 코드 실행이 끝나면 콜백 함수를 호출하여 작업이 완료되었음을 알리거나, 다음 작업을 실행하게 할 수 있음..

Asynchronous JS 동기(Synchronous)와 비동기(Asynchronous) 동기식 순차적, 직렬적 테스트 수행 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐 (blocking) 비동기식 병렬적 태스크 수행 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐 (non-blocking) 즉, 요청을 보내놓고 다음 태스크로 진행 왜 비동기(Asynchronous)를 사용하는가? 사용자 경험 예를 들어 데이터를 구동하고 실행되는 앱이 있으며 이 데이터의 크기가 굉장히 크다고 가정 동기식 코드라면 데이터를 모두 로드한 뒤에야 앱이 실행되기 때문에, 로드되는 동안 우리는 앱을 사용할 수 없는 상태로 얼마나 걸릴지 모르는 로딩 시간을 기다려야함 즉, 앱이 멈춘 것처럼 보임 이처럼 동기식..

AJAX Asynchronous Javascript And XML (비동기식 js와 xml) 서버와 통신하기 위해 XMLHttpRequest 객체를 활용 XMLHttpRequest는 동기식과 비동기식 통신을 모두 지원 페이지 전체를 reload를 하지 않고서도 수행되는 "비동기성" 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 JSON을 더 많이 사용 2005년 Google Maps & Gmail 등에 활용되는 기술을 설명하기 위해 AJAX라는 용어를 최초로 사용 AJAX는 특정 기술이 아닌 기존의 여러 기술을 사용하는 새로운 접근법을 설명하는 용어 Google 사용 예시 ..

Arrays (배열) 배열의 정의와 특징 파이썬의 리스트와 비슷한 참조 타입의 객체 순서를 보장하는 특징이 있음 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에접근 가능 배열의 길이는 array.length의 형태로 접근 가능 배열의 마지막 원소는 array.length -1로 접근 배열 관련 주요 메서드 (기본) 메서드설명비고 reverse원본 배열의 요소들의 순서를 반대로 정렬 push & pop배열의 가장 뒤에 요소를 추가 또는 제거 unshift & shift배열의 가장 앞에 요소를 추가 또는 제거 includes배열의 특정 값이 존재하는지 판별 후 참/거짓 반환 indexOf배열의 특정 값이 존재하는지 판별 후 인덱스 반환요소가 없을 경우 -1 반환join배열의 모든..