4.5일차 Vue3 프로젝트 생성 및 설정, 제품 관리 기능 구현

🧱 개발 환경 설정

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 + ESlint

3. 포트 변경

// vue.config.js
module.exports = {
  devServer: {
    port: 8081
  }
}

---

🧭 개발 구조 설계

기능	라우터 경로
대시보드	/dashboard
제품관리	/products
설비관리	/equipments
작업지시	/work-orders
실적등록	/results

---

🌐 Header + Router 구성

• 메뉴는 <router-link>로 라우팅 처리
• App.vue에 <MainHeader /> + <router-view /> 조합

---

📦 제품관리 화면 구성

---

🔁 등록 → 목록 자동 갱신

• 등록 성공 시 $emit('product-registered')
• 부모(ProductPage.vue)에서 자식 컴포넌트의 fetchProducts() 호출
• ref를 통해 ProductList.vue의 메서드를 제어

---

🧠 배운 점 & 트러블슈팅 경험

📌 버전 이슈를 항상 주의할 것

• 조금의 버전 충돌도 허용되지 않는,, vue를 처음 써보지만 역시 까다로웠다. 그만큼 편하니까 인정

❌ Tailwind CSS 적용 실패

• Tailwind 3.4 이상부터 @tailwindcss/postcss 필요
• postcss.config.js, vue.config.js 모두 적용했으나 여전히 webpack error 발생
• 도대체 무슨 문제일까,,?
• 결국 Tailwind 포기, 순수 CSS로 전환
• 오히려 디자인 통제력 ↑ → 생산성 향상됨

---

🔚 마무리

환경설정부터 프로젝트 구조를 잡는데 엄청 오래걸렸다. 하지만, 포기하지 않고 처음 해보는 vue.js에 결국 이겨버렸다!!!! 메인 레이아웃과 각 메뉴 라우팅, 제품관리 실시간 반영까지 구축 완료.
내일은 데이터 시각화를 한번 해보자.

Repository : GitHub