개발자 취업준비

초격차 패키지 Online.

프론트엔드
웹 개발의 모든 것

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

(자동)

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

사전 지식이 없어도 강의 하나로 입문부터 실전까지.

수강생과 개발자의 피드백을 반영해 더 업그레이드 되어 돌아왔습니다.

프론트엔드 개발자를 준비하는 당신을 위해 모든 것을 담은
반드시 소장해야하는 단 하나의 강의, Signature 프론트엔드

시그니처 패키지가 특별한 9가지 이유
아이콘을 클릭하여 자세한 내용을 바로 확인해 보세요! ▾

18개 과정 160시간 +
한 번에 완성하는 프론트엔드 웹 개발 Path

개발 언어부터 프레임워크, 프론트엔드 개발자를 위한 백엔드, 클라우드 기술과 취업을 위한 코딩테스트 & 컴퓨터 공학 지식까지
오직 프론트엔드 개발자만을 위해 필요한 모든 것을 18개 과정, 총 160시간의 시그니처 패키지에 담았습니다.

★ 프론트엔드 개발 시작을 위한 4개 과정

★★ 개발자 커리어 시작을 위한 5개 과정

★★★ 개발 실력을 높이기 위한 3개 과정

프론트엔드 개발자 취업을 위한 3개 과정

프론트엔드 Skill Up을 위한 3개 과정

개별 강의로 구매해도 아깝지 않은 퀄리티의 18개 과정, 총 160시간의 분량을
강의 한 개 가격으로 평생 소장하세요!

상세 커리큘럼 확인하기 ‣

15개 프로젝트를 만들며 배우는
프론트엔드 웹 개발

배운 기술스택과 프로그래밍 개념을 바로 프로젝트에 적용해볼 수 있도록
실제 서비스 가능한 수준의 프로젝트부터, 미니 프로젝트까지 15개 프로젝트를 만들며 배워보세요.

프로젝트 구현부터 배포까지 완성도 높은
6가지 실전 프로젝트

  • #버전관리 #지속적배포
    | 실습 내용
    ∙ HTML, CSS, 약간의 JavaScript를 활용해 스타벅스 웹 사이트를 동일하게 만들어요.
    ∙ Git을 활용해 ‘버전관리’가 무엇인지 배워봐요.
    ∙ 다른 사람과 프로젝트를 공유할 수 있도록 Netlify를 통해 웹에 배포합니다.
  • #인터렉티브_웹 #반응형웹
    | 실습 내용
    ∙ HTML, CSS, 그리고 약간의 JavaScript를 활용해 심화 CSS 애니메이션, 인터렉티브 웹까지 애플 웹 사이트를 똑같이 만들어봅니다.
    ∙ 모바일, 태블릿 환경에 맞게 최적화 되어 출력하는 ‘반응형 웹’의 개념을 학습하고 구현해봐요.
    ∙ 완성한 프로젝트를 Vercel를 통해 배포합니다.
  • #VanillaJS #외부API연동 #서버리스
    | 실습 내용
    ∙ 라이브러리/프레임워크 없이 순수한 JavaScript (Vanilla JS)만으로 실제 서비스가 가능한 프로젝트를 만들어봅니다.
    ∙ 영화 검색 API를 연동하여 검색페이지, 카드형 영화 목록 페이지, 영화별 상세페이지 등을 직접 구현해요.
    ∙ Vercel에 배포하고, Serverless Functions을 통해 영화 정보 반환 API를 만듭니다.
  • #TypeScript_마이그레이션
    | 실습 내용
    ∙ 3번째 프로젝트에서 완성한 영화 검색 사이트를 TypeScript로 수정합니다.
(마이그레이션)
    ∙ 수정한 프로젝트를 Vercel에 재배포합니다.
    | 마이그레이션 프로젝트가 필요한 이유
    
TypeScript의 실제 활용법과 더불어 JavaScript와 TypeScript의 두 언어의 차이를 더 효과적으로 이해할 수 있습니다.
  • #SPA #함수형_컴포넌트 #성능개선
    | 실습 내용
    ∙ React를 간단한 Tic Tac Toe 서비스를 만들며 React의 기본적인 구조와 기능, SPA(Single Page Application)에 대해서 학습합니다.
    ∙ React Hooks를 활용하여 함수형 컴포넌트로 프로젝트를 수정하며 함수형에 대한 개념을 학습합니다.
    ∙ 앱의 성능을 측정하고 최적화하는 방법에 대해서 학습합니다.
  • #라우팅 #커스텀_훅 #인증처리 #외부API연동
    | 실습 내용
    ∙ 외부 API를 연동해서 Disney Plus 웹 사이트의 UI와 애니메이션을 따라 만들어봅니다.
    ∙ React Router Dom를 사용하여 SPA에서 화면 전환을 구현합니다.
    ∙ 모달 외부 창 클릭시 모달을 닫게 만드는 Custom Hooks를 생성합니다.
    ∙ Firebase를 이용하여 인증처리를 추가합니다.

프론트엔드 기본기를 탄탄하게 다져줄
9가지 미니 프로젝트

  • | 실습 내용
    ∙ 간단한 쇼핑몰 페이지를 만들며 React Context API를 활용하여 상태관리를 구현합니다.
    ∙ 서버 데이터를 가져올 때 발생할 수 있는 에러 처리 방법을 학습합니다.
  • | 실습 내용
    ∙ React 대표 상태관리 라이브러리인 Redux를 활용한 앱 개발을 통해 전반의 Redux 사용법을 익힙니다.
    ∙ 미들웨어 없이 Redux 카운터 앱을 만들 수 있습니다.
  • | 실습 내용
    ∙ Redux와 견주어 비교되는 MobX의 작동 원리, 전반의 개념 및 활용 방법을 알게 됩니다.
    ∙ 두 대표 상태관리 라이브러리 중 적합한 것을 선택하여 사용할 수 있게 됩니다.
  • | 실습 내용
    ∙ React에서 Recoil을 이용하여 비동기 데이터를 처리하는 방법을 익히게 됩니다. 이를 통해 대용량의 웹페이지를 보다 유동적이고 효율적으로 만드는 방법을 알게 됩니다.
    ∙ 앱에 통계 기능을 추가할 수 있게 됩니다.
  • | 실습 내용
    ∙ 미들웨어를 통해 Redux-devtools를 사용할 수 있는 Zustand를 익히고, 사용 적합한 환경을 확인합니다.
    ∙ Persist Middleware를 활용하여 저장소의 데이터를 유지하는 방법을 익힙니다.
  • | 실습 내용
    ∙ React 프레임워크인 Next.js에 TypeScript를 적용하는 방법을 익힙니다.
    ∙ Next.js 학습시 흔히 헷갈려 하는 Data Fetching, Pre-rendering(Static Generation, SSR, CSR) 개념을 정리할 수 있습니다.
  • | 실습 내용
    ∙ 서버 프로그래밍 기술을 습득합니다.
    ∙ 모바일, 웹, 컴퓨터 등의 애플리케이션과 연동되는 서버를 개발할 수 있습니다.
  • | 실습 내용
    ∙ GraphQL과 Apollo 학습으로 서버와 데이터를 주고 받는 웹 또는 모바일 서비스를 보다 빠르고 간편하게 만들 수 있게 됩니다.
  • | 실습 내용
    ∙ 앱 배포를 위해 AWS S3 버킷을 생성하고, 자동 배포하는 방법을 학습합니다.
    ∙ Docker를 활용한 서비스 배포 및 관리 방법을 알고 이를 통해 앱 개발부터 배포의 전 과정을 학습합니다.

잠깐
실습이라고 다 같을까요?
개념과 활용 모두 확실히 잡을 수 있도록 준비한 15개 프로젝트가 특별한 이유!

기술 스택의 기본 기능을 익히기 위한 실습만 진행하시나요?
다양한 기술 스택을 조합해 실제 프로젝트에서 활용하는 법을 가르쳐드릴게요.

어디에서도 찾아볼 수 없는 구성과
최신 기술을 모았지만 가격은 1/4

이론, 프로젝트, 프레임워크 개별적으로 구매할 필요 없이,
단 하나의 강의로 프론트엔드 개발에 필요한 모든 지식들을 배워보세요!

프론트엔드 시그니처에서는,
20만원대에 이 모든 것을 무제한 수강!

월 1만원 대에 한 번 구매로
기간 제한 없이 평생 수강하세요!

(2023년 4월, 무이자 12개월 기준)

30개 기술스택으로 완성하는
프론트엔드 최신 로드맵

실무에서 가장 많이 쓰이는 기술 스택, 채용 공고에 등장하는 기술과 최신 기술 스택까지
트렌드를 반영한 로드맵으로 프론트엔드 웹 개발 학습을 완성하세요.

JavaScript로 준비하는
자료구조, 알고리즘 코딩테스트

JavaScript로 준비하는 코딩테스트 강의를 찾고 계셨나요?
자료구조/알고리즘 핵심 개념과 문제풀이, 오직 패스트캠퍼스만의 꿀팁으로 코딩테스트를 완벽히 대비해보세요!

  • 좋은 알고리즘 평가 기준 중 하나, 최소 시간 내 해결!
    • 소요 시간의 경향성을 계산을 위한 빅오표기법 학습으로 시간복잡도를 계산하여 제한된 시간 내 문제 해결
    • 시간이 모자라지 않도록, 알고리즘 코딩 테스트를 준비하며 코드템플릿 제작 & 관리 방법
  • 문제 풀이를 위한 JavaScript 필수 문법만 골라서!
    코딩테스트용 JavaScript 기본사칙연산, 기본 입력(fs 모듈, readline 모듈), 조건문, Array.prototype.reduce() 등 필수 문법을 정리하고, 문제 풀이로 코딩테스트 완벽 준비

코딩테스트 준비가 끝났다면,
최종 합격까지 한 걸음 더 다가가기 위한 Special 추가 강의!

프론트엔드 개발자가 알아야 하는 컴퓨터 공학 지식 &
네카라쿠배 개발자의 취업 특강

컴퓨터 공학 지식과, 개발자 취업 팁까지 따로 찾아볼 필요가 없도록 추가 강의를 드립니다.

* [개발자 취업 TIP]클립은 [개발자 취업 합격 패스 With 코딩테스트, 기술면접 초격차 패키지 Online.]의
Part 6. 네카라쿠배 합격자 노하우의 클립과 동일합니다.

이 모든 것을 배운 여러분은

프론트엔드 개발자 취업 프로세스를
강의 하나로 한 번에 끝내게 될겁니다

여기서 끝이면 Signature라고 할 수 없죠?
수강생의 피드백을 반영해 더-욱 완벽해진 시그니처만의 구성을 만나보세요!

많은 온/오프라인 교육 경험으로
인증된 강의 전달력의 3인의 강사님

용어부터 낯선 입문자분들을 위해 강의 전달력을 검증한 3인의 강사님을 모셨습니다.

박영웅 강사님
Course 1. HTML, CSS, JavaScript, TypeScript
현) 질링스 개발팀 프론트엔드 리더
 전) 빈스토크 개발팀 과장 | 투비컴원 디자인팀 팀장

| 기타 활동
∙ 올인원, 초격차, UX/UI 등 패스트캠퍼스 온라인 강의 진행
∙ 11번가, 신한은행, KT 등 개발자 직무 역량 강화 강사/멘토
∙ 메가바이트 스쿨 프론트엔드 1~3기 담당
∙ ‘Hello IT 프론트엔드 개발을 시작하려고 해' 저자
∙ 프론트엔드 기술 블로그 Heropy.blog 운영
∙ 비영리단체 '코딩 배우는 디자이너 그룹' 운영
∙ 이외 다수 웹 개발 온/오프라인 강의 진행
[기획자’s Comment]
✓ 패스트캠퍼스 누적 수강생 1만명이 증명하는 강의력
✓ 기본적인 프론트엔드 기술만으로 디자인까지 실제 서비스화 가능한 수준의 프로젝트
✓ 프론트엔드 입문서 'Hello IT 프론트엔드 개발을 시작하려고 해' 저자로 입문자도 이해할 수 있는 꼼꼼한 설명
안재원 강사님
Course 2. 프론트엔드 프레임워크
카카오 FE신입 공채 교수자 & 패스트캠퍼스 강사

| 기타 활동
∙ 다수 React 강의 진행(멋쟁이사자처럼, 인프런)
∙ 러닝 스푼즈 HTML&CSS 강의 진행
∙ ‘따라하며 배우는 도커와 CI환경’ 저자
∙ 각종 금융기관 및 공공기관용 SNS 개발
∙ 리액트 및 자바스크립트를 이용한 웹 게임 개발
[기획자’s Comment]
✓ 구조적으로 이해할 수 있는 강의 자료로 학습과 복습이 용이
✓ 비전공자에서 독학으로 개발자가 된 노하우를 녹여낸 커리큘럼
✓유튜브 ’John Ahn’채널(141개 영상), 온·오프라인 N개 강의 호평
나동빈 강사님
Course 3. JavaScript로 배우는 자료구조/알고리즘
현) AI / Security Researcher
포항공과대학교 컴퓨터공학과 석사

| 기타 활동
∙ Software Maestro 9기
∙ Best of the Best 6기
∙ ‘이것이 취업을 위한 코딩 테스트다 with 파이썬’ 저자
∙ KISA, 한국표준협회 및 다양한 고등학교/대학교에서 진행한 강의 경험 다수
[기획자’s Comment]
✓ ‘동빈나’ 채널로 15만명의 구독자들에게 개발자 취업 멘토로 활동 중인 인플루언서
✓ 코딩테스트 관련 베스트셀러 ‘이것이 취업을 위한 코딩 테스트다 with 파이썬' 저자
✓ 알고리즘 대회 본선 문제 출제 및 검수 위원 경험

수강이 망설여 진다면? 먼저 들어보고 결정하세요!

박영웅 강사님

안재원 강사님

나동빈 강사님

Benefit 01

강사님께 직접 질문하고
수강생과 지식을 공유하는 질의응답 커뮤니티

여러분이 꾸준히 요청주셨던 질의 응답 & 커뮤니티를 오픈합니다 :)
온라인 강의를 더욱 몰입하여 수강할 수 있도록
질의응답/지식나눔/코드리뷰/스터디 등 다채롭게 활용해보세요.

* 본 커뮤니티는 온라인 강의장 공지사항에 기재된 링크를 통해 참여 가능합니다.
* 2022.10.20 ~ 2024.10.04까지 강사 및 조교를 통한 질의응답이 운영 됩니다.

질의응답 커뮤니티, 이렇게 이용해보세요 !

Benefit 02

강의 구매 즉시 가져갈 수 있는
5가지 추가 혜택!

프론트엔드 개발 공부를 끝까지 할 수 있도록 준비했습니다!
학습을 도와주는 자료 3가지와 수강 후 심화 학습을 위한 2가지 혜택까지 모두 챙겨가세요.

Benefit 1
신규 프론트엔드 강의 할인 쿠폰 제공
계속해서 새로운 기술이나 심화 내용을 학습할 수 있도록, 프론트엔드 신규 강의가 공개될 때마다 계속해서 할인 쿠폰 까지 지원합니다!

* 정확한 할인율은 쿠폰 지급 시점에 정해지며 발급된 쿠폰은 마이페이지 쿠폰 내역에서 확인할 수 있습니다.
* 쿠폰 발급 후 문자를 통해 안내될 예정이며, 마케팅 활용에 비동의 할 경우 문자가 발송되지 않을 수 있습니다.
* 2022.10.20 ~ 2024.10.04까지 새롭게 공개되는 프론트엔드 강의에 대한 할인 쿠폰이 제공됩니다.

Benefit 2
수강생 분들의 의견을 반영한 꾸준한 업데이트
언제나 만족도 높은 최신 강의를 수강할 수 있도록
버전 업데이트에 대한 대응 방법부터 추가 학습 자료까지 업데이트 됩니다.

* 버전 업데이트에 따른 강의 내용 업데이트는 2024년 10월 4일까지 보장되며, 2024년 10월 4일 이후, 당사 사정에 따라 추가 업데이트 여부는 변동될 수 있습니다.
* 업데이트의 규모에 따라 텍스트 자료 및 추가 클립 제공 또는 재촬영 등을 통해 업데이트 내용이 반영될 예정입니다.

  • Benefit 3
    헷갈리는 개발관련 영어를 모두 모은
    개발자를 위한 영단어 500
  • Benefit 4
    우리 함께 Github 잔디심기 도전해봐요
    TIL(Today-I-Learned) 템플릿
  • Benefit 5
    JavaScript 코딩 테스트 5주 완성을 위한
    노션 학습 플래너

이 모든게 월 1만 원대
(2023년 4월, 무이자 12개월 기준)

프론트엔드의 모든 것을 한 번에 배울수 있는

160시간 분량 중 특정 주제만 구매하고 싶다면?
각 주제 개별 강의를 확인해보세요!

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

(자동)

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

더 많은 내용이 궁금하다면?
강의 미리보기 👀

커리큘럼을 확인하세요.

아래의 모든 강의를 시그니처 강의 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!

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

    자세히 보기 »

* Course 1은 [ 한 번에 끝내는 HTML, CSS, JavaScript, TypeScript ]와 동일한 내용입니다.

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

▸ HTML 5, CSS 3, JavaScript ES6

Part 2. Git을 활용한 버전관리

▸ Git, Github

Part 3. 애플 아이패드 반응형 웹사이트

▸ HTML 5, CSS 3, JavaScript ES6

Part 4. JavaScript 마스터

▸ JavaScript ES6, Node.js 16.17.0, Parcel, Vanilla JavaScript

Part 5. TypeScript

▸ TypeScript 4.7

Part 1. 프로젝트로 시작하는 React

▸ React 18, Node.js, CSS 3, Virtual DOM

Part 2. 실제 서비스를 만들며 익히는 React 실전

▸ React 18, React Router DOM v6, React Router DOM APIs, Firebase v9

Part 3. 5가지 프레임워크로 배우는 상태관리

▸ Redux v8, MobX v5, Recoil v0.3, Zustand v3.0

Special : React Version 18 대응하기

▸ React 18

Part 4. Next.js로 블로그 만들기

▸ Next.js, TypeScript 4.7

Part 5. 번들러 살펴보기

▸ Webpack, Vite

Part 6. CSS 프레임워크 완전정복

▸Material UI, Tailwind CSS, Emotion CSS

Part 7. Node.js로 구현하는 백엔드

▸Node.js, Express.js, HTTP 3.0, CORS

Part 8. 2시간에 끝내는 GraphQL

▸GraphQL

Part 9. 프론트엔드 개발자가 알아야 하는 Docker & CI/CD

▸Docker, Github Action, AWS S3, AWS CloudFront

Part 1. JavaScript로 끝내는 자료구조/알고리즘 (코딩 테스트)

▸JavaScript

Part 2. 프론트엔드 개발자가 알아야 하는 CS 지식

혜택 클립: "개발자 취업 TIP" 네카라쿠배 합격자 노하우

▸취업준비생이 궁금해 할 질문에 합격자가 본인의 경험을 담아 답변해주는 형태로 커리큘럼이 구성되어 있습니다.

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

(자동)

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

구매 안내.

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

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

이 강의도 추천해요.
3년 연속 브랜드 대상 수상, 패스트캠퍼스

수강료.

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

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

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