abcdefghklpqrstuvwxyz

애플리케이션 구조 개선현재 todoApp은 데이터를 입력했을 때 목록에 바로 반영되지 않으며, clear all 버튼을 눌렀을 때로 목록에 바로 반영되지 않는다. 4개의 컴포넌트로 분리했기 때문에 한 영역에서의 처리 결과를 다른 영역에서 감지하지 못하는 것이다. 그렇다고 하나의 컴포넌트 안에서 데이터 저장, 조회, 삭제를 모두 처리하는 것은 비효율적이다. TodoInput의 newTodoItem과 TodoList의 todoItems은 모두 '할 일' 이라는 같은 데이터 속성을 사용한다. 최상위 컴포넌트인 App 컴포넌트에서 '할 일' 데이터를 정의하고 하위 컴포넌트에 props로 전달한다면 위의 문제점들을 해결할 수 있다. App 컴포넌트에서 데이터 조화, 추가, 삭제를 하고 하위 컴포넌트들은 요청(이벤..

프로젝트 생성 및 초기 설정vue create [프로젝트명]으로 프로젝트 생성 awesome icon 사용 (index.html)link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 컴포넌트 생성할 일 관리 앱의 컴포넌트 구조는 헤더, 입력, 목록, 푸터로 구성된다. 컴포넌트 폴더에 To..

Vue의 template은 html, css 드으이 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해 주는 속성이다. template 속성 및 문법데이터 바인딩데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다.1. 텍스트 보간법 - {{ }}template>  span>{{ msg }}span>template>script>export default {  data() {    return {      msg: 'Hello Vue'    }  }}script>이중 중괄호 태그 내 msg 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체된다.2. HTML 출력 - v-html이..

axios는 HTTP 요청을 보내기 위한 라이브러리로, Vue에서 비동기 통신을 쉽게 처리할 수 있다. axios APIaxios.get('url').then().catch(): 해당 url 주소에 대해 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 밥아올 때 오류가 발생하면 catch()에 정의한 로직이 수행된다.axios.post('url').then().catch(): 해당 url 주소에 대해 HTTP POST 요청을 보낸다. then()고 catch()의 동작은 위와 같다.axios{( 옵션 속성 )}: HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다. 데이터 요청을 보낼 URL, HTTP 요청 방식..

라우팅: 웹 페이지 간의 이동 방법 서버 측 라우팅 / 클라이언트 측 라우팅서버 측 라우팅은 사용자가 방문하는 url 경로에 기반하여 서버가 응답을 보내는 것을 의미한다. 전통적인 서버 렌더링 웹 앱에서 링크를 클릭하면 브라우저는 서버로부터 html 응답을 받고 새 html로 전체 페이지를 다시 로드한다. 그러나 싱글 페이지 애플리케이션(SPA)에서는 클라이언트 측 js가 탐색을 가로채고 새 데이터를 동적으로 가져와 전체 페이지를 다시 로드하지 않고 현재 페이지를 업데이트할 수 있다. * 싱글 페이지 애플리케이션(SPA): 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 ..

컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미한다.컴포넌트를 등록하는 방법은 전역과 지역이 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 컴포넌트 정의하기template>  button @click="count++">당신은 {{ count }} 번 클릭했습니다.button>template>script setup>import { ref } from 'vue'const count = ref(0)script>위 코드는 Vue 3dml 을 사용한 단일 파일 컴포넌트(SFC)이다. Vue 3에서는 Composition API를 사용하여 상태 및 로직을 구성할 수 있는 새로운 기능인 을 제공한다. 을 사용하면 템플릿과 상태 및 ..

2024.05.24 - [분류 전체보기] - Vue.js 개발 환경 설정 (vs code) Vue.js 개발 환경 설정 (vs code)* 브라우저: chrome* 에디터: vs code 1. node.js 설치(설치되어 있으므로 생략) 2. Vue CLI 설치Vue CLI: Vue.js 프로젝트를 생성하고 관리하기 위한 도구npm install -g @vue/clivue --version3. 새로운 Vue.js 프로젝트gamzaggang7.tistory.com 이전에 생성한 프로젝트에서 화면에 Hello Vue를 출력해보자. 현재 화면은 App.vue를 통해 출력되고 있다. App.vue에서 HelloWorld.vue를 가져와 아래와 같은 화면이 보인다. App.vue를 다음과 같이 수정한다.templ..

* 브라우저: chrome* 에디터: vs code 1. node.js 설치(설치되어 있으므로 생략) 2. Vue CLI 설치Vue CLI: Vue.js 프로젝트를 생성하고 관리하기 위한 도구npm install -g @vue/clivue --version3. 새로운 Vue.js 프로젝트 생성vue create [프로젝트명]위 명령을 실행하면 프로젝트 초기 설정을 선택하는 인터페이스가 나타난다.Default ([Vue 3] babel, eslint): Vue 3을 사용하며, Babel과 ESLint를 포함한 기본 설정을 사용Default ([Vue 2] babel, eslint): Vue 2을 사용하며, Babel과 ESLint를 포함한 기본 설정을 사용Manually select features: 프로..