728x90 PROGRAMMING77 [Vue] MVVM Pattern, Vue 인스턴스 생성 MVVM Pattern 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴 - Model JavaScript의 Object 자료 구조 ( { key: value } ) Object는 Vue Instance 내부에서 데이터로 사용 데이터가 바뀌면 View(DOM)가 반응 - View DOM(HTML) 데이터의 변화에 따라 바뀌는 대상 - View Model 모든 Vue Instance View와 Model 사이에서 데이터와 DOM에 관련된 모든 일 처리 ViewModel을 활용해 Data를 얼만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것 Vue 인스턴스 생성 Vue.js 코드 작성 순서 : 데이터가 변화하면 DOM이 변경 → 1. 데이터 로직 작성 2. DOM 작성 CDN 작성 {{ .. 2021. 11. 15. [Vue] SPA(Single Page Application), CSR(Client Side Rendering) Vue.js 프론트엔드 프레임워크 사용자 인터페이스를 만들기 위한 진보적인 자바스크립트 프레임워크 SPA (Single Page Application) 지원 왜 Vue.js일까? Vanilla JS는 페이지에서 수정되는 사항이 있으면, 수정되는 '모든 요소'를 선택해서 '이벤트'를 등록하고 변경 Vue.js는 DOM과 Data가 연결되어 있으면 Data를 수정할 경우 DOM이 알아서 변경 SPA (Single Page Application) 단일 페이지 애플리케이션 현재 페이지를 동적으로 렌더링함으로써 사용자와 소통하는 웹 애플리케이션 단일 페이지로 구성되며 최초에만 페이지를 다운로드하고 이후에는 동적으로 DOM 구성 전체 페이지가 아닌 현재 페이지 중 필요한 부분만 동적으로 다시 작성 연속되는 페이지 .. 2021. 11. 15. [JS] AJAX, Concurrency model, Promise, Axios AJAX (Asynchronous JavaScript And XML; 비동기식 JavaScript와 XML) 서버와 통신하기 위해 XMLHttpRequest 객체 활용 서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터 받아올 수 있음 XML뿐만 아니라 모든 종류의 데이터 받아올 수 있음 JSON, XML, HTML, 텍스트 형식 등을 포함한 다양한 포맷 주고 받을 수 있음 페이지 전체를 reload(새로고침) 하지 않고서도 수행되는 비동기성 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 페이지 새로고침 없이 서버에 요청 → 서버로부터 데이터받고 작업 수행 동기식 순차적, 직렬적 Task 수행 요청 보낸 후 응답 받아야만 다음 동작 이루어짐 (blocking) 왜 .. 2021. 11. 14. [JS] 배열 관련 메서드 배열 키와 속성들을 담고 있는 참조 타입 객체 순서 보장 주로 대괄호[] 이용하여 생성, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 배열의 길이는 array.length 형태로 접근 배열의 마지막 원소는 array.length - 1 로 접근 (-1로 접근 불가) 배열 관련 메서드 reverse: 원본 배열의 요소들의 순서를 반대로 정렬 push: 배열의 가장 뒤에 요소 추가 pop: 배열의 가장 뒤에 요소 제거 unshift: 배열의 가장 앞에 요소 추가 shift: 배열의 가장 앞에 요소 제거 includes: 배열에 특정 값이 존재하는지 판별 후 참/거짓 반환 indexOf: 배열에 특정 값이 존재하는지 판별 후 인덱스 반환 (요소 없을 경우 -1 반환) join: 배열의 모든 요소를 구분자를.. 2021. 11. 12. 이전 1 2 3 4 5 6 7 8 ··· 20 다음 728x90