티스토리

Little bIT awesome

검색하기

블로그 홈

Little bIT awesome

littlebitawesome.tistory.com/m

까루카라 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[Vue.js 시작하기] 최종 프로젝트 - 사용자 입력 폼 만들기 & 향후 학습 방향 총정리 Reactivity : 웹의 동작들과 관련된 기능 인스턴스 : 뷰로 개발할 때 필수로 생성해야 하는 단위 컴포넌트 : 화면의 영역을 구분해서 개발하는 단위(가장 중요한 개념), 재사용성 컴포넌트 통신 : 데이터의 규칙 → 데이터 흐름 예측 props event emit HTTP 통신 라이브러리 (axios) 템플릿 문법 데이터 바인딩 : reactivity와 유사 뷰 디렉티브 : 화면을 조작하기 위해 뷰가 추가적으로 제공하는 문법 (v-) Vue CLI : 프로젝트를 생성할 때, 명령어를 사용하는 방식 싱글 파일 컴포넌트 (.vue 파일) 향후 공부 방식 공식문서의 API를 많이 보기 Style Guide 도 정독하기 cookbook: 실용적 문법, 실용적 고민들 공감수 0 댓글수 0 2023. 2. 17.
[Vue.js 시작하기] 싱글 파일 컴포넌트 .vue 파일 공감수 0 댓글수 0 2023. 2. 17.
[Vue.js 시작하기] 프로젝트 생성 도구 - Vue CLI 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 파일 밑에 정리된.. 공감수 0 댓글수 0 2023. 2. 17.
[Vue.js 시작하기] 템플릿 문법 뷰의 템플릿 문법 : 뷰로 화면을 조작하는 방법을 의미 데이터 바인딩 콧수염 괄호 (Mustache Tag) {{ message }} 디렉티브 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법 v-if: data boolean 값이 true면 화면에 영역을 표시할 수 있다. v-for: 데이터 속성의 개수만큼 화면에 요소를 반복하여 출력할 수 있다. 목록을 표시해야 할 때, 유용하게 사용할 수 있는 기능 이외에도 자주 사용되는 디렉티브 v-bind v-on v-model computed : data가 바뀌면 값이 바뀌는 값을 정의 watch : data가 바뀌면 실행되는 함수 웬만하면 computed로 해결하는 것이 좋다. 공감수 0 댓글수 0 2023. 2. 17.
[Vue.js 시작하기] axios 액시오스 뷰에서 권고하는 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.. 공감수 0 댓글수 0 2023. 2. 17.
[Vue.js 시작하기] 라우터 뷰 라우터 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션(spa)을 구현하거나, 페이지간 이동을 구현할 때 사용하는 라이브러리 페이지를 이동할 때 url이 변경되면, 변경된 요소의 영역에 컴포넌트를 갱신해주는 역할을 한다.(DOM을 갱신하는게 아니라 SPA의 특징대로 컴포넌트만 갱신해서 화면에 보여주는 것) 일반적 라우터랑 의미가 좀 다르게 사용되는 듯! ⚠️라우팅 : 네트워크에서 경로를 선택하는 프로세스, 상호 연결된 두 노드 간의 통신은 여러 경로를 통해 이루어질 수 있는데 라우팅은 미리 정해진 규칙을 사용하여 최상의 경로를 선택하는 프로세스이다. 라우터는 컴퓨팅 디바이스와 네트워크를 다른 네트워크에 연결하는 네트워킹 디바이스이다. 라우터는 주로 3가지 기본 기능을 수행한다. 1. 경.. 공감수 0 댓글수 0 2023. 2. 17.
[Vue.js 시작하기] 컴포넌트 뷰 컴포넌트 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능 재사용성이 올라가고 빠르게 화면을 제작할 수 있습니다. 지역 컴포넌츠와 전역 컴포넌트의 차이점 전역 컴포넌트 전역으로 사용해야 되는 컴포넌트만 사용한다. 지역 컴포넌트 components: 여러개임! 특정 컴포넌트 하단에 어떤 컴포넌트가 등록되어있는지 한 눈에 알 수 있다. 일반적으로는 지역 컴포넌트를 사용한다. 컴포넌트와 인스턴스와의 관계 "인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다. " 컴포넌트 통신 방식 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖습니다. 따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 합니다. 상위에서 하위로는 데이터를.. 공감수 0 댓글수 0 2023. 2. 17.
[Vue.js 시작하기] 인스턴스 new Vue(); 인스턴스의 속성, API들 인스턴스에서 사용할 수 있는 속성과 API는 다음과 같습니다. new Vue({ el: , template: , data: , methods: , created: , watch: , }); el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) template : 화면에 표시할 요소 (HTML, CSS 등) data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성 methods : 화면의 동작과 이벤트 로직을 제어하는 메서드 created : 뷰의 라이프 사이클과 관련된 속성 watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성 인스턴스 라이프 사이클 다이어그램 라이프 사이클 훅 뷰의 라이프 사.. 공감수 0 댓글수 0 2023. 2. 17.
[Vue.js 시작하기] Vue.js 소개 MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리 view : 브라우져에서 사용자에게 비춰지는 화면(html, dom을 이용해서 js로 조작) 이벤트를 dom listener를 사용하여 js에 지정했던 특정 로직(모델)에서 실행 js의 데이터가 변했을 때, data Bindings → 화면에 반영 mdn : api, 문법들을 확인할 수 있는 사이트! object define property : 객체의 속성을 재정의 하는 api 공감수 0 댓글수 0 2023. 2. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.