가이드

Appearance

1. 강의 오리엔테이션 ​

제작할 애플리케이션 소개 ​

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

요구사항 > 서비스 기획 > UI, UX 상세 설계 > GUI 디자인 > 퍼블리싱 > 백엔드 API 개발 > 프런트엔드 개발 > QA

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

2. 개발환경 구성 ​

개발 환경 소개 ​

VSCode 플러그인 및 테마 설정 ​

ctrl + shift + p > Color Theme > Night owl
ctrl + shift + p > File Icon Theme > material icon theme

night owl
material icon theme
vetur
vue vscode snippets

API 서버 프로젝트 구성 ​

https://github.com/joshua1988/vue-til-server

Node.js 버전 관리가 필요한 이유와 버전 변경하는 방법 ​

Node.js 이전 릴리즈 다운로드 페이지
https://nodejs.org/ko/download/releases/
OS 별로 아래 파일을 다운로드 받으시면 됩니다 :)
윈도우 64비트 : x64-msi 파일
윈도우 32비트 : x86-msi 파일
맥 : pkg 파일
리눅스 : tar 파일
NVM 설치 진행 명령어
https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

NVM(Node Version Manager) 소개 및 설치 ​

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

NVM 설치 및 버전 변경 절차 문서
-https://github.com/joshua1988/vue-til-server#nvm-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EB%B2%84%EC%A0%84-%EB%B3%80%EA%B2%BD-%EB%B0%A9%EB%B2%95

nvm use 버전 이름
nvm 노드 버전

1. 기존에 터미널에서 설치하셨던 nvm을 삭제합니다. 삭제 방법은 구글링하시면 많이 나오더라구요!
2. nvm 깃허브 레포지토리로 가셔서 사용하실 버전에 맞게 Windows 용 setup파일을 다운로드 하고 설치해줍니다.
3. VSCode를 재실행 하시고 터미널에서 nvm -v 로 버전을 확인하시면 설치하려던 버전의 nvm이 정상 설치되어 있는 것을 확인하실 수 있습니다.
4. nvm install 10.16.3 으로 설치시 너무 오래 걸려서 node.js 공식 사이트에서 이전 릴리즈 버전으로 10.16.3 버전을 다운로드 합니다.
5. node.js 공식 사이트에서 받은 10.16.3 파일을 압축 해제합니다. 하시고 폴더 명을 v10.16.3 이런식으로 변경해주세요!
6. nvm을 설치한 폴더로 갑니다.(기본 경로 : C:\Users\사용자 이름\AppData\Roaming\nvm)
이 폴더에 다운로드한 v10.16.3 이름으로 된 폴더를 복사해서 넣어주시면 됩니다.

API 서버 실행 및 확인 ​

node -v
npm i
npm run dev

http://localhost:3000/api/docs/

데이터 베이스 연결 안내 ​

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

https://www.mongodb.com/ko-kr/cloud

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

프로젝트생성
클러스터생성

MongoDB 연결 확인 ​

mongodb+srv://test:test@cluster0.reddd.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
useUnifiedTopology: true,

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

3. 프로젝트 생성 및 환경 구성 ​

Vue CLI로 프로젝트 생성 ​

https://cli.vuejs.org/guide/installation.html

*뷰 CLI 버전 4.5.x 이상 설치시 선택
Default ([Vue 2] babel, eslint)

프로젝트 설치 옵션
Manually select features
Babel, Linter, Unit
2.x <-- Vue 2로 하시는게 중요합니다. 아직 Vue 3는 상용 서비스에 적용하기에는 무리가 있습니다.
Prettier
Lint on Save
Jest
In dedicated config files
n


npm install -g @vue/cli
vue --version
vue create vue-til

Manually select features
- Babel, Linter / Formatter, Unit Testing
- ESLint + Prettier
- Lint on save
- Jest
- In dedicated config files

Please pick a preset: Manually select features
Check the features needed for your project: Babel, Linter, Unit
Choose a version of Vue.js that you want to start the project with 2.x
Pick a linter / formatter config: Prettier
Pick additional lint features: Lint on save
Pick a unit testing solution: Jest
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

npm run serve

Vue 프로젝트 구조 설명 및 ESLint 에러 확인 ​

.browserslistrc
.eslintrc.js
babel.config.js

https://github.com/vuejs/vue-devtools
https://devtools.vuejs.org/

ESLint 에러가 화면에 표시되지 않게 하는 방법 ​

https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html

ESLint 설정 파일 안내 ​

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

ESLint에 Prettier 규칙 적용 ​

https://joshua1988.github.io/web-development/vuejs/boost-productivity/

ESLint 플러그인 설치 및 설정 변경 ​

https://github.com/joshua1988/vue-til/blob/complete/settings.json

Open Settings(settings.json)에 아래 내용 추가
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": [
    {"mode": "auto"}
  ],
}

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

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

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

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

https://github.com/joshua1988/vue-til/blob/complete/jsconfig.json
https://code.visualstudio.com/docs/languages/jsconfig

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

https://kr.vuejs.org/v2/style-guide/index.html

4. 라우터 & 컴포넌트 설계 ​

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

https://github.com/joshua1988/vue-til

뷰 라우터 설치 및 연결 ​

22년 2월 7일부터 뷰 라우터를 NPM으로 설치할 때 버전을 꼭 명시해 주셔야 강의에서 다루는 Vue 2 버전과 호환됩니다.
npm i vue-router@3.5.3

https://joshua1988.github.io/web-development/vuejs/vue3-as-default/

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

라우팅 동작 확인 ​

코드 스플리팅 소개 및 적용 ​

https://developer.mozilla.org/en-US/docs/Web/API/Window/history

https://webpack.js.org/guides/code-splitting/

https://vuejs.org/guide/built-ins/keep-alive.html

초기 진입 페이지 설정 ​

https://github.com/vuejs/vue-router

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

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

https://router.vuejs.org/guide/essentials/history-mode.html

5. 회원 가입 페이지 개발 ​

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

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

회원 가입 폼 마크업 ​

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

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

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

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

회원 가입 이후의 동작 구현 ​

6. 실무 환경을 위한 프로젝트 설정 ​

API 설정 공통화 ​

env 파일과 설정 방법 ​

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

7. 로그인 페이지 개발 ​

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

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

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

로그인 기능 구현 ​

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

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

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

사용자 폼 유효성 검사 안내 ​

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

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

8. 로그인 상태 관리와 스토어 ​

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

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

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

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

로그인 이후의 동작 설명 ​

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

뷰엑스 설치 및 연결 ​

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

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

로그 아웃 기능 구현 ​

9. 토큰을 이용한 API 인증 처리 ​

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

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

로그인 토큰 값 확인 ​

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

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

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

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

액시오스 인터셉터 소개 ​

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

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

10. 학습 노트 데이터 조회 ​

학습 노트 조회 API 함수 구현 ​

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

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

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

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

데이터 로딩 상태 표시 ​

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

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

브랜치 전환 안내 ​

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

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

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

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

학습 노트 데이터 생성 ​

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

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

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

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

학습 노트 등록 에러 처리 ​

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

12. 중간 정리 ​

중간 리뷰 ​

이후 강의 내용 요약 ​

13. API 함수 모듈화 ​

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

인스턴스 생성 함수 분할 ​

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

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

14. 학습 노트 데이터 삭제 ​

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

삭제 API 함수 및 기능 구현 ​

삭제 기능 UX 개선 ​

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

15. 학습 노트 데이터 수정 ​

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

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

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

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

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

16. 데이터 포맷팅 ​

뷰 필터 소개 및 적용 ​

전역 필터 소개 및 설정 ​

17. 라우터 심화 ​

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

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

페이지별 인증 권한 설정 ​

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

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

로그 아웃 관련 코드 수정 ​

18. 프런트엔드 테스팅 소개 ​

테스팅 환경 구성 ​

테스트 코드가 필요한 이유 ​

Jest 소개 ​

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

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

테스트 코드 작성 팁 ​

뷰 컴포넌트 테스트 방법 ​

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

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

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

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

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

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

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

19. 강의 마무리 ​

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