프론트앤드

웹 페이지 개발의 기초인 HTML, CSS, Jascript, jQuery부터 반응형 웹 앱 개발, js 프레임워크 활용에 대한 강의를 제공합니다.

재직자 국비교육

  • 강의안내
  • 교육내용
  • 교육문의
  • 교육후기
과정명 반응형 웹앱 프론트앤드 개발자 향상과정
교육기간 2023년 6월 10일(토) ~ 7월 1일(토) 7일 총 56시간 (주말주간(토/일))
접수기간 2023년 6월 9일(금) 까지 / 선착순 마감
교육시간 09:30 ~ 18:30
교육비 450,000원
모집정원 10명
문의처 email : oraclejava@oraclejava.co.kr / tel : 02 - 6925- 4760
교재 본원 자체교재 무료제공
수강료 입금안내 계좌이체 : 국민은행 064601 - 04 - 080737 / 예금주 : 지스펙주식회사
카드결제 : 온라인 또는 오프라인으로 카드 결제
알림
    * 본 과정은 비환급 일반과정으로 진행됩니다.

교육비 지원

교육생유형 수강료 본인자부담금 추가부담금
국민내일배움카드

450,000원

450,000원

0원

취업성공패키지1

450,000원

450,000원

0원

취업성공패키지2

450,000원

450,000원

0원

일반

450,000원

450,000원

0원

교육생유형 수강료 환급액 회사부담금
사업주위탁훈련(중소기업)

450,000원

0원

450,000원

사업주위탁훈련(대기업)

450,000원

0원

450,000원

수강절차
  • 교육내용 확인
  • 해당 교육 상단 환급 or 비환급 체크, 지원하기 클릭
  • 정보마당서류다운로드 클릭
  • - 근로자 카드 지원 시 : 개인신청 서류 및 개인정보 활용 동의서 다운로드 후 작성 - 사업주 환급 지원 시 : 회사환급 훈련위탁계약서 및 개인정보 활용 동의서 다운로드 후 작성
  • 작성 후
  • E-mail : oraclejava@oraclejava.co.kr Fax : 0505-476-4760 제출
  • 온라인카드 결제 시 : ‘마이페이지’ 온라인 결제 혹은 계좌이체
  • 오프라인 결제 시 : 본원 내방하여 카드 혹은 현금 결제
  • 결제 및 서류는 해당 강의 시작 2일전 까지 완료해야함(늦을경우에는 환급 대상 신고가 되지 않습니다)
  • 개강 일자, 시간, 내용 확인 후 교육 참석
  • - 근로자 카드로 신청 시 결제하신 카드 수업 첫 날 소지 - 고용보험료 미납/체납 시 환급 되지 않을 수 있음
교육대상 - 프론트엔드 개발을 담당하는 개발자
- 프론트엔드 개발을 해보고 싶은 디자이너
- 프론트엔드 개발자로 전향하고픈 퍼블리셔
- 앱 개발자
- 초보 웹 개발자
선수학습 - 컴퓨터 관련 업종의 경력이 있으면 유리할 수 있으나 경력이 없더라도 무관함
- 본 과정의 경우 웹 표준에 대한 기초 교육부터 진행함으로 선수학습이 없어도 무방함.
강좌명 반응형 웹앱 프론트앤드 개발자 향상과정
교육목표 - HTML을 이해하고 활용할 수 있다.
- HTML5를 이해하고 활용할 수 있다.
- CSS3를 이해하고 활용할 수 있다.
- JavaScript를 이해하고 활용할 수 있다.
- jQuery를 이해하고 활용할 수 있다.
- 웹표준에 대한 이해를 바탕으로 한 HTML코딩 능력을 개발한다
- 프론트앤드와 백엔드 개발 환경을 구축할 수 있다
- React 기본을 이해할 수 있다
- AngularJS 기본을 이해할 수 있다
- Node.js와 React 를 이용한 웹어플리케이션을 개발을 할 수 있다
- Vue 구성요소 배운다.
교육개요 본 과정은 프론트앤드 개발을 위한 UI화면 기초 HTML, HTML5, CSS3, JavaScript, jQuery등을 활용하여 웹페이지 제작 기술과 노하우를 학습하실 수 있을 것 입니다.

또한 누구나 쉽게 웹 표준에 맞는 페이지를 제작할 수 있도록 도구들의 기본부터 활용까지 교육을 하며 나아가 프론트앤드 개발자를위한 React와, AngularJS, Vue.js 를 기반으로 다양한 프레임워크와 라이브러리, 툴을 사용하며,JS를 사용해서 웹어플리케이션과 스마트폰 어플리케이션을 작성할 수 있습니다.

Vue는 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있으며 경쟁적인 관계에 있는 프론트엔드 프레임워크 Angular & React 의 장점을 결합하여 만든 Vue.js의 기초를 학습하는 강좌입니다.

끝으로 본 과정은 ATOM 에디터로 진행되는 실습위주의 교육이며 사용자 인터페이스를 만들기 위한 자신만의 프론트앤드 어플리케이션으로 발전하는데 도움이 될 수 있습니다.
화면구현(HTML,CSS) * CSS
- CSS3 개요
- CSS와 HTML의 상호 작용에 대한 이해
- 레이아웃, 글꼴, 텍스트
- 테이블, 리스트, 폼

* HTML
- HTML 구성요소
- HTML 문서작성법
- 텍스트 관련 태그
- 표제(Heading)
- 링크(Link)
- 배경(background)
- 테이블(table)
- 색(color)
- 레이아웃(Layout)
- 이미지맵(image map)
- 아이프레임(iframe)
- HTML과 XHTML
- 입력양식(form)
- 마퀴(Marquee)
- 오브젝트(Object)

* JAVAScript
- 선언문(Declaration)
- 변수 및 데이터 형(Variables & Data Type)
- 연산자(Operator)
- 제어문(Control Statement)
- 객체(Object)
- 함수(Function)
- 이벤트(Event)
- 브라우저 객체(Browser Object Model)
- 문서 객체(Document Object Model)
- 선택자 및 속성(Selector & Attribute)
- 문서 객체 조작(DOM Control)
- 이벤트,효과
HTML5 - HTML5 개요
- HTML History
- HTML5 특징/장점
- HTML4 & HTML5
- 스마트폰용 HTML5의 기본 형태
- 동영상 & 이미지 다루기
- 그래픽 처리 ~ 캔버스
jQuery & Ajax * jQuery
- JQuery 개요
- JQuery 셀렉터 Element 다루기
- Element 조작
- DOM 스크립팅
- JQuery 이벤트 핸들링
- JQuery Utility 함수
- JQuery 응용

* Ajax
- Ajax 개발환경 구축
- 왜 Ajax 인가?
- Ajax의 기본 구성
- XMLHttpRequest 객체
- innerHTML의 사용
- DOM(Document Object Model) 다루기
- Ajax MVC
React * React 입문
- React의 기본적 사용법
- React와 JSX의 관계
- Virtual DOM
- React로 컴포넌트 작성
- 이벤트의 구조와 구현

* React 컴포넌트 작성 상세
- 컴포넌트의 생성부터 파괴까지
- React의 입력 폼
- 컴포넌트간의 연동
- 입력폼의 밸리데이션 처리
- DOM에 직접 접근법
- React 컴포넌트로 Ajax통신 수행
Angular.js - Angular 환경설정
- Angular 아키텍쳐
- module
- component
- template
- metadata
- directive
- Service
- Dependency Injection
- 바인딩(Binding)
- 비동기 처리( Promise , Observable )
Vue.js - Vue.js 설치
- 디렉티브 ( v-show, v-if, v-for 등 )
- 이벤트 처리
- 컴포넌트 생성 및 사용
- 바인딩
- HTTP 연동 및 라우터(router
Node.js - 현대적인 자바스크립트
- 백엔드 처리의 대표 Node.js
- 패키지 매니져 npm
- 개발에 사용되는 에디터
- 코딩 규칙 JS Standard Style
- Node.js로 간단한 웹어플리케이션 작성
- Node.js와 비동기 처리

강사프로필

강사님 L00 강사님
프로젝트 경력사항
- 헬로우디션 개발PL (헬로오디션 모바일 어플리케이션 개발) : 오디션 정보 포털,오디션 정보 커뮤니티 시스템 개발 : 웹/머바일 데이터 연동 시스템 개발 : 모바일웹 페이지 연동 하이브리드 개발 - 투어바스켓 개발PL (하이브리드형 모바일 어플리케이션 개발) : 여행정보안내 및 커뮤니티형 클라이언트 모바일 시스템 개발 : 관리 시스템 및 모바일 페이지 퍼블리싱 시스템 개발 : 정보페이지 모바일웹을 이용한 하이브리드 개발 - LG U+ UBS 시스템 개발PL (LGU+ 블록스토리지 시스템개발) : 하위의 빅데이터 시스템과의 연동을 위한 데몬시스템 : 상단 운영 및 관리를 위한 웹시스템 및 연동 시스템 - 넷진테크 (항공 정보통신 시스템)개발 : SIP 기반 통신모듈 개발 : 관제사 터치 패널 GUI 개발 : IP-PBX/Call Server 개발 : STT 음성인식 엔진 개발 - 스마트밸런스 설계개발 (스마트 헬스케어 모바일 어플리케이션) : 안드로이드 앱 개발 : BLE 기반의 디바이스(체지방계,신장계,심박출력계)연동 : 헬스케어 정보 관리 시스템 개발 - 다짐 CRM (피티니스 CRM 시스템)개발 : 하이브리드 프로토타입 제작 : 안드로아드 앱 개발 : IOS 기능개발 - 스마트 패스포트 (스마트 여권 스캐너) 설계개발 : 안드로이드 앱 개발 : 스캐너 통신 모듈 개발 - 버추어메이트 (버추어 메이트 가상코칭 장치 구축 사업)설계개발 : 기기 설계 및 시스템 구축 : 2018년 CES 출품 및 서비스 런칭 : 동작추적 센서를 활용한 데이터 처리 및 UI 처리 장치 - JL테크 (전기밥솥 모니터 앱 개발) 설계개발 : 하이브리드 앱 개발 : BLE 통신 모듈 개발 - 빅히트테크놀로지 (결혼 정보 서비스 개발) 설계개발 : 안드로이드,IOS,네이티브 앱 개발 : 결혼 정보 시스템 개발 : 관리자 웹 어플리케이션 개발 - AIS mobile (RFID 및 IC기반 데이터클라우드 생산 시스템 연동 모바일)설계개발 : 하이브리드 모바일 어플리케이션 개발 : 하드웨어 연동 서버 구축 및 데이터 연동 시스템 구축 - Meengle (반려인을 위한 SNS 및 쇼핑몰) 설계개발 : 하이브리드 프로토타입 개발 : 안드로이드, IOS, 네이티브 앱 개발 : 관리자 웹 어플리케이션 개발 : 쇼핑몰 및 SNS 정보 시스템 개발 - 캔들라이트 (폐쇄형 쇼핑몰 개발) : 폐쇄형 쇼핑몰 시스템 개발 : 사용자 별 관리자 웹 어플리케이션 개발 : 안드로이드,테이티브 앱 개발 - MICROBER (미생물 배양 시스템) 설계개발 : 정량분석이 가능한 유해미생물 검출장치 고도화 : 실시간 미생물 배양 현황 및 정보 분석 시스템 개발 : 안드로이드,네이티브 앱 개발 : 정보관리 관리자 웹 어플리케이션 개발 - Equalkey (인공지능 수학 학습 도우미) 개발 : 하이브리드 기반 모바일 어플리케이션 개발 - 헤브잇 (AI기반 식단관리 솔루션) 설계개발 : AI 기반 철영 음식 이미지 인식 및 영양정보 분석 : 식단 관리 시스템 서버개발 - 베네핏 (맞춤형 운동관리 솔루션)개발 : 트레이너와 회원간의 운동 관리 솔루션 개발 : 회원,트레이너,기관 회원전용 3종 앱 개발 : 안드로이드 기반 서비스 개발 그외 JAVA WEB개발 프로젝트 진행..
전문분야
주요보유기술 - 하이브리드 개발 기술 보유(Angular / React / lonic / React-Native 등) - 안드로이드 ios 네이티브 개발 기술 보유(java, Kitlin, Swift) - 웹 시스템 프론트 개발 기술보유 (J/S, .NET, PHP 등) - 디자인 도구 활용(Sketch, Adobe XD, Photoshop 등) - 서버 구축 및 관리/운영 기술 보유 - JAVA WEB 개발 보유기술(JAVA, JSP, 스프링 등)
  • @
  1. 프론트앤드 기초 입문과정 수강 후기입니다.

    개발의 기초단계를 배울 수 있는 프론트앤드부터 시작을 하니, 개발에 재미도 붙고 실제로도 같이 해보니 더 재밌었던 것 같습니다. 선생님께서 설명도 쉽게 해주시고, 중간에 질문이 있어 질문하면 바로 대답도 해주시고 잘못된 부분도 바로 잡아주십니다. 다음 강좌가 있다면 찾아서 등록하고 싶습니다.

  2. 자바스크립트 프레임워크(React.js, Vue.js) 향상과정(2023-11-27 ~ 2023-11-30) 후기

    자바스크립트 프레임워크(React.js, Vue.js) 향상과정(2023-11-27 ~ 2023-11-30) React.js, Vue.js를 처음 배우시는분들께 추천 드리고 강사님이 친절하게 알려주셔서 수료할 수 있었습니다.

  3. 알찬강의 감사합니다.

    새로운 방식이라고 생각하여 어렵게 생각하였는데 react, vue 프레임워크의 개념을 잡는데 큰 도움이 되었습니다. 4일동안 고생해주신 강사님께 감사드립니다.

  4. 아주 유익했습니다.

    HTML/CSS 관련하여 개념정리가 안되었는데 많은 도움이 되었습니다.

  5. 그동안 고생 많으셨습니다.

    그동안 진행해주신 강의 많은 도움이 되었습니다. 저는 리액트보단 뷰에 관심이 좀 많았었는데요. 초기 허들이 독학으로 잘 진행이 안되었었다보니 많은 도움이 되었습니다. 너무 고생 많으셨습니다. 감사합니다.!! 항상 건강하세요.

  1. HRD 수강평
  2. HRD 수강평