Vue.js 로 소원 메모 앱 만들기 - 목표와 소망을 표현하세요

소개

이 프로젝트에서는 Vue.js 와 Element-UI 라이브러리를 사용하여 "소원 메모" 애플리케이션을 만드는 방법을 배우게 됩니다. 이 프로젝트는 사람들이 안전하고 비밀스러운 방식으로 자신의 목표, 이상, 그리고 열망을 표현할 수 있는 익명적이고 편리한 플랫폼을 제공하는 것을 목표로 합니다.

👀 미리보기

필드 유효성 검사 조건을 충족하지 못하면 다음과 같은 오류가 보고됩니다.

Form validation error message

조건을 충족하고 소원을 게시한 후의 효과는 다음과 같습니다.

Completed Effect

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비하는 방법.
소원 벽에 완성된 양식을 렌더링하는 방법.
입력 필드가 필요한 기준을 충족하는지 확인하기 위해 양식 유효성 검사를 구현하는 방법.
양식 제출 및 재설정 기능을 처리하는 방법.
이미지 업로드 및 미리보기 기능을 구현하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

Vue.js 프로젝트를 구조화하고 구성합니다.
Element-UI 라이브러리를 사용하여 양식을 만들고 사용자 상호 작용을 처리합니다.
Element-UI 유효성 검사 규칙을 사용하여 양식 유효성 검사를 구현합니다.
Vue.js 애플리케이션에서 파일 업로드 및 이미지 미리보기를 처리합니다.
상태를 관리하고 사용자 작업에 따라 UI 를 업데이트합니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비합니다.

코드 편집기에서 프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── css
│   ├── fonts
│   │   ├── element-icons.ttf
│   │   └── element-icons.woff
│   ├── index.css
│   └── wish.css
├── images
│   ├── bg.jfif
│   └── ding.png
├── index.html
└── js
    ├── index.js
    └── vue.min.js

여기서:

css는 element-ui에 대한 프로젝트 스타일이 저장되는 폴더입니다.
images는 이미지 폴더입니다.
index.html은 메인 페이지입니다.
js는 프로젝트의 종속 JavaScript 라이브러리 폴더입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

페이지는 초기화 중에 입력 상자의 유효성을 검사하지 않으며, 입력이 게시된 후 소원 게시물이 나타나지 않습니다.

소원 벽에 완성된 양식 렌더링

이 단계에서는 index.html 파일을 수정하여 소원 벽에 완성된 양식을 렌더링합니다.

프로젝트 폴더에서 index.html 파일을 엽니다.
index.html 파일에서 TODO 주석을 찾고, 코드의 문제를 관찰한 후, v-for="(item,index) in []"의 코드가 문제임을 발견하고 다음 코드로 변경했습니다.

<!-- TODO -->
<div
  class="card"
  :class="item.css"
  v-for="(item,index) in wishList"
  :key="index"
>
  <!-- ... -->
</div>

class="card" 속성을 가진 <div> 요소의 코드는 소원 벽에 완성된 양식의 이름, 내용 및 이미지 (있는 경우) 를 표시합니다.

양식 유효성 검사 구현

이 단계에서는 입력 필드가 필요한 기준을 충족하는지 확인하기 위해 양식 유효성 검사를 완료합니다.

프로젝트 폴더에서 index.html 파일을 엽니다.
Vue 인스턴스의 data 섹션에서 rules 객체를 찾아 다음 코드를 추가합니다.

rules: {
  // TODO
  name: [
    {
      required: true,
      message: "이름을 입력해주세요",
      trigger: "blur"
    },
    {
      min: 2,
      max: 4,
      message: "길이는 2 자에서 4 자 사이여야 합니다",
      trigger: "blur"
    }
  ],
  content: [
    {
      required: true,
      message: "내용을 입력해주세요",
      trigger: "blur"
    },
    {
      min: 1,
      max: 30,
      message: "길이는 1 자에서 30 자 사이여야 합니다",
      trigger: "blur"
    }
  ]
},

rules 객체의 name 및 content 속성에서 유효성 검사 규칙을 정의합니다.
- name: 이름 필드는 필수이며 2 자에서 4 자 사이여야 합니다.
- content: 내용 필드는 필수이며 1 자에서 30 자 사이여야 합니다.
이러한 유효성 검사 규칙이 적용되면 입력 필드가 지정된 기준을 충족하지 않을 때 양식에 오류 메시지가 표시됩니다.

양식 유효성 검사 오류 표시

조건을 충족하고 소원을 게시한 후의 효과는 다음과 같습니다.

완료된 효과

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.