8. 할 일 관리 앱 프로젝트

8. 할 일 관리 앱 프로젝트

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

​

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

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

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

​

# 파비콘 설정

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

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

​

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

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

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

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

​

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

from http://lhwn.tistory.com/80 by ccl(A) rewrite - 2021-06-02 15:00:46