프론트엔드 기초 온라인 강의

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기

김민태에게 배우면 어떻게 바뀌나요?

👍🏻 이 강의로 학습하면

  • 1. JavaScript와 TypeScript를 함께 배워 기본기가 탄탄해집니다.

  • 2. 실제 프로젝트에 대한 응용력이 자라고, 빠르게 변하는 기술도 쉽게 익힐 수 있게 됩니다.

  • 3. 웹앱의 전체적인 구조와 비동기 프로그래밍에 대한 이해가 깊어집니다.

무엇을 배우나요?

우아한형제들 기술이사 김민태에게 직접 들어보세요!

기본기를 탄탄하게 하기 위해
JS와 TS를 통합적으로 학습합니다.
JavaScript와 TypeScript를 분절하여 학습하는 타사 교육 방식과는 다릅니다. Hacker News 클라이언트 프로젝트를 JavaScript로 개발하고 그 결과물을 TypeScript로 변환해보면서 각 언어의 특징을 확실하게 이해하고 활용할 수 있도록 탄탄하게 기초를 다집니다.

프레임워크를 사용하지 않고, 순수 스크립트로만 개발하며 JavaScript의 문법 뿐만 아니라 웹 애플리케이션의 구성요소와 동작원리까지 이해할 수 있습니다.
先 프로젝트 後 문법 방식의 차별화된
커리큘럼으로 설계되었습니다.
패스트캠퍼스 Only!
선 문법, 후 프로젝트로 구성되어 있는 타사 콘텐츠와는 다릅니다.
기본 문법부터 진행하는 커리큘럼에서 벗어나 간단한 문법과 함께 예제를 만들면서 문법에 대한 이해를 발전시켜나가고, 세부적인 개별 문법들은 핵심만 다루는 레퍼런스형 클립 강의로 제공됩니다.
기본 프로젝트에 살을 붙이는 방식으로
웹앱 구조와 비동기 프로그래밍을 정복합니다.
초심자가 어려워하는 내용 중 하나인 비동기 프로그래밍을 학습하기 위해 먼저 동기 프로그래밍으로 시작하여 점진적으로 비동기 코드로 변환하는 프로그래밍 방식으로 진행합니다.

페이지, 페이지 전환, 전역 상태관리 및 데이터의 UI 변환 과정 등 모든 웹앱들이 공통적으로 갖는 구조에 대해 경험해볼 수 있도록 최소한의 기능들로 구성된 프로젝트로 기초 학습합니다.

선별된 프로젝트 4가지로 실습합니다.

해커뉴스 클라이언트

해커뉴스가 제공하는 API를 활용하여 모든 웹앱이 공통적으로 가지고 있는 구조를 익혀봅니다. 화면구성, 내부 상태관리 등의 기본적인 기능을 학습하고, 개발 트렌드까지 접할 수 있습니다.

회원가입 프로젝트

UI개발에서 가장 많이 활용되는 요소 중 하나인 입력 폼에 대해 배워봅니다. 입력 값이 많은 회원가입 프로젝트를 통해 입력된 데이터를 다루고 처리하는 방법에 대해 학습할 수 있습니다.

로그인 프로젝트

로그인은 웹 애플리케이션에서 가장 기본적인 기능입니다. 로그인 기능을 구현하기 위해 프론트엔드 측면에서 고려해야하는 기술들과 API 처리에 대해 학습합니다.

차트 라이브러리

프론트엔드에서는 다양한 데이터를 시각적으로 예쁘게 보여주는 것도 중요합니다. 애니메이션, 그래프를 그려내는 차트 라이브러리를 직접 구현하는 방법에 대해서도 학습할 수 있습니다.

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기

이런 분들은 꼭 들으세요.

• 프론트엔드 개발자로 커리어를 시작/확장하고자 하는 퍼블리셔, 입문 개발자들
• HTML/CSS 개발이 가능하고, JS 문법을 가볍게라도 훑어본 경험이 있는 분
• JS를 혼자 공부하려고 했지만 번번히 중도 포기, 실패한 분
• 퍼블리셔 업무에 한계를 느낀 분

강사 김민태를 소개합니다.

김민태 프론트엔드 개발자
이력
現 우아한형제들 기술 이사, 프론트엔드 개발 그룹장
前 피키캐스트 웹 프론트엔드 파트 리더
前 NCSoft 차장
前 KTH 웹 플랫폼팀 팀장, iOS 개발팀 팀장

교육 경험
• 우아한형제들 개발자 채용 및 사내외 교육 진행
• 패스트캠퍼스 오프라인 JavaScript 부트 캠프 과정 14기 진행
• 패스트캠퍼스 온라인 The RED : React와 Redux로 구현하는 아키텍처와 리스크 관리 강의 진행

기타 활동
• 한국 웹 20주년 국제 콘퍼런스 강연
시중에 널려있는 레시피형 학습만으로는 부족해요. 실제 상황에 대한 응용력이 부족하고 변하는 기술을 학습하기 어렵기 때문입니다. 이를 보완하여 설계한 제 프론트엔드 아카데미 강의 시리즈가 여러분의 자가(自家) 학습력 배양에 큰 도움이 될 거예요. 여러분이 단순한 개발자가 아닌, 경쟁력 있는 개발자로 성장할 수 있도록 이끌어 드리겠습니다!

커리큘럼을 확인하세요.

아래의 모든 챕터 클립들을 강의 하나로 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!
* 전체오픈된 커리큘럼이 아니며, 촬영 및 편집과정에서 분량과 내용, 순서의 일부 변동이 있을 수 있습니다.

  • Part 1. 시작하며
    • (웹앱)프로그래밍 어떻게 배울것인가?
    • 빠르게 배워야할 것, 나중에 배워야할 것, 반복해 배워야할 것
    • 강의의 구조와 학습 환경
    15분 ㅣ 3개 강의
    Part 1. 시작하며
    • (웹앱)프로그래밍 어떻게 배울것인가?
    • 빠르게 배워야할 것, 나중에 배워야할 것, 반복해 배워야할 것
    • 강의의 구조와 학습 환경
    15분 ㅣ 3개 강의
  • Part 2. Javascript 그리고 Typescript
    • Javascript 변천사
    • 웹앱의 구성요소
    • 모던 Javascript와 개발 환경
    • Typescript vs. Javascript
    • nodejs & npm 그리고 deno
    15분 ㅣ 5개 강의
    Part 2. Javascript 그리고 Typescript
    • Javascript 변천사
    • 웹앱의 구성요소
    • 모던 Javascript와 개발 환경
    • Typescript vs. Javascript
    • nodejs & npm 그리고 deno
    15분 ㅣ 5개 강의
  • Part 3. Javascript Starter Kit - Hacker News Client
    • Hacker News 클라이언트 앱
    • 12줄의 코드로 시작하기
    • 두 개의 화면을 가진 웹앱
    • 문자열을 활용한 HTML 다루기
    • 라우터? 화면 처리기 만들기
    • 페이징 구현하기
    • 복잡한 UI 구현을 위한 준비 작업 - 템플릿
    • 댓글 목록이 표시되는 아름다운 UI 만들기
    • 상태를 가져보자, 읽은 글 표시하기
    60분 ㅣ 9개 강의
    Part 3. Javascript Starter Kit - Hacker News Client
    • Hacker News 클라이언트 앱
    • 12줄의 코드로 시작하기
    • 두 개의 화면을 가진 웹앱
    • 문자열을 활용한 HTML 다루기
    • 라우터? 화면 처리기 만들기
    • 페이징 구현하기
    • 복잡한 UI 구현을 위한 준비 작업 - 템플릿
    • 댓글 목록이 표시되는 아름다운 UI 만들기
    • 상태를 가져보자, 읽은 글 표시하기
    60분 ㅣ 9개 강의
  • Part 4. Typescript Start Kit - Hacker News 마이그레이션
    • 타입스크립트를 위한 환경 설정
    • 변수에 타입 작성하기
    • 함수의 규격 작성하기
    • 타입과 인터페이스
    • 상속과 믹스인
    • 뷰 클래스로 코드 구조 개선
    • 파일의 분리, 더욱 성장할 앱을 위한 준비
    • 안전한 전역 상태 관리
    • XHR to Fetch & Promise
    • 콜백 함수 없는 비동기 코드 작성법
    60분 ㅣ 10개 강의
    Part 4. Typescript Start Kit - Hacker News 마이그레이션
    • 타입스크립트를 위한 환경 설정
    • 변수에 타입 작성하기
    • 함수의 규격 작성하기
    • 타입과 인터페이스
    • 상속과 믹스인
    • 뷰 클래스로 코드 구조 개선
    • 파일의 분리, 더욱 성장할 앱을 위한 준비
    • 안전한 전역 상태 관리
    • XHR to Fetch & Promise
    • 콜백 함수 없는 비동기 코드 작성법
    60분 ㅣ 10개 강의

Part 5. 실용 튜토리얼

• 회원가입 폼

- 앱 설계

- 벨리데이션 구조 설계

- 오류 정보 UX 선택하기

• 로그인

- 앱 설계

- 병렬, 연속적 비동기 API 처리의 이해

- 예외 처리 흐름 설계

• 차트 라이브러리 만들기

- 그래픽 시스템 Overview

- 소프트웨어를 위한 소프트웨어

- 라이브러리 설계 원칙

- 차트 라이브러리 구현

- 배포 및 버전 전략

- 하위 호환성 유지

Part 6. 참조사전

문법

• 식별자 • 값(Value)
• 타입 • 변수&상수
• 식(연산/계산)
• 참조&복사
• 조건(분기)문
• 반복문 • 예외
• 인터페이스와 타입 별칭
• 함수 • 속성과 메소드
• 일급 함수 • 비동기 함수
• 생성기 함수
• 데이터로서의 객체
• 프로그래밍 도구로서의 객체
• 배열 • 배열 연산
• 튜플 • 클래스
• 인스턴스 • 프로토타입
• 컨텍스트 • 클로저
• 제네릭 • 타입 가드
• @types

개념과 구조

• 라이프 사이클과 스코프
• 동기와 비동기
• DOM
• 이벤트 시스템
• 런타임&컴파일 타임
• API
• 폴리필
• 순회
• 프로토콜
• 이터러블, 이터레이터 프로토콜

프로세싱 - 형태의 변환

• 객체를 문자열로 변환
• 문자열을 형태가 다른 문자열로 변환
• 문자열 변환 고급 기법(템플릿)
• 객체를 형태 다른 객체로 변환
• 문자열을 객체로 변환
• 객체의 병합(Merge)

도구

• 디버거 - 크롬 개발자 도구
• Webpack & etc
• Babel
• NPM vs Yarn
• CSS vs SASS
• RESTful
• REPL
• 다음 세대의 node.js! deno

  • Part 7. 부록
    • 코드는 하나다? 코드를 구성하는 요소들은 무엇이 있을까?
    • 추상화? 추상화란 무엇이고 왜 필요할까?
    • JavaScript는 어떻게 변해갈까?
    • HTML,CSS 그리고 JavaScript 학습 전략
    • JavaScript 런타임 node와 브라우저 환경의 차이
    • Back-end 프로그래밍 배워야할까?
    Part 7. 부록
    • 코드는 하나다? 코드를 구성하는 요소들은 무엇이 있을까?
    • 추상화? 추상화란 무엇이고 왜 필요할까?
    • JavaScript는 어떻게 변해갈까?
    • HTML,CSS 그리고 JavaScript 학습 전략
    • JavaScript 런타임 node와 브라우저 환경의 차이
    • Back-end 프로그래밍 배워야할까?

  • 상세 커리큘럼.

    자세한 커리큘럼 및 내용은 여기서 확인하세요!

    자세히 보기 »

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기

프론트엔드 아카데미 Online
로드맵의 첫 번째 강의입니다.

우아한형제들 기술이사 김민태의 프론트엔드 아카데미 시리즈 커리큘럼

이 강의, 아직 고민되나요?

다른 곳에는 없는 이 강의만의 강점을 한눈에 확인하세요.
지금 결제하면 강의를 평생 소장할 수 있답니다!

JS와 TS를 한번에!

JavaScript로 프로젝트를 해보고 그 결과물을 TypeScript로 변환하면서 각 언어를 확실히 이해하고 활용합니다.

레시피형+사전형 혼합 커리큘럼

레시피형 학습의 단점을 보완하고 사전형 학습을 혼합하여 자가학습까지 가능하도록 최적화된 커리큘럼입니다.

탄탄한 기초와 점진적 확장

입문자가 잘 따라올 수 있게 동기 프로그래밍으로 시작하여 비동기 코드로 변환하는 방식으로 학습합니다.

선 프로젝트 후 문법

많은 문법 학습을 수반하지 않고도 완성할 수 있는 간단한 프로젝트를 통해 성취감을 높입니다.

우아한형제들 기술이사
김민태에 대해 더 궁금한가요?

구매 안내.

결제 후, 언제 어디서나 하루 10분 공부 시작.

• 홈페이지 회원가입 및 로그인
• 원하는 강의 결제하기
• 마이페이지에서 강의 시청하기

하루 10분으로
완전 정복.

타사와 차별화된 JavaScript와 TypeScript의 통합 학습.
입문자부터, 실무를 하고 있는 주니어 개발자까지 누구나 기본기를 탄탄하게 다질 수 있도록 설계했습니다.

先 프로젝트 後 문법으로 구성한 커리큘럼.
개발 업계에서 유명한 해커뉴스 클라이언트, 회원가입, 로그인, 차트 라이브러리 프로젝트로 실습하며, 필요한 문법을 찾아 공부합니다.

원하는 장소 어디서나 프론트엔드 개발 공부.
내가 마음먹은 곳 어디든 나만의 강의장이 됩니다.

25여 시간 분량의 방대한 강의를 무제한 반복 학습 & 평생 소장.
이해가 잘 되지 않는 내용도 몇 번이고 반복 재생하여 학습할 수 있습니다.

JavaScript & TypeScript Essential
프론트엔드 아카데미 상세정보.

수강료.

국내 8개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • NH농협카드

※ BC카드의 경우, 비씨(페이북)을 선택하여 결제시에만 12개월 무이자 할부가 가능합니다.
(BC계열 – 우리/제일/기업/대구/경남/부산/광주/수협/전북/제주/신협)