25%
110,000원
82,500원
월 16,500원
5개월 할부 시이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
[프론트엔드, 웹 개발] 강의입니다.
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로 정복하는 프론트엔드 개발
캡틴판교님의 뷰 + 타입스크립트로 한 번에
배우는 강의들로 구성된 로드맵입니다.이 강의 포함
지식공유자 소개 👨🏫
장기효 (캡틴판교)
- 현 프론트엔드 개발자
- "Do it! Vue.js 입문" 저자
- 네이버, 이베이코리아, 삼성, LG, SK그룹 등 Vue.js 강의
- 패스트캠퍼스 Vue.js 정복캠프 강의
- Google 웹 기술 공식 사이트 번역자
- 기술 블로그, Github
"인프런이 만난 사람" 인터뷰
“강의 수익으로 Vue.js 오픈소스 +
생활코딩을 후원합니다 😁”
🎓
이런 분들께
추천드려요!
이런 분들께
추천드려요!
프론트엔드 개발자
퍼블리셔
백엔드 개발자
대학생
Vue.js 실무 개발자
📚
선수 지식,
필요한가요?
선수 지식,
필요한가요?
HTML
CSS
Javascript
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
인프런에서 7년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 9시 30분 유튜브 생방송 진행)
커리큘럼
총 133 개
˙ 8시간 22분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 오리엔테이션
3 강
∙ 8분
섹션 1. 개발환경 구성
12 강
∙ 41분
개발 환경 소개
미리보기
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. 프로젝트 생성 및 환경 구성
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일
(마지막 업데이트일 : 2022년 02월 13일)
수강평
총 294개
수강생분들이 직접 작성하신 수강평입니다.
4.8
294개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
캡틴 판교님이 영어로 수업을 만들었다면 때부자가 되었을텐데 한국인만 이 강의를 들을 수 있는게 너무 아쉬워요.
수업 구성이나 수업 진행도 너무 좋지만 개인적으로 가장 좋았던 점은 수업 내내 잔실수가 많다는 점입니다. 미리 정확하게 짜여진 대본을 읽으면서 미리 짜놓은 코드를 복붙하는게 아니라 매번 직접 코딩하면서 보여주시기 때문에 당연히 잔실수들이 있을텐데요. 그 실수들을 확인하고 디버깅하는 과정이 배우는 입장에서는 매우매우 도움이 많이 됩니다.
이 강의를 고민하시는 분들에게 적극 추천합니다.
2020-05-10
vue.js를 공부하기 위한 아주 좋은 강의입니다. 실제 코드를 git을 통하여 각 브랜치 별로 제공하고 있기 때문에 참고하면서 직접 코딩을 하는데 커다란 강점이 있습니다. 물론 강의의 수준이야 이전 강의를 들의셨다면 또다시 말씀드릴 필요가 없이 완벽하다 할 수 있습니다. 다만 처음 vuejs를 접하시는 분들은 이 강의를 들으시기전 적어도 "vuejs 완벽가이드"를 이해하셔야만 어려움이 없으실 것입니다.
이 강의를 완강한 다음 2가지의 아쉬움이 남는데 하나는 테스트에 관한 것이고 다른 하나는 백엔드에 대한 것입니다. 테스트는 저자께서 2020년 상반기 강의를 약속하셨기 때문에 그 때 아쉬움이 해소될 것을 기대하겠습니다.
vuejs와 함께 연동하는 백엔드에 대한 궁금증이 많은데 이 점을 해소할 방법만 있다면 더욱 완벽한 강의가 될 것입니다.
좋은 강의를 기획해 주시고 수고하신 캡틴판교님께 감사드립니다.
2020-02-23
CRUD 해보며 전반적으로 익혀가면서도 디테일하게 알려주신 부분으로 도움이 참 많이된것 같습니다. jest 관련해서도 처음 익혀보게 되어서 좋았습니다. 이제껏 배운 바대로 개인 프로젝트 작업을 통해서 잘 마무리 지어보고자 합니다. 좋은 강좌 감사합니다 !
2020-02-19
Vue js 다섯개 강의 모두 봤습니다. 깔끔한 강의 감사합니다. 추가적으로 Nuxt 강의도 열어주시면 너무 좋을것 같습니다.
2020-11-09
강사님 너무 수고하셨어요. 고생 많으셨고요. 앞으로도 좋은 강의 많이 부탁해요. 한가지 아쉬운점은 직장인도 부담스러운 가격인데... 학생들은 더 부담을 느끼는 가격 같아요. 앞으로 가격 책정하실때 학생들 신경좀 써주세요. 강의 잘 들었습니다. 감사합니다.
2020-06-13
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
