[Vue] 로그인 기능 만들어보기

Vue + Vite로 간단한 로그인 기능 만들기

본 포스팅은 axios를 활용한 API 호출을 가정하고 작성했습니다.

vue로 아주 빠르고 간단한 로그인 기능을 만들어보려 한다.
vite 패키저를 이용해서 vue, javascript 기반의 프론트엔드 화면을 구성해보자!
프론트엔드를 처음 실습해보는 단계로 아주 간단하게 만들거다.
vite, vue, 모두 처음 써보는 상황으로 환경 설정부터 시작하겠다!

1. 환경설정

Node.js 설치

• Node.js 다운로드 페이지에서 설치
• 설치 후 터미널에서 아래 명령어로 확인
  ( default로 C:/ProgramFiles/node.js 경로로 깔릴 것 )

npm --version

---

2. 프로젝트 생성 (vite + vue3)

npm create vite@latest {프로젝트 이름} --template vue

• 프레임워크 선택: Vue
• 언어 선택: JavaScript

이후 아래 명령어를 차례로 입력하여 실행 환경 구축

cd {프로젝트 이름}
npm install
npm run dev

브라우저에서 localhost 주소로 접속하여 기본 페이지가 보이면 성공!

---

3. 프로젝트 폴더 구조

Vite 패키저로 생성된 기본 프로젝트 폴더 구조는 아래와 같다.

/project-root
├── src
│   ├── assets
│   ├── components
│   │   ├── StartMain.vue
│   │   ├── Signup.vue
│   │   └── Homepage.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── package.json
├── index.html
└── vite.config.js

---

4. Bootstrap 설치

npm install bootstrap

오른쪽이 기본으로 깔렸을때 package.json이고, 왼쪽은 bootstrap 을 설치했을때의 package.json이다. 잘 설치 됐음을 확인했으면,

main.js에서 import 해 놓자!

• main.js에서 bootstrap import

import 'bootstrap/dist/css/bootstrap.min.css';

---

5. 컴포넌트 파일 구현

StartMain.vue (로그인 화면)

이제 로그인 기능을 구현하기 위해 필요한 page들을 만들거다.

크게 로그인 화면, 회원가입 화면, 로그인 했을 때 들어갈 hompage 3개로 나눴다.

작은 단위의 개발이고 페이지가 곧 기능이라 components 폴더에 정리했다.

(나중에 기능별로 빼 놓을 게 있다면 components, 페이지별로 구현할 pages 폴더를 갖춰가면 굿~)

• Template 영역

  이쁘게 꾸미는건 패스하고, 로그인 기능만 구현해 보는게 목표다. 따라서 정말 필요한 코드들만 구성했다.

  html (template) 부분에 필요한 input, button 태그들만 적어봤다.

  ID, PW만 입력해서 로그인, 회원가입하는 버튼들이 뜬다.

<div class="container mt-5">
  <h2>로그인</h2>
  <input v-model="userId" class="form-control mb-2" placeholder="ID" />
  <input v-model="password" type="password" class="form-control mb-3" placeholder="Password" />
  <button class="btn btn-primary me-2" @click="login">로그인</button>
  <button class="btn btn-secondary" @click="goToSignup">회원가입</button>
</div>

• Script 영역 (로그인 함수)

  이제 script 일부분을 작성해보자.

  userId, password를 반응형으로 선언해 줬다면, 이제 비동기 방식으로 해당 ID, PW가 회원 데이터에 존재하고 일치하는지 확인하는 api를 호출한다.

  만약 데이터가 일치한다면 response로 ture, 일치하지 않는다면 false가 출력되게 설정했다.

const login = async () => {
  try {
    const response = await axios.post('/api/users/login', {
      userId: userId.value,
      password: password.value
    })

    console.log(response)

    if (response.data === true) {
      alert('로그인 성공!')
      router.push('/home')
    } else {
      alert('로그인 실패. ID 또는 PW를 확인하세요.')
    }
  } catch (error) {
    console.error('로그인 요청 실패:', error)
    console.error(error);
    alert('서버와 통신 중 문제가 발생했습니다.')
  }
}

로그인이 성공했을 때, router 통신으로 홈페이지 화면으로 넘어가고 싶다.

아직 router.js를 만들지 않았지만, 우선 홈페이지의 path를 ‘/home’로 지정하고 코드를 짜준다.

router를 호출하기 위해선 ‘vue-router’를 import해와야 한다. 아래 코드를 선언하고 router 함수를 사용하면 된다.

import { useRouter } from 'vue-router'
const router = useRouter()

---

Signup.vue (회원가입 화면)

이제 회원가입 화면을 만들어 보자.

• Template 영역
  회원 가입 화면의 html도 StartMain.vue와 마찬가지로 template 영역에는 정말 필요한 input 태그와 ‘가입하기’ 버튼만 넣어줬다.
  

<div class="container mt-5">
  <h2>회원가입</h2>
  <input v-model="userId" class="form-control mb-2" placeholder="ID" />
  <input v-model="userName" class="form-control mb-2" placeholder="이름" />
  <input v-model="nickname" class="form-control mb-2" placeholder="닉네임" />
  <input v-model="password" type="password" class="form-control mb-2" placeholder="비밀번호" />
  <input v-model="phoneNumber" class="form-control mb-3" placeholder="전화번호" />
  <button class="btn btn-success" @click="register">가입하기</button>
</div>

• Script 영역 (회원가입 함수)
  script를 살펴보자.
  필요한 입력값들을 반응형으로 선언해 줬다면 아래 코드 처럼 비동기 방식으로 회원 정보를 탐색하고 없다면 등록하는 함수를 만든다.

const register = async () => {
    try {
      const response = await axios.get('/api/users/all')
      const users = response.data
      console.log(response.data)

      const isDuplicate = users.some(user => user.userId === userId.value)
      if (isDuplicate) {
        alert('이미 존재하는 ID입니다. 다른 ID를 입력해주세요.')
        return
      }

      // 중복 없으면 회원가입 진행
      await axios.post('/api/users', {
        userId: userId.value,
        userName: userName.value,
        nickname: nickname.value,
        password: password.value,
        phoneNumber: phoneNumber.value
      })

      alert('회원가입 성공! 로그인 화면으로 이동합니다.')
      router.push('/start')
    } catch (error) {
      console.error(error)
      alert('회원가입 중 오류가 발생했습니다.')
    }
  }

get으로 api를 호출하여 저장된 회원 데이터를 가져온다.

가져온 회원 정보 중 입력값으로 넣은 userId와 같은게 있다면 이미 존재하는 ID라고 알림을 띄워준다.

여기선 ID만 체크했지만, 나중에 좀 더 구체적으로 만들려면 이름과 비밀번호, 전화번호를 비교해서 이미 존재하는 회원인지, 비밀번호가 규칙에 맞는지 확인하는 코드도 만들어주면 된다.

만약 중복되는 ID가 없다면, post로 입력된 회원가입 정보를 api로 보내 저장하고 “회원가입 성공!”문구를 띄워준다.

그러고 router를 이용해 StartMain화면으로 돌아가 다시 로그인 하게 만들면 된다.

여기서도 아직 router.js에 코드를 적지 않아 StartMain.vue의 경로가 적혀있지 않지만, 적을 path를 “/start” 미리 적어준다.

---

Homepage.vue (홈페이지 화면)

로그인 성공한다면 실행할 페이지다.

홈페이지 화면은 각자 만들고 싶은 구성을 구현하면 된다!

나는 우선 로그인 기능을 얼른 만들어 보는게 목표라 “로그인을 축하합니다!” 간단한 문구만 출력되게 적어놨다.

---

7. vue-router 설치 및 설정

라우터 설치부터 하자.

npm install vue-router@4

설치가 끝난 뒤, src 폴더에 router.js 파일을 만들어 준다.

• router.js 설정

import { createRouter, createWebHistory } from 'vue-router';
import StartMain from './components/StartMain.vue';
import Signup from './components/Signup.vue';
import Home from './components/Homepage.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: StartMain },
    { path: '/start', component: StartMain },
    { path: '/signup', component: Signup },
    { path: '/home', component: Home },
    { path: '/:pathMatch(.*)*', redirect: '/start' }
  ]
});

export default router;

import { createRouter, createWebHistory } from 'vue-router'; import 해온다.

createRouter 함수와 createWebHistory함수를 이용해 route할 component 정의 할 거다!

우선 router로 연결할 vue파일들을 import 해온다.

다음으로, component 파일을 구현할 때 임의로 적어줬던 path들을 이제 적어주면 된다.

path가 ‘/’ 인 것은 시작화면도 StartMain으로 지정하겠다는 의미이다.

path가 "/:pathMatch(.*)*" 인 것은 지정된 경로 외의 나머지 경로들도 StartMain으로 열리게 하겠다는 건데,

일반적으로는 wrong.vue를 만들고 에러 페이지를 지정해준다.

이제 적어둔 path로 router를 이용해 push하면 연관된 component.vue가 실행되는 것이다.

경로가 바뀌는 것 같지만 실상은 SPA이다!

---

8. App.vue 및 main.js 수정

마지막으로 App.vue와 main.js에서 간단한 코드 수정을 해주면 된다.

• main.js

  필요한 함수나 파일을 import해오고 나서,

  나는 axios를 사용했으므로 이를 불러올 코드 2줄과

  App.vue를 mount할때 router도 사용하겠다는 코드를 입력하면 된다.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

axios.defaults.baseURL = "http://localhost:8080";
axios.defaults.headers.common["Content-Type"] = "application/json";

createApp(App).use(router).mount('#app');

• App.vue

       main.js를 작성했다면, App.vue에서는 router-view만 작성해주면 된다.

<template>
  <router-view></router-view>
</template>

로그인 기능 구현이 끝났다! 🎉

터미널에서 npm run dev 를 실행해서 확인해보자~!!

아주 간단한 로그인 기능이여서 이걸 기반으로 이쁘게 페이지도 꾸미고 여러 기능을 담은 homepage도 만들면 된다.

회고
사실 각각의 component 파일들과 router.js 등 파일을 구현하는건 많이 어렵지 않았다.
제일 어려웠던건 api로 통신하는 것이였다.
백엔드도 배워보지 않아서 에러가 왜 나는지, 어떤 에러인지, console에 log를 출력해보며 디버깅 할 때 어디서 어떻게 해와야 하는지 좀 서툴렀다.
이래서 프론트엔드와 백엔드를 아예 구분지을 수 없다고 하나보다,,,
백엔드 단의 코드를 볼 줄 알면 프론트엔드 단의 에러를 쉽게 찾아낼 수 있다는게 당연한 말이지만, 이제서야 체감이 되는 경험이었다.