리액트(React)를 활용한 프론트엔드 개발 과정(향상)
- 1차 개강일
- 26년 04월 07일(화)
- 2차 개강일
- 26년 04월 21일(화)
고용24 국민내일배움카드 훈련과정명은
리액트(React)를 활용한 프론트엔드 개발 과정(향상)입니다.
산업구조변화대응 특화훈련 [산대특]
산업구조 변화 등에 따라 훈련 공급 부족 문제를
해소하기 위해 디지털 선도 기업 아카데미 등
새로운 훈련 유형들을 개발, 청년 일자리 문제
산업계의 시급한 인력 수요를 공급할 수
있도록 만든 훈련.
- 훈련비
전액무료 - 특별수당
지원 - 취업
연계
퍼블리셔 직군·기존 훈련을 통해 양성된
퍼블리싱 인력을 프론트 개발자로 향상.
리액트(React)를 활용한
프론트엔드 개발 과정(향상)이란?
프로젝트 기반으로 현직 퍼블리셔 및 HTML+CSS+JavaScript 과정을
수료한 훈련생을 프론트엔드 개발자로 향상 시키기 위한 React를 활용하여
가상 DOM, JSX 기술을 습득하고, 직무 능력 향상하는 목표로 한다.
Start now
- Front-end publisher
- Figma
- HTML, CSS
- JavaScript
- React.js
- 웹 프론트엔드 프로젝트
웹/앱 프로젝트 산대특 과정
UIUX분야 현직 퍼블리셔,
응용 SW분야 이/전직 예정자,
국기 웹 퍼블리셔 수업을 수강 한 분들을
프론트엔드 개발자로 업그레이드
시켜드리는 리액트 & 타입스크립트
및 웹/앱 프로젝트 산대특 과정
사용자 (Client 클라이언트) 의 사용하는
화면의 개발의 모든 것~!
- HTML 마크업 구성 및 레이아웃 : 웹표준 및 웹접근성을 고려한 마크업
- UI/UX 설계 및 개발 인터렉션 구현 : 크로스 브라우징 및 브라우저 퍼포먼스
- 개발 : 데이터를 출력 또는 입력, 가공 등을 통해 개발

- API (Application Programming Interface)를 가져와
데이터의 출력, 입력을 통한 비지니스 로직 구성과 유저가 사용하는 UI를 개발 - 수강생들이 강의 내용을 이해하고 본인의 실력으로 만들어 갈 수 있도록 서포트합니다.
- 실습을 통해 내가 배운 내용을 눈에 보이는 결과물(포트폴리오)로 챙겨가세요.
- 최신 트렌드를 반영한 커리큘럼으로 진행되는 강의!
현업에서 적용 가능한 노하우를 학습합니다.
React.js을 통한 활용예시
- UI/UX 사용자에 맞는 편리한 인터페이스 제작
- 반응형 홈페이지 접속기기에 맞춰 사이트를 최적화하여 보여줌
- 프론트/백엔드 개발 사용자에게 보여지는 화면 및 데이터를 관리하는 개발
- 앱(애플리케이션) 마크주커버그가 만든 SNS의 한 종류(리액트 기반)
- HTML5&CSS
- JS&개발환경
- REACT.JS
- 포트폴리오
- JS &개발환경
- Node.js 와 NPM 구성
- YARN 구성
- JSX 문법 파악 등
- 웹&모바일_미디어쿼리/반응형 웹제작
- REACT.JS
- 리액트 컴퍼넌트 & JSX
- 배열 렌더링 및 추가/제거/수정
- useReducer 사용
- 포트폴리오
- Figma, Github를 통한 협업
- SPA페이지 구현
- 개인 사이트 구현
기초부터 요즘 핫한 최신 기술까지~!
프론트엔드 개발자로 성장합니다.
개발자 입무부터 실무까지~학습량이 방대한 프론트엔드!
내게 필요한 커리큘럼을 한 번에 모아서 익히고 학습합니다.
프론트엔드 개발자가 되고 싶다면,
이젠에서 일단 시작!
완벽한 취업 연계!
50개+협력기업과 함께! 취업까지 직행합니다.
평균 취업률 80% 비전공자·초보자 포함 수치
- 삼성
- LG
- 현대
- SK
- 현대 백화점
- 쿠팡(COUPANG)
- 한국타이어
- 기아
- 서울교통공사
- LINE
- The JoongAng
- 올리브네트웍스
- HANSSEM (한샘)
- DOOSAN(두산)
- KT nasmedia
- 캐논 CANON
- 효성 ITX
- NOL interpark
- 다이소
- NHN
- KG 이니시스
- 한국중부발전
- LX 하우시스
- (주)한화
- 한국전력공사
- 신세계
- LOTTE GRS
- KCC
- YTN
- YTN
꿈꾸던 기업의 현직자, 이미 당신의 기수 선배들입니다.
전공자 아니어도 됩니다.
기업이 뽑고 싶게 만드는 건 저희 전공이니까요.
수강은 시작일 뿐! 초보도 가능한 수강생 전용 혜택
-
중도 포기자 0%를 위한
- 사전 수업 스타트 캠프
- 사전 학습
가이드 제공
-
실무 기준에 맞춰 레벨UP
- 정규 실무 과정
- 실무 중심의
수업
-
이력서에 바로 쓰는 결과물 생성
- 실무 프로젝트
- 현직 실무자
협업 프로젝트
-
취업 성공 끝까지 함께
- 취업 연계
- 취업 컨설팅 +
채용 연계
성과를 인정하는 다양한 리워드 제공
전담
취업지원팀이
끝까지 함께
- 기업별
면접 족보
공개 - 이력·자소서
1:1 첨삭 - 기업별
예상 질문
집중 대비 - AI 면접 +
실전 모의면접 - 1:1 맞춤
취업 전략
분석
취업 지원하고 성과 증명까지
디지털 배지
- 프로젝트 발표 &
수상 기회 - 공모전·박람회 지원
- 무료 컨퍼런스 제공
기초가 없어도 따라올 수 있습니다.
수업 시작 전, 사전 교육으로 기초 쌓기!
비전공자도 뒤처질 걱정 NO
혼자서 막막하지 않도록!
스터디 크루 운영과 전문 튜터의 밀착 지원

현직 실무자와 함께 진행하는 프로젝트!
기업 기준에 맞춘 기획·제작·피드백 과정 경험
이력서·포트폴리오·면접까지!
단계별 취업 지원 프로그램 제공
남들 혼자 준비하며 겪을 시행착오,
단 한번에 끝내고 취업합니다.
교육비 자기부담금 O원
하지만,
매달 받는 훈련수당으로 →
교육비 자기부담금은 O원
(최대 60만원) ↓ 교육비 자기부담금 O원
K-디지털·국기·취준생 국비지원
20~80만원 지급
(6개월 기준 최대 480만원) ※ 개인별 지급액은 상이할 수 있습니다.
-
50+
협력기업
취업연계 -
희망 기업 맞춤
예상 질문 &
모의 면접 -
AI Tool
사용 혜택
제공 -
500만원 상당
AI+ 실무 활용
온라인 강의 -
온라인
학습 시스템
제공 (LMS) -
교육과정
관련
교재 제공
수강후기
커리큘럼
- 1
HTML5 & CSS
- HTML 정의 및 기본태그
- CSS Style과 시각표현
- HTML5 이해 및 HTML5 문서구조
- 2
웹표준 페이지제작
- HTML5 페이지제작
- 메인 및 서브시안작업
- HTML5 응용 페이지제작
- 사이트등록
- 관리자페이지
- 웹접근성 및 유효화
- 사이트 최종확인
- 3
JavaScript&jQuery
- 자바스크립트 정의 및 기초문법
- HTML문서 서술방법 및 연동방법
- 기초문법 설명 및 연산자(산술, 대입, 증감, 관계, 논리)
- 변수 및 함수 정의
- 제어문과 반복문의 이해
- 제이쿼리 정의 및 문법이해
- 제이쿼리 문서 객체 선택자와 조작법
- 제이쿼리 이벤트
- 다양한 효과와 애니메이션
- 제이쿼리 비동기 방식 연동
- 제이쿼리 플러그인 이해 및 활용
- 4
리액트(React)
- Node.js와 npm구성
- JSX를 사용하는 리액트
- 프로퍼티 상태, 컴포넌트 트리
- 컴포넌트 개선
- 리덕스
- 리액트와 리덕스
- 리액트와 서버
- 5
포트폴리오
- 웹프로젝트 완료
- 디자인 및 콘텐츠 사용성 수정 보완
- 매체 기능적 요소 수정 보완
- 사후 관리와 유지보수
UX/UI 웹디자인 프론트엔드
UX/UI 웹디자인 프론트엔드 취업완성패스
-
웹 언어의 기본을 확실히!
웹 퍼블리셔의 모든것~UIUX웹퍼블리셔_웹디자인기능사
-
사용자 니즈를 분석하여,
UI,UX 설계 등을 구현UIUX웹디자인(피그마)
-
챗 GPT(ChatGPT)를 활용하여
웹 애플리케이션의 화면을 구현.AI 활용 프론트엔드개발 (AWS/Figma/React/ChatGPT)
-
생성형 AI, 포토샵, 일러스트 기술을
습득하여 UIUX 제작 편집.생성형AI 활용한 UI/UX 제작 편집(일러스트,포토샵)
-
디자이너라면 가장 먼저 배워야할
필수 프로그램 포토샵&일러스트AI를 활용한 디지털 콘텐츠제작(포토샵,일러스트)
-
웹디자인과 퍼블리싱을 학습해
실제 웹 포트폴리오 구현까지-UIUX웹앱디자인(피그마[Figma])&프론트엔드(react.js)
-
챗 GPT(ChatGPT)를 활용하여
웹 애플리케이션의 화면을 구현.생성형 AI&API를 활용한 웹프론트개발(Figma,React)
UX/UI 웹디자인 프론트엔드 커리어패스
-
디자이너라면 가장 먼저 배워야할
필수 프로그램 포토샵&일러스트포토샵&일러스트(2D그래픽)
-
사용자 니즈를 분석하여,
UI,UX 설계 등을 구현AI UI/UX 디자인 (figma)
-
HTML과 CSS를 기반으로 한
웹표준 웹사이트 만들기~!웹표준코딩(HTML5/CSS)
-
화려하고 다채로운 콘텐츠 표현,
JavaScript&jQueryJavaScript&jQuery
-
자바스크립트 프레임워크의 혁신~!
프론트엔드 개발자의 필수요소React 프론트엔드개발
-
UI 디자인 스케치, 프로토타이핑 및
협업을 위한 사용법과 실무 활용법[전액무료]UIUX웹&앱디자인(피그마,javascript)
10초 안내받기
원하시는 과정을 선택하시면 1:1 상담을 진행해드립니다.