Vue와 Spring으로 모바일 웹 시작하기

VUE와 SPRING을 사용한 모바일 웹 제작

1. FRONT (VUE) 세팅

1-1. VSCode 실행 및 프로젝트 생성

• File - Open Folder로 작업할 폴더를 열어주세요.
• Ctrl + ` 키를 눌러 터미널을 실행해 주세요.
• 아래 명령어로 Vue 프로젝트를 생성할 수 있어요.

💡 프로젝트를 만들기 전에 Node.js 최신 버전을 설치해 두는 것이 좋아요!

•  
• > npm init vue@latest
• 프로젝트를 만든 후에는 해당 폴더로 이동해 주세요.
• > cd {생성한 프로젝트명}
• 필요한 패키지를 설치하고, 프로젝트를 실행해 주세요.
• > npm install > npm run dev

1-2. 페이지 접속

• 브라우저 주소창에 아래 주소를 입력하면 프로젝트가 잘 실행됐는지 확인할 수 있어요.
  http://localhost:5174/

1-3. 포트 변경 및 모바일 사용을 위한 설정 변경

• package.json 파일에서 포트와 호스트 설정을 다음과 같이 수정해 주세요.
  --host 0.0.0.0 --port 8080 (원하는 포트 번호로 변경 가능해요)
• "scripts": { "dev": "vite --host 0.0.0.0 --port 8080", "build": "vite build", "preview": "vite preview" },
• 내 컴퓨터의 IP를 확인하려면 window에서 cmd를 실행하고 아래 명령어를 입력해 주세요. 여기에서 IPv4 주소를 확인할 수 있어요.
• > ipconfig
• 모바일에서도 테스트해 볼 수 있어요.
  사파리나 크롬 같은 브라우저에서 아래 형식으로 입력해 주세요.
  
• http://ip:port
  예) http://127.0.0.1:8080