프론트엔드 프로젝트

온라인 풀 패키지.

30개 프로젝트로 배우는
프론트엔드 웹 개발 (with React)

  • 01. 방대한 프로젝트 실습

    30가지 프로젝트로
    100가지 기능 구현 마스터

  • 02. 고퀄리티 프로젝트

    기초 UI 구성부터 배포까지
    체계적인 난이도별 프로젝트

  • 03. 프론트엔드 커리어 완성

    프론트엔드 채용
    모든 프로세스 완벽 정복

코스 프로모션 배너 전용입니다.
0 0시간 0 0 코스 프로모션 배너 전용입니다.
(자동) (자동) (자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)

당신의 프론트엔드 개발 실력이 흔들리는 이유는?

프로젝트를 해보지 않고, 이론만 배우는 프론트엔드 교재로 공부했기 때문입니다!

HTML, CSS, JavaScript 심지어 React까지…
이론과 개념은 학습했는데 깊이있는 실습을 해볼 기회가 없었어요.

실무에서 가장 빈번히 사용되는 기능이 뭔지 모르겠어요.

프론트엔드 취업 대비는 어떻게 해야하는지 너무 막막해요.

이때까지 진행한 실습들은 재미가 없어서 끈기있게 나아가지 못 했어요

기업이 원하는 실무 능력까지 배양해주는
프로젝트 중심 프론트엔드 강의로 공부 시작하세요!

프론트엔드 파트 채용 시 공통 자격 조건

∙ Application 아키텍쳐에 HTML, CSS, 생태계에 익숙하신 분
∙ JavaScript(ES 2015 버전 이상) 기본 지식 보유하신 분
∙ React 실무 경험 1년 이상이신 분 많으신 분
∙ 외부 API 사용에 익숙하신 분
∙ 상태 관리, 데이터, 스타일링 등 다양한 심화 라이브러리 사용해보신 분

01
초격차 구성 1
남의 코드 복붙은 이제 그만!
100개 기능을 구현해보는 30개 프로젝트


사전 과제 프로젝트 4개

프로젝트를 잘 따라오기만 해도
프론트엔드 실무 TOP 100 기능이 모두 내 실력으로!

  • [ Basic ]

    ∙ keyboard layout
    ∙ theme color
    ∙ font 변경
    ∙ 입력 기능
    ∙ 화살표 버튼(< > )을 이용한 이미지 변경
    ∙ Anchor 활용 이미지 변경
    ∙ 슬라이더 autoplay
    ∙ 달력 layout
    ∙ Date 객체 이용 날짜 조회
    ∙ INPUT
    ∙ 이벤트 핸들러 JavaScript 연결
    ∙ 유저 플로우를 작성
    ∙ 로직 작성
    ∙ JavaScript Type
    ∙ 타입 파싱
    ∙ 입력란 추가/삭제
    ∙ ID 유효성 체크 (validation)
    ∙ (HTML) 시멘틱 마크업




  • [ Intermediate ]

    ∙ Canvas를 이용한 그림판
    ∙ 실행 취소
    ∙ 그리기 색상 선택
    ∙ 그리기 굵기 선택
    ∙ 도형 그리기
    ∙ CRUD
    ∙ Router 구현
    ∙ LocalStorage 사용하여 데이터 저장
    ∙ Image Handler Enroll
    ∙ 이미지가 마우스를 따라가게 하기
    ∙ 카카오지도 API
    ∙ Start, Stop, Reset
    ∙ Lap 타임 추가/삭제
    ∙ 키보드 이벤트 핸들링 적용
    ∙ 장바구니 아이템 추가/삭제
    ∙ 총 가격 합산
    ∙ 세일 쿠폰 적용
    ∙ Browser Storage




  • [ Upper Intermediate ]

    ∙ Music Player layout
    ∙ playlist sortable
    ∙ custom audio player
    ∙ Random play, Repeat
    ∙ Resize
    ∙ Drag & Drop
    ∙ 메모 생성, 삭제
    ∙ 메모 색상 변경
    ∙ 시간표 layout
    ∙ 과목 및 시간 정보 등록, 삭제, 수정 구현 CSS IN JavaScript
    ∙ Carousel/ Carousel Library
    ∙ INPUT 값을 얻고 Redux에 저장
    ∙ 로컬 스토리지에 저장




  • [ Advanced ]

    ∙ 외부 날씨 조회 API
    ∙ 국가도시를 입력하여 날씨정보를 가져오기
    ∙ 날씨정보 기반 데이터 시각화
    ∙ 글 작성,삭제
    ∙ 작성된 글 필터 검색 기능
    ∙ 댓글 작성
    ∙ 구글 검색 API 이용 및 시각화
    ∙ 이미지검색 API 사용 검색한 이미지들 카드 형태로 구현
    ∙ Infinite Scroll
    ∙ 프로필 설정
    ∙ 이미지 업로드
    ∙ 실시간 메세지
    ∙ 테마 색상 변경
    ∙ restful api 설계
    ∙ Postman Collection
    ∙ 서버에 Request 보내기
    ∙ Fetch 사용 Request
    ∙ Axios 사용 Request
    ∙ 자동 저장
    ∙ 라이브러리를 통한 에디터
    ∙ 서버 이용 텍스트 문서 저장
    ∙ 서버 텍스트 문서
    가져와서 표시
    ∙ 메모 CRUD Collection
    ∙ Share API를 통한
게시글 공유
    ∙ Share Modal과 Clip Board 이용 링크 공유



02
초격차 구성 2
어떤 프레임워크, 어떤 라이브러리든 자유자재로!
기초 UI 구성부터 배포까지 진행하는 난이도별 커리큘럼

-신입 개발자가 꼭 알아야 하는 기능-

  • Basic
    : CSS와 Sass로 간단한 UI 구성

    • Router 구현
    • SessionStorage, Local Storage 활용
    • CRUD
    • CS 개념 학습

  • Intermedeiate
    
: JavaScript 심화 학습

    ∙ CSS(Sass)를 사용한 UI
    ∙ Event Delegation
    ∙ SetTimeout, SetInterval 활용
    ∙ Keyboard Event

-주니어 개발자부터 기본적으로 알아야 하는 기능-

  • Upper Intermediate
    
: React를 활용하여 복잡한 UI 구성, 개발

    • Canvas 기반 개발
    • CSS IN JavaScript 적용
    • Redux를 통한 데이터 관리
    • 상태 관리, 데이터, 스타일링 등 다양한 심화 라이브러리 사용

  • Advanced
    
: React 기반으로 여러 외부 리소스를 활용, 서비스 개발

    ∙ 외부 리소스 활용
    (오픈 API 활용, 네트워크, 오픈소스 라이브러리)
    ∙ API 기반 데이터 시각화
    ∙ Async 개념 및 Request 구현
    ∙ Fetch 활용 리소스 비동기 요청

차근차근 실력을 쌓아나갈 수 있는
난이도별 대표 프로젝트를 소개할게요!

*다음은 예시 이미지로, 실제 실습 이미지와 상이할 수 있습니다.

  • Basic
    이미지 슬라이더


    ∙ Set Interval을 이용하여 여러 event들(이전, 다음, index 버튼 etc.) 구현
    ∙ 화살표 버튼, 앵커를 이용한 이미지 변경
    ∙ 슬라이더 Auto Play 구현

  • Intermedeiate
    그림판


    ∙ Canvas(Web API)기반 개발 및 마우스 Event 사용
    ∙ Parcel, Eslint, Prettier을 통한
라이브러리 사용 방법 학습
    ∙ 실행 취소, 그리기 색상, 굵기 선택, 도형 그리기 구현

  • Upper Intermediate
    스티커 메모


    ∙ Element Resize, Drag & Drop 기능을 직접 구현
    ∙ 메모 생성, 삭제, 색상 변경 기능
    ∙ 각종 API 사용 방법 학습 (Mouse Event, Drag Event, localStorage)

  • Advanced
    날씨 조회 페이지


    ∙ API를 활용, Data Fetching하여 개발
    ∙ Heroku를 활용하여 배포하기
    ∙ 외부 날씨 조회 API 사용, 날씨 정보 데이터 시각화 (이미지, 텍스트)

+ 대표 프로젝트
슬랙 클론 코딩을 통한 완벽 학습
React와 Firebase를 활용하여 메세지, 이미지 업로드 등 기능에 필요한 UI Component를 구현합니다.

1. 로그인 기능 : Firebase

2. 프로필 기능 : React - avatar - editor

3. 메세지 : Firebase Realtime Database

4. 이미지 업로드 : React

5. 테마 변경 : React-colorful

03
초격차 구성 3
프론트엔드 개발자 실무에서 모르면 일 못하는
30가지 이상 라이브러리&컴포넌트 학습

04
초격차 구성 4
프론트엔드 개발의 마침표도 결국은 배포!
플랫폼별 다양한 배포 노하우 학습

Heroku
사용자 지정 도메인을 추가하고, CLI를 통해 코드 편집기에서 바로 프로젝트를 쉽게 배포해 봅니다.

Firebase
Firebase 호스팅을 통해 프로젝트의 지속적인 배포 워크 플로우를 자동화해 봅니다.

Vercel
Configurateion, Supervision 등의 단계를 생략하고 즉시 배포하고 자동 확장하며 배포해 봅니다.

Netlify
Instant Continuous Deployment를 통해 정적 프로젝트를 작게 나눠 배포해 봅니다.

05

초격차 구성 5

프론트엔드 개발자 커리어에서 피할 수 없는 ‘사전 과제’!
결과보다 중요한 과정까지 챙겨주는 프로젝트

▶ 프론트엔드 개발자 취업의 최종 관문! 사전 과제가 뭔지 궁금하다면?
서류 - 1차 코딩테스트(알고리즘) 이후 2일-5일 정도의 작업 기간을 가지고 제시된 요구사항을 구현하여 제출하는 과제

이 강의 수강 신청하고 혼자만 알고 계세요!

아무도 안 알려주는
사전 과제 무조건 통과하는 비법!

현실 반영 100% 사전 과제 시뮬레이션

디자인 베이스, 소스 코드는 다 준비되어 있으니 천천히 따라만 오세요!

  • 01.
    회사로부터 디자인과 샘플 코드, 요구 사항 수령

  • 02.
    제한된 기간 내에 요구 사항을 충족하는 결과물 제출

  • 03.
    제출한 프로젝트를 기반으로 코드 리뷰 면접 진행

▶ 사전 과제는 검색이 자유롭고, 답이 정해져 있는 것이 아니라서 코딩테스트와는 달리 결과물보다 과정이 중요한게 큰 특징입니다!
겉보기엔 같아도 어떻게 구현하는지에 따라 점수차이가 나기 때문에 그 포인트들을 강의에서 짚어봅니다.

STEP 01

미니 사전 과제 프로젝트

사전 과제에서 가장 많이 나오는 기능만 모아 워밍업부터 한 발 앞서 시작하세요.

▶ 본 파트의 모든 과제는 아래 2개의 버전으로 학습합니다.
ver1. 프레임워크 없이 Vanilla JavaScript로만 구현한 버전 | ver2. React로 구현한 버전


STEP 02

메인 사전 과제 프로젝트

pixabay의 무료 API를 활용한 검색을 통해 마음에 드는 배경 사진을 찾을 수 있는
‘배경 사진 검색기’ 어플리케이션을 React로 구현합니다.

*본 이미지는 이해를 돕기 위한 프로젝트 예시 사진입니다.

  • 1. API 연동

    ▪fetch (혹은 axios) 라이브러리를 사용한 비동기 호출
    ▪Request에 필요한 파라미터들 추가
    ▪에러 핸들링

  • 2. 검색

    ▪검색창 입력

  • 3. 최근 검색어 저장 기능

    ▪추가/삭제 가능
    ▪새로고침 해도 유지

  • 4. 필터링 기능

    ▪사이즈 별, 이미지 방향 별 필터

  • 5. 정렬 기능

    ▪좋아요 순, 댓글 순 필터

  • 6. 페이지네이션 기능

    ▪컨텐츠를 여러 페이지로 나눔

  • 7. 사진 클릭 시 모달 팝업

    ▪사진에 대한 세부 정보 출력

  • 8. 즐겨찾기 기능

    ▪사진 hover 시 즐겨찾기 추가
    ▪즐겨찾기 한 목록 확인 가능

  • 9. 반응형 레이아웃 기능

    ▪접속 디스플레이 맞춤 화면 크기 조정

  • 10. 다크 모드 기능

    ▪라이트 모드, 다크 모드 사용자 설정 가능

+
여기서 끝나면 ‘잘’한 게 아니라 그냥 ‘해낸’ 정도죠!
이미 구현한 프로젝트에 [가산점 항목]으로 인정받는
심화 기능을 구현하고 최적화까지
진행하세요!

1.리팩토링
기능 별 모듈화 | Custom hook으로 로직 분리

2. 타입스크립트 도입
API 응답과 함수에 인터페이스 적용

3. 무한 스크롤
스크롤을 아래로 내릴 때마다 다음 페이지가 불러와지도록 구현

4. 최적화
Google Lighthouse를 사용해 내 애플리케이션의 성능 파악, 개선 | 최적화 기법 적용하기 (debouncing, throttling)

5. 테스트 코드 작성
Jest를 사용한 Unit Test 작성

+ BONUS +
IT 대기업 합격 노하우 특별 제공
취뽀 클리어한 현직 선배의 취업 준비 노하우 무료 제공

커뮤니티 뒤져봐도 답이 없어 막막했던 부분을 싹- 해결해드릴게요 :)

06

초격차 구성 6

극.가.성.비!
타사대비 수강료 1/4, 프로젝트는 약 10배

30가지 프로젝트로 배우는
프론트엔드 강의 목표.

프로젝트를 따라해보며 프론트엔드 개발에 필요한 기술을 학습합니다.

프로젝트 개발시 원하는 기능을 구현하기 위해 어떤 기술이 필요한지 학습합니다.

현업에서 사용하는 스킬을 학습할 수 있습니다.

사전 지식 및 강의 특징.

▪HTML, CSS, JS, React 에 대한 기초 문법
▪CS, 컴포넌트, 라이브러리에 대한 기초 지식
▪강의에 사용되는 프로그램/언어
  - JavaScript 구현 방법. : Part1. ch06 Part2 ch04, 05. Part3 ch04,05,06. Part4 01,02,030,04,05 React 라이브러리를 이용하여 UI를 구현 위 챕터 모두를 제외한 JavaScript 강의들이 순수 자바스크립트와 바닐라 자바스크립로 진행 

  - 리액트 버전 : v17.0.2 - 파이어베이스 firebase-tools / 버전 10.5.0 위 버전을 사용하여 강의를 진행하였습니다.

추천 대상.
▪프로젝트를 통해 프론트엔드 개발에 필요한 심화 개념을 학습하고자 하는 전공생 또는 주니어 개발자
▪프론트엔드 프로젝트로 개발 스킬을 확장하고자하는 개발자
▪패스트캠퍼스 프론트엔드 개발 초격차 패키지를 완강한 수강생
프로젝트 실습 위주

이론보다 다양한 난이도의 총 30가지 프로젝트를 위주로 배우면 실무에 바로 적용할 수 있습니다.

압도적 가성비

타사 대비 프로젝트 갯수는 더 많이, 난이도는 더 깊게, 그러나 수강료는 더 낮게 준비했으니 평생 소장하세요.

FE 개발 필수 기능 100가지

필수 기능인 캐러셀, 페이지 등 수 많은 기능들을 구현합니다

취뽀 성공 프로젝트

취업 사전과제, 자소서, 포트폴리오 작성 노하우와 같은 실용적 자료를 제공합니다


강사님 소개.

Billy 님
현) Kakao 계열사 Frontend Developer
전) Kakao Frontend Developer
급변하는 프론트엔드 환경에서 가장 기본이 되는 Javascript, CSS를 활용한 프로젝트를 진행한후, 요즘 프론트엔드 의 대세인 React를 활용한 프로젝트를 진행할 예정입니다. 선배 개발자로서 현업에서의 경험, 지식을 전달해드릴게요!
오정민 님
현) 데브파이브 대표
현) Xpike Group 프로젝트 매니저
전) Dexign Full Stack Developer
전) 소프트 파워 Full Stack Developer
--
Tizen Specialist
SWOFTWARE MAESTRO
GCamp Tistory 홈페이지형 블로그 강의 진행
베어유 HTML/CSS 강의 진행
개발자에게 실력이란 두가지로 나눌 수 있다고 생각합니다. 알고리즘이나 툴 사용법 그리고 프레임워크를 이용하는 코드를 짜는 능력이 50%, 어떤 프레임워크가 있고 어떤 방법론이 있는지 등 정보와 이론에 대하여 얼마나 알고 있는지가 50%. 이번 강의로 많은 프로젝트를 통하여 코딩의 노하우를 전달해드리고, CSS IN JavaScript를 이용한 방법론을 소개드리고자 합니다.
이해나 님
현)Kakao Enterprise Frontend Developer
전) Bear Robotics Korea Frontend Developer 인턴
--
멋쟁이 사자처럼 at 고려대학교 활동
고려대학교 중앙 컴퓨터동아리 KUCC 활동
프론트엔드 개발을 이론으로만 공부하다보면, 막상 사전과제에서 요구사항을 만났을 때 막막할 수 있어요. 간단한 UI 부터, 복잡한 프로젝트까지 다양한 요구사항을 구현해가며 실전 개발에 대한 자신감을 얻어갈 수 있을 거에요. 독학으로는 파악하기 어려운 프론트엔드 지식들과, 취업에 대한 팁까지 함께 꾹꾹 담아 이해하기 쉽게 전달해 드릴게요!

커리큘럼.

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

Part 1. Basic

Part 2. Intermediate

Part 3. Upper Intermediate

Part 4. Advanced

Part 5. 프론트엔드 취업 사전 과제

  • 상세 커리큘럼.

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

코스 프로모션 배너 전용입니다.
0 0시간 0 0 코스 프로모션 배너 전용입니다.
(자동) (자동) (자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)

이 강의도 추천해요.

[이벤트 주의사항 및 환불규정 ]

이벤트 주의사항 및 환불규정 바로가기 ☞

수강료.

  • 30개 프로젝트로 배우는 프론트엔드 with React

    현재 정가 대비 72% 할인 중!
    11월 30일 수요일 자정 까지

    정가 829,000원
    현재 판매가 228,000원

    12개월 무이자 할부 시 월 19,000원

  • 초격차 패키지 : 30개 프로젝트로 배우는 프론트엔드 with React + [50%] 즉시할인 쿠폰 증정 (11.30 23:59까지 사용 가능)

    현재 정가 대비 72% 할인 중!
    11월 27일 일요일 자정 까지

    정가 829,000원
    현재 판매가 228,000원

    12개월 무이자 할부 시 월 19,000원

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

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

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