Vue.js 로 로그인 기능 구축하기 | Vuex 튜토리얼

소개

이 프로젝트에서는 Vue.js 와 Vuex 를 사용하여 로그인 기능을 구축하는 방법을 배우게 됩니다. 이 프로젝트는 Vue.js 컴포넌트를 Vuex 기반 상태 관리 시스템과 통합하는 방법을 이해하는 데 도움을 주기 위해 설계되었습니다.

👀 미리보기

Vue 로그인 기능 미리보기

🎯 과제

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

프로젝트 구조와 각 파일의 역할을 이해하는 방법
로그인 기능의 문제점을 식별하는 방법
Vuex 스토어와 Vue 컴포넌트를 수정하여 로그인 기능을 수정하는 방법

🏆 성과

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

Vuex 를 사용하여 Vue.js 프로젝트를 구조화하는 방법 이해
애플리케이션 상태 관리에 Vuex 적용
Vue.js 애플리케이션의 문제 해결 및 수정
Vuex 를 Vue.js 컴포넌트와 통합

프로젝트 구조 이해

이 단계에서는 프로젝트 구조와 로그인 기능과 관련된 파일에 대해 배우게 됩니다.

프로젝트 디렉토리 구조는 다음과 같습니다:

├── components
│   ├── login.js
│   └── panel.js
├── css
│   └── style.css
├── index.html
├── lib
│   ├── vue.min.js
│   └── vuex.min.js
└── store
    ├── BaseModule.js
    ├── UserModule.js
    └── index.js

주요 파일과 역할은 다음과 같습니다:

index.html: 이 파일은 애플리케이션의 진입점 역할을 하는 메인 HTML 파일입니다.
components/login.js: 이 파일은 로그인 페이지를 위한 Vue 컴포넌트를 포함합니다.
components/panel.js: 이 파일은 환영 패널을 위한 Vue 컴포넌트를 포함합니다.
store/BaseModule.js: 이 파일은 기본 Vuex 모듈을 정의합니다.
store/UserModule.js: 이 파일은 사용자 관련 데이터 및 액션을 위한 Vuex 모듈을 정의합니다.
store/index.js: 이 파일은 Vuex 모듈을 결합하고 Vuex 스토어를 생성합니다.

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

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

초기 효과

문제 식별

문제는 로그인 기능이 예상대로 작동하지 않는다는 것입니다. 사용자 이름을 입력하고 "확인" 버튼을 클릭하면 데이터는 변경되지만, 로그인 페이지가 계속 표시되고 환영 페이지가 올바르게 표시되지 않습니다.

문제를 식별하려면 store 폴더, 특히 UserModule.js 파일의 관련 코드를 주의 깊게 읽고 Vuex 에 대한 지식과 결합해야 합니다.

로그인 기능 수정

index.html 파일을 열고 <script> 태그 내의 TODO 섹션을 찾습니다.

computed 섹션에서 다음 속성으로 변경합니다:

computed: {
  welcome() {
    return store.getters.welcome;
  },
  username() {
    return store.getters["user/username"];
  },
  token() {
    return store.getters["user/token"];
  }
},

이 계산된 속성 (computed properties) 을 사용하면 Vuex 스토어에서 필요한 데이터에 접근할 수 있습니다.

methods 섹션에서 login 메서드를 다음과 같이 업데이트합니다:
```
methods: {
  login(username) {
    if (username) {
      store.commit("user/login", {
        username,
        token: "sxgWKnLADfS8hUxbiMWyb"
      });
      store.commit("say", "Logged in successfully, welcome back!");
    }
  }
}
```
이 업데이트된 login 메서드는 사용자의 로그인 상태를 업데이트하고 환영 메시지를 표시하기 위해 필요한 액션을 Vuex 스토어에 커밋합니다.

로그인 기능 테스트

index.html 파일에 변경 사항을 저장합니다.
브라우저에서 웹 페이지를 새로 고칩니다.
사용자 이름 "admin"을 입력하고 "확인" 버튼을 클릭합니다.
이제 "완료된 효과" 이미지에 표시된 것처럼 환영 패널이 표시되어야 합니다.

Completed Effect

축하합니다! 로그인 기능을 성공적으로 수정하고 코드에 필요한 수정을 완료했습니다.

요약

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

Vue.js 및 Vuex 로 로그인 기능 구축

소개