HTML, CSS, JavaScript부터 React까지!
프론트엔드 개발자 취업과정!
본 과정은 HTML5, CSS3, JavaScript 기본기부터 React, Vue 등 최신 프레임워크까지, 실무에서 요구하는 프론트엔드 개발 기술을 체계적으로 학습할 수 있도록 설계되었습니다.
또한 반응형 웹, 비동기 통신(AJAX), REST API 연동, Git 협업, 프로젝트 실습 등 실제 기업 환경과 유사한 경험을 제공하여, 취업을 목표로 한 포트폴리오까지 완성할 수 있습니다.
-
- 교육기간
- 6개월
-
- 강의시간(지점별 상이)
- 3시간
-
- 난이도
- 입문~고급
-
- 인원
- 20내외
-
- 전화상담(주말 · 공휴일 상담 및 접수가능)
- 02-313-0613
이런 분들께 추천해요!
웹 개발에 입문하고 싶은 비전공자
퍼블리셔에서 프론트엔드 개발자로 직무 전환을 희망하는 디자이너
UI/UX에 관심 있고 웹 인터페이스 제작 역량을 키우고 싶은 사람
프론트엔드 개발자로 취업하고 싶은 취준생
프론트엔드 개발과정의 핵심 포인트
-
POINT.01
HTML, CSS, JS 기본기부터 React/Vue 실무까지 완성형 커리큘럼으로 기초부터 프레임워크까지 단계별로 학습합니다.
-
POINT.02
로그인 페이지, 게시판, 관리자 페이지 등 실제 현업에서 사용되는 UI 기능을 구현합니다.
-
POINT.03
다양한 디바이스 환경 대응 + 웹접근성(WA) 기준에 맞춘 마크업 실습을 포함합니다.
-
POINT.04
React(Vite, CRA), Vue.js, Next.js 등 활용하여 컴포넌트 기반 개발 및 상태 관리(Recoil, Redux 등)까지 학습합니다.
-
POINT.05
외부 API 연동, Axios/Firebase/Fetch 활용하여 프론트-백 연계 로직을 완성합니다.
-
POINT.06
실전 프로젝트를 통해 UI을 설계, 협업, 발표, 코드 리뷰까지 실무 감각을 향상합니다.
프론트엔드 개발 커리큘럼 안내
프론트엔드 개발자는 사용자가 웹사이트에서 직접 보고 사용하는 화면(UI)를 설계하고 구현하는 핵심 직무입니다.
-
Chapter.01
-
HTML / CSS / 웹 접근성과 웹표준
-
개발환경 구축
- 인터넷의 동작 원리 이해
- VS Code 설치
HTML
- 문서구조
- 구조를 나타내는 요소
- 박스 모델과 컨텐츠 모델
- 웹 폼 요소
- 의미적 마크업 / FTP 프로그램
CSS
- CSS의 역할과 적용 방법
- 선택자와 상속
- CSS 컬러 적용
- 웹 글꼴 이용하기
-
-
Chapter.02
-
퍼블리싱 / git, github / 세미 웹 퍼블리싱 프로젝트
-
CSS
- CSS 테이블
- display와 visibility / position / z-index
- 다단 나누기
- CSS 애니메이션
- 플레서블 박스 레이아웃
- 반응형 웹과 미디어 쿼리
실전 퍼블리싱 프로젝트
- 프로젝트 설계
- 페이지 마크업, 스타일 적용
- 반응형 적용
- git, github
-
-
Chapter.03
-
Javascript 기초 및 응용
-
- Javascript란?
- 적용 방법 및 출력 / 변수
- 타입 변환과 연산자
- 제어문(조건문, 반복문)
- 배열과 다차원 배열
- 함수(내장함수, 사용자 정의 함수)
- 객체와 생성자
- 브라우저와 문서 객체 모델
- 폼과 이벤트 다루기
-
-
Chapter.04
-
프론트엔드 중급 / react
-
React
- React 란?
- 환경 설정 및 구조 설명
- 컴포넌트, JSX, props
- Hook
- useState, useRef, useEffect, useMemo, useCallback
- useReducer / Context API / Immer
- 클래스형, 함수형 컴포넌트
- 컴포턴트 스타일링
- 간단한 react 앱 프로젝트
Rest
- API 연동
- Rest 란
- Rest API 를 이용한 예제 다루기
-
-
Chapter.05
-
웹서버 이해 및 Node.js
-
Node.js
- Javascript로 구축하는 서버
- node.js 설치
- 웹서버 / 요청, 응답 객체 / 동적 파일 제공
- 라우팅 처리 / 미들웨어 / 비동기 패턴
- 쿠키 및 세션 다루기
DBMS와 SQL
- NoSQL, MongoDB 설치 및 환경설정
- node.js + MongoDB 활용
- 이메일 보내기 / 파일 업로드
- Node.js 소켓 / 간단한 채팅 구현
-
-
Chapter.06
-
TypeScript / 프로젝트
-
TypeScript
- TypeScript 란?
- 개발 환경 구축
- 기본 타입과 변수 선언
- 함수형 타입
- Enum 타입 / 배열과 튜플
- Intersection 타입 / Union 타입
- 객체지향 프로그래밍이란?
- 제네릭 기초와 실습 예제
실전 프로젝트 진행
-
취업의 핵심
실무 기반 프로젝트로 완성하는 포트폴리오
실제 수료생들의 프로젝트 결과물을 보고, 기업이 원하는 포트폴리오 기준을 확인해 보세요
