[014] Vue.js Todolist 만들기

2024.05.27(월)
 
Vue.js 3일차
기본 이벤트 처리~스타일 적용을 통해서
TodoList 제작까지 실습해보았다.
 
 

---

 
원쌤의 Vue.js 퀵스타트
 

• CH01 Vue.js 소개
• CH02 Vue.js를 위한 ES6
• CH03 Vue.js 기초와 Template
• CH04 Vue 인스턴스
• CH05 이벤트 처리
• CH06 스타일 적용
• CH07 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발
• CH08 컴포넌트 심화
• CH09 Composition API
• CH10 vue-router를 이용한 라우팅
• CH11 axios를 이용한 HTTP 통신
• CH12 vue-router와 axios를 사용한 예제
• CH13 pinia를 이용한 상태 관리

 

---

 

CH05 이벤트 처리

 
5.2 인라인 이벤트 처리
v-on: 이벤트 연결자
v-on 대신 '@' 기호로 사용해도 됨
 
5.3 이벤트 핸들러 메서드

   

  <div id="app">

      <!-- v-model 대신 이벤트 모델을 활용해서 한글을 실시간 업데이트 -->

      <!-- value와 :value 차이: 바인딩의 차이 / :value의 초기값으로 name 속성값을 바인딩해둠 -->

      <!-- input에 텍스트를 입력할 때마다 changeName 함수 호출 -->

      <input id="a" type="text" :value="name" @input="changeName" /> <br />

      이름: <span>{{name}}</span>

    </div>

    ...

   methods: {

          changeName(e) {

            // 현재 이벤트가 발생한 타겟(input 요소)의 값을 가져와서 name에 넣음

            this.name = e.target.value;

          },

 

 
5.4 이벤트 객체

    <!-- 기존에 있던 changeName 함수를 화살표 함수로 변경 -->

    <div id="app">

      <input type="text" :value="name" @input="(e)=>this.name = e.target.value"; />

      <br /> 이름: <span>{{name}}</span>

    </div>

 
5.5 기본 이벤트

<div id="app">

      <div

        @contextmenu="ctxStop"

        style="position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px"

      >

        <!-- 링크 클릭시 confirmFB 함수 호출 -->

        <a href="https://facebook.com" @click="confirm">페이스북</a>

        <script src="https://unpkg.com/vue"></script>

      </div>

    </div>

    <script>

      let vm = Vue.createApp({

        name: 'App',

        data() {

          return {};

        },

        method: {

          ctxstop(e) {

            // 마운스 오른쪽 클릭시 뜨는 메뉴창으로 이동 못하게 함

            e.preventDefault();

          },

          confirmFB(e) {

            if (!confirm('페이스북으로 이동할까요?')) {

              e.preventDefault();

            }

          },

        },

      }).mount('#app');

    </script>

 
5.6 이벤트 전파와 버블링
capturing, bubbling, raising

   <div id="app">

      <!--특정 이벤트 preventdefault를 적용할 경우, prevent로 줄여쓸 수 있다 -->

      <div

        @contextmenu.prevent

        style="position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px"

      >

        <!-- 링크 클릭시 confirmFB 함수 호출 -->

        <a href="https://facebook.com" @click="confirmFB">페이스북</a>

        <script src="https://unpkg.com/vue"></script>

      </div>

    </div>

    <script>

      let vm = Vue.createApp({

        name: 'App',

        data() {

          return {};

        },

        method: {

          ctxstop(e) {

            // 마운스 오른쪽 클릭시 뜨는 메뉴창으로 이동 못하게 함

            e.preventDefault();

          },

          confirmFB(e) {

            if (!confirm('페이스북으로 이동할까요?')) {

              e.preventDefault();

            }

          },

        },

      }).mount('#app');

    </script>

 

 

CH06 스타일 적용

 
6.2 인라인 스타일
v:bind:style로 작성
카멜표기법(케밥 표기법 안됨_)
 
6.3 CSS 클래스 바인딩
클래스명 문자열을 바인딩 방법
true/false 값을 가진 객체를 바인딩 하는 방법
 
6.4 동적 스타일 바인딩

    <div id="app">

      <!-- 객체를 두개 이상 연결해줘야 할 경우 객체 배열로 연결해줌 -->

      <button

        :style="{myColor, myLayout}"

        @mouseover.stop="overEvent"

        @mouseout.stop="outEvent"

      >

        테스트

      </button>

    </div>

    <script src="https://unpkg.com/vue"></script>

    <script>

      let vm = Vue.createApp({

        name: 'App',

        data() {

          return {

            // 키:벨류여서 string 어려움 ?

            myColor: {

              backgroundColor: 'purple',

              color: 'yellow',

            },

            myLayout: {

              width: '150px',

              height: '80px',

              testAlign: 'center',

            },

          };

        },

      }).mount('#app');

    </script>

 

 
6.5 TodoList 예제
 

배열 (추가자료)

 
여러 값을 하나의 변수로 접근할 수 있는 객체
특정 위치는 index로 관리
length 속성: 배열의 길이 값
 
- 배열 생성자
Array( ) → 빈 배열을 만드는 생성 함수
 
- 리터럴을 통한 생성
const array = [ ]
 
- 2차원 배열
 
- 유사 배열
객체의 속성 명으로 인덱스(숫자)를 사용하여 값 배정
lenght 속성을 가지는 객체
 
- 배열의 순회
배열의 인덱스 정보는 필요 없고 값만 사용하는 경우: for
순회할 때 배열의 인덱스를 자동 생성: for(let 변수 in 배열)
 
배열 메서드

 
위 기재된 메서드는 자주 사용됨
→ 직접 코드 작성 필요 (실습칸 참고)
 
map, foreach, filter 등 매개변수와 연관된 메서드는 함수적 프로그래밍
→ 마치 데이터인 것처럼 매개변수를 보냄 (이해하기 어려움)
 

6.5 TodoList

 
header - body - foot
 
화면 시안 작성&확인
- 순수하게 골격을 만드는 단계
- Bootstrap 사용 (라이프러리의 CSS 파일)
 
...class container
...input-group-addon
...<div class="row mb-3">
...float-end 왼쪽 정렬
 
데이터와 메서드 정의
data의 구조를 가장 먼저 정의하고, 관찰 속성을 정의한 후, Vue 템플릿을 작성
 
어떤 데이터, 메서드를 쓸 것인가?
메서드 3가지
1) addTodo 2) deleteTodo(id) 3) toggleCompleted(id)
 
var ts=new Date.getTime() 정수가 리턴됨
 
템플릿 작성
스크립트 data와 템플릿 간의 바인딩
 
06-12.html → 06-14.html 변경된 부분 체크
?? @click.stop --> 삭제하기 않고 선택만 하겠다