JavaScript 39

Vue 라이프사이클 (좀 더 자세히)

beforeCreate : 가장 먼저 실행되는 훅 created : 실제 뷰컴포넌트 내에서 다양한 메소드, 특정데이터를 감지한다거나 데이터라는 옵션을 통해 화면상에 렌더링 되는 바인딩해야되는 컨트롤해야되는 부분을 코드로 만들어서 사용하게되는데 이런 옵션에대한 설정들을 완료하는 시점 beforeMount : 컴포넌트 안에 실제 컴포넌트가 돔에 추가되기 직전에 실행되는 mounted : 컴포넌트가 돔에 추가된 후에 호출됌 beforeUpdate : 컴포넌트가 돔에 추가된 후에 재렌더링되기 직전에 이벤트 훅 updated : 재렌더링을 마치고나서 실행되는 이벤트 훅 beforeDestroy : 컴포넌트를 빠져나갈 때(다른 컴포넌트 이동할때) 컴포넌트가 제거되기 직전에 호출되는 훅 destroyed : 컴포넌트..

JavaScript/Vue 2021.03.15

Vue 기본 구성, router

사이는 html 코드가 들어간다고 보면 된다. 디자인 부분을 담당하는 곳이라 보면 됌 는 그 디자인의 데이터 바인딩을 한다거나, 이벤트를 캐치한다거나 서버와 통신하기위한 자바스크립트코드가 들어간다 보면 됌 라우터를 이용해서 path가 바뀔때 마다 이 부분만 해당하는 컴포넌트를 불러와서 재로딩하려는 형식 기본형식 router 선언 src 아래에 router.js 파일 생성 이런식으로 router.js 에다가 적어줌

JavaScript/Vue 2021.03.15

Vue.js란?

Vue.js는 웹프론트엔드 프레임워크 - 컴포넌트(Component) 기반의 SPA(Sing Page Application)를 구축할 수 있게 해주는 프레임 워크 - MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 컴포넌트 (Component) - 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소 - 재사용 가능하도록 구조화한 것 SPA (Single Page Application) - 단일 페이지 어플리케이션 - 하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태 - 빠른 페이지 변환 - 적은 트래픽 양 쉽게 설명하면 웹 개발할때 필요한 다양한 UI들을 컴포넌트로 만들고 이것을 조립해서 하나의 페이지로 만드는 방식 단점은 최..

JavaScript/Vue 2021.03.15

프런트엔드 개발과 관련된 용어

ECMAScript/ES 국제 표준화 단체인 Ecma Intermational에서 책정한 자바스크립트의 표준 사양 대부분의 브라우저는 ES5 지원 브라우저에 따라서는 ES2015(ES6) 이후의 기능을 구현해서 제공하고 있는 경우도 있음 ES2015부터는 사양을 매년 개정 원래 ECMAScript4, ECMAScript5, ECMAScript6 처럼 숫자를 붙이지 않고, ECMAScript 2015, ECMAScript 2016, ECMAScript 2017처럼연도를 붙여서 부르게 됌. Vue DevTools 크롬 전용 확장 프로그램으로 Vue.js 개발을 지원해주는 도구 애플리케이션의 현재 데이터의 상태를 확인하거나 변수에 어떤 변경이 가해졌는지 추적하는 기능도 있어서 개발할 때 활용하면 굉장히 편리 ..

JavaScript/Vue 2021.03.09

Vue 라이프사이클 다이어그램 (created, mounted, beforedestroy 후킹메소드)

created : 인스턴스가 생성된 다음 바로 호출된다. 뷰 인스턴스는 생성됐지만 태그엔 접근하지 못하고 데이터나 메소드만 사용이 가능하다 (api로 데이터 가져와서 출력해야하는 컴포넌트 같은 경우는 이 created에 api로 데이터를 가져오는 로직을 넣으면 된다고 한다!) mounted : 화면에 그려진 뒤 호출된다. 화면에 출력이 됐기 때문에 태그에 접근할 수 있어서 대부분의 작업이 mounted method안에서 이루어짐. beforeDestroy : 인스턴스가 제거되기 전에 호출된다. 만약 별도로 이벤트리스너를 등록했다면 여기서 제거하면 된다. 출처 : youtu.be/gDD72Xgpfgs?t=290

JavaScript/Vue 2021.03.08

[Facebook Clone Coding] 파이어베이스 고치기

윈도우에서 mac으로 갈아타면서 다시 실행해보는데 프로젝트가 말을 안들었다! 자꾸 이런식으로 잘려보였는데 파이어베이스가 권한이 문제가 있었다! 내 파이어베이스 프로젝트에 들어가서 클라우드 파이어 스토어에 들어간다 그리고 규칙에 들어가서 저 코드로 변경해주면 끝! service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth != null; } } } 1번은 놔두고 그 아래만 변경함! 다시 원상 복구! 프로젝트 안 사진 출처 : 핀터레스트

JavaScript/Project 2021.03.02