[KB IT's Your Life 6기] 13. 백엔드 과정 복기 그리고 풀스택 세팅(MAC)🔥 : spring + tomcat + mysql + vue

 

#0. 들어가는 말

안녕하세요! KB ITYL 6기 기자단 조자영 입니다 🌱

분명 얼마전까지 5월 말이었는데 순식간에 7월이 되었습니다! 그말은 즉, 저희의 교육 과정이 끝나가고 있고 프로젝트 기간이 다가온다는 것과도 같은데요!! 😽 그렇다면 지금까지 했던 교육에 대한 정리가 또 한번 필요하겠죠?

 

벌써?

 

오늘의 글은 정말 걱정되었고 동시에 기대되었던 백엔드 개발 교육 과정의 후기입니다!

 

먼저 정말 길고 어려웠던 과정을 모두 수료한 훈련생 여러분 모두 고생 많으셨습니다 (저포함^^) 👏👏👏 4월에 시작된 교육이 드디어 오늘 끝났네요...! 🔥 기본 언어부터 데이터베이스와 프레임워크, 로컬 베포 등 기본적인 백엔드 학습 플로우를 전부 배웠기에 정말 알찬 시간이었습니다. (이제 저희는 어엿한 풀스택 개발자입니다^^V)

 

그러면 아래에서 백엔드 교육 과정 커리큘럼과 3개월 간의 백엔드 공부 과정에 대해서 알아보고, 앞으로 있을 프로젝트 대비 맥북 세팅에 대해서도 정리를 해보도록 하겠습니다 👍

 

모두 집중해주세요! 맥북 세팅이 필요하신분은 더욱 주목!!

 

나는야풀스택개발자

 

---

#1. 백엔드란?

백엔드 개발자 교육과정에 대해서 관심있으신 분들을 위해 간단하게 백엔드가 무엇인지 설명드리고 다음으로 넘어가보겠습니다. 

( 제 이야기를 넣어서 함께 설명해볼게요 )

 

그런데 혹시 백엔드가 뭐야?

뭐냐옹

 

저는 다양한 친구들을 만나며 이 질문을 많아 받았습니다. 특히 고등학교 친구들은 저와 모두 다른 학과여서 오랜만에 만나 근황토크를 할 때면 꼭 저질문을 받았습니다. (평소처럼 개발 이야기를 하다보니 용어도 섞어서 이야기를 해서 ㅎㅎ)

 

저는 그때마다 어떻게 설명을 했을까요? 제대로 했을까요?

 

제 대답은 항상

 

 

'어,,, 프론트엔드의 반대? 서버단? 너희가 보는 화면 디자인 개발 말고 그 뒤에,,

네트워크랑 데이터 관련해서 개발하는 부서야'

 

였습니다. 무언가 말이 깁니다.

쪼롭

 

사실 틀린 부분은 아니라고 생각합니다. 맞는 설명이기는 하지만 어딘가 모르게 말이 길고 포괄적인 것 같죠?

한 번도 '백엔드란 무엇인가' 정의내려보지 않았는데, 이번 글을 작성하면서 정리해본 백엔드는

 

'사용자가 볼 수 없는 영역인 DB와 서버를 관리하는, 즉 화면 뒤에서 데이터를 처리하고 관리하는 역할' 이었습니다 🧚🏻

 

그래서 흔히 '백엔드 개발을 한다'라고 함은, 사용자가 기능을 사용하며 발생하는 데이터들을 처리 및 관리하고 (API 개발 및 DB 관리) 기능을 가진 플랫폼이 동작하는데 필요한 서버를 구축 및 관리하는 역할을 의미한다고 이해해주시면 됩니다.

 

물론 이 밖에도 다양한 일들이 있겠지만, 간단하게 정리해보자면 이와 같습니다 (‘•̀ ▽ •́ )✎

 

그러면 아래에서 KB IT's Your Life 6기의 백엔드 개발 교육 과정에 대해서 소개해볼게요 😸💖

 

레고

---

#2. 백엔드 개발 교육 과정 소개

지금부터 초기에 저장해두었던 공고 자료를 함께 보면서 백엔드 개발 교육 과정 커리큘럼에 대해서 더 자세하게 알아볼게요!

저희 백엔드 과정은 4월 14일에 시작되었습니다! 백엔드 개발을 위한 기본적인 JAVA 언어에 대해서 배우고 그 뒤에 DB 를 배우며 JAVA 활용 JDBC 를 학습했습니다. 그 뒤에 드디어 Spring 을 배우며 진짜 백엔드 개발을 시작했습니다. 😁

 

1) JAVA

백엔드 개발의 기초 중 기초! 자바 문법과 객체지향 프로그래밍 개념부터 시작했습니다. 

마지막으로 공부했던 자바가 2020~2021년이어서... 정말 필요했던 시간이었습니다..😂

 

프로젝트를 하다보면 사실 자바 문법을 그냥 간과하게 되는 경향이 있지만, 언제나 기본이 잘 가꾸어져 있어야 그 뒤를 잘 할 수 있는 법. 그런 의미에서도 소중한 자바 및 객체 지향 공부 기간 이었습니다. 

 

디자인패턴도 아주 자세하게 알려주셔서 도움이 많이 되었습니다 💖

(정처기나 면접 때 꼭 공부해야하는 부분인거 다들 아시죠?)

 

자바 커리큘럼

 

2) DB

MySQL : SQL 문법 + 워크벤치 실습

DB 파트의 시작은 MySQL이었습니다. 기초적인 SQL 문법부터 차근차근 배워나갔고, SELECT, INSERT, UPDATE, DELETE 같은 기본 쿼리문은 물론 JOIN, GROUP BY, 서브쿼리 같은 조금 더 복잡한 내용까지 다뤘습니다. 

 

실습에선 MySQL Workbench를 활용했는데, SQL 명령어를 직접 입력하면서 테이블을 만들고, 데이터를 삽입하거나 수정해보는 과정을 통해서 훨씬 더 쉽게 익힐 수 있었습니다. 저는 이전에 백엔드 개발에서 많이 사용해보았었기 때문에 훨씬 수월하게 진행할 수 있었어요!

 

가장 기억에 남는 부분은 사용자 생성 및 권한 관리였습니다! 보통은 로컬에서는 root , 배포 후에는 해당 IP 로만 사용을 했었는데, 따로 권한을 제한하여 사용자를 생성하고 DB 를 지정하는 실습을 해보며 또 새로운 내용을 배울 수 있었습니다. 

 

그리고 이 시기 때 SQLD 자격증을 공부할 시기였어서 더욱 도움이 되었습니다 ㅎㅎ 

 

사용자 생성 후 연결

 

 

JDBC : 자바로 DB를 연결하고 제어

MySQL 문법을 익혔다면, 그 다음은 자바에서 이 DB를 어떻게 연결하고 다루는가를 배우는 단계입니다!

JDBC(Java Database Connectivity)를 활용한 DB 연동을 통해 SQL 쿼리를 실행하고, 결과를 받아오고, 데이터를 조작하는 방법을 배웠습니다 👍

 

Connection, PreparedStatement, ResultSet 같은 객체들을 이용해서 DB에 안전하게 접근하는 코드를 작성해보면서, 자바와 DB 사이에 어떤 흐름으로 데이터가 오가는지를 실습을 진행했어요! 

 

사실 항상 Springboot + JPA 가 모든것을 대신 해줬어서 자바 코드로 DB 를 조작하는건 해보지 않았었기 때문에 처음엔 굉장히 어색했는데, 막상 또 해보니 이것도 유용한 경험이라는 생각이 들었습니다 😸🌱

 

MongoDB : NoSQL DB 사용

마지막으로는 RDB가 아닌 NoSQL, 그 중에서도 대표적인 MongoDB를 배웠습니다. 

 

SQL과는 다르게 테이블이 아니라 도큐먼트(Document) 형식으로 데이터를 저장하는 구조라서, 처음엔 조금 생소했는데 오히려 유연한 구조 덕분에 더 편한 느낌도 있었고 왜 비정형 데이터에 몽고디비를 많이 쓰는지 직접 깨달아볼 수 있었습니다.

 

MongoDB 학습에선 3T for MongoDB라는 GUI 툴을 활용해서 세팅을 해보고 추가한 도큐먼트를 확인하는 실습을 진행했습니다. 그 이후로는 코드를 작성하면서 진행을 했어요! 쿼리는 MongoDB만의 문법으로 작성해봤는데, RDB랑은 또 다른 재미가 있다고 느꼈던 파트였습니다. (물론 전 여전히 RDBMS 편이에요^^💖) 

제가 MongoDB를 세팅하면서 작성한 글도 있으니, 이 글 하단에 참고 자료로 함께 첨부해두겠습니다 😁

 

 

관련 학습 글 : 세팅부터 개발까지

[DB/MongoDB] MongoDB에 대해서 톺아보자🍃 : 개념부터 설치까지 (GUI : Studio 3T) (세팅 환경 : window)

 

 

 

 

3) SPRING 🌱

JSP & Servlet - 스프링의 기초를 다져주는 첫 걸음

스프링을 바로 배우기 전에, 먼저 JSP/Servlet을 통해 웹 애플리케이션의 기본 흐름을 이해했습니다. 

1) 클라이언트가 요청을 보냄
2) 서버에서 서블릿이 그 요청을 받아 처리
3) JSP를 통해 다시 응답을 내려줌

 

이 위의 흐름을 직접 구현해보며 서버에 대해 이해했습니다. HTTP 요청과 응답이 실제로 어떤 구조로 동작하는지, 그리고 그 사이에서 백엔드가 무슨 역할을 하는지를 실습을 통해 익힐 수 있어 좋았어요. 

 

저는 원래 스프링부트로 공부를 했기 때문에 아는 내용들이 많았지만, 처음부터 다시 차근차근 배우니 무척 도움이 되었고 몰랐던 부분들까지도 세세하게 알 수 있었기 때문에 꼭 필요한 순서라고 생각이 들었습니다. 

 

(처음에는 이걸 왜하나? 생각했거든요^^)

 

 

Spring Framework - 본격적인 서버 개발 시작

JSP/Servlet으로 기본기를 다진 뒤, 드디어 Spring Framework 에 대해 배우기 시작했습니다. springboot 를 활용해 개발을 해왔지만 spring 에 대해서 제대로 공부해본 적이 없어서 항상 필요성을 느끼고 있었는데, 이번 강의를 통해 확실하게 알아갈 수 있었어요. 많은 분들이 spring 에 대해서 그 학습 흐름을 궁금해하실 것 같다는 생각이 들어서 아래에 그 순서를 적어두겠습니다 🧚🏻

 

1️⃣ 스프링 컨텍스트 & 빈(Bean)

 

* 스프링 컨테이너는 애플리케이션 전체를 관리해주는 일종의 매니저

* 여기에 등록되는 객체들 → 빈(Bean)

 

빈을 등록해두면 객체를 직접 만들지 않아도 자동으로 관리해줘서 유지보수도 쉽고, 코드도 훨씬 깔끔하게 작성 가능

 

 

2️⃣ 스프링의 특징 - 의존성 주입, MVC, 컨트롤러

 

* 의존성 주입(DI) : @Autowired 하나로 객체가 주입된다

* MVC(Model-View-Controller) 패턴 : 컨트롤러, 서비스, DAO 계층을 나누어서 역할에 따라 구조를 깔끔하게 나누어 개발

 

은행권의 경우엔 스프링 레거시 구조가 많이 남아있기 때문에 KB IT's Your Life 에서도 스프링 레거시 구조(Spring Legacy) 기반으로 개발을 진행한다는 이야기를 초반에 설명들었습니다. 

 

 

3️⃣ MyBatis 연동 - DB와 스프링의 연결고리

 

* 스프링과 MyBatis를 연동하며 DB 를 관리하는 코드를 작성

SqlSessionFactory, Mapper 인터페이스 등을 설정
XML 파일로 SQL을 분리

 

→ 처음 해보는 작업이어서 오류가 많이 나왔지만, 스프링과 DB 연결의 필수 요소이기 때문에 열심히 익숙해지려고 노력했던 기억이 있습니다. 특히 Mapper 의 경우에 리소스 루트와 메인 자바 어플리테이션 폴더 구조 가 일치하지 않으면 인식을 시켜주지 않았어서, 이 부분에서 굉장히 당황했었습니다. 지금은 이런 이유로 오류를 만들지는 않아요 😺

 

 

4️⃣ CRUD 구현, REST API, Swagger, AOP

 

DB 에 데이터가 저장되고 관리되는 부분을 배우기 위해 CRUD 구현을 진행했습니다. 간단한 게시글 생성, 목록 조회, 특정 글 조회, 게시글 수정 및 삭제 등을 개발하고 이를 테스트 코드 작성을 통해 등록되는 과정을 확인했습니다. 

 

이후 REST API 에 대해서 배우면서 Talend API Tester 를 통해 직접 테스트 해보기도 하였습니다 

** 포스트맨 같은 API 테스트 툴이에요!

 

API 문서 자동화 작성을 위해 swagger 도 적용해보았고 ( 프론트엔드와의 협업에서 중요한 역할을 합니다 )

AOP(관점 지향 프로그래밍) 개념도 배우며 예외 처리, 로깅 같은 공통 기능들을 따로 분리해서 관리하는 법을 배웠습니다.

 

 

5️⃣ 웹소켓(WebSocket)과 STOMP

 

이부분이 사실 제가 가장 기대했던 부분이었는데요, 위의 기능을 활용해 실시간 통신을 구현해볼 수 있었습니다. 또한 강사님께서 로컬에서 동작하면 채팅 프로젝트를 배포를 해주셔서 같은 반 아이들과 다함께 익명 채팅을 진행했는데 정말정말 재밌었고 웹소켓과 STOMP 의 맛을 확실하게 느낄 수 있었습니다. 😊

 

 

6️⃣ Spring Security - 보안

 

또한 유저 가입의 경우 토큰 발급, 로그인 인증 처리, 권한 설정 등 보안 관련 부분도 자세하게 배워 프로젝트에 적용해보았습니다. 필터 설정이 살짝 복잡했지만 보안이 가장 중요한 부분이기도 하고 나름 재미가 있어서 즐겁게 진행했습니다 ㅎㅎ 

 

개발하다보면 정말 많이 만나는 401 과 403 error... 예외 없이 여기서도 실습 중에 발생했습니다^^

 

 

7️⃣ 톰캣과 연동 - 로컬 서버로 배포

 

위의 내용을 배우면서 진행한 톰캣 과의 연동입니다. 사실 API 실행을 위해선 이미 톰캣으로 서버 로컬 배포를 진행해야 하는데, 가운데에 끼는 것보다는 제일 마지막으로 놓자는 생각이어서 여기에 위치해있습니다. 사실상 순서는 API 개발 및 테스트의 앞쪽입니다. 

 

 

 

+) 중간 평가 

각 파트가 끝날 때마다 기본 객관식 테스트와 모듈 실습 평가가 진행됩니다.
이걸 통해 배운 내용을 복습하고, 실제로 잘 이해하고 있는지도 체크할 수 있습니다. 마음에 상처도 입을 수 있습니다.

객관식 테스트

사실 지피티가 사용이 가능하고 객관식이어서 부담이 덜합니다. 하지만 문제를 자신의 힘으로 우선 풀어보면서 어느 정도 이해를 하고 있는지, 공부는 얼마나 했는지 등 가늠이 가능합니다... 😹

 

모듈(실습) 테스트

하나의 프로젝트를 만들어볼 수 있는 실습 문제를 제공합니다. 

지피티는 사용이 불가능하고 강의 교안만 참고가 가능해요! 그래서 미리미리 공부를 많이 해두어야 합니다.

 

아니면 당일에 굉장히 당황할 수가 있어요.. ^^

 

월요일 모듈 평가를 앞두고 있는 중입니다

---

#3. 백엔드 개발 교육 과정의 목표

저의 목표 ( = 이 부트캠프의 목표 )

스프링(Spring Framework) 를 활용한 개발자 - 금융권 인재가 되는 것

 

목표를 이루었는가?

기본적인 자바 개념을 알고 서버 개발을 위한 스프링 + 톰캣 설정 , DB 연결 및 API 개발을 진행하며 금융권에서 쓰이고 있는 구조화된 스프링 레거시 구조에 대해서 경험해볼 수 있어서 좋았습니다. 이것이 이 부트캠프에 들어온 제 이유이자 목표였기 때문에 더욱 유익했고 알찼던 것 같아요!

 

현재는 전에 배운 뷰를 활용한 프론트엔드 개발을 진행하고 이를 연동하는 풀스택 실습을 진행하고 있어요!

백엔드 개발 교육을 처음부터 끝까지 듣고 나니 이러한 내용에 대해 훨씬 더 많이 이해한 상태로 수월하게 실습할 수 있었습니다. 

 

저의 목표이자 이 부트캠프의 목표인, 스프링 활용 실력 있는 개발자 양성에 많에 다가간 것 같아서 뿌듯합니다. 💖

 

---

#4. 백엔드 개발 과정  후기

저는 사실 이 과정을 선택한 이유가 지금까지 자바 + 스프링 개발에 대해서 처음부터 끝까지 차근차근 공부해보고 싶었기 때문입니다!

 

이 과정을 듣기 전에는 프로젝트와 지피티를 활용해 전체적인 개발 로직과 기능 개발을 위한 코드 작성만 해왔기 때문에 '왜 이 부분에서 이렇게 구현을 해야하는가', '왜 그렇게 동작하게 되는가' 와 같은 WHY를 생각하지 않았습니다.

 

그저 1 + 1 = 2 처럼 '이 기능엔 이 코드를 쓰고 저 기능엔 이렇게 구현을 해야한다.' 라고 생각하면서 복사와 붙여넣기를 열심히 활용했는데, 이 강의를 통해서 전체적인 로직을 이해하고 기능 하나하나 왜 이렇게 작성을 했는지, 어떤 점이 효율적인지 등 다양하게 알아갈 수 있었습니다. 👾

 

그런데 KB IT's YOUR LIFE 의 백엔드 개발 교육 과정을 통해 정말 많은 부분을 찬찬히 공부하며 사소하지만 중요한 부분들을 기초부터 다시 배울 수 있었습니다. ㅎㅎ 💖 (스프링 개발자로 레벨업!)

 

또한 이전에 해보지 않았던 기능 혹은 기술, 데이터베이스를 활용해서 실습을 진행하면서 새로운 것을 많이 익힐 수 있었습니다.

 

특히 RDBMS 만 사용해보았기 때문에 MongoDB 파트는 무척 유익했던 수업이었습니다. 보통 AI 에서 나오는 방대한 데이터나 비정형 데이터를 관리할 때는 NoSQL 을 활용하라는 이야기를 많이 들었는데, 직접 실습을 통해 사용하면서 그 이유에 대해서 납득하고 이해할 수 있어서 좋았습니다. 

 

( 저 이 과정 배울 때 우수훈련생 상품도 받았습니다 🥰 )

 

 

---

윈도우 풀스택 프로젝트 맥북 세팅 > 백엔드 part 🌱 : Spring

1. 깃허브에서 프로젝트 받아오기

인텔리제이에는 본인의 레포를 바로 복제해올 수 있는 기능이 있다. 이를 통해 빠르게 복제.

 

 

 

2. MySQL 세팅

강의 시간에 사용했던 mysql 의 경우엔 scoula 라는 사용자를 따로 만들어서 연결을 했었다. (사용자별 권한에 대한 공부를 위해서 사용자를 따로 만들고 권한을 설정하는 부분이 있었음) 하지만 맥북에는 사용자 관련 설정이 없었기 때문에 이 상태로 mysql 연결을 해버리면 바로 연결 실패. 따라서 맥북에서도 강의 때 배웠던 sql 문을 통해 사용자 설정을 해주고 연결을 한다. 

 

# 사용자 생성 + 권한 추가

- 데이터베이스 명 : scoula_db

- 사용자 명 : scoula

- 비밀번호 : 1234

- 접속 호스트 : 제한 없음

CREATE DATABASE scoula_db;

CREATE USER 'scoula'@'%' IDENTIFIED BY '1234';
GRANT ALL PRIVILEGES ON scoula_db.* TO 'scoula'@'%';
FLUSH privileges;

 

# 인텔리제이에서 연결 (mysql 워크벤치에서 연결)

아래처럼 입력을 해주고 연결합니다.

 

 

 

3. 톰캣 세팅

스프링부트를 활용해 프로젝트를 할 때는 따로 톰캣 관련 수동 설치가 필요 없었는데, 스프링은 서버 실행을 위해서 톰캣을 설치해야 한다. 

 

!! 여기서 주의 !!

 

톰캣 설치를 할 때 버전 명시를 해주자...

 

버전 명시 없이 설치하게 되면 가장 최신 버전을 설치해주기 때문에 코드와 호환되지 않을 수도 있다... 어떻게 알았을까...? 내가 겪었기 때문이다 😂 끝도없는 404의 지옥에 빠졌었다.... 

 

# Homebrew로 설치

brew install tomcat@9

 

 

** 위치 확인

brew info tomcat@9

11버전 잘못 다운받았을때... ㅠㅠ

 

4. 프로젝트 빌드 및 .war 파일 생성

인텔리제이에서 프로젝트 빌드를 실행해보자.

./gradlew clean build

 

여기서 잠깐 🤚

혹시 저처럼 아래의 권한 오류가 발생했다면??

zsh: permission denied: ./gradlew

 

gradlew 스크립트 파일에 실행 권한이 없어서 발생하는 오류이므로 간단히 실행 권한을 부여해주자.

chmod +x ./gradlew

 

 

여기서 또 잠깐 🤚

혹시 저처럼 gradlew 스크립트 파일의 내용에서 오류가 발생했다면?

 

 

 

당황하지 말고 gradlew 스크립트 파일을 새로 만들어주자 😸

 

1) gradlew 및 gradlew.bat 파일 삭제:

rm gradlew gradlew.bat

 

2) gradle-wrapper 재생성:

gradle wrapper

 

> gradle 명령어가 없다면 먼저 설치: brew install gradle

 

 

3) 실행 권한 부여:

chmod +x gradlew

 

4) 다시 빌드:

./gradlew clean build

 

5) 결과 확인

 

 

 

👉 확인 방법 

 

> build > libs > 안에 war 파일이 생겼다면 성공적으로 빌드가 된 것으로 보면 된다.

 

 

 

 

 

5. .war 파일을 톰캣에 배포

1) 현재파일 > 구성 편집

 

2) 새 항목 추가 > 톰캣(로컬) 선택

 

 

📍만약 오른쪽 사진처럼 Tomcat 주소 관련 오류가 발생하는 경우

 

1) 터미널에서 brew info tomcat@9 실행

2) 결과에 나오는 톰캣 주소 복사

3) Tomcat 홈(H) 항목에 주소 입력 : 기본 디렉터리가 자동으로 입력된다

4) 확인 클릭

 

 

3) war 파일 배포

배포 탭 > + 버튼 클릭 > 아티팩트... 클릭 > war 파일 클릭 > 확인 클릭

 

 

 

확인을 누르면 아래의 왼쪽 화면이 보일텐데, 애플리케이션 컨텍스트 부분을 '/' 로 수정   ( 후 확인 누르기 )

 

 

 

6. 톰캣 실행

war 파일 배포 결과 아래처럼 톰캣 로컬 서버가 생긴 것을 볼 수 있다. 그렇다면 실행을 해보자. 

 

오예

 

초록색 삼각형을 클릭하면,

인텔리제이 서버 창에서 그래들 빌드가 일어나고 바로 빨간색 글자들이 와다다다 나타난다. 

 

 

그리고 자동으로 localhost:8080 이 켜지는데, 아래처럼 404가 나온다. 

아무래도 서버가 실행되면 index.html 페이지가 열리도록 구성을 해뒀는데, 프론트엔드 쪽이 준비가 되어있지 않아서 그런듯 싶다. 그렇다면 빠르게 프론트엔드 세팅으로 넘어가보자 ^^

 

 

 

---

 

윈도우 풀스택 프로젝트 맥북 세팅 > 프론트엔드 part 🎨 : Vue

1. 프론트엔드 폴더 열기

프론트엔드 폴더와 백엔드 폴더가 같은 위치에 있어서 그 상위폴더를 받은 나는 따로 다운 받을 필요 없이 인텔리제이에서 프론트엔드 코드가 담긴 폴더를 열었다. 

 

그러자 너무 친절한 인텔리제이,,,, 바로 npm install 하겠냐고 물어봐준다.

 

사랑사랑내사랑아~

 

2. 프로젝트 실행

터미널을 켜서 프로젝트를 실행해보자.

npm run dev

 

 

 

위에 나와있는 주소로 접속하면 아래의 페이지가 뜬다 ㅎㅎ 잘 실행된다는 것이다. 

 

 

 

3. 프록시 설정 테스트

프론트엔드 뷰 프로젝트에 있는 코드 중, frontend/vite.config.js 는 백엔드 서버와의 연결에 대해서 설정해주고 있다. 프론트엔드 쪽에서 빌드 명령어를 터미널에 입력하면 빌드가 실행되면서 프론트엔드에서 생성된 리소스 파일들이 백엔드 폴더에 생긴다.

 

frontend/vite.config.js  (window ver.)

// Node.js의 URL 유틸리티에서 파일 경로 변환 함수들을 가져옴
// 용도: @ 별칭 설정 시 절대 경로 생성에 사용
import { fileURLToPath, URL } from 'node:url';

// Vite 설정을 정의하는 함수를 가져옴
// - Vite 설정 객체를 정의하고 타입 검사 지원
// - 장점: IDE에서 자동완성과 타입 체크 제공
// - 단점: 초기 설정 시 타입 정의 필요
import { defineConfig } from 'vite';

// Vue.js를 위한 Vite 플러그인을 가져옴
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },

  // 개발 서버 설정
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 백엔드 서버 연결
      },
    },
  },

  // 빌드 설정
  build: {
    outDir:
        'C:/KB/Fullstack/scoula/backend/src/main/webapp/resources',
  },
});

 

1) vite.config.js 빌드 경로 수정

그런데 잘 보면, 윈도우에서 작성되었던 파일이기 때문에 무언가 수정해야 하는 부분이 있다. 

과연 그곳은 어디일까?

 

바로 빌드 되었을 때 저장되는 경로 이다. 저 부분을 맥북 로컬 경로로 수정해주자.

/Users/000/Desktop/workspace/KB-Fullstack-repo/backend/src/main/webapp/resources

 

2) 프론트엔드 코드 빌드

아까 실행했던 서버를 종료하고 아래의 명령어를 실행하자.

npm run build

 

그러면 아무것도 없던 백엔드 webapp/resourdes 폴더에 파일들이 생긴 것을 볼 수 있다. 프록시 설정이 잘 된 것. 

좌 : 빌드 전 / 우 : 빌드 후

 

4. 기능 실행 : API 테스트

이제 vue 페이지에서 기능을 테스트해보자 🔥

아래의 회원가입 페이지에서 정보를 입력하고 가입을 눌러보자.

 

 

 

그러면 가입이 완료된 패이지로 넘어가게 되고 개발자 도구를 켜면 아래와같은 로그를 확인할 수 있다 😸

제대로 잘 세팅이 되었다는 의미!!! 이제 맥북에서 열심히 프로젝트를 진행할 일만 남았다!!! 아자아자 화이팅 🔥🔥🔥

 

 

---

#fin.마무리글

제 글을 통해 KB IT's Your Life 에서 제공하는 백엔드 교육 과정에 대해서 많이 알아가셨으면 좋겠습니다 ❤️

어떻게든 많은 혜택을 제공하고자 노력하는 KB ITYL ! 좋아하지 않을 수가 없겠죠? 

KB ITYL이 제공하는 IT취업교육, KB IT아카데미는 쭉 계속됩니다!

 

이상 6기 기자단 조자영이었습니다 🧚🏻

다음 글에서 또 만나요 📝