12 중간 정리

source: categories/study/vue-beginner-lv4/vue-beginner-lv4_9-03.md

12.1 중간 리뷰

12.1.1 개발환경 설정

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

12.1.2 Vue CLI 프로젝트 생성

  • Prettier
  • ESLint
  • jsconfig - vscode에서 제공하는 설정파일
  • git hook 까지 적용하면 더 좋음

12.1.3 뷰 라우터 및 컴포넌트 설계

  • <router-link>
  • <router-view>
  • mode: history와 서버 배포시 주의 사항
  • 코드 스플리팅 component: () => import('경로') : 레이지 로딩 기술을 웹팩, 뷰에 구현해놓은 기술임
    정확히 말하면 웹팩의 코드 스플리팅을 활용한 것입니다.
    라우터 레벨에서 코드 스플리팅을 사용.
    해당 라우터로 이동할 때 그 라우터의 페이지 리소스를 서버에서 그때그때 받아오는 것.

12.1.4 회원 가입 페이지 개발

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

12.1.5 실무 환경 구성

  • axios.create() : 엑시오스를 좀 더 효율적으로 쓰는 방법.
    공통 인스턴스화를 해서 쓰는 방법에 대해서 axios.create()에 대해 살펴봤었음.
  • env 파일 설정 방법 : 실무 환경에서의 가장 중요한 env 환경변수 파일.
    개발 버전과 배포 버전을 항상 스위칭해서 실무에서 사용해야함.
    그런 것들을 좀 더 매끄럽게 전환할 수 있게 env 파일 설정. .env.production, .env.development
  • Vue CLI 버전 3 이상에서의 env 파일 규칙

12.1.6 로그인 페이지 개발

  • 사용자 폼 처리 기능 구현
  • async & await 에러 처리 방법 (try catch, 액시오스에서의 response 확인)
  • 사용자 폼 유효성 검사

12.1.7 로그인 상태 관리

  • 뷰엑스를 이용한 사용자 아이디 관리: 뷰엑스에 담아놓은 state를 어떻게 해더에 나타내는지..
  • this.$router.push('/main'): programmatic navigation // 자바스크립트 레벨에서 라우터를 어떻게 움직일 수 있는지

12.1.8 API 인증 처리를 위한 토큰 관리

  • JSON Web Token // 현재 백엔드에서 던져주는 토큰 형식은 JSON Web Token 형식
  • Authorization 토큰 값으로 API 인증을 받는 방법: headers의 Authorization 속성 활용 // token 값을 Authorization에 담음
  • axios.intercaptors: 토큰 값을 실어주어 로직을 좀 더 편하게 작성

12.1.9 학습 노트 데이터 조회

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

12.1.10 브라우저 저장소를 이용한 인증 값 관리 (로그인 후 새로고침했을 때)

자바스크립트 레벨에서 저장하면 새로고침시 저장된 데이터들이 유지가 될 수 없음.
브라우저 저장소를 활용해 새로고침하더라도 데이터들을 유지함.

  • 쿠키를 이용한 로그인 인증 값 저장 (로컬스토리지와 쿠키의 차이점에 대해선 인터넷 검색 ㄱㄱ)
    • 쿠키: 특정 값에 대한 만료기간 설정 가능
    • 로컬 스토리지: 설정 불가능 등등..
    • 한번 찾아보시는 것이 좋습니다.
  • actions를 이용한 컴포넌트 로직 정리 (리팩토링)

12.1.11 학습 노트 데이터 생성

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

12.2 이후 강의 내용 요약

  1. 데이터 성격 별로 API 함수 모듈화: 이후 API 함수 관리할 때 훨씬 더 편하게됨
  2. 학습 노트 삭제 기능
  3. 날쩌 형식 포맷팅 filter
  4. 학습 노트 데이터 수정
  5. 라우터 심화: 인증되지 않은 사용자들이 특정 라우터를 직접 입력해서 접속할시 방지
  6. 프론트엔드 테스팅: 애플리케이션이 다 구현되고났을 때,(즉, 1~5번 다 진행되었을 때) 프론트엔드 유닛 테스트를 살펴보도록 하겠음.
    어떻게하면 저희가 구현한 기능들에 대해서 코드로 보증할 수 있는지, 혹은 동작을 증명할 수 있는지 프론트엔드 테스팅을 통해 보여드리도록 하겠음.