[074] KB부트캠프: Spring+Vue 프로젝트 준비

 

2024.08.26(월)
 
Spring+Vue 1일차

 

프론트엔드와 백엔드를 동시에 배울 수 있는 기회

 

Spring과 Vue를 같이 사용하는 중이다.

 

프론트엔드, 백엔드에서 벌어지는 일(?)을

동시에 만들어낼 수 있다니 신기하다.

 

해당 내용을 배우면서 나만의 프로젝트도 시작하는게

하나의 목표! 수업 내용에 충실하자 ㅎㅎ

 

---

 

Spring + Vue

 

 

프로젝트 준비

• CH01.1 프로젝트 준비-백엔드
• CH01.2 프로젝트 준비-프론트엔드

회원관리

• CH02.1 회원관리-회원가입
• CH02.2 회원관리-로그인,로그아웃
• CH02.3 회원관리-정보 수정
• CH02.4 회원관리-비밀번호 변경

게시판

• CH03.1 게시판-백엔드
• CH03.2 게시판-프론트엔드
• CH03.3 인증 가드
• CH03.4 게시판-페이지네이션

 

---

CH01.1 프로젝트 준비 - 백엔드

 

기본 설정

• /를 요구했을 때 /resources/index.html을 리턴
• 새로 고침했을 때 CommonExceptionAdvice에서 index.html로 포워딩

 

http://localhost:8080/api/board

• 401 error: 로그인을 하지 않아서 나는 오류

 

401 ERROR

 

 

 

CH01.2 프로젝트 준비 - 프론트엔드

 

 

npm init vue frontend

 

 

기본 라이브러리 추가

• npm i
• npm i bootstrap@5 axios moment

index.html

• fontawesome CDN 추가
• 기본 골격  수정

main.js

• 처음엔 무조건 index.html을 호출해야함
• index.html에서는 main.js를 호출함
• main.js에서는 app.vue를 호출함

import './assets/main.css';
import 'bootstrap/dist/css/bootstrap.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount('#app');

 

config/index.js

• application.properties의 역할

components/layouts/NavBar.vue

• ref는 primitive 타입을 반응형으로 만들 때
• reactive는 객체를 반응형으로 만들 때

slot의 역할

• DefaultLayout 아래에 들어가는 걸 웹에 나오게해줌

 

 

Menu 구성

 

MenuGroup

• MenuItem에서 menu라는 props를 정의
• 부모한테 받아온 menus 배열을 돌면서 menu라는 이름으로 꺼내온다.
• 하나씩 꺼낸 menu를 menu라는 props로 자식에게 전달한다.

 

화면 이동 기법 (자주 사용/중요)

• router.push('/');

 

 

 

---

 

MenuItem에서 오류가 났었다(빨간줄)

 

해당 오류를 해결하느라 힘들었는데,

비쥬얼 코드를 껐다 켰더니 해결되었다.

 

이러한 오류가 있을 때에는,

한 번 껐다 켜보기 ㅎ..