기본 정보
∙ 5개 대주제, 총 19시간
(본 강의 10시간/부록 9시간)
∙ 난이도 : 입문 - 초급
∙ 선수지식 : 없음

강의 특징
∙ 한 번 결제로 평생 소장
∙ AI 챗봇 질의 응답 제공

개발 환경
∙ 추후 업데이트 예정

(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

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

실무 30년차 ∙ 개발 교육 13년차
우아한 형제들 기술 이사이자 주니어 개발자들의 사수!

김민태 강사님

김민태 강사님이 설계한 커리큘럼을 통해
이렇게 변할 여러분의 모습을 기대해보세요!

HTML, CSS, JavaScript, React를 활용해서 간단하지만 실제 기능이 동작하는 [ 진짜 프로젝트 ]를 완성합니다.

프론트엔드 언어와 프레임워크 뿐만 아니라 네트워크, 서버 등 필수 개념이 실제 프로젝트에 어떻게 적용되는지 이해할 수 있습니다.

서비스 기획, 설계, 구조화, 프로토타입, 운영 등 프론트엔드 개발자가 알아야 하는 기획 단계까지 담은 프로젝트로 실제 개발자와 한 층 더 가까워질 수 있습니다.

김민태의 프론트엔드 Pre-Academy로 시작해야하는

4가지 이유

개발... 시작하고 싶은데 어디서부터 시작해야하죠..?

김민태 강사님의 30년의 개발 경력과 14년의 교육 경력을 통해
핵심만 10시간으로 녹여낸 커리큘럼으로 시작하세요!

프론트엔드 개발 입문 기술 스택은 누구나 가르칠 수 있어요.
하지만 진.짜. 개발 할 수 있는 실력을 키워주는 커리큘럼은 아무나 알려줄 수 없죠!

언어, 프레임워크, 프로젝트, 유지 보수까지
웹 개발의 핵심을 모두 커버

배운 기술과 개념은 모두
프로젝트에 적용해보며 학습

개발이 처음이어도
프론트엔드 개발 전체 사이클까지 한번에

강사의 한 마디
문법과 기술 스택에 집중해서 깊게 학습하는 것도 필요하지만, 개발을 처음 학습할 때는 생소한 개념이 실제 프로젝트에서 언제, 어떻게 적용되는지 만들어보면서 배울 때 더 빠르게 많은 것들을 배울 수 있습니다. 그래서 이번 커리큘럼은 개발의 기초 기술 스택에 대해서 자세하게 다루기보다는 정말 필요한 기술과 개념을 개발의 전체 프로세스 안에서 언제 어떻게 사용되는지에 초점을 맞춰서 커리큘럼을 구성했습니다.

+ Benefit 1

언어에 더 익숙해지고 싶은 분들을 위해
10시간 분량의 부록 강의도 챙겨드려요!
기본 기술 스택(HTML, CSS, JavaScript) 연습을 더 하고 싶나요?
간단한 MBTI 프로젝트를 만들어보며 익힐 수 있도록 추가 부록까지 챙겨드립니다!
- 본 부록 파트는 [코딩 레벨원 : MBTI 테스트 만들며 배우는 왕초보 코딩]와 동일한 강의입니다.

HTML, CSS, JavaScript, Reat 배웠는데 막상 혼자 프로젝트를 하려니 어떻게 해야할지 모르겠어요 ㅠㅠ

React를 자유자재로 사용할 수 있도록,
3단계로 프로젝트를 발전시키며 진짜 개발 실력을 높여드릴게요!

프론트엔드 프로젝트 구현을 했다고 개발을 할 수 있는 걸까요?
배포부터 이후 유지 & 보수, 실제 기능 동작을 위한 서버까지 다뤄봐야 진짜 개발을 해봤다고 할 수 있죠.

STEP 1
나의 첫 번째 앱 [ 일기장 ] 만들기
✓ 학습 포인트
∙ 프로젝트 기획 및 환경 세팅
∙ 프로젝트 구조 설계
∙ 기능 구현 (달력, 일기 쓰기, 보기, 수정, 삭제)
∙ 테스트 & 배포
✓ 체크 포인트
이미 배포된 프로젝트에 버그 발생 시 수정하고 프로젝트에 반영
STEP 2
진짜 개발은 지금부터, 일기장 앱 개편
✓ 학습 포인트
∙ 프로젝트의 한계 정의
∙ 상태 관리자 도입을 위한 대안 탐색 및 선택 목표 정의
∙ 추가 기능 개발 (타임라인 뷰)
✓ 체크 포인트
내 프로젝트의 문제점 미리 테스트하기 (단위 테스트 & end to end 테스트)
STEP 3
서버까지 해결한, 일기장 앱 완성
✓ 학습 포인트
∙ 서버와 클라이언트 개념 이해하기
∙ 서버 만들기 1단계 : 웹 서버 구현
∙ 서버 만들기 2단계 : 데이터베이스
∙ 서버 만들기 3단계 : API 문서 만들기
✓ 체크 포인트
만든 서버 일기장 앱 클라이언트에 연동해 실제 기능이 동작하는 앱으로 완성!

강사의 한 마디
소프트웨어 개발이란 것이 요구사항을 수집해서 단순히 코드를 작성하여 구현하는 것 만이 아닌 더 많은 것이 있다는 것을 이해하기 위해선 직접 유사한 프로세스의 프로젝트를 경험해 봐야한다고 생각했습니다. 제품 개발의 대부분은 최초 개발 이후 수정의 반복입니다. 이런 특성을 명확히 이해하기 위해 단계를 분리했어요. 프로젝트를 통해서 소프트웨어 개발에 대한 특성을 파악해서 순차적 학습 방식에 얽매이지 않고 좀 더 넓은 시야로 소프트웨어 개발을 인지하고 다양한 학습 시도를 반복할 수 있는 아이디어를 얻길 기대할게요.

네트워크? 브라우저? Git Clone은 어떻게... 생소한 개념이 너무 많아요!

입문자들에게 낯선 개념과 개발 환경.
꼼꼼하게 개념부터 하나씩 입문자 맞춤형으로 짚어드릴게요!

여러분이 개발을 바로 시작하지 못하는 이유!
개발 언어와 프레임워크 이 외에 꼭 알아야 하는 것들까지 쉽게 이해할 수 있게 알려드립니다.

개념

  • ① 블럭코딩으로 보는, JavaScript
    프로그래밍 경험이 없는 사람이 바로 JavaScript와 같은 형태의 언어를 배우기는 매우 많은 장벽이 존재합니다. 그 장벽을 낮춰주기 위해 시각적 요소로 어려운 개념을 직관적으로 알려주는 블럭 코딩 도구를 활용하여 개념을 이해하면 JavaScript를 바라보는데 많은 도움이 됩니다.
  • ② 나의 프로젝트가 동작하는 곳, 브라우저
    사람이 잘 살아가기 위해선 사람의 활동 환경인 [인간사회]의 특성을 잘 알아야 하는게 당연하듯, 웹앱이 동작하는 환경인 [ 브라우저 ]를 알아야합니다. 브라우저의 특성을 모르고 앱을 잘 개발할 수 없는 것이죠.
  • ③ 보이지 않는, 네트워크
    브라우저로만으로는 데이터를 저장하는것이 매우 제한적이기 때문에 거의 모든 웹앱은 [서버]에서 데이터 저장과 조회를 대신해 줍니다. 웹앱과 서버는 이 데이터를 주고 받는데 [네트워크]를 사용하게됩니다. 즉, 모든 웹앱에서 네트워크 사용은 필수 환경이며, 네트워크에 대한 이해가 중요하고 필수적이기 때문에 이를 설명해드립니다.

개발 환경

  • ① 개발자의 손과 발, Editor
    코드를 작성하고 테스트하고 오류를 찾는 모든 과정은 에디터에서 수행됩니다. 요리사가 도구를 얼마나 숙련되게 다루느냐에 따라 생산성엔 많은 차이가 나겠죠? 마찬가지로 하루종일 사용하는 에디터를 잘 이해하고 사용한다면 개발자의 생산성에 많은 영향을 줄 것입니다.
  • ② 어둠과 친해지길 바라, Terminal
    개발자는 수백가지의 소프트웨어를 사용하고 늘 개선된 소프트웨어를 만들거나 찾아 사용하는 사용자입니다. 그 많은 소프트웨어가 *GUI를 갖고 있진 않습니다. 여러가지 이유로 명령어 형태로 제공되고 이를 실행하는 환경이 [터미널]인 것이죠. 그래서 필수 소프트웨어 중 하나인 터미널에 대해 설명합니다.
    * GUI : Graphic User Interface
  • ③ 코드 버전 기록 & 협업을 위한, Git
    혼자 개발하는 경우는 극히 제한된 경우이고 없다고 봐도 무방합니다. 그렇기 때문에 효과적인 협업 환경이 필요하고 소스 코드의 변경 히스토리 관리는 너무나 중요합니다. 이 모든 것을 제공하는 소프트웨어중 가장 널리 사용되는 [Git]을 학습하는 것은 필수이며 간단하지만 핵심적인 Git 사용법을 알려줍니다.

강사의 한 마디
소프트웨어 개발이란 것이 요구사항을 수집해서 단순히 코드를 작성하여 구현하는 것 만이 아닌 더 많은 것이 있다는 것을 이해하기 위해선 직접 유사한 프로세스의 프로젝트를 경험해 봐야한다고 생각했습니다. 제품 개발의 대부분은 최초 개발 이후 수정의 반복입니다. 이런 특성을 명확히 이해하기 위해 단계를 분리했어요. 프로젝트를 통해서 소프트웨어 개발에 대한 특성을 파악해서 순차적 학습 방식에 얽매이지 않고 좀 더 넓은 시야로 소프트웨어 개발을 인지하고 다양한 학습 시도를 반복할 수 있는 아이디어를 얻길 기대할게요.

부트캠프, 온라인 강의 들어봤지만 단순히 개념을 읽어주고, 따라치는 실습만해서 실력이 늘지 않는 것 같아요!

실무자와 학습자의 관점을 모두 이해하는
우아한 형제들 기술 이사 김민태 강사님의 강의는 다릅니다.

누구에게 배우느냐도 학습의 결과를 바꿀 수 있는 중요한 포인트죠!
29년의 개발 실무 경력과 13년의 교육 경험을 갖춘 김민태 강사님은 오직 패스트캠퍼스에서만 만날 수 있습니다.

김민태 강사님을 먼저 만나본 수강생들의 후기를 살펴보세요!

Q&A 게시판
바로 옆에 있는 멘토처럼!
패스트캠퍼스 AI 튜터에게 실시간으로 질문을 해결하세요!
모르는 내용 검색하고, ChatGPT한테 다시 물어보고 번거로우셨죠?
질문이나 오류가 생기면 패스트캠퍼스 강의장에서 바로 질문하며 해결해보세요!
* 질의 응답은 2024년 5월 2일부터 2026년 3월 6일까지 제공됩니다.

⚑ 그냥 프론트엔드 입문 강의가 아니에요

김민태 강사님과 함께 시작하는
프론트엔드 개발은 무엇이 다를까요?

이런 분들께 추천드려요!

✓ 프론트엔드 개발 시작하고 싶은데 어떻게 시작해야할지 막막한 분

✓ 온라인 강의, 부트캠프 등 프론트엔드 개발을 배웠지만 응용이 어려운 분

상세 커리큘럼

아래의 모든 강의를 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!
- 부록 파트는 [코딩 레벨원 : MBTI 테스트 만들며 배우는 왕초보 코딩]와 동일한 강의입니다.

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

    자세히 보기 »

김민태의 프론트엔드 아카데미

  • 프론트엔드 개발에 필요한 핵심 기술들을 실제 프로젝트의 한 사이클을 만들어보며 배웁니다. 기술 스택 기초보다 기획, 프로젝트 구현, 유지/보수 등 웹 개발 입문에 필요한 기술을 배우고 바로 프로젝트에 적용 방법까지 한 번에 익힐 수 있습니다.

    지금보고 계신 강의입니다.

  • Java Script와 Type Script를 함께 배웁니다. 동작 원리를 학습하고 프로젝트 실습을 통해 웹 어플리케이션 구조까지 이해하며 탄탄한 기본기를 장착하게 됩니다. 학습할 4가지 예제 프로젝트는 해커뉴스 클라이언트∙ 회원가입∙ 로그인∙차트 라이브러리 입니다.

    강의보러가기 →

  • 국내에서 가장 많이 쓰이는 JavaScript의 프레임워크인 React의 특징과 장점을 적재적소에 활용하여 고퀄리티의 웹 어프리케이션을 개발할 수 있는 역량을 기릅니다.


    강의보러가기 →

  • 프론트엔드 주니어 개발자라면 꼭 알아야 하는 핵심 역량을 담았습니다. 실무 환경과 최대한 유사한 학습 공간에서 실무 적용 가능한 문제해결 능력&스킬을 배울 수 있습니다.

    강의보러가기 →

  • 웹 애플리케이션의 상태 관리를 위해 Redux와 Redux-Saga의 기능을 학습합니다. 큰 규모의 프로젝트를 개발할 때도 두려움 없이 도구를 잘 활용하여 효율적으로 개발할 수 있습니다.

    ※본 강의는 준비 중입니다 : 알림신청하기 →

해당 강의는 예약 구매 상품입니다.
영상 공개는 다음과 같이 2회에 걸쳐 공개됩니다.
(1회 구매 이후 모든 영상을 평생 소장 가능합니다.)

1차 공개 : 24년 05월 02일 (목)

전체 공개 : 24년 06월 06일 (목)