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

BEST 개발 · 프로그래밍 웹 개발

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

(4.8)120개의 수강평 ∙ 1366명의 수강생

장기효(캡틴판교)

Front-End JavaScript Vue.js Vuex

110,000원

월 22,000원

5개월 할부 시

지식공유자 : 장기효(캡틴판교)

총 132개 수업˙총 8시간 18분

평생 무제한 수강

수료증 발급 강의

입문 초급 중급이상 대상

이 강의는 멘토링 신청이 가능합니다.

멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.

내 목록 추가 794

중급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

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 함수 패턴
- 라우터를 이용한 페이지 권한 처리 및 인증 처리
- 프런트엔드 테스팅 방법

🗒 강의 교안 소개

학습하시면서 아래 사이트도 함께 참고해보세요 :)

Cracking Vue.js 사이트 바로 가기

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

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

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

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

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

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

⛳️ 추천 학습 로드맵

1. Vue.js 시작하기
Age of Vue.js

2. Vue.js 중급 강좌
웹앱 제작으로 배우는
Vue.js, ES6, Vuex

3. 쉽게 배우는 웹팩
프론트엔드 프레임워크
(리액트, 앵귤러, 뷰)에서
필수로 사용되는 도구

4. Vue.js 고급 강좌
Vue.js 완벽 가이드
실습과 리팩토링으로
배우는 실전 기술

5. Vue.js 활용 강좌
실무에 필요한 모든 것
(현재 강좌)

Vue.js 전체 시리즈 강의 25% 할인 받기(클릭)
중학생, 고등학생, 대학생 학생 할인 50% 받기(클릭)

👨🏼‍🏫 강사 소개

장기효 (캡틴판교)

(현) 프런트엔드 개발자
Do it! Vue.js 입문 저자
네이버, 이베이 코리아, 삼성, SK 그룹 Vue.js 강의
패스트캠퍼스 Vue.js 정복캠프 강의
Google 웹 기술 공식 사이트 번역자
기술 블로그, Github

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

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

지식공유자가 알려주는
강의 수강 꿀팁!

🎓
이런 분들께
추천드려요!

프론트엔드 개발자

퍼블리셔

백엔드 개발자

대학생

Vue.js 실무 개발자

📚
선수 지식,
필요한가요?

HTML

CSS

Javascript

인프런에서 5년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 9시 30분 유튜브 생방송 진행)

이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. 강의 오리엔테이션 3강 ∙ 8분

제작할 애플리케이션 소개 미리보기 03:08

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

수업에서 사용할 API 문서 소개 01:58

섹션 1. 개발환경 구성 11강 ∙ 38분

개발 환경 소개 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분

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분

깃헙 리포지토리 안내 및 클론 04:50

뷰 라우터 설치 및 연결 04:11

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

라우팅 동작 확인 03:14

코드 스플리팅 소개 및 적용 05:38

초기 진입 페이지 설정 02:06

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

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

섹션 4. 회원 가입 페이지 개발 8강 ∙ 37분

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

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

회원 가입 폼 마크업 02:34

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

회원 가입 API 요청을 위한 문서 확인 03:11

API 폴더와 회원 가입 API 함수 생성 05:59

회원 가입 API 호출과 주의 사항 05:55

회원 가입 이후의 동작 구현 07:26

섹션 5. 실무 환경을 위한 프로젝트 설정 3강 ∙ 13분

API 설정 공통화 04:35

env 파일과 설정 방법 03:34

Vue CLI의 env 파일 규칙과 실무 환경 구성 방법 05:37

섹션 6. 로그인 페이지 개발 10강 ∙ 34분

로그인 폼 컴포넌트 생성 및 마크업 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분

메인 페이지 개발을 위한 브랜치 안내 및 코드 정리 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분

브랜치 전환 및 변경 사항 안내 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분

학습 노트 조회 API 함수 구현 03:48

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

학습 노트 생성 및 생성된 데이터 확인 03:07

학습 노트 목록 마크업 및 스타일링 03:40

학습 노트 목록 아이템 컴포넌트화 04:10

데이터 로딩 상태 표시 02:28

로딩 상태를 표시하는 스피너 등록 01:31

섹션 10. 브라우저 저장소를 이용한 인증 값 관리 5강 ∙ 16분

브랜치 전환 안내 01:04

화면 새로 고침 했을 때의 문제점 분석 01:51

로그인 인증 값 브라우저 저장소에 저장 후 확인 03:26

브라우저 저장소로 인증 값 보존 03:22

actions 속성을 이용한 로그인 기능 구현과 비동기 처리시 유의할 점 06:56

섹션 11. 학습 노트 데이터 생성 7강 ∙ 28분

학습 노트 등록 페이지로 이동하기 위한 버튼 생성 및 아이콘 적용 03:02

학습 노트 등록 페이지 라우터 생성 및 확인 01:59

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

학습 노트 등록 폼의 데이터 바인딩 및 이벤트 연결 02:22

학습 노트 등록 API 구현 및 동작 확인 05:23

학습 노트 등록 에러 처리 04:54

학습 노트 본문 길이 유효성 검사 기능 구현 04:08

섹션 12. 중간 정리 2강 ∙ 9분

중간 리뷰 07:59

이후 강의 내용 요약 01:42

섹션 13. API 함수 모듈화 4강 ∙ 13분

API 모듈화를 위한 현재 구조 분석 01:49

인스턴스 생성 함수 분할 04:11

[실습 안내] 계정 관련 API 분할 및 실습 안내 03:02

[실습 답안] API 함수 모듈화 정리 04:35

섹션 14. 학습 노트 데이터 삭제 4강 ∙ 12분

삭제 기능 마크업 및 이벤트 연결 03:04

삭제 API 함수 및 기능 구현 04:03

삭제 기능 UX 개선 04:07

학습 노트 생성 기능 관련 UX 수정 01:40

섹션 15. 학습 노트 데이터 수정 5강 ∙ 22분

학습 노트 수정 아이콘 이벤트 연결 및 구현 방향 안내 02:55

학습 노트 수정 페이지 생성 및 라우터 연결 04:09

학습 노트 수정 페이지 마크업 및 라우터 파라미터 연결 04:20

학습 노트 수정을 위한 특정 게시물 조회 기능 구현 05:54

학습 노트 수정 API 및 기능 구현 05:27

섹션 16. 데이터 포맷팅 2강 ∙ 6분

뷰 필터 소개 및 적용 03:22

전역 필터 소개 및 설정 03:22

섹션 17. 라우터 심화 6강 ∙ 18분

라우터 네비게이션 가드 소개 01:57

라우터 네비게이션 가드 기초 코드 03:20

페이지별 인증 권한 설정 02:59

인증되지 않은 사용자 접근 제어 03:54

로그인 상태에 따른 로고 이동 링크 처리 02:48

로그 아웃 관련 코드 수정 03:14

섹션 18. 프런트엔드 테스팅 소개 14강 ∙ 50분

테스팅 환경 구성 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강 ∙ 5분

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

강의 게시일 : 2020년 01월 30일 (마지막 업데이트일 : 2020년 01월 30일)

수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.

4.8

120개의 수강평

5점

4점

3점

2점

1점

VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

vue.js를 공부하기 위한 아주 좋은 강의입니다. 실제 코드를 git을 통하여 각 브랜치 별로 제공하고 있기 때문에 참고하면서 직접 코딩을 하는데 커다란 강점이 있습니다. 물론 강의의 수준이야 이전 강의를 들의셨다면 또다시 말씀드릴 필요가 없이 완벽하다 할 수 있습니다. 다만 처음 vuejs를 접하시는 분들은 이 강의를 들으시기전 적어도 "vuejs 완벽가이드"를 이해하셔야만 어려움이 없으실 것입니다. 이 강의를 완강한 다음 2가지의 아쉬움이 남는데 하나는 테스트에 관한 것이고 다른 하나는 백엔드에 대한 것입니다. 테스트는 저자께서 2020년 상반기 강의를 약속하셨기 때문에 그 때 아쉬움이 해소될 것을 기대하겠습니다. vuejs와 함께 연동하는 백엔드에 대한 궁금증이 많은데 이 점을 해소할 방법만 있다면 더욱 완벽한 강의가 될 것입니다. 좋은 강의를 기획해 주시고 수고하신 캡틴판교님께 감사드립니다.

2020-02-23

캡틴 판교님이 영어로 수업을 만들었다면 때부자가 되었을텐데 한국인만 이 강의를 들을 수 있는게 너무 아쉬워요. 수업 구성이나 수업 진행도 너무 좋지만 개인적으로 가장 좋았던 점은 수업 내내 잔실수가 많다는 점입니다. 미리 정확하게 짜여진 대본을 읽으면서 미리 짜놓은 코드를 복붙하는게 아니라 매번 직접 코딩하면서 보여주시기 때문에 당연히 잔실수들이 있을텐데요. 그 실수들을 확인하고 디버깅하는 과정이 배우는 입장에서는 매우매우 도움이 많이 됩니다. 이 강의를 고민하시는 분들에게 적극 추천합니다.

2020-05-10

Vue js 다섯개 강의 모두 봤습니다. 깔끔한 강의 감사합니다. 추가적으로 Nuxt 강의도 열어주시면 너무 좋을것 같습니다.

2020-11-09

강사님 너무 수고하셨어요. 고생 많으셨고요. 앞으로도 좋은 강의 많이 부탁해요. 한가지 아쉬운점은 직장인도 부담스러운 가격인데... 학생들은 더 부담을 느끼는 가격 같아요. 앞으로 가격 책정하실때 학생들 신경좀 써주세요. 강의 잘 들었습니다. 감사합니다.

2020-06-13

지식공유자장기효(캡틴판교)

안녕하세요 jackim97님, 좋은 의견 감사드립니다. 수강평을 남겨 주신지 벌써 6개월이 지났네요. 남겨주신 수강평 보고 학생 할인에 대해서 고민을 많이 했습니다. 인프런에서 학생 할인이 제공되기 전에 제가 먼저 뭔가 액션을 취하면 좋겠다고 생각했어요. 수입이 없는 학생 분들은 더 저렴한 가격으로 들으실 수 있도록 학생 할인 쿠폰 발급 페이지를 개발했습니다. 혹시 학생이시라면 아래 쿠폰으로 발급해서 이후 강의도 재밌게 들어주시면 좋겠구요. 주변 분들께도 많은 홍보 부탁드리겠습니다. 수강해 주셔서 감사합니다 :) https://inflearn-discount.netlify.com/

2021-01-04 5