Vue.js + TypeScript 완벽 가이드
장기효(캡틴판교)
₩88,000
중급이상 / Vue.js, TypeScript
4.8
(66)
Vue.js에서 타입스크립트를 시작하는 분들을 위한 최고의 강의. 2개의 실습 프로젝트로 재밌게 배워보는 Vue.js + 타입스크립트 완전 정복. 배우면서 바로 실무에 적용해 보세요! 😄
중급이상
Vue.js, TypeScript
React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지. Next.js를 한방에 해결합니다.
Next.js 14(최신 버전)
Next.js 실무 프로젝트 폴더 구조
Next와 React 컴포넌트 설계
Next.js 실무 코딩 팁
React
JavaScript
NPM
REST API
네트워크와 HTTP 프로토콜
성능 최적화
React 프로젝트를 시작하기 위해 거의 0순위로 선택되는 Next.js 프레임워크. React도 아직 잘 모르겠는데 Next.js는 어떻게 배우면 좋을까요?
개발 방식이 자유로운 React에 규칙을 더하고, 개발자들이 챙겨야 하는 라우팅과 성능 등을 알아서 챙겨주는 Next.js 프레임워크. 방대한 Next.js 공식 문서 앞에 혼자서 길을 잃을 필요가 없습니다. Next.js 공식 문서보다 이해하기 쉬운 한글 교안이 있으니까요. ❤
수년 간 입문자의 관점에서 어려운 기술들을 쉽게 설명해 온 캡틴판교가 이번엔 Next.js를 뽀개드립니다. 입문자를 배려한 쉬운 용어 설명과 눈으로 직접 보여주는 동작 원리부터 실무자를 사로 잡는 렌더링, 네트워크, 성능, 하이드레이션 등 실무 개념 설명까지. Next.js 시작하기 강의가 여러분을 도와드립니다.
📌 REST API를 연동하여 쇼핑몰 사이트를 만들면서 Next의 기초 개념부터 고급 개념까지 모두 체득합니다.
📌 짧은 시간 안에 코드를 빠르고 정확하게 작성하는 11년차 프런트엔드 개발자의 꿀팁 대방출
📌 크롬 개발자 도구, HTTP 프로토콜, 성능 최적화 등 실전에서 꼭 알아야 하는 지식들도 같이 알려드립니다
📌 중간 중간 배운 내용을 소화할 수 있는 실습이 곳곳에 배치되어 있습니다.
📌 CSR, SSR, Hydration, 클라이언트 네비게이션 등의 모든 개념은 브라우저를 직접 까서 같이 눈으로 보고 이해해요.
📌 언제 어디서나 쉽게 접근할 수 있는 웹 사이트 기반 강의 교안이 제공됩니다.
Next.js 프로젝트를 시작해요.
React도 잘 모르는데 Next.js로 회사 프로젝트를 해야 돼요.
개발을 쉽게 하려면 어떤 개념들과 기술을 알아야 하나요?
React로 취업을 준비하고 있어요.
채용 공고마다 자격 요건에
Next.js가 들어가 있는데
회사에서 실제로 요구하는 역량이 무엇인가요?
잘하는 프런트엔드 개발자는
어떻게 일하는지 궁금해요
네카라쿠배에서 인정받는 개발자는 어떤 역량을 갖추고 있을까요?
숙련된 실무자가 알고 있는 지식과 노하우가 궁금합니다.
Next.js로 웹 애플리케이션을 구현하는게 쉬워집니다.
코드를 더 정확하고 빠르게 작성하는 스킬이 생깁니다.
클라이언트 레벨의 지식 뿐만 아니라 서버, 네트워크, 성능 최적화에 대해서도 알게 됩니다.
실무에서 프로젝트 생성부터 폴더 구조화 등의 전반적인 컨벤션까지 자신감 있게 주도할 수 있어요.
실무 프로젝트 폴더 구조와 실무 개발 환경 설정 방법
Next.js의 기본 개념에 기반한 폴더 구조 설계 방법과 ESLint, Prettier를 이용해 코드 타이핑을 줄이고 개발 생산성을 줄이는 방법을 배워봅니다.
React + Next.js의 필수 개념과 문법들
작성한 코드의 흐름을 정확히 이해할 수 있게 친절하고 구체적인 도식으로 설명합니다. CSR, SSR, Hydration 뿐만 아니라 React, JavaScript 필수 문법까지 모두 설명해 주는 혜자 강의 🎁
네트워크, HTTP, 성능 최적화에 대한 깊은 이해
웹 페이지가 그려지기까지의 리소스 요청과 렌더링 과정에 대해 눈으로 직접 보여드리면서 설명합니다. 서버, CDN, HTTP, 성능 최적화 등 입문자 관점에서 낯선 용어는 모두 풀어서 설명해 드려요 ❤
코드를 짧은 시간에 빠르고 정확하게 작성하는 방법과 숙련된 실무자의 단축키 꿀팁
실무자의 중요한 스킬 중 하나인 코딩 실력과 구현 역량. 짧은 시간 안에 많은 기능을 정확하고 빠르게 구현할수 있는 단축키와 코딩 꿀팁을 대방출합니다 🚀
11년차 프론트엔드 개발자
저서
기업 강의 : 네이버, 삼성, LG, SK, 현차, CJ 등 실무자 대상 강의
"인프런이 만난 사람" 인터뷰
운영 체제 및 버전(OS): 강의에서 Mac을 쓰지만 Windows 관련 단축키도 모두 설명합니다.
사용 도구: VSCode
언제든지 편하게 볼 수 있는 웹 사이트 교안이 제공됩니다 😄
소스 코드를 확인할 수 있는 깃헙 리포지토리도 제공돼요 📘
보면서 더 많은 지식을 채울 수 있는 무료 교육 영상과 자료도 다수 제공됩니다 ❤
JavaScript와 React 기본 문법을 알고 있으면 수업 내용을 더 잘 이해할 수 있습니다(변수, 함수, 반복문, 컴포넌트, props 정도만 알고 계셔도 돼요 💪)
만들면서 배우는 리액트: 기초와 만들면서 배우는 리액트: 컴포넌트 설계를 듣고 오시면 더 듣기 수월합니다 😄
학습 대상은
누구일까요?
Next.js를 시작하는 입문자
React와 Next.js를 한번에 배우고 싶은 입문자
Next.js 실무 개발이 궁금한 프런트엔드 개발자
Next.js에 관심 있는 웹 개발자
선수 지식,
필요할까요?
React 기본 문법(위 선수 지식에 안내된 강의를 듣고 오시는 걸 추천드려요)
JavaScript 기본 문법
46,768
명
수강생
4,479
개
수강평
3,812
개
답변
4.9
점
강의 평점
17
개
강의
인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙
📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳
전체
70개 ∙ (7시간 57분)
강의 소개
07:35
개발 환경 안내
03:10
VSCode 필수 플러그인 설치 안내
04:38
Next와 React 소개
03:57
Next.js 주요 특징
10:23
Next.js 프로젝트 생성
08:58
Next.js 라우팅 방식 설명
03:41
페이지 라우팅 구성 후 컴포넌트 분석
05:06
Link 컴포넌트 설명
06:27
layout 컴포넌트 생성 및 적용
08:05
제작할 웹 애플리케이션 소개
01:52
백엔드 서버 구성
05:33
강의 관련 요청 사항 설문 조사 안내
02:59
동적 라우팅 소개
03:47
동적 라우팅 id 값 확인
05:35
리액트 props 문법 소개
08:12
props 실습 정답
01:52
상품 상세 페이지 이동 기능 구현
03:21
장바구니 아이템 추가 API 구현
08:31
에러 분석 및 코드 정리
03:02
장바구니 페이지의 목록 UI 표시
05:46
장바구니 목록 UI 스타일링
06:44
장바구니 삭제 기능 구현
09:23
API 라우트 설명
04:52
Hydration이란?
08:06
수업에서 배운 내용 정리
16:00
앱 라우터와 페이지 라우터의 차이점
04:03
강의 마무리
04:14
전체
73개
4.8
73개의 수강평
₩55,000