VueJs/VUE.JS3 Vue 3로 구현한 로그인/회원가입 화면 분석 - 1차 개발 소스 ( 현재 소스는 1차 기본적인 세팅 과 화면 구성만 한 소스 이며 추가적인 개발이 되면 계속적으로 업데이트 될 예정입니다.)안녕하세요, 개발자 여러분! 오늘은 Vue 3와 Vite를 사용하여 구현한 로그인과 회원가입 화면에 대해 살펴보겠습니다. Tailwind CSS를 활용하여 스타일링했으며, 코드를 자세히 분석해보겠습니다.프로젝트 설정Vue 3 + Vite 프로젝트 생성: npm create vite@latest user_management -- --template vuecd user_managemennpm install필요한 패키지 설치: npm install vue-router@4라우터 설정 (/src/router/index.js): import { createRouter, create.. 2024. 9. 29. Login 구현 - front - 1) 기본 세팅 및 - backend 통신 스펙 : Vue3 / Pinia / Vite framwork [ 구현전 나의 flow ] /*1) login - password 암호화 2) 암호화된 password / backend 에서 복호화 후 -> jwt 로 token 생성 3) token 값으로 localstorage 에 저장 4) token 값으로 페이지 이동시 계속 체크 5) token 만료일 경우 reflesh token 으로 token 값 갱신 6) reflesh token 값이 만료 시 로그인 페이지로 이동7) 로그인시 reflesh token 값 insert / accesstoken 값 localstorage 에 저장 */ [ 이 과정으로 가기 전 기본 적인 flow 세팅 ] 1) vite 로 이용해 vue3 project 생성 .. 2024. 4. 28. vue를 이용해 대시보드 만들기 1. VUE 파일 - Main.vue - DashBoard └ APIAverageResponseTime └ APIOperationSatus └ APITotalNumberOfCalls 2. 그래프 - 구글 Charts 3. DB - PostgreSql - mongoDB ● VUE 파일 ========================================================================== ㅇ Main.vue 메인 컴포넌트에서 각각의 차트 vue 컴포넌트를 추가해 전체적인 화면 구상을 잡는다 . └ 이렇게 관리 하게 되면 차트 추가 / 삭제 / 수정이 용이 하다. ㅇ APIAverageResponseTime.vue 해당 goole 차트를 사용하기 위해 1) node.js 에서 g.. 2022. 3. 4. 이전 1 다음
