part 3. Vue.js 세팅하기
지난 part 1과 part 2에서는 Django의 세션 인증을 위해 JWT 토큰 발급 및 재발급, Cors 설정 등을 해보는 포스팅을 했었다. 이 포스팅에서는 Vue.js에서 보내주는 사용자 정보(로그인, 회원 가입 등을 통해 전달해주는 것들)들을 어떻게 보내는지에 대한 글을 올리고자 한다.
나는 사실 python 유저다. 멋쟁이 사자처럼에서 Vue.js 프로젝트를 맡는 것이 아니었다면 이번 7–8월 내내 머신러닝과 딥러닝 분야를 공부했을 것이다. 때문에 JS 공부도 처음이라 처음 Vue.js를 시작하기 전에 2주 정도 JS 기본 문법을 찾아보면서 먼저 문법에 대해 학습했다 (당연한 이야기지만..)
Vue/CLI3 설치- npm install i -g @vue/cli
- vue create myproject? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E TestingUse history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n(vue project 폴더 설치 완료시)
- npm install --save axios
위에서 몇 가지만 설명하자면 Router는 이후 vue.js에서 사용자가 렌더링할 화면을 지정해주는 것을 지원하고 Vuex는 Vue 내에서 상태관리를 지원한다. (Vuex에 관한 자세한 내용은 뒤에가서 설명할 것이고, 렌더링 — Rendering — 이란 사용자가 작성한 코드 or 데이터를 HTML로 입력받아 해석해서 모니터로 출력해주는 역할 등을 해주는 작업을 뜻한다 — 정보통신용어기술해설)
자, 여기까지 했으면 로그인, 회원가입 기능 구현을 위한 기본적인 모듈들을 모두 받아왔다. 로그인 / 회원가입 디자인은 이후 이 글을 읽고 코드를 작성하는 사용자의 편의에 따라 다르긴 하겠지만, vue.js 내에 bootstrap 플러그인이 따로 있어서 부트스트랩을 사용해도 좋고, 직접디자인해도 좋다. 다만, 내가 하고자 하는 작업은 함께 협업하는 프론트 개발자가 직접 CSS에 정성들여 디자인 했음을 밝힌다.
나는 처음 Vuex와 Axios를 함께 사용하면서 Jquery와 Ajax를 HTML에 사용하던 시절이 떠올랐다. 장고 풀스택 할 땐 “상태관리” 같은 개념 사용을 한 적이 없던 것으로 기억하는데 왜 갑자기 Vue.js로 넘어올 땐 Action, Mutation, State 같은 개념이 도입되면서 관리해주는 것들이 생기나에 대한 의문이었다.
그런데 Vue에는 컴포넌트 별로 자신만의 상태(State, 쉽게 말해 data 옵션)를 갖고 있다. 컴포넌트별로 독립적인 자신의 데이터가 있자면 관리하기가 쉽지 않을 것이다. 그래서 어떤 데이터들은 여러 컴포넌트가 공유해야되는 상황이 있을 수 있고, 컴포넌트 별로 데이터를 따로 갖고 있다면 데이터가 중복되는 일이 발생해 데이터의 변경 관리가 쉽지 않을 것이다. (참고 — Quick Start Vue.js)
때문에 대표적으로 Login을 상태 관리의 예로 든다. 클라이언트가 로그인 정보를 요청하면 → 익명상태(State)를 인증된 유저(Authenticated)로 바꾸는 행동(Action)을 취해야 되고 →행동(Action)이 변이(Mutation)을 발생시키기 때문이다. 책이나 기술 블로그에는 이런 형식으로 언급되어 있지 않지만 나는 State →Action →Mutation → State라고 이해했다.
main.js에 변수나 모듈을 선언하면, 컴포넌트 단위 별로 상관없이 전역으로 설정된다. 여기서 router, axios, store(vuex 상태 관리 js 파일)을 전역으로 설정한 것은, router의 경우 특정 컴포넌트, views 파일로 이동하는 기능을 컴포넌트 별 <script>에 선언하는 번거로움을 피하기 위함이며, axios는 post, get, put, delete 등 기능을 router와 마찬가지로 컴포넌트 단위별로 선언하는 귀찮음을 피할 수 있다. 마지막으로 store.js를 전역으로 선언한 것은 클라이언트에서 요청한 유저 정보를 특정 컴포넌트에서만 갖고 있으면 안되고, 모든 컴포넌트에서 똑같은 State를 갖고 있어야만 하기 때문이다.
<template> <div class="formContainer"> <form class="login-box"> <p>아이디</p> <input type="text" v-model="username" name="username" label="ID를 입력하세요" /> <p>비밀번호</p> <input type="password" v-model="password" name="userpassword" label="비밀번호를 입력하세요" /> <br /> </form> <div class="login-btn"> <input type="submit" class="button" name="submit" @click="login({username, password})" value="로그인" /> <div class="login-btn-txt"> <a>아이디/비밀번호 찾기 |</a> <a class="bold"> <router-link :to="{ name: 'signup' }"> 회원가입</router-link> </a> </div> </div> </div></template>
위의 Login.vue의 두 개의 스크린샷을 천천히 읽어보면 v-model에 지정된 username, password를 값으로 받아 받아 “login”이라는 action을 실행하고, “isLogin”, “isLoginError” State 2개에 영향을 준다는 것을 알 수 있다. mapState, mapActions는 vuex 고유 모듈들인데 login.vue에서 컴포넌트 코드가 난잡해지는 것을 방지하고자 store.js에서 관리하게끔 처리한 것들이다.
세팅부터 시작했는데 이후 part 4. vue.js login axios 연결 및 상태 관리 마무리로 login을 마무리 하겠다. 예상보다 글이 조금 길어져서 part 5 에서는 회원가입 기능으로 짧게 마무리하고자 한다.
