Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

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

(4.8)
321개의 수강평 ∙  3,846명의 수강생
110,000원

월 22,000원

5개월 할부 시
지식공유자: 장기효(캡틴판교)
총 133개 수업 (8시간 22분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
프론트엔드 개발
화면 UI 개발
Vue.js 실무
Vue.js 실무 환경 구성
Vue.js 개발
백엔드 API 문서 읽는 방법

전 세계 박스 오피스 1위인 어벤져스의 엔드게임처럼,
Vue.js FE 개발교육의 엔드게임을 목표로 합니다 🚩

Vue.js 학습의
마지막 강좌 🌌

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


내용 미리 보기 
🗒

1번

  • 실무 환경에서 개발 생산성을 극대화하는 프로젝트 환경 구성

2번

  • 백엔드 개발자와 소통하는 방법과 REST API 문서 보는 방법

3번

  • REST API와 데이터베이스를 이용한 CRUD 애플리케이션 개발

4번

  • axios를 이용한 JSON 웹 토큰 인증 처리와 고급 API 함수 패턴

5번

  • 라우터를 이용한 페이지 권한 처리 및 인증 처리

6번

  • 프론트엔드 테스팅 방법


미리하는 Q&A 🙋🏻‍♂️

Q. 이전 Vue.js 강좌들을 듣지 않고도 수강 가능한가요?

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

Q. 강의 수강 후 정말 실무에서 프론트엔드 개발자로 일할 수 있을까요?

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

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

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

Q. 강의 교안이 있나요?

네, 학습하시면서 아래 사이트도 함께 참고해보세요.
Cracking Vue.js 사이트 바로 가기


연관 로드맵 🚎

Vue.js와 TypeScript로 정복하는 프론트엔드 개발
캡틴판교님의 뷰 + 타입스크립트로 한 번에
배우는 강의들로 구성된 로드맵입니다.
이 강의 포함


지식공유자 소개 👨‍🏫

장기효 (캡틴판교)

"인프런이 만난 사람" 인터뷰

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

강의 할인을 제공합니다!

시리즈 "Vue.js로 완성하는 프론트엔드
개발자 로드맵" 25% 할인 (클릭)

수입이 없는 중·고등학생,
대학생을 위한 학생 50% 할인 (클릭)

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
프론트엔드 개발자
퍼블리셔
백엔드 개발자
대학생
Vue.js 실무 개발자
📚
선수 지식,
필요할까요?
HTML
CSS
Javascript

안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교)의 썸네일

인프런에서 8년째 지식을 공유하고 있습니다.

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각을 들을 수 있는 곳

커리큘럼 총 133 개 ˙ 8시간 22분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 오리엔테이션
제작할 애플리케이션 소개 미리보기 03:08
현대 프런트엔드 개발 절차와 역할 03:10
수업에서 사용할 API 문서 소개 01:58
섹션 1. 개발환경 구성
개발 환경 소개 미리보기 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 클라우드 사이트 소개 및 가입 안내 01:20
MongoDB 클라우드 인스턴스 생성 및 설정 06:46
MongoDB 연결 확인 05:55
API 문서 보는 법과 사용하는 방법 04:17
섹션 2. 프로젝트 생성 및 환경 구성
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. 라우터 & 컴포넌트 설계
깃헙 리포지토리 안내 및 클론 04:50
뷰 라우터 설치 및 연결 04:11
페이지 컴포넌트 생성 및 연결 04:17
라우팅 동작 확인 03:14
코드 스플리팅 소개 및 적용 05:38
초기 진입 페이지 설정 02:06
없는 페이지를 접근할 때의 라우터 처리 02:08
history mode 설정 및 싱글 페이지 애플리케이션 배포할 때 주의 사항 03:44
섹션 4. 회원 가입 페이지 개발
회원 가입 페이지 개발을 위한 준비 04:06
헤더 컴포넌트 마크업 및 회원 가입 컴포넌트 생성 03:45
회원 가입 폼 마크업 02:34
회원 가입 폼 데이터 바인딩 및 이벤트 연결 04:24
회원 가입 API 요청을 위한 문서 확인 03:11
API 폴더와 회원 가입 API 함수 생성 05:59
회원 가입 API 호출과 주의 사항 05:55
회원 가입 이후의 동작 구현 07:26
섹션 5. 실무 환경을 위한 프로젝트 설정
API 설정 공통화 04:35
env 파일과 설정 방법 03:34
Vue CLI의 env 파일 규칙과 실무 환경 구성 방법 05:37
섹션 6. 로그인 페이지 개발
로그인 폼 컴포넌트 생성 및 마크업 03:07
로그인 폼 데이터 바인딩과 이벤트 연결 01:32
로그인 API 문서 확인 및 API 함수 생성 03:51
로그인 기능 구현 05:29
에러가 났을 때의 대처 방법과 로그 분석하는 방법 03:36
네트워크 에러 확인 방법과 에러 처리 코드 구현 04:11
에러 메시지 출력 및 에러 피드백 표시 방법 03:09
사용자 폼 유효성 검사 안내 03:22
computed 속성을 이용한 이메일 형식 검사 05:16
[퀴즈] 회원 가입 컴포넌트 유효성 검사 01:07
섹션 7. 로그인 상태 관리와 스토어
메인 페이지 개발을 위한 브랜치 안내 및 코드 정리 03:42
로그인 동작 확인 및 구현 방향 복습 01:20
메인 페이지 라우팅 구현 및 확인 02:51
자바스크립트로 페이지 이동하기 구현 및 설명 03:30
로그인 이후의 동작 설명 02:40
컴포넌트 간 데이터 전달 방법 3가지와 구현 방향 03:03
뷰엑스 설치 및 연결 06:18
로그인 아이디 헤더에 표시하기 03:53
로그인 했을 때의 헤더 버튼 분기 처리 08:33
로그 아웃 기능 구현 05:34
섹션 8. 토큰을 이용한 API 인증 처리
브랜치 전환 및 변경 사항 안내 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. 학습 노트 데이터 조회
학습 노트 조회 API 함수 구현 03:48
학습 노트 목록 표시를 위한 데이터 바인딩 02:55
학습 노트 생성 및 생성된 데이터 확인 03:07
학습 노트 목록 마크업 및 스타일링 03:40
학습 노트 목록 아이템 컴포넌트화 04:10
데이터 로딩 상태 표시 02:28
로딩 상태를 표시하는 스피너 등록 01:31
섹션 10. 브라우저 저장소를 이용한 인증 값 관리
브랜치 전환 안내 01:04
화면 새로 고침 했을 때의 문제점 분석 01:51
로그인 인증 값 브라우저 저장소에 저장 후 확인 03:26
브라우저 저장소로 인증 값 보존 03:22
actions 속성을 이용한 로그인 기능 구현과 비동기 처리시 유의할 점 06:56
섹션 11. 학습 노트 데이터 생성
학습 노트 등록 페이지로 이동하기 위한 버튼 생성 및 아이콘 적용 03:02
학습 노트 등록 페이지 라우터 생성 및 확인 01:59
학습 노트 등록 폼 마크업 및 스타일링 06:59
학습 노트 등록 폼의 데이터 바인딩 및 이벤트 연결 02:22
학습 노트 등록 API 구현 및 동작 확인 05:23
학습 노트 등록 에러 처리 04:54
학습 노트 본문 길이 유효성 검사 기능 구현 04:08
섹션 12. 중간 정리
중간 리뷰 07:59
이후 강의 내용 요약 01:42
섹션 13. API 함수 모듈화
API 모듈화를 위한 현재 구조 분석 01:49
인스턴스 생성 함수 분할 04:11
[실습 안내] 계정 관련 API 분할 및 실습 안내 03:02
[실습 답안] API 함수 모듈화 정리 04:35
섹션 14. 학습 노트 데이터 삭제
삭제 기능 마크업 및 이벤트 연결 03:04
삭제 API 함수 및 기능 구현 04:03
삭제 기능 UX 개선 04:07
학습 노트 생성 기능 관련 UX 수정 01:40
섹션 15. 학습 노트 데이터 수정
학습 노트 수정 아이콘 이벤트 연결 및 구현 방향 안내 02:55
학습 노트 수정 페이지 생성 및 라우터 연결 04:09
학습 노트 수정 페이지 마크업 및 라우터 파라미터 연결 04:20
학습 노트 수정을 위한 특정 게시물 조회 기능 구현 05:54
학습 노트 수정 API 및 기능 구현 05:27
섹션 16. 데이터 포맷팅
뷰 필터 소개 및 적용 03:22
전역 필터 소개 및 설정 03:22
섹션 17. 라우터 심화
라우터 네비게이션 가드 소개 01:57
라우터 네비게이션 가드 기초 코드 03:20
페이지별 인증 권한 설정 02:59
인증되지 않은 사용자 접근 제어 03:54
로그인 상태에 따른 로고 이동 링크 처리 02:48
로그 아웃 관련 코드 수정 03:14
섹션 18. 프런트엔드 테스팅 소개
테스팅 환경 구성 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. 강의 마무리
학습 내용 정리 및 향후 학습 로드맵 안내 05:28
강의 게시일 : 2020년 01월 30일 (마지막 업데이트일 : 2022년 02월 13일)
수강평 총 321개
수강생분들이 직접 작성하신 수강평입니다.
4.8
321개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
jij5247 thumbnail
5
캡틴 판교님이 영어로 수업을 만들었다면 때부자가 되었을텐데 한국인만 이 강의를 들을 수 있는게 너무 아쉬워요. 수업 구성이나 수업 진행도 너무 좋지만 개인적으로 가장 좋았던 점은 수업 내내 잔실수가 많다는 점입니다. 미리 정확하게 짜여진 대본을 읽으면서 미리 짜놓은 코드를 복붙하는게 아니라 매번 직접 코딩하면서 보여주시기 때문에 당연히 잔실수들이 있을텐데요. 그 실수들을 확인하고 디버깅하는 과정이 배우는 입장에서는 매우매우 도움이 많이 됩니다. 이 강의를 고민하시는 분들에게 적극 추천합니다.
2020-05-10
junlh1210 thumbnail
5
vue.js를 공부하기 위한 아주 좋은 강의입니다. 실제 코드를 git을 통하여 각 브랜치 별로 제공하고 있기 때문에 참고하면서 직접 코딩을 하는데 커다란 강점이 있습니다. 물론 강의의 수준이야 이전 강의를 들의셨다면 또다시 말씀드릴 필요가 없이 완벽하다 할 수 있습니다. 다만 처음 vuejs를 접하시는 분들은 이 강의를 들으시기전 적어도 "vuejs 완벽가이드"를 이해하셔야만 어려움이 없으실 것입니다. 이 강의를 완강한 다음 2가지의 아쉬움이 남는데 하나는 테스트에 관한 것이고 다른 하나는 백엔드에 대한 것입니다. 테스트는 저자께서 2020년 상반기 강의를 약속하셨기 때문에 그 때 아쉬움이 해소될 것을 기대하겠습니다. vuejs와 함께 연동하는 백엔드에 대한 궁금증이 많은데 이 점을 해소할 방법만 있다면 더욱 완벽한 강의가 될 것입니다. 좋은 강의를 기획해 주시고 수고하신 캡틴판교님께 감사드립니다.
2020-02-23
세훈정 thumbnail
5
CRUD 해보며 전반적으로 익혀가면서도 디테일하게 알려주신 부분으로 도움이 참 많이된것 같습니다. jest 관련해서도 처음 익혀보게 되어서 좋았습니다. 이제껏 배운 바대로 개인 프로젝트 작업을 통해서 잘 마무리 지어보고자 합니다. 좋은 강좌 감사합니다 !
2020-02-19
지식공유자 장기효(캡틴판교)
안녕하세요 세훈님, 도움이 되었던 부분에 대해 자세히 적어주셔서 감사합니다 :) 개인 프로젝트 하실 때 수업 내용들을 많이 참고하셔서 재밌게 개발하실 수 있으면 좋겠네요. 후속 강의들도 많은 관심 부탁드립니다 감사합니다 :)
2020-02-21
히나타 thumbnail
5
Vue js 다섯개 강의 모두 봤습니다. 깔끔한 강의 감사합니다. 추가적으로 Nuxt 강의도 열어주시면 너무 좋을것 같습니다.
2020-11-09
jackim97 thumbnail
3
강사님 너무 수고하셨어요. 고생 많으셨고요. 앞으로도 좋은 강의 많이 부탁해요. 한가지 아쉬운점은 직장인도 부담스러운 가격인데... 학생들은 더 부담을 느끼는 가격 같아요. 앞으로 가격 책정하실때 학생들 신경좀 써주세요. 강의 잘 들었습니다. 감사합니다.
2020-06-13
지식공유자 장기효(캡틴판교)
안녕하세요 jackim97님, 좋은 의견 감사드립니다. 수강평을 남겨 주신지 벌써 6개월이 지났네요. 남겨주신 수강평 보고 학생 할인에 대해서 고민을 많이 했습니다. 인프런에서 학생 할인이 제공되기 전에 제가 먼저 뭔가 액션을 취하면 좋겠다고 생각했어요. 수입이 없는 학생 분들은 더 저렴한 가격으로 들으실 수 있도록 학생 할인 쿠폰 발급 페이지를 개발했습니다. 혹시 학생이시라면 아래 쿠폰으로 발급해서 이후 강의도 재밌게 들어주시면 좋겠구요. 주변 분들께도 많은 홍보 부탁드리겠습니다. 수강해 주셔서 감사합니다 :) https://inflearn-discount.netlify.com/
2021-01-04