[Vue.js] 중간 정리

---

중간 정리

지금까지 진행한 내용 정리

1. 개발환경 설정

• 개발 툴 및 필요 프로그램 설치
• API 서버 프로젝트 클론

2. Vue CLI 프로젝트 생성

• Prettier
• ESLint
• jsconfig

3. 뷰 라우터 및 컴포넌트 설계

• <router-link>
• <router-view>
• mode: history와 서버 배포시 주의 사항
• 코드 스플리팅 component: () => import('경로')

4. 회원 가입 페이지 개발

• 사용자 폼 처리
• async & await
• axios
• swagger API 문서 보는 방법

5. 실무 환경 구성

• axios.create()
• env 파일 설정 방법
• Vue CLI 버전 3 이상에서의 env 파일 규칙

6. 로그인 페이지 개발

• 사용자 폼 처리 기능 구현
• async & await 에러 처리 방법
• 사용자 폼 유효성 검사

7. 로그인 상태 관리

• 뷰엑스를 이용한 사용자 아이디 관리
• this.$router.push('/main')

8. API 인증 처리를 위한 토큰 관리

• JSON Web Token
• Authorization 토큰 값으로 API 인증을 받는 방법
• axios.interceptors

9. 학습 노트 데이터 조회

• 학습 노트 목록 표시 기능 구현
• 목록 아이템 컴포넌트화
• 스피너를 이용한 데이터 로딩 상태 표시

10. 브라우저 저장소를 이용한 인증 값 관리

• 쿠키를 이용한 로그인 인증 값 저장
• actions를 이용한 컴포넌트 로직 정리

11. 학습 노트 데이터 생성

• 학습 노트 생성 기능 구현
• 학습 노트 본문 길이 유효성 검사