https://imasoftwareengineer.tistory.com/34?category=772561 위 글을 참조해 TO-DO List project를 만들어 보았습니다. development environment vue.js + javascript + boot

`<li>` tag에서 v-for을 사용할 때 다음과 같은 에러가 발생했다. > Elements in iteration expect to have 'v-bind:key'

NPM 이란?뷰 CLI로 프로젝트를 구성하고 실행할 때 npmm install, npm run dev와 같은 명령어를 사용했다. NPM(node package manager)는 전 세계 자바스크립트 라이브러리가 존재하는 공개 저장소이다. 자바스크립트의 활용 범위가 넓어

ES6란?ES6는 최신 자바스크립트 문법이자 스펙이다. 개발자가 더 쉽게 코드를 작성할 수 있도록 문법을 단수화하고, 유효범위를 제한하는 등의 기능을 추가했다. const과 letconst과 let는 변수를 선언할 때 사용하는 예약어이다. ES5에서는 변수를 선언할 때

웹팩이란? 모듈 번들러이다. 서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환 도구이다. (= 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구)기본적인 취지: 애플리케이션 동자고가 관련된 여러개의 파일(ht

브라우저는 웹 페이지를 화면에 나타내는 역할을 한다. 완벽하게 그려진 html 페이지를 나타내는 것일부만 그려져 있어 추가로 더 그려야 할 것이 남아있는 html이 두가지는 차이가 있다. 클라이언트 사이드 렌더링 💚다 그려져 있지 않은 HTML 페이지를 브라우저에서

Vuex뷰엑스는 상태관리를 돕는 라이브러리. 상태(state)란? 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터를 상태(state)라고 한다. 컴포넌트가 너무 많을 때 props로 데이터를 전달한다고 하면 모든 컴포넌트에 props를 설정해줘야 한다. 이때

뷰 애니메이션뷰 프레임워크 자체에서 지원하는 애니메이션 기능으로, 데이터 추가, 변경, 삭제에 대해서 fade in, fade out 등의 여러 가지 애니메이션 효과를 지원한다. ❗:key 속성은 v-for 디렉티브를 사용할 때 지정하는 게 좋다. 뷰 모달input b

현재 애플리케이션 구조의 문제점할 일을 입력했을 때 바로 목록에 반영 X할 일을 모두 삭제했을 때 할 일 목록에 바로 반영 X문제 해결을 위한 애플리케이션 구조 개선같은 데이터 속성을 사용하기 위해 최상위(루트) 컴포넌트 App 컴포넌트에 items라는 데이터를 정의하

저장된 할 일 목록을 표시직접 텍스트를 입력하는 대신 로컬 스토리지의 데이터 개수만큼 목록에 추가하여 표시해보자. 로컬 스토리지 데이터를 뷰 데이터에 저장뷰 데이터의 아이템 개수만큼 리스트 아이템 표시 push()는 배열의 끝 요소에 배열 아이템을 하나씩 추가하는 자바

todolist 살펴보기간단하면서도 반드시 알아야 할 컴포넌트 구조화와 컴포넌트 통신을 구현해볼 수 있음. 추가된 할일 텍스트 데이터는 브라우저 저장소인 로컬 스토리지에 저장된다. 브라우저 저장소를 사용하면 서버와 db를 별도로 구성하지 않고도 간단하게 js 한줄로 d

html 파일에서 뷰 코드 작성 시의 한계점 코드 복잡해지고..가독성 떨어짐\-> 싱글 파일 컴포넌트 체계 : .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자.vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다. 뷰 CLI싱글 파일

뷰 템플릿이란?뷰의 템플릿은 html, css등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해주는 속성이다. 데이터 바인딩html 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다

웹 앱의 HTTP 통신 방법웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 한다. 과거의 웹 사이트가 정적인 텍스트나 간단한 이미지를 나타내는 데 그쳤다면 .. 이제는 사용자와의 상호작용에 따라 데

라우팅이란?라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야 함 😁라우팅이란 웹 페이지 간의 이동방법으로 싱글 페이지 애플리케이션에서 많이 사용한다 (싱글 페이지 패턴 : 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을

컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 잇는 블록을 의미함. 컴포넌트 등록하기1\. 지역 컴포넌트 : 특정 인터페이스에서만 유효한 범위를 갖음2\. 전역 컴포넌트 : 여러 인스턴스에서 공통적으로 사용전역 컴포넌트 등록 전역 컴포넌트에서 모든 인스턴에 등록하려

뷰 인스턴스 생성자new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능을 미리 특정 객체에 저장해 놓고, 새로운 객체를 생성할 때

리액트와 앵귤러를 잠깐씩만 건들여보았던 나는 vue.js도 궁금해졌다. 그래서 공부해보기로 함 😶Vue.js란 무엇인가?웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크Vue.js의 역사 뷰의 창시자 에반은 앵귤러의 데이터 바인딩 방식과 돔에 접근하지 않고도 데이