7 로그인 상태 관리와 스토어

source: categories/study/vue-beginner-lv4/vue-beginner-lv4_7.md

vue training lv4

7.1 메인 페이지 개발을 위한 브랜치 안내 및 코드 정리

Note

git diff

git code diff

7.2 로그인 동작 확인 및 구현 방향 복습

token에 대해서 API를 어떻게 처리해야되는지 알아보기 전에, 로그인을 완료하면 메인 페이지로 이동을 해야겠죠?
그런 부분에 대해서 라우터를 생성하고 로그인 후 메인 페이지 컴포넌트로 이동을 하게끔 작업해보겠습니다.

다음 시간

메인 페이지 생성
로그인 후 메인 페이지로 이동

7.3 메인 페이지 라우팅 구현 및 확인

로그인을 하고나서 이동할 페이지의 라우터를 우선 정의해보도록 하겠습니다.

다음 시간

로그인 후 메인페이지로 이동하는 기능 구현 (이런걸 programmatic navigation이라고 함)

Note

git diff

git code diff

7.4 자바스크립트로 페이지 이동하기 구현 및 설명

programmatic navigation

로그인 이후 페이지 이동을 어떤식으로 구현할 수 있는지 살펴보겠습니다.
위 문서는 vue router 라이브러리에서 제공하는 공식문서입니다.
Programmatic Navigation 관련 글인데 원래는 <router-link>라는 태그를 활용해 클릭을 활용해 링크 이동을 구현했습니다.
이는 HTML쪽 기능입니다.

지금 저희가 구현하려는 부분은 로그인 후 메인 페이지로 이동이므로 자바스크립트로 처리해야됩니다.

위 문서를 읽어보면 programmatic navigation을 활용해 더 다양한 기능을 구현할 수 있습니다.

Note

git diff

git code diff

7.5 로그인 이후의 동작 설명

현재 상황

로그인 후 : 누구누구님이 로그인 하였습니다. 메시지를 보여줬음
현재 : 로그인 후 - 메인페이지로 이동. 그런데 이 메시지를 똑같이 보여주고싶은데 어떻게 해야될까?

나중에 처리할 것들

로그인 후 로그아웃 버튼 띄우기

현재 컴포넌트 구조

- Root
- App
    - AppHeader
    - LoginPage
        - LoginForm
  

LoginForm의 username을 AppHeader 컴포넌트로 전달해야되는 상황

방법

EventBus 등..

7.6 컴포넌트 간 데이터 전달 방법 3가지와 구현 방향

현재 LoginForm에 있는 데이터를 LoginPage와 App을 거쳐서 AppHeader로 보내야하는 상황입니다.

저희가 배운 방법은 event emit을 통해 2번 올려서 App으로 데이터를 올리고 App에서 props를 통해 AppHeader로 내리는 방법입니다.

두번째 방법은 EventBus를 활용하셔서 LoginForm에서 AppHeader로 바로 데이터를 보내는 방법입니다.

위 두가지 방법을 사용하지 않고 가장 편하게 할 수 있는 방법은 vuex store를 활용하는 방법입니다.
store를 활용하시는게 여러모로 편합니다. (로그인 이후 인증값 저장 등등)

저희는 다음시간에 3번째 vuex store 방법으로 이를 구현해보도록 하겠습니다.

7.7 뷰엑스 설치 및 연결

개발용 라이브러리와 배포용 라이브러리 구분하기


npm i vuex
# OR
yarn add vuex

dependencies: 애플리케이션 로직과 관련된 라이브러리 목록
npm run build or yarn build 명령어를 수행하게되면 최종 빌드파일에 해당 라이브러리 자원들이 포함돼서 나감
devDependencies: 결과물에 해당 라이브러리들이 포함되지 않음 (배포할 때 포함되지 않는다는 뜻)