Little bIT awesome

총정리 Reactivity : 웹의 동작들과 관련된 기능 인스턴스 : 뷰로 개발할 때 필수로 생성해야 하는 단위 컴포넌트 : 화면의 영역을 구분해서 개발하는 단위(가장 중요한 개념), 재사용성 컴포넌트 통신 : 데이터의 규칙 → 데이터 흐름 예측 props event emit HTTP 통신 라이브러리 (axios) 템플릿 문법 데이터 바인딩 : reactivity와 유사 뷰 디렉티브 : 화면을 조작하기 위해 뷰가 추가적으로 제공하는 문법 (v-) Vue CLI : 프로젝트를 생성할 때, 명령어를 사용하는 방식 싱글 파일 컴포넌트 (.vue 파일) 향후 공부 방식 공식문서의 API를 많이 보기 Style Guide 도 정독하기 cookbook: 실용적 문법, 실용적 고민들

.vue 파일

comend line interface, 명령어 실행 도구 get Start → Installation → npm 설치 npm install -g @vue/cli # OR yarn global add @vue/cli CLI Version 차이 [Vue CLI 2.x] vue init ‘프로젝트 이름’ ‘프로젝트 폴더 위치’ vue init ‘webpack-simple’ ‘프로젝트 폴더 위치’ [Vue CLI 3.x] vue create ‘프로젝트 폴더 위치’ /Users/sujinoh/.npm-global/lib/node_modules npm run serve 가 실행되면 실행되는 파일 → public 폴더에 index.html파일 아래에 build된 파일이 자동으로 추가됨 source 파일 밑에 정리된..

뷰의 템플릿 문법 : 뷰로 화면을 조작하는 방법을 의미 데이터 바인딩 콧수염 괄호 (Mustache Tag) {{ message }} 디렉티브 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법 v-if: data boolean 값이 true면 화면에 영역을 표시할 수 있다. v-for: 데이터 속성의 개수만큼 화면에 요소를 반복하여 출력할 수 있다. 목록을 표시해야 할 때, 유용하게 사용할 수 있는 기능 이외에도 자주 사용되는 디렉티브 v-bind v-on v-model computed : data가 바뀌면 값이 바뀌는 값을 정의 watch : data가 바뀌면 실행되는 함수 웬만하면 computed로 해결하는 것이 좋다.

액시오스 뷰에서 권고하는 HTTP 통신 라이브러리 Promise 기반의 HTTP 통신 라이브러리이며, 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다. → 바로 활용하기 좋다. ⚠️ 오픈 소스 활용할 때 참고할 것 : star 수, commits, contributors, 최근 commit 이력 https://littlebitawesome.tistory.com/entry/%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC 비동기 처리 비동기 처리 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성 자바스크립트의 비동기 처리 패턴 callback : 특정 로직이 끝났을 때 원 li..

뷰 라우터 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션(spa)을 구현하거나, 페이지간 이동을 구현할 때 사용하는 라이브러리 페이지를 이동할 때 url이 변경되면, 변경된 요소의 영역에 컴포넌트를 갱신해주는 역할을 한다.(DOM을 갱신하는게 아니라 SPA의 특징대로 컴포넌트만 갱신해서 화면에 보여주는 것) 일반적 라우터랑 의미가 좀 다르게 사용되는 듯! ⚠️라우팅 : 네트워크에서 경로를 선택하는 프로세스, 상호 연결된 두 노드 간의 통신은 여러 경로를 통해 이루어질 수 있는데 라우팅은 미리 정해진 규칙을 사용하여 최상의 경로를 선택하는 프로세스이다. 라우터는 컴퓨팅 디바이스와 네트워크를 다른 네트워크에 연결하는 네트워킹 디바이스이다. 라우터는 주로 3가지 기본 기능을 수행한다. 1. 경..

뷰 컴포넌트 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능 재사용성이 올라가고 빠르게 화면을 제작할 수 있습니다. 지역 컴포넌츠와 전역 컴포넌트의 차이점 전역 컴포넌트 전역으로 사용해야 되는 컴포넌트만 사용한다. 지역 컴포넌트 components: 여러개임! 특정 컴포넌트 하단에 어떤 컴포넌트가 등록되어있는지 한 눈에 알 수 있다. 일반적으로는 지역 컴포넌트를 사용한다. 컴포넌트와 인스턴스와의 관계 "인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다. " 컴포넌트 통신 방식 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖습니다. 따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 합니다. 상위에서 하위로는 데이터를..

new Vue(); 인스턴스의 속성, API들 인스턴스에서 사용할 수 있는 속성과 API는 다음과 같습니다. new Vue({ el: , template: , data: , methods: , created: , watch: , }); el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) template : 화면에 표시할 요소 (HTML, CSS 등) data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성 methods : 화면의 동작과 이벤트 로직을 제어하는 메서드 created : 뷰의 라이프 사이클과 관련된 속성 watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성 인스턴스 라이프 사이클 다이어그램 라이프 사이클 훅 뷰의 라이프 사..

MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리 view : 브라우져에서 사용자에게 비춰지는 화면(html, dom을 이용해서 js로 조작) 이벤트를 dom listener를 사용하여 js에 지정했던 특정 로직(모델)에서 실행 js의 데이터가 변했을 때, data Bindings → 화면에 반영 mdn : api, 문법들을 확인할 수 있는 사이트! object define property : 객체의 속성을 재정의 하는 api