6장. 실전 애플리케이션 만들기 - 1

 

 

 

6장 - 1

 

 

 

---

06-1 할 일 관리 앱 살펴보기

<왜 할 일 관리 앱을 만들어야 하나?>

• 프런트엔드 프레임워크를 배울 때 할 일 관리 앱은 꼭 구현해 봐야 한다.
• 실무에서 서비스를 만들 때 사용하는 데이터 조작 방법(삽입, 조회, 변경, 삭제)을 간단한 코드로 구현해 볼 수 있기 때문이다.
• 기업의 실제 서비스는 이 데이터 조작 방법 4가지에서 크게 벗어나지 않고 화면을 더 추가하여 복잡도만 높여 놓은 수준이다.
• 할 일 관리 앱은 적은 코드 양으로 뷰 애플리케이션을 제작할 때 반드시 알아야 할 컴포넌트 구조화와 컴포넌트 통신을 구현해 볼 수 있다.

 

<할 일 관리 앱 살펴보기>

• 우리가 만들 할 일 관리 앱의 화면을 먼저 살펴보자.
• 완성된 애플리케이션 사이트 : https://vuejstodo-aa185.firebaseapp.com/

Vue.js Todo

 

• 아래의 그림에서 볼 수 있듯이 제작할 할 일 관리 앱은 모바일 화면에 최적화되어 있다.
• 크롬 개발자도구에서 왼쪽 위 모바일처럼 생긴 아이콘을 누르면 모바일 화면 처럼 볼 수 있다.

 

• 맨 위의 할 일 입력 창에 할 일을 입력하고 [+] 버튼을 누르거나 [Enter]를 누르면 할 일이 목록에 추가된다.
• 그리고 할 일 목록의 각 열에서 [휴지통 아이콘] 버튼을 누르면 해당 열이 삭제되고, 맨 아래에 [Clear All] 버튼을 누르면 모든 할 일이 삭제되는 간단한 웹 앱이다.
• 여기서 추가된 할 일 텍스트 데이터는 모두 브라우저 저장소인 로컬 스토리지(Local Storage)에 저장된다.
• 브라우저 저장소를 사용하면 서버와 데이터베이스를 별도로 구성하지 않고도 간단하게 자바스크립트 한 줄로 데이터를 저장하고, 삭제할 수 있다. 저장된 데이터의 형식은 키(key) : 값(value)이다.

 

로컬 스토리지에 저장된 키 형태의 데이터

• 브라우저 저장소의 종류
  • 브라우저 저장소에는 로컬 스토리지, 세션 스토리지(Session Storage), 인덱스드 디비(IndexedDB) 등 여러 가지가 있습니다. 여기서는 가장 간단하게 사용할 수 있는 로컬 스토리지를 활용합니다. 로컬 스토리지와 세션 스토리지에 대해 더 알고 싶은 사람은 아래의 사이트를 참조하라.
  • https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Web Storage API - Web APIs | MDN

 

 

반응형

 

<애플리케이션 컴포넌트 구조도>

• 이 애플리케이션이 어떤 컴포넌트들로 구조화되어 있는지 살펴보자.

 

• 페이지 1개를 4개의 컴포넌트로 쪼개 놓은 이유는 뷰를 포함한 대부분의 컴포넌트 기반 프레임워크(앵귤러, 리액트)에서 추구하는 재사용성과 연관이 있다.
• 화면 1개를 여러 컴포넌트로 쪼개 놓았을 때는 각 컴포넌트 간에 자유롭게 데이터를 전달할 수 있어야 반응성이 더 좋은 뷰 애플리케이션을 제작할 수 있다.
• 뷰 개발자에게 컴포넌트 구조화와 설계는 필수 지식이기 때문에 직접 구현해 보자.

 

 

 

---

해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---