8. 할 일 관리 앱 프로젝트

# 한 개의 화면이더라도 여러 컴포넌트로 쪼개는 이유 : 컴포넌트 기반 프레임워크 (앵귤러, 리액트)에서 추구하는 재사용성 때문이다. 이렇게 쪼개 놓아야 다른 페이지에서 해당 코드를 재사용하기가 수월하며, 이때 각 컴포넌트 간에 데이터를 자유롭게 전달할 수 있는 반응성이 좋아야한다.

​

# 반응형 웹 디자인 태그 추가

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width : 기기의 너비만큼 웹 페이지의 너비를 지정

initial-scale=1.0 : 페이지의 배율

​

# 파비콘 설정

파비콘 : 웹 사이트 제목의 왼쪽에 표시되는 로고

→ 기본으로 제공해주는 src/assets/logo.png 를 favicon generator 검색하면 나오는 사이트에서 ico 로 변환

​

# 보통 컴포넌트는 관례상 src/components 폴더에서 관리를 하며,

규모가 커져서 기능별로 관리해야 할 때에는 components/기능/컴포넌트.vue 의 형식으로 관리한다.

 

...
<script>
export default {
    data() {
        return {
            newTodoItem: ''
        }
    },
    methods: {
        addTodo() {
            console.log(this.newTodoItem);
        }
    }
};
</script>
...

# this.newTodoItem 에서 this는 해당 컴포넌트를 가리킨다.

​

# todoItems 의 데이터는 App.vue 에서 관리해주고, 하위 컴포넌트에서 이벤트가 발생했을 경우에는 $this.emit 을 이용하여 App.vue 로 이벤트를 전달해주었다. (실제 이벤트 구현은 상위 컴포넌트에서)