개발 무지렁이

𐂂 뷰라우터 (VueRouter) 페이지 이동과 관련된 기능을 VueRouter로 구현할 수 있다. (인스턴스 방식으로 VueRouter의 내용들을 뽑아낼 수 있다. 뷰 인스턴스에 라우터를 주입하면 된다. ⚠ 페이지 개수만큼 객체의 개수가 주입된다. ❓ 라우팅 : 어떤 url로 이동했을 때, 어떤 페이지가 뿌려질지에 대한 정보를 말한다. 🦁 router-view : url에 따라 컴포넌트가 뿌려지는 영역 ⚠ 인스턴스에 라우터가 연결되었을 때만 사용가능 📜 vue_router.html ➼ 사용자는 url을 쳐서 이동하지 않는다. 화면에서 페이지를 이동시키는 링크가 필요하다. router-link 태그는 최종적으로 화면에 앵커(a) 태그로 변환되어 나타난다. Login 𐁍 axios Vue에서 권고하는 자바..

𐂂 비동기 처리 특정 로직의 실행이 끝날 때까지 기다려주지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 '비동기 처리'라 한다. 📜 비동기처리.js console.log('Hello'); setTimeout(function() { console.log('Bye'); }, 3000); console.log('Hello Again'); // Hello // Hello Again // Bye 🤡 요청을 하고, 데이터를 받아올 때까지 기다려주는 코드가 없으면, 데이터를 받아오기도 전에 다음 코드가 실행되어 원하는 값을 얻을 수 없다. 📜 JS 비동기처리 문제점.js function getData() { let tableData; $.get('[url주소..

𐂂 Vue 컴포넌트 화면의 영역을 구분하여, 영역별로 코드를 관리하는 구성요소를 말한다. 컴포넌트 기반으로 화면을 개발하면 🧩 재사용성이 증가한다. 𐁍 컴포넌트 간의 관계 ⚠️ Vue 인스턴스를 생성하면 해당 객체는 루트(Root) 컴포넌트가 된다. 이후에 컴포넌트를 등록하는 순간 하위 컴포넌트로 위치하게 된다. 각각의 컴포넌트는 각각의 고유한 데이터 유효범위를 가지고, 각각 데이터를 관리한다. 🍟 전역 컴포넌트 Vue.component('컴포넌트태그', { 컴포넌트 내용 }); 🍟 지역 컴포넌트 components: { '컴포넌트 태그', { 컴포넌트 내용 } } 📜 전역컴포넌트.html 📜 지역컴포넌트.html ⚠️ 전역 컴포넌트는 인스턴스를 생성할 때마다, 따로 등록할 필요없이 모든 인스턴스에 등록..

𐂂 스코프(Scope) 란 선언된 위치에 따른 식별자가 유효한 범위를 말한다. ⚠️ 스코프는 네임스페이스(namespace)다. ⚠️ 스코프가 없다면, 같은 이름을 갖는 변수는 충돌을 일으킨다. ⚠️ 자바스크립트 엔진은 스코프 체인을 통해 참조할 변수를 검색한다. ➼ 지역스코프 (함수 몸체 내부) ➡️ 함수는 지역스코프를 생성한다. (함수가 종료되면 지역스코프도 소멸) ➡️ 함수 내에 선언된 지역변수는 함수가 생성한 지역스코프에 등록되고, 스코프가 소멸될때까지 유효하다. ➡️ 함수가 종료되어도 누군가 지역스코프를 참조하고 있다면, 그 지역스코프는 소멸되지 않는다. 𐁍 스코프 체인(Scope Chain) 스코프가 계층적으로 연결된 것을 말한다. *상위 스코프 방향*으로 이동하며 참조할 변수를 검색한다. ⚠..

𐂂 MVVM (Model-View-ViewModel) 패턴 Model Layer : API를 통해 데이터를 가져오거나 저장 및 조작하는 코드를 말한다. View Layer : 사용자 인터페이스를 나타내며, 단순히 데이터를 표시하고 사용자 입력을 받아들이는 역할만을 하는 코드를 말한다. ViewModel Layer : View에 표시할 데이터를 Model로부터 가져와 포맷팅하거나 View에 표시되는 데이터의 변경사항을 Model에 반영하는 등 사용자 입력을 처리하고, Model과 상호작용에 필요한 비즈니스로직을 포함하는 코드를 말한다. 𐁍 Vue.js 란 MVVM 패턴의 ViewModel Layer에 해당하는 화면 단의 라이브러리를 말한다. Vue의 설계 철학은 데이터와 뷰간의 분리를 강조한다. 더불어, ..

𐂂 함수란? 호출할 수 있는 객체, callable (1) 작업을 처리하는 코드블럭 (🧩 코드의 재사용성) (2) 객체 타입의 값이다, 함수 객체 (3) 함수는 호출되기 이전에, 함수 몸체의 어떤것도 실행되지 않는다. ➼ 🦔 함수 리터럴 함수 객체를 생성하는 표기법을 말한다. (피연산자로 사용될 때, 함수리터럴로 해석) ❓ 일급객체: 값처럼 사용할 수 있는 객체 ➼ 🦔 함수 정의 방식 (1) 함수 선언문 function add(x, y) { return x + y; } ⚠️ 함수 호이스팅이 일어난다. (함수이름과 동일한 이름의 식별자가 생성, 함수 객체가 할당) (2) 함수 표현식: 함수리터럴로 생성한 함수 객체가 변수에 할당 let add = function(x, y) { return x + y; } ..