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

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

(29개의 수강평)

292명의 수강생
월36,666원
110,000원
3개월 할부시
지식공유자 · 장기효(캡틴판교)
132회 수업· 총 8시간 18분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 활용

이 강의는

Vue.js로 실무 하시는 분들께 필요한 모든 것을 담았습니다. 실제 백엔드 API로 구현하는 학습 노트 CRUD 애플리케이션. 생산성 높은 프로젝트 환경 구축과 백엔드 개발자와 협업하는 방법에 대한 메시지를 꼭 확인해보세요 :)

이런 걸 배울 수 있어요

  • 프론트엔드 개발
  • 화면 UI 개발
  • Vue.js 실무
  • Vue.js 실무 환경 구성
  • Vue.js 개발
  • 백엔드 API 문서 읽는 방법

"Vue.js 로드맵의 마지막 강좌 - 전 세계 역대 박스 오피스 1위를 기록한 어벤져스의 엔드게임처럼 Vue.js 프런트엔드 개발 교육의 엔드게임을 목표로 한 강좌입니다. 실무자들에게 필요한 모든 것을 담았습니다."

📔 강의 소개

Vue.js 학습 로드맵의 마지막 강좌입니다. 생산성을 높여주는 Vue.js  프로젝트 환경 구성부터 실제 API를 이용하여 백엔드 개발자와 협업하는 방법에 대해서 모두 담았습니다. 학습 노트 웹 애플리케이션을 구현하면서 프로젝트를 진행할 때 알고 있으면 좋은 팁들을 모두 확인해보세요 😄

🗒 강의 구성

이번 강의에서는 다음 내용을 중점적으로 다룹니다 😄

- 실무 환경에서 개발 생산성을 극대화하는 프로젝트 환경 구성
- 백엔드 개발자와 소통하는 방법과 REST API 문서 보는 방법
- REST API와 데이터베이스를 이용한 CRUD 애플리케이션 개발
- axios를 이용한 JSON 웹 토큰 인증 처리와 고급 API 함수 패턴
- 라우터를 이용한 페이지 권한 처리 및 인증 처리
- 프런트엔드 테스팅 방법

🙋🏻‍♂️ 강의 관련 예상 질문

Q. 이전 Vue.js 강좌들을 듣지 않고도 수강 가능한가요?
A. Vue.js 이전 강좌를 수강하지 않은 분들께는 적합하지 않은 강좌입니다. 이론 설명보다는 구현 중심의 강의가 진행되니 꼭 이전 강좌들을 수강하신 후에 강의 듣는 걸 추천드립니다 😄

Q. 이거 들으면 정말 실무에서 프런트엔드 개발자로 일할 수 있을까요?

A. 이번 강의는 실무를 시작할 때 백엔드 개발자와 어떤 식으로 협업하고 어떻게 API 문서를 읽어야 하는지에 대해서도 중점적으로 다루고 있습니다. 현대 웹 서비스 개발 절차와 함께 프런트엔드 개발자가 해야 하는 역할들도 소개하니 실무를 시작하실 때 도움이 많이 되실거에요 😄

Q. Vue.js 새 메이저 버전이 곧 나온다던데 지금 배우는 것보다 기다렸다가 배우는게 낫지 않나요?

A. Vue.js 새 버전은 기존의 구조에서 코드를 더 편하게 재 사용할 수 있는 방향으로 진화될 예정입니다. 새 버전이 나온다고 해서 지금 배운 내용을 모두 쓸 수 없는 게 아니라 지금 배운 내용에 더 새로운 방법들을 추가하여 코드를 개선할 수 있게 됩니다. 뿐만 아니라 강의에서 배우는 프로젝트 환경 구성, API 함수 구조화, 프런트엔드 테스팅 등은 심지어 다른 프론트엔드 프레임워크를 쓸 때에도 적용하실 수 있어요 😄

⛳️  추천 학습 로드맵

2. Vue.js 중급 강좌
웹앱 제작으로 배우는
Vue.js, ES6, Vuex 
3. 쉽게 배우는 웹팩
프론트엔드 프레임워크
(리액트, 앵귤러, 뷰)에서 
필수로 사용되는 도구
4. Vue.js 고급 강좌
Vue.js 완벽 가이드
실습과 리팩토링으로
배우는 실전 기술
5. Vue.js 활용 강좌
실무에 필요한 모든 것
(현재 강좌)

👨🏼‍🏫  강사 소개

장기효 (캡틴판교)

  인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

"강의 수익금으로 Vue.js 오픈소스와 생활 코딩을 후원합니다 😁"

도움 되는 분들

  • 프론트엔드 개발자
  • 퍼블리셔
  • 백엔드 개발자
  • 대학생
  • Vue.js 실무 개발자

선수 지식

  • HTML
  • CSS
  • Javascript

교육과정

모두 펼치기 132 강의 8시간 18분
섹션 0. 강의 오리엔테이션
3 강의 08 : 16
제작할 애플리케이션 소개
03 : 08
현대 프런트엔드 개발 절차와 역할
03 : 10
수업에서 사용할 API 문서 소개
01 : 58
섹션 1. 개발환경 구성
11 강의 38 : 24
개발 환경 소개
01 : 57
VSCode 플러그인 및 테마 설정
02 : 25
API 서버 프로젝트 구성
03 : 22
Node.js 버전 관리가 필요한 이유와 버전 변경하는 방법
02 : 26
NVM(Node Version Manager) 소개 및 설치
05 : 46
NVM으로 Node.js 버전 변경 및 설치
02 : 30
API 서버 실행 및 확인
03 : 35
데이터 베이스 연결 안내
01 : 17
MongoDB Cloud 사이트 소개 및 회원 가입 안내
02 : 08
MongoDB 인스턴스 생성 후 Node.js에 연결
08 : 41
API 문서 보는 법과 사용하는 방법
04 : 17
섹션 2. 프로젝트 생성 및 환경 구성
12 강의 53 : 05
Vue CLI로 프로젝트 생성
05 : 41
Vue 프로젝트 구조 설명 및 ESLint 에러 확인
04 : 13
ESLint 에러가 화면에 표시되지 않게 하는 방법
04 : 35
ESLint 설정 파일 안내
04 : 50
Prettier 소개 및 ESLint와 같이 사용해야 하는 이유
03 : 54
ESLint에 Prettier 규칙 적용
04 : 46
ESLint 플러그인 설치 및 설정 변경
05 : 22
Prettier 플러그인 확인 및 설정할 때 주의 사항
04 : 08
프로젝트 레벨로 ESLint 규칙을 관리해야 하는 이유와 ESLint 규칙 설명
04 : 04
파일의 절대 경로를 설정해야 하는 이유
04 : 30
파일을 절대 경로로 찾기 설정
05 : 54
애플리케이션 코딩 컨벤션 및 뷰 스타일 가이드 소개
01 : 08
섹션 3. 라우터 & 컴포넌트 설계
8 강의 30 : 08
깃헙 리포지토리 안내 및 클론
04 : 50
뷰 라우터 설치 및 연결
04 : 11
페이지 컴포넌트 생성 및 연결
04 : 17
라우팅 동작 확인
03 : 14
코드 스플리팅 소개 및 적용
05 : 38
초기 진입 페이지 설정
02 : 06
없는 페이지를 접근할 때의 라우터 처리
02 : 08
history mode 설정 및 싱글 페이지 애플리케이션 배포할 때 주의 사항
03 : 44
섹션 4. 회원 가입 페이지 개발
8 강의 37 : 20
회원 가입 페이지 개발을 위한 준비
04 : 06
헤더 컴포넌트 마크업 및 회원 가입 컴포넌트 생성
03 : 45
회원 가입 폼 마크업
02 : 34
회원 가입 폼 데이터 바인딩 및 이벤트 연결
04 : 24
회원 가입 API 요청을 위한 문서 확인
03 : 11
API 폴더와 회원 가입 API 함수 생성
05 : 59
회원 가입 API 호출과 주의 사항
05 : 55
회원 가입 이후의 동작 구현
07 : 26
섹션 5. 실무 환경을 위한 프로젝트 설정
3 강의 13 : 46
API 설정 공통화
04 : 35
env 파일과 설정 방법
03 : 34
Vue CLI의 env 파일 규칙과 실무 환경 구성 방법
05 : 37
섹션 6. 로그인 페이지 개발
10 강의 34 : 40
로그인 폼 컴포넌트 생성 및 마크업
03 : 07
로그인 폼 데이터 바인딩과 이벤트 연결
01 : 32
로그인 API 문서 확인 및 API 함수 생성
03 : 51
로그인 기능 구현
05 : 29
에러가 났을 때의 대처 방법과 로그 분석하는 방법
03 : 36
네트워크 에러 확인 방법과 에러 처리 코드 구현
04 : 11
에러 메시지 출력 및 에러 피드백 표시 방법
03 : 09
사용자 폼 유효성 검사 안내
03 : 22
computed 속성을 이용한 이메일 형식 검사
05 : 16
[퀴즈] 회원 가입 컴포넌트 유효성 검사
01 : 07
섹션 7. 로그인 상태 관리와 스토어
10 강의 41 : 24
메인 페이지 개발을 위한 브랜치 안내 및 코드 정리
03 : 42
로그인 동작 확인 및 구현 방향 복습
01 : 20
메인 페이지 라우팅 구현 및 확인
02 : 51
자바스크립트로 페이지 이동하기 구현 및 설명
03 : 30
로그인 이후의 동작 설명
02 : 40
컴포넌트 간 데이터 전달 방법 3가지와 구현 방향
03 : 03
뷰엑스 설치 및 연결
06 : 18
로그인 아이디 헤더에 표시하기
03 : 53
로그인 했을 때의 헤더 버튼 분기 처리
08 : 33
로그 아웃 기능 구현
05 : 34
섹션 8. 토큰을 이용한 API 인증 처리
10 강의 34 : 37
브랜치 전환 및 변경 사항 안내
02 : 52
학습 노트 조회 API를 호출하는 방법과 확인 사항
05 : 29
로그인 토큰 값 확인
01 : 57
HTTP 헤더에 토큰 값을 실는 방법
02 : 58
스토어를 이용한 토큰 저장 및 활용
03 : 07
저장된 토큰 값을 이용한 API 요청 및 의도치 않은 동작 확인
02 : 44
문제가 되는 동작 분석 및 해결 방향 안내
02 : 49
액시오스 인터셉터 소개
01 : 49
액시오스 인터셉터 모듈화 및 인스턴스에 연결하는 방법
06 : 51
인터셉터를 이용한 HTTP 헤더 설정
04 : 01
섹션 9. 학습 노트 데이터 조회
7 강의 21 : 39
학습 노트 조회 API 함수 구현
03 : 48
학습 노트 목록 표시를 위한 데이터 바인딩
02 : 55
학습 노트 생성 및 생성된 데이터 확인
03 : 07
학습 노트 목록 마크업 및 스타일링
03 : 40
학습 노트 목록 아이템 컴포넌트화
04 : 10
데이터 로딩 상태 표시
02 : 28
로딩 상태를 표시하는 스피너 등록
01 : 31
섹션 10. 브라우저 저장소를 이용한 인증 값 관리
5 강의 16 : 39
브랜치 전환 안내
01 : 04
화면 새로 고침 했을 때의 문제점 분석
01 : 51
로그인 인증 값 브라우저 저장소에 저장 후 확인
03 : 26
브라우저 저장소로 인증 값 보존
03 : 22
actions 속성을 이용한 로그인 기능 구현과 비동기 처리시 유의할 점
06 : 56
섹션 11. 학습 노트 데이터 생성
7 강의 28 : 47
학습 노트 등록 페이지로 이동하기 위한 버튼 생성 및 아이콘 적용
03 : 02
학습 노트 등록 페이지 라우터 생성 및 확인
01 : 59
학습 노트 등록 폼 마크업 및 스타일링
06 : 59
학습 노트 등록 폼의 데이터 바인딩 및 이벤트 연결
02 : 22
학습 노트 등록 API 구현 및 동작 확인
05 : 23
학습 노트 등록 에러 처리
04 : 54
학습 노트 본문 길이 유효성 검사 기능 구현
04 : 08
섹션 12. 중간 정리
2 강의 09 : 41
중간 리뷰
07 : 59
이후 강의 내용 요약
01 : 42
섹션 13. API 함수 모듈화
4 강의 13 : 37
API 모듈화를 위한 현재 구조 분석
01 : 49
인스턴스 생성 함수 분할
04 : 11
[실습 안내] 계정 관련 API 분할 및 실습 안내
03 : 02
[실습 답안] API 함수 모듈화 정리
04 : 35
섹션 14. 학습 노트 데이터 삭제
4 강의 12 : 54
삭제 기능 마크업 및 이벤트 연결
03 : 04
삭제 API 함수 및 기능 구현
04 : 03
삭제 기능 UX 개선
04 : 07
학습 노트 생성 기능 관련 UX 수정
01 : 40
섹션 15. 학습 노트 데이터 수정
5 강의 22 : 45
학습 노트 수정 아이콘 이벤트 연결 및 구현 방향 안내
02 : 55
학습 노트 수정 페이지 생성 및 라우터 연결
04 : 09
학습 노트 수정 페이지 마크업 및 라우터 파라미터 연결
04 : 20
학습 노트 수정을 위한 특정 게시물 조회 기능 구현
05 : 54
학습 노트 수정 API 및 기능 구현
05 : 27
섹션 16. 데이터 포맷팅
2 강의 06 : 44
뷰 필터 소개 및 적용
03 : 22
전역 필터 소개 및 설정
03 : 22
섹션 17. 라우터 심화
6 강의 18 : 12
라우터 네비게이션 가드 소개
01 : 57
라우터 네비게이션 가드 기초 코드
03 : 20
페이지별 인증 권한 설정
02 : 59
인증되지 않은 사용자 접근 제어
03 : 54
로그인 상태에 따른 로고 이동 링크 처리
02 : 48
로그 아웃 관련 코드 수정
03 : 14
섹션 18. 프런트엔드 테스팅 소개
14 강의 50 : 44
테스팅 환경 구성
03 : 19
테스트 코드가 필요한 이유
02 : 53
Jest 소개
03 : 20
자바스크립트 테스트 파일 소개 및 파일 경로 관련 안내
01 : 56
자바스크립트 테스트 코드 시작하기
04 : 38
테스트 코드 작성 팁
03 : 23
뷰 컴포넌트 테스트 방법
05 : 36
뷰 테스트 유틸 라이브러리 소개 및 적용
03 : 40
find()를 이용한 컴포넌트 HTML 요소 검색
03 : 08
로그인 폼의 인풋 박스 관련 테스트 코드 작성
03 : 50
이메일 유효성 검사 기능 동작 테스트 코드로 확인
02 : 35
로그인 컴포넌트 첫 번째 테스트 코드 작성
04 : 45
로그인 컴포넌트 두 번째 테스트 코드 작성
05 : 26
[실습 안내] 회원가입 컴포넌트 테스트 코드 작성
02 : 15
섹션 19. 강의 마무리
1 강의 05 : 28
학습 내용 정리 및 향후 학습 로드맵 안내
05 : 28

공개 일자

2020년 1월 30일 (마지막 업데이트 일자 : 2020년 1월 30일)

수강 후기

4.9
29개의 수강평
default_profile.png
junlh1210 1달 전
vue.js를 공부하기 위한 아주 좋은 강의입니다. 실제 코드를 git을 통하여 각 브랜치 별로 제공하고 있기 때문에 참고하면서 직접 코딩을 하는데 커다란 강점이 있습니다. 물론 강의의 수준이야 이전 강의를 들의셨다면 또다시 말씀드릴 필요가 없이 완벽하다 할 수 있습니다. 다만 처음 vuejs를 접하시는 분들은 이 강의를 들으시기전 적어도 "vuejs 완벽가이드"를 이해하셔야만 어려움이 없으실 것입니다. 이 강의를 완강한 다음 2가지의 아쉬움이 남는데 하나는 테스트에 관한 것이고 다른 하나는 백엔드에 대한 것입니다. 테스트는 저자께서 2020년 상반기 강의를 약속하셨기 때문에 그 때 아쉬움이 해소될 것을 기대하겠습니다. vuejs와 함께 연동하는 백엔드에 대한 궁금증이 많은데 이 점을 해소할 방법만 있다면 더욱 완벽한 강의가 될 것입니다. 좋은 강의를 기획해 주시고 수고하신 캡틴판교님께 감사드립니다.
default_profile.png
세훈정 1달 전
CRUD 해보며 전반적으로 익혀가면서도 디테일하게 알려주신 부분으로 도움이 참 많이된것 같습니다. jest 관련해서도 처음 익혀보게 되어서 좋았습니다. 이제껏 배운 바대로 개인 프로젝트 작업을 통해서 잘 마무리 지어보고자 합니다. 좋은 강좌 감사합니다 !
장기효(캡틴판교)

장기효(캡틴판교) 1달 전
안녕하세요 세훈님, 도움이 되었던 부분에 대해 자세히 적어주셔서 감사합니다 :) 개인 프로젝트 하실 때 수업 내용들을 많이 참고하셔서 재밌게 개발하실 수 있으면 좋겠네요. 후속 강의들도 많은 관심 부탁드립니다 감사합니다 :)

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스