프론트엔드 부트캠프 커리큘럼 자세히 보기
Search
🔎

프론트엔드 부트캠프 커리큘럼 자세히 보기

Section1 : week 1 - 4

웹 프론트엔드 개발의 기초지식을 기반으로 스스로 단순한 Web App을 만들 수 있다.

[개발 학습법] - 프론트엔드 부트캠프에 잘 적응할 수 있도록 학습 방법과 마음가짐을 안내합니다.
자기주도 학습 가이드
페어 프로그래밍 가이드
개발자 도구 사용법
아고라 스테이츠 이용법(질문하는 방법)
[JavaScript] 기초 - JavaScript 기초 문법(변수, 함수, 타입)과 제어문(반복문, 조건문)을 이해합니다.
변수: 변수의 이해, 선언, 변수로 구구단 출력하기
타입: 타입의 이해, typeof 연산자 사용하기
함수: 함수의 이해, 함수 다루기, 함수로 구구단 출력하기
조건문: 조건문 기초, Boolean값 출력하기
문자열: 문자열 기초, 문자열 다루기
반복문: 반복문 기초, 반복문으로 구구단 출력하기
[JavaScript] 기초 연습문제
[HTML/CSS] 기초와 활용 - HTML/CSS의 기초 문법을 이해하고 응용하여 다양한 디자인과 레이아웃을 구현합니다.
웹 개발 이해하기: 웹 개발과 HTML & CSS & JavaScript, Visual Studio Code 사용법
HTML 기초: 기본 구조와 문법, 자주 사용하는 HTML 요소, 시멘틱 요소
HTML 심화: Web App의 구조 잡기, id와 calss 사용하기, 로그인 페이지 만들기
CSS 기초: CSS와 프론트엔드 개발, CSS 따라하기, 텍스트 꾸미기, 절대 단위와 상대 단위
박스모델: 박스모델 기초, 박스 구성 요소
CSS Selector: CSS Selector 학습 및 실습
간단한 Web App 만들기 - 최소한의 HTML/CSS/JavaScript 지식으로 만들 수 있는 계산기를 구현합니다.
Web App 요구사항 확인하고 이해하기
요구사항 직접 구현하기
멋지게 계산기 꾸미기
[Linux&Git] 기초 - 프론트엔드 개발에 필요한 필수적인 Linux, Git CLI 명령어를 학습합니다.
CLI 기초: CLI 기초 명령어, 관리자 권한과 경로, 텍스트 에디터 nano
패키지 매니저: homebrew, apt
Node.js: Node.js 기초, npm, nvm, package.json
Git: Git 기초, 설치, 환경설정
[Linux&Git] 기초 과제: 짝수 생성기
[JavaScript] 배열, 객체 - 기초 문법과 제어문을 적용하여 배열과 객체를 이해합니다.
배열: 배열 기초, 배열의 반복, 배열 메서드
객체: 객체 기초, 객체 다루기
[JavaScript] 배열, 객체 연습문제
[JavaScript] 핵심 개념과 주요 문법 - JavaScript 프로그램 작성을 위한 핵심 개념을 익히고, 코드를 분석하고 오류를 찾는 연습을 합니다.
원시 자료형과 참조 자료형
스코프: 스코프와 주요 규칙, 변수 선언과 스코프, 변수 선언 시 주의점
클로저: 클로저 함수의 특징, 클로저의 활용
ES6 주요 문법: spread, rest 문법 기초, 구조분해할당
[JavaScript] 핵심 개념 과제: JavaScript Koans
[DOM] 기초 - JavaScript DOM으로 웹 페이지에 변화를 주는 법을 배우고, 간단한 유효성 검사를 할 수 있습니다.
DOM 기초: HTML에 JavaScript 적용하기, 요소의 class명 확인하기
DOM 다루기: DOM 생성, 추가, 조회, 갱신, 삭제
[DOM] 기초 과제: 유효성 검사
[솔로 프로젝트] 간단한 Web App 만들기 - 계산기
계산기: 기초 제어문을 활용하여 계산기를 제작
[솔로 프로젝트] 간단한 Web App 만들기 - 나만의 아고라 스테이츠 페이지
나만의 아고라 스테이츠 페이지: 클론코딩 가이드에 맞춰 나만의 아고라 스테이츠 페이지를 제작 및 Section 1 복습
[회고] Section 1 - Section 1에서 배운 내용을 회고하면서, 스스로 문제점을 파악하고 개선합니다.
미니 기술면접: 학습한 개념에 대해서 동기가 이해하기 쉽게 설명하면서 복습합니다.
회고 블로깅: Section 1에서 배운 내용에 대해서 회고하고 메타인지적 블로깅을 합니다.

Section 2 : week 5 - 8

서버와 통신이 가능한 구조적인 Web App을 만들 수 있다.

[JavaScript] 심화 개념 - 고차함수 - 고차함수를 응용하여 복잡한 코드를 단순화할 수 있습니다.
고차 함수: 특별한 대우를 받는 함수(First-class Function)
내장 고차 함수: filter, map, reduce
추상화: 값 수준의 추상화, 사고 수준의 추상화
객체지향과 프로토타입 - 자바스크립트의 클래스와 프로토타입을 활용한 객체지향 프로그래밍의 특징을 이해하고 적용합니다.
객체 지향: 객체 지향 프로그래밍의 4가지 특징, 클래스와 인스턴스
객체지향과 프로토타입 과제: Beesbeesbees
비동기 프로그래밍 - 비동기 프로그래밍을 이해하고, 비동기 자바스크립트 대표 패턴 3가지를 이해하고 적용합니다.
비동기: 비동기 프로그래밍 이해, callback, promise, async/await
타이머 API, Node.js 모듈, fetch API
비동기 프로그래밍 과제
[React] Intro - React의 기본 문법인 JSX를 이해하고, React로 만든 웹 페이지에 적용합니다.
React 기초: JSX, Component, map
Create React App
[React] Intro 과제: React Twittler Intro
[React] SPA - React로 SPA 구현에 필요한 React Router를 이해하고, 만들어진 웹 페이지에 SPA 기술을 적용합니다.
React SPA, React Router
[React] SPA 과제: React Twittler SPA
[React] State & Props - React 핵심 개념 state, props에 대해서 이해하고, 간단한 React App에 적용합니다.
React state, props, 데이터 흐름
[React] State & Props 과제: React Twittler State & Props
[네트워크] 기초 - 네트워크의 기초 지식을 기반으로 REST API를 이해하고 만들어진 REST API를 이용하는 법을 배웁니다.
웹 애플리케이션 아키텍처: 클라이언트 - 서버 아키텍처, 서버 통신과 API
브라우저의 작동 원리 1: URL, URI, IP, port, 도메인, DNS, Chrome Network Tab
브라우저의 작동 원리 2: ajax, SSR, CSR, CORS
HTTP: HTTP 메시지, 요청, 응답
[네트워크] 실습 - 네트워크의 기초 지식을 기반으로 REST API를 이해하고 만들어진 REST API를 이용할 수 있다.
REST API: API 문서 읽는 법, Open API, API key
Postman, Gitbook
[네트워크] 실습: Message States
[React] ajax 요청하기 - 네트워크 지식을 기반으로 Effect Hook내 ajax 요청을 이해합니다.
React 데이터 흐름 2, state 끌어올리기, Effect Hook
[React] ajax 요청하기 과제: StatesAirline
[Web Server] 기초 - 서버의 개념을 이해하고, node.js로 간단한 서버와 CRUD endpoint를 제작합니다.
[Web Server] 기초 과제: Mini Node Server
[Web Server] 기초 과제: Refactor Express
[Web Server] 기초 과제: StatesAirline Server
[솔로 프로젝트] Coz’ Mini Hackathon - 나만의 아고라 스테이츠 서버 제작하기
나만의 아고라 스테이츠 서버: 가이드에 맞춰 서버와 통신하는 서버를 직접 제작
나만의 아고라 스테이츠와 서버 연결하기: 서버에 연결하여 실제 디스커션 데이터 가져오기
소그룹 회고: 동기와 자신의 작품을 공유하고 서로 긍정적인 피드백을 주고받으며 성장합니다.
[회고] Section 2 - Section 2에서 배운 내용을 회고하면서, 스스로 문제점을 파악하고 개선합니다.
미니 기술면접: 학습한 개념에 대해서 동기가 이해하기 쉽게 설명하면서 복습합니다.
회고 블로깅: Section 2에서 배운 내용에 대해서 회고하고 메타인지적 블로깅을 합니다.

Section 3 : week 9 - 12

사용자 친화적이고 안전한 Web App을 만들 수 있다.

[자료구조/알고리즘] 재귀 - 재귀와 재귀함수를 이해하고 재귀함수를 통해 문제를 해결합니다.
재귀의 이해, 재귀의 활용, 재귀 실습
[자료구조/알고리즘] 재귀 연습문제
[자료구조/알고리즘] 재귀 과제: JSON.stringify, Tree UI
[사용자 친화 웹] UI/UX 기초 - 사용자 경험 향상을 위한 UI와 UX에 대해 학습하고 적용해봅니다.
UI/UX 개념: UI, UX의 개념과 차이점
UI/UX 디자인: UI 패턴, 레이아웃, User Flow
UI/UX 사용성 평가
와이어프레임, 프로토타입, Figma
[사용자 친화 웹] UI/UX 기초 과제 : Figma 실습, UI/UX 분석 및 개선
[React] Custom Component - 특수목적을 가지는 페이지를 체계적으로 만드는 방법을 이해하고 실습해봅니다.
Component Driven Development: CDD, CSS in JS
CDD 개발 도구: Styled Components, Storybook
useRef: DOM reference 활용하기
[React] Custom Component 과제: React Custom Component
[React] 상태 관리 - 웹앱의 유연한 데이터 흐름 관리의 다양한 방법을 이해하고 실습합니다.
프론트엔드 개발에서의 상태 관리: React Hooks, Redux
[React] 상태 관리 과제: Cmarket Hooks, Cmarket Redux
[사용자 친화 웹] 웹 표준, 웹 접근성 - 사용자가 누구든 쉽게 접근할 수 있게 웹 표준과 접근성에 대해 학습합니다.
웹 표준, Semantic HTML, 크로스 브라우징, 디바이스 호환, SEO, 웹 접근성
[사용자 친화 웹] 웹 표준, 웹 접근성 과제: 웹 표준, 웹 접근성 분석 및 리팩토링
[네트워크] 심화 - HTTP에서 클라이언트 - 서버간 통신 흐름이 어떻게 이루어지는지 이해합니다.
인터넷 프로토콜: IP와 IP Packet, TCP vs UDP, HTTP
HTTP, HTTP 헤더, HTTPS
[Backend] 인증 / 보안 - 사용자가 로그인하기 위한 방법과 절차를 이해하고, 사용자 구분을 위한 인증방법을 이해합니다.
Cookie, Session, Token, OAuth
[Backend] 인증 / 보안 과제: Cookie, Session, Token, OAuth
[솔로 프로젝트] Coz’ Mini Hackathon - Section 3에서 배운 내용을 반영한 애플리케이션을 기획합니다.
솔로 프로젝트 기획 및 Figma를 활용한 프로토타입 제작
Styled Components, Storybooks을 활용한 CDD 실습
소그룹 회고: 동기와 결과물을 공유하고 서로 긍정적인 피드백을 주고받으며 성장합니다.
[회고] Section 3 - Section 3에서 배운 내용을 회고하면서, 스스로 문제점을 파악하고 개선합니다.
미니 기술면접: 학습한 개념에 대해서 동기가 이해하기 쉽게 설명하면서 복습합니다.
회고 블로깅: Section 3에서 배운 내용에 대해서 회고하고 메타인지적 블로깅을 합니다.

Section 4 : week 13 - 16

사람과 기계가 모두 쉽고 빠르게 접근 가능한 Web App을 만들 수 있다.

[HTML/CSS] 심화 - 웹앱의 동작원리를 이해하고, 다양한 사용자 경험을 제공하는 인터랙티브한 웹앱을 학습합니다.
브라우저: 브라우저 구조, 작동원리, 리플로우와 리페인트
HTML/CSS: 반응형 웹, CSS 애니메이션, Canvas
과제: 반응형 웹 구현하기, CS 애니메이션 및 Canvas 활용하기
[Webpack] 번들링과 웹팩 - 번들링에 대해서 학습하고, 번들링을 위한 툴 웹팩을 실습합니다.
번들링과 웹팩: 번들링 및 웹팩 개념학습, 웹팩의 핵심 컨셉
웹팩과 리액트: 웹팩으로 create-react-app 따라
과제: 간단한 웹앱 번들링 후 배포하기, 리액트 웹앱 번들링 후 배포하기
Webpack을 이용하여 React 프로젝트 빌드 방법을 이해하고 빌드합니다.
React에서도 DOM 요소에 접근하여 인터랙티브한 웹웹을 만들 수 있습니다.
불필요한 렌더링을 최소화 하는 Custom Hooks을 학습합니다.
[React] Advanced, Custom Hooks - React 심화 기술을 학습합니다.
Virtual DOM, React Diffing Algorithm
Advanced Hooks: Hooks 개념, useMemo, useCallback, Custom Hooks
Advanced React: 코드 분할, React.lazy(), Suspense
[컴퓨터공학 기초] - 효율적인 코딩을 위해 필요한 컴퓨터공학 기초 지식을 학습합니다.
컴퓨터 구조, CPU, Memory에 대한 기초적인 이해
운영체제: 운영체제, 프로세스, 스레드에 대한 기초적인 이해
문자열과 그래픽, 가비지 컬렉션, 캐시
[GraphQL] - 직관적이고 유연한 GraphQL에 대해 학습하고, REST API와 차이점에 대해 이해합니다.
GraphQL, REST API 개념학습
과제: Github GraphQL API로 데이터 조회하기
[TDD] - 바람직한 구조에 대해 먼저 고민하고 테스트를 만드는 TDD 방법론을 학습합니다.
TDD 기초, React와 TDD
과제: Test Builder
[Optimization] - 프론트엔드 개발에서 필요한 최적화 기법에 대해 학습합니다.
최적화의 개념, 필요성, 효과
최적화 기법, 캐시, Tree Shaking, Lighthouse
[Deploy] AWS - 프론트엔드 배포에 필요한 AWS 기초 지식을 학습합니다.
Cloud Computing, Deploy, S3, EC2, RDS, 보안그룹, PM2 개념학습
프론트엔드 배포 실습
[Deploy] CI/CD - 프론트엔드 CI/CD를 위해 필요한 기초 지식을 학습한다.
CI/CD 파이프라인 개념 학습 및 실습
[자료구조/알고리즘] 코딩 테스트 대비
코딩 테스트 알고리즘 유형을 대비하고, 수학과 심화된 코딩 테스트 알고리즘 유형을 학습합니다.
컴퓨터 공학의 기본인 자료구조에 대해 이해하고 알고리즘 문제를 학습합니다.
[솔로 프로젝트] Coz’ Mini Hackathon - 나의 CRUD 앱 만들기
솔로 프로젝트 기획 및 Figma를 활용한 프로토타입 제작 고도화
json-sever를 통한 REST API 서버 구축 및 Ajax 비동기 호출이 가능한 CRUD 애플리케이션 제작
소그룹 회고: 동기와 결과물을 공유하고 서로 긍정적인 피드백을 주고받으며 성장합니다.
[회고] Section 4
Section 4에서 배운 내용을 회고하면서, 스스로 문제점을 파악하고 개선합니다.

Pre-Project : week 17 - 19

그동안 학습했던 내용들을 바탕으로 실제 팀 단위로 백엔드 개발자와 협업하여 웹 애플리케이션을 개발하는 방법을 체득합니다.

[서비스 기획 및 분석]
웹 애플리케이션 구현을 위해 필요한 기술 요구사항을 정의하고 작성합니다.
[팀 단위 업무 수행 노하우]
실제 개발 업무 진행 중 많이 사용되는 방법을 학습하고 프로젝트 진행 과정에 적용합니다. ex)애자일, 스크럼, git-workflow
[교육 엔지니어 코칭]
프로젝트를 관리하고 실제 구현하는 과정을 교육 엔지니어의 전문적인 코칭을 통해 체험하고, 주기적으로 그룹 회고를 진행하여 프로젝트의 완성도를 높입니다.
[프로젝트 수행]
서비스를 구현하는 것을 목표로 팀원과 함께 IT 제품의 개발 및 배포를 진행합니다.

Main-Project : week 20 - 23

포트폴리오로 활용될 수 있는 수준의 높은 완성도를 자랑하는 프로젝트를 기획, 분석, 설계, 구현, 검수(회고) 합니다.

[프로젝트 관리]
팀 단위로 선택한 주제에서, 다양한 웹 기술을 분석하고 활용하며 도전적인 수준의 서비스를 출시할 수 있는 관리 방법들을 경험합니다.
[멘토 피드백]
전문적인 멘토의 피드백을 통해 프로젝트 완성도를 높이고, 주기적으로 그룹 회고를 진행하며 프로젝트를 수행합니다.
[프로젝트 구현]
기획/설계한 서비스를 구현하는 것을 목표로 팀 단위로 IT 제품의 개발 및 배포를 진행합니다.
[기술 발표]
프로젝트를 진행하면서 얻은 소중한 지식과 경험을 공유하고 자신의 포트폴리오가 될 프로젝트를 설명하는 방법과 기술을 학습합니다.

커리어코칭 : week 24

커리어코칭을 통해 채용 시장을 이해하고 구직 전략을 세워 회사에 지원한다.

잡서칭 가이드 및 이력서 세션
이력서/자소서 쓰기에 대해 배우고, 본인의 이력서를 작성합니다.
일반면접 & 기술면접 세션
개발자 채용 프로세스의 필수요소인 기술 면접에 대해 학습하고, 면접 예상 질문들을 대비합니다.
기술/인성 면접에 대해 배우고, 면접 예상 질문들을 대비합니다.
연봉협상 & 구직전략 세션
연봉 협상에 대해 배우고, 구직 전략을 세워 회사에 지원합니다.
백엔드도 궁금하다면? 백엔드 코스 커리큘럼 보러가기