Vue.js | 설치

1. 프로젝트 생성
vue create 프로젝트이름

2. Manually select features -> Babel, Router 선택 -> 3.X -> Y -> package.jason( 패키지는 한쪽에 모아서 관리) -> 해당 기반을 저장할지? N -> 설치 완료.

3. 부트스트랩 설치
npm install bootstrap
npm install @popperjs/core

4. main.js에 의존성 추가
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap/dist/js/bootstrap.js"

5. axios추가
npm install axios

6. axios 의존성 추가
import axios from 'axios'

7. vuex 설치
npm install vuex --save


8. 백엔드 프로젝트에 WebConfig 추가

import org.springframework.context.annotation.Configuration
import org.springframework.web.servlet.config.annotation.CorsRegistry
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer

@Configuration
class WebConfig : WebMvcConfigurer {
    override fun addCorsMappings(registry: CorsRegistry) {
        registry.addMapping("/**") // 모든 경로에 대해
            .allowedOrigins("http://localhost:9090") // 이 출처로부터의 요청만 허용
            .allowedMethods("*") // 모든 HTTP 메소드 허용
            .allowCredentials(true) // 쿠키를 포함한 요청 허용
    }
}


8. 프론트 프로젝트에서 회원가입 이라면, axios 임포트 후, script 코드 작성.

<script>
import axios from "axios";

export default {
  name: 'SignUp',
  data() {
    return {
      user: {
        name: '',
        nickname: '',
        email: '',
        phone: '',
        password: '',
        passwordConfirm: '',
      }
    }
  },
  methods: {
    signUp() {
      if (this.user.password !== this.user.passwordConfirm) {
        alert("비밀번호가 일치하지 않습니다.");
        return;
      }

      const userData = {
        name: this.user.name,
        nickname: this.user.nickname,
        email: this.user.email,
        phone: this.user.phone,
        password: this.user.password,
        passwordConfirm: this.user.passwordConfirm
      };

      axios.post('http://localhost:8080/api/v1/users/signup', userData)
          .then(response => {
            // 요청이 성공적으로 처리되면 실행됩니다.
            alert("회원가입이 완료되었습니다.");
            // 회원가입 성공 후 처리 로직, 예: 로그인 페이지로 리다이렉트
            this.$router.push('/');
          })
          .catch(error => {
            // 요청 처리 중 오류가 발생하면 실행됩니다.
            console.error("회원가입 오류:", error);
            alert("회원가입 중 문제가 발생했습니다. 다시 시도해 주세요.");
          });
    }
  }
}
</script>