🎯 프로젝트 개요 프로젝트명 : MES (Manufacturing Execution System) 관리 시스템 개발 기간 : 총 10일 목표 백엔드(Spring Boot + JPA)와 프론트엔드(Vue 3)를 연계한 풀스택 개발 경험 개발 목적 실무 개발에 가까운 구조를 스스로 설계...

🎯 오늘의 목표 마지막 문제인 Vue로 로그인 기능을 구현하면서 발생했던 상태 공유 문제를 해결하기 위해서 Vue 3 상태관리 라이브러리인 Pinia를 적용해보자. 이 트러블슈팅을 마지막으로 토이 프로젝트를 정리하려고 한다. ✅ 문제 상황 처음에는 로그인 후 localStorage.setItem('token', token)으로 토큰을 저장하고...

🎯 오늘의 목표 현재 토큰을 발급하고, 인증하는 로직은 개발이 되어있다. 실제로 화면에서 로그인을 했을때 JWT 토큰을 발급하고 저장할 수 있도록 구현해보자. 그리고, API 요청시에도 토큰 유무를 확인한 후 호출될 수 있도록 구현하자. 사용자 로그인 기능 구현 (이메일 + 비밀번호) 로그인 성공 시 JWT 토큰 발급 및 저장 모든 API...

1. 개념 JPA (Java Persistence API) 자바 진영의 공식 ORM(Object-Relational Mapping) 표준 객체 <-> 관계형 테이블 매핑 자동화 대표 구현체: Hibernate SQL 작성 없이도 DB 연동 가능 예시: @Entity public class Product { @Id...

🎯 오늘의 목표 MES 시스템에 사용자 인증 기능을 추가하기 위해 JWT 기반 로그인 기능을 구현하려고 한다. 우선 MySQL 사용자 테이블 구조부터 정리하고, 이후 Spring Boot에서 JWT 인증을 연동할 계획이다. ✅ 기존 user 테이블 삭제 MySQL에서는 user가 예약어로 쓰이기 때문에, 테이블명 충돌 및 혼란을 피하기 위해 기...

🎯 오늘의 목표 설비관리, 작업지시, 생산실적 화면을 동일한 구조로 통일하고, 기능 완성하기 📁 공통 UI 리팩토링 ✅ 적용 대상 제품관리 설비관리 작업지시 생산실적 ✅ 공통 레이아웃 구조 왼쪽: 데이터 목록 오른쪽: 등록 폼 ✅ 공통 기능 적용(검색, 페이징) 검색 필터링 적용 검색어 입력 후 filt...

🎯 오늘의 목표 대시보드에서 시각적으로 어색했던 부분 개선, 동작 오류 해결 ✅ 주요 개선 내용 1. 도넛 그래프 크기 제한 및 중앙 정렬 Chart.js는 기본적으로 부모 요소 최대 크기로 렌더링되기 때문에, max-width만으로는 조정이 어렵다. 해결책: .canvas에 명시적으로 width, height를 부여 .do...

🎯 오늘의 목표 실시간 모니터링용 대시보드 화면 완성 총 4개의 주요 지표 API 개발 차트 시각화 구현 (Chart.js + Vue 3) 더미 데이터 생성 및 테스트 연동 ✅ 구현한 대시보드 항목 1. 설비 상태 비율 (Equipment Status Ratio) API: /api/dashboard/equipmen...

🧱 개발 환경 설정 1. Node.js & Vue CLI 설치 node -v # 18.16.0 npm install -g @vue/cli vue --version # Vue CLI v5.0.8 2. Vue 프로젝트 생성 vue create mes-view # preset: Vue 3 + Babel + E...

현장에서 MES시스템을 보면서 항상 호기심을 가지고 있었다. 그래서! 이번 토이프로젝트의 주제는 MES시스템으로 결정했다. 이제 실제 업무 흐름과 데이터 연관관계에 기반한 구조를 설계하고 개발하는 단계에 들어섰다. ✅ 오늘 목표 프로젝트 기획 DB 설계 API 구현(Product, WorkOrder, Equipment, Produ...