Vue.js 끝장내기 - 실무에 필요한 모든 것

현대 프런트엔드 개발 절차와 역할

수업에서 사용할 API 문서 소개

API 서버 프로젝트 구성

NVM(Node Version Manager) 소개 및 설치

NVM으로 Node.js 버전 변경 및 설치

API 서버 실행 및 확인

데이터 베이스 연결 안내

MongoDB 클라우드 사이트 소개 및 가입 안내

MongoDB 클라우드 인스턴스 생성 및 설정

MongoDB 연결 확인

API 문서 보는 법과 사용하는 방법

ESLint 설정 파일 안내

Prettier 소개 및 ESLint와 같이 사용해야 하는 이유

ESLint에 Prettier 규칙 적용

Prettier 플러그인 확인 및 설정할 때 주의 사항

프로젝트 레벨로 ESLint 규칙을 관리해야 하는 이유와 ESLint 규칙 설명

파일의 절대 경로를 설정해야 하는 이유

파일을 절대 경로로 찾기 설정

애플리케이션 코딩 컨벤션 및 뷰 스타일 가이드 소개

깃헙 리포지토리 안내 및 클론

뷰 라우터 설치 및 연결

페이지 컴포넌트 생성 및 연결

라우팅 동작 확인

코드 스플리팅 소개 및 적용

초기 진입 페이지 설정

없는 페이지를 접근할 때의 라우터 처리

history mode 설정 및 싱글 페이지 애플리케이션 배포할 때 주의 사항

회원 가입 페이지 개발을 위한 준비

헤더 컴포넌트 마크업 및 회원 가입 컴포넌트 생성

회원 가입 폼 마크업

회원 가입 폼 데이터 바인딩 및 이벤트 연결

회원 가입 API 요청을 위한 문서 확인

API 폴더와 회원 가입 API 함수 생성

회원 가입 API 호출과 주의 사항

회원 가입 이후의 동작 구현

API 설정 공통화

env 파일과 설정 방법

Vue CLI의 env 파일 규칙과 실무 환경 구성 방법

로그인 폼 컴포넌트 생성 및 마크업

로그인 폼 데이터 바인딩과 이벤트 연결

로그인 API 문서 확인 및 API 함수 생성

로그인 기능 구현

에러가 났을 때의 대처 방법과 로그 분석하는 방법

네트워크 에러 확인 방법과 에러 처리 코드 구현

에러 메시지 출력 및 에러 피드백 표시 방법

사용자 폼 유효성 검사 안내

computed 속성을 이용한 이메일 형식 검사

[퀴즈] 회원 가입 컴포넌트 유효성 검사

메인 페이지 개발을 위한 브랜치 안내 및 코드 정리

로그인 동작 확인 및 구현 방향 복습

메인 페이지 라우팅 구현 및 확인

자바스크립트로 페이지 이동하기 구현 및 설명

로그인 이후의 동작 설명

컴포넌트 간 데이터 전달 방법 3가지와 구현 방향

뷰엑스 설치 및 연결

로그인 아이디 헤더에 표시하기

로그인 했을 때의 헤더 버튼 분기 처리

로그 아웃 기능 구현

브랜치 전환 및 변경 사항 안내

학습 노트 조회 API를 호출하는 방법과 확인 사항

로그인 토큰 값 확인

HTTP 헤더에 토큰 값을 실는 방법

스토어를 이용한 토큰 저장 및 활용

저장된 토큰 값을 이용한 API 요청 및 의도치 않은 동작 확인

문제가 되는 동작 분석 및 해결 방향 안내

액시오스 인터셉터 소개

액시오스 인터셉터 모듈화 및 인스턴스에 연결하는 방법

인터셉터를 이용한 HTTP 헤더 설정

학습 노트 조회 API 함수 구현

학습 노트 목록 표시를 위한 데이터 바인딩

학습 노트 생성 및 생성된 데이터 확인

학습 노트 목록 마크업 및 스타일링

학습 노트 목록 아이템 컴포넌트화

데이터 로딩 상태 표시

로딩 상태를 표시하는 스피너 등록

브랜치 전환 안내

화면 새로 고침 했을 때의 문제점 분석

로그인 인증 값 브라우저 저장소에 저장 후 확인

브라우저 저장소로 인증 값 보존

actions 속성을 이용한 로그인 기능 구현과 비동기 처리시 유의할 점

학습 노트 등록 페이지로 이동하기 위한 버튼 생성 및 아이콘 적용

학습 노트 등록 페이지 라우터 생성 및 확인

학습 노트 등록 폼 마크업 및 스타일링

학습 노트 등록 폼의 데이터 바인딩 및 이벤트 연결

학습 노트 등록 API 구현 및 동작 확인

학습 노트 등록 에러 처리

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

중간 리뷰

이후 강의 내용 요약

API 모듈화를 위한 현재 구조 분석

인스턴스 생성 함수 분할

[실습 안내] 계정 관련 API 분할 및 실습 안내

[실습 답안] API 함수 모듈화 정리

삭제 기능 마크업 및 이벤트 연결

삭제 API 함수 및 기능 구현

삭제 기능 UX 개선

학습 노트 생성 기능 관련 UX 수정

학습 노트 수정 아이콘 이벤트 연결 및 구현 방향 안내

학습 노트 수정 페이지 생성 및 라우터 연결

학습 노트 수정 페이지 마크업 및 라우터 파라미터 연결

학습 노트 수정을 위한 특정 게시물 조회 기능 구현

학습 노트 수정 API 및 기능 구현

뷰 필터 소개 및 적용

전역 필터 소개 및 설정

라우터 네비게이션 가드 소개

라우터 네비게이션 가드 기초 코드

페이지별 인증 권한 설정

인증되지 않은 사용자 접근 제어

로그인 상태에 따른 로고 이동 링크 처리

로그 아웃 관련 코드 수정

테스팅 환경 구성

테스트 코드가 필요한 이유

Jest 소개

자바스크립트 테스트 파일 소개 및 파일 경로 관련 안내

자바스크립트 테스트 코드 시작하기

테스트 코드 작성 팁

뷰 컴포넌트 테스트 방법

뷰 테스트 유틸 라이브러리 소개 및 적용

find()를 이용한 컴포넌트 HTML 요소 검색

로그인 폼의 인풋 박스 관련 테스트 코드 작성

이메일 유효성 검사 기능 동작 테스트 코드로 확인

로그인 컴포넌트 첫 번째 테스트 코드 작성

로그인 컴포넌트 두 번째 테스트 코드 작성

[실습 안내] 회원가입 컴포넌트 테스트 코드 작성

학습 내용 정리 및 향후 학습 로드맵 안내