Vue.js - 알아보기(2)

나는 간단히 채팅 서버를 로컬에서 만들어보려고 했다.

그 프론트엔드를 Vue.js로 구현하고자 한다.

확인해보자.

내 프로젝트 디렉토리는 아래와 같이 나눈다.

frontend/
├── src/                        # 소스 코드의 루트 디렉토리
│   ├── main.js                 # Vue 애플리케이션의 진입점
│   │                          # - Vue 인스턴스 생성
│   │                          # - 라우터 설정
│   │                          # - 전역 설정 관리
│   │
│   ├── App.vue                # 루트 컴포넌트
│   │                          # - 전체 애플리케이션의 레이아웃
│   │                          # - 라우터 뷰 포함
│   │
│   ├── router/                # 라우팅 관련 디렉토리
│   │   └── index.js          # 라우터 설정 파일
│   │                          # - 경로와 컴포넌트 매핑
│   │                          # - 인증 가드 설정
│   │                          # - 중첩 라우팅 구성
│   │
│   ├── components/            # 재사용 가능한 컴포넌트들
│   │   ├── LoginForm.vue     # 로그인 폼 컴포넌트
│   │
│   └── layouts/              # 레이아웃 컴포넌트들
│                            # - 헤더와 로그아웃 기능
│                            # - 채팅 컨텐츠 영역 구성
│
└── package.json             # 프로젝트 의존성 및 스크립트 정의

유저 접속 시, 동작 방식

1. 브라우저 요청

• 사용자가 웹사이트 URL 접속
• index.html 파일 로드 (디폴트 로드)

2. Vue 초기화

• main.js 실행
• Vue 인스턴스 생성

3. 라우터 설정 로드

• 라우팅 처리
• 현재 URL이 '/'이므로 루트 라우트 매칭
• Layout 컴포넌트 로드
• Layout 내부에 LoginForm 컴포넌트 로드

4. 컴포넌트 렌더링

• Layout 마운트
• LoginForm 마운트
• 데이터 초기화
• 템플릿 렌더링

5. 사용자 인터랙션 준비

• 로그인 폼 입력 필드 활성화
• 이벤트 리스너 설정
• 로그인 처리 메서드 준비