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