Day 1: 개발 환경 설정 및 Vue.js 초기화

오늘은 웹 주문 시스템 프로젝트의 첫 단계로 개발 환경을 설정하고 Vue.js를 초기화하는 과정을 진행합니다. Vue.js는 사용자 인터페이스를 만들기 위해 널리 사용되는 프론트엔드 프레임워크로, 이 프로젝트에서 클라이언트 측 UI를 구축하는 데 활용됩니다.

1. Node.js 및 npm 설치

Vue.js 프로젝트를 시작하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. 둘 다 이미 설치되어 있지 않다면, 아래의 단계를 따라 설치하세요.

1. Node.js 공식 사이트에 접속하여 LTS(Long Term Support) 버전을 다운로드합니다.
2. 설치 파일을 실행하고 지시에 따라 Node.js를 설치합니다.
3. 설치가 완료되면 터미널(또는 명령 프롬프트)을 열고 아래 명령어로 설치 여부를 확인하세요.두 명령어 모두 버전이 출력되면 정상적으로 설치된 것입니다.

node -v
npm -v

2. Vue 프로젝트 생성

1. 프로젝트를 시작할 폴더를 만들고, 해당 폴더로 이동합니다. 예를 들어, 폴더 이름을 order-system으로 설정할 수 있습니다.

   mkdir order-system
   cd order-system

2. 최신 Vue 프로젝트 템플릿을 생성하기 위해 아래 명령어를 입력하세요.

   npm create vue@latest

3. 이 명령어를 실행하면 몇 가지 질문이 나타납니다. 기본적인 설정은 아래와 같이 선택하면 됩니다.
   • Project name: 프로젝트 이름을 입력하세요. 예: order-system, .을 입력하면 현재 폴더에 프로젝트를 생성
   • Add TypeScript?: 이번 프로젝트에서는 No를 선택하여 기본 JavaScript로 진행합니다.
   • Add JSX Support?: No를 선택합니다.
   • Add Vue Router for Single Page Application development?: Yes를 선택합니다.
   • Add Pinia for state management?: Yes를 선택합니다.
   • Add Vitest for Unit Testing?: No를 선택합니다.
   • Add Cypress for both Unit and End-to-End Testing?: No를 선택합니다.
   • Add ESLint for code quality?: Yes를 선택합니다.
   • Add Prettier for code formatting? No를 선택합니다.
   설정이 완료되면 Vue 프로젝트가 생성됩니다.
4. 생성된 프로젝트 폴더로 이동하여 프로젝트를 실행합니다.

   cd order-system
   npm install
   npm run dev

5. 브라우저에서 http://localhost:5173 (또는 출력된 URL)을 열면 기본 Vue 페이지가 뜨는 것을 확인할 수 있습니다. 이는 Vue.js 프로젝트가 정상적으로 초기화되었음을 의미합니다.

3. 프로젝트 구조 살펴보기

Vue 프로젝트의 기본 파일 구조를 간단히 이해해 봅시다.

• src 폴더: 주요 개발이 이루어질 폴더입니다. 이 폴더 안에 Vue 컴포넌트와 페이지가 들어갑니다.
• App.vue: 전체 앱의 뼈대를 이루는 파일로, 최상위 컴포넌트입니다.
• main.js: Vue 애플리케이션을 초기화하고 설정하는 파일입니다.

이 구조를 통해 Vue 프로젝트가 어떻게 구성되고 있는지 살펴보고, 앞으로 이 폴더에서 파일을 수정하며 프로젝트를 완성하게 될 것입니다.

4. 오늘의 마무리

오늘은 개발 환경을 설정하고 Vue.js를 사용하여 프로젝트의 기본적인 구성을 완료했습니다. 내일부터는 이 환경을 활용하여 주문 폼을 만들고, 프론트엔드의 첫 단계 작업을 진행할 것입니다.

다음 시간까지 환경 설정이 완료되지 않았거나, Vue 프로젝트가 정상적으로 실행되지 않는다면 오류 메시지를 기록해 두세요. 내일은 Vue 컴포넌트 기초를 다루며 본격적으로 주문 시스템의 클라이언트 UI 개발을 시작하겠습니다!