겨울 방특 테스트

상담신청
캠퍼스*
이름*
연락처*
- -
문의사항
내용확인
  • 1899-1148

국비 과정 ‘나도 들을 수 있을까?’
고민하지말고 문의하세요!

title

-

-

FRONT-END

프론트엔드 실무스킬업
(4개월 코스)

수강기간6개월

수업일평일반 주 5일 / 주말반 주 2일(토,일)

핵심포인트!

벡엔드와 프론트엔드 기술을 모두 익혀 더나은 개발자로 거듭나기!

웹개발은 프론트엔드와 백엔드의 분야로 나눌 수 있고, 프론트엔드는 사용자의 화면에 나타나는 웹 화면을 만드는 기술을 공부합니다. 현업 실무자가 직접 지도하며 단순 기초적인 구현에 그치는 것이 아닌 HTML/CSS 에서 부터 Node.js / React 까지 프론트엔드 취업을 위한 기술을 습득하는데 특화 되어 있는 과정 입니다.

CURRICULUM교육과정

교육과정의 개월수를 선택하여 세부과정을 볼 수 있습니다.

  • 1주차

    ● 웹 환경의 이해 ● 웹페이지 작성을 위한 프로그램 설치 & 웹페이지 기본구조 ● GitHub를 활용한 소스코드 관리 ● HTML 문장, 문단, 멀티미디어, 표 관련 요소 ● HTML을 활용한 이력서 웹페이지 예제 ● HTML 입력관련요소 ● HTML 라디오버튼, 체크박스, 드롭다운

  • 2주차

    ● CSS의 이해 ● CSS 선택자 ● CSS 폰트 관련 속성 ● 구글 웹 폰트와 아이콘 폰트 활용 ● CSS 문단 관련 속성 ● CSS 텍스트 그림자 효과 ● CSS 박스 모델 (박스 크기 설정, auto 값의 사용) ● CSS Overflow/Margin/display 속성

  • 3주차

    ● CSS Float 속성 및 Float 속성 활용 갤러리 레이아웃 예제 ● CSS Position 속성 및 Position 속성 활용 웹진 글 목록 레이아웃 예제 ● CSS Background 속성 ● 이미지 클립핑 및 Gradient 처리 ● 모서리 라운드 효과, Opacity 효과 ● Transform과 Transition ● 반응형 웹의 이해

  • 4주차

    ● CSS Flex 속성 ● CSS 활용 클론코딩 세미 프로젝트 ● SCSS의 이해와 활용 ● SCSS 기반 반응형 웹 믹스인 구성 ● SCSS 활용 클론코딩 세미 프로젝트

1개월

HTML,CSS 활용 웹페이지 제작

  • 1주차

    ● Javascript 시작하기 ● 변수와 데이터 타입 ● Javascript 연산자 : 산술, 대입, 단항, 증감, 비교, 논리, 삼항 연산자 ● 조건문 : if문, switch문 ● 반복문 : while 문, for문

  • 2주차

    ● 프로그램 흐름 제어 응용하기 : 중첩 조건문, 중첩 반복문 ● 배열의 이해와 활용 : 1차 배열, 2차 배열, 가변 배열 ● JSON 구조의 이해와 활용 ● 얕은 복사와 깊은 복사 ● 구조분해와 옵셔널 체이닝 ● 함수의 이해

  • 3주차

    ● 익명함수와 화살표 함수 ● 콜백함수 ● 객체지향 프로그래밍 - 클래스와 객체 - 생성자와 getter, setter - 클래스 상속 - Override, super - 정적 멤버변수 - 싱글톤 패턴 클래스 ● Javasciprt 기본 API - isNaN, parseFloat, parseInt - URI, URIComponent - setTimeout, setInterval

  • 4주차

    ● Javascript 기본 API - String - Math - Date - Number - Array - 배열의 탐색과 관련된 함수들 ● 비동기처리 - callback 함수 활용 - promise - async ~ await ● 모듈의 이해 - ES5 style (require) - ES6 style (import) - 정규표현식 활용 문자열 검사 모듈 만들기

2개월

프로그래밍 언어로서의 Javascript

  • 1주차

    ● 웹 페이지와 Javascript ● HTML 요소를 Javascript 객체로 가져오기 ● 메시지 박스 사용하기 ● 마우스 관련 이벤트 처리 및 키보드 관련 이벤트 처리 ● 브라우저 resize, scroll 이벤트 처리 ● HTML 태그 제어하기 및 CSS 제어하기 ● dataset 속성 활용하기 ● Tab 페이지 예제 ● HTML 요소 탐색하기 - 부모요소 탐색 - 자식요소와 자손요소 탐색 - 이전, 다음 요소 탐색

  • 2주차

    ● HTML 요소 탐색하기 - submenu 예제 - 아코디언 컨텐츠 예제 ● 동적 HTML 요소 - Javascript로 HTML 요소 생성하기 ● Form 요소 제어하기 - 키보드로 입력하는 요소 제어 - down 요소 제어 - radio button과 checkbox 제어 - focus event, disabled 속성 제어 - 이미지 미리보기 예제 - 회원가입 페이지 예제와 입력값 검사하기 ● 웹 브라우저 관련 기능 - window 객체, navigator 객체 - 웹 브라우저 종류 판별하기 - geolocation 객체

  • 3주차

    ● 웹 브라우저 관련 기능 - location 객체 - history 객체 - querystring 다루기 ● 로컬 데이터 읽기/쓰기 - Cookie - LocalStorage, Storage ● XMLHttpRequest 활용 Ajax - XMLHttpRequest 객체의 이해 - Promise 방식 비동기 처리 - async ~ await 방식 비동기 처리 ● Axios 라이브러리를 활용한 Ajax 구현 - Axios 라이브러리 기본 활용 방법 - 영화진흥위원회 Open API 연동 ● Axios 라이브러리를 활용한 Ajax 구현 - Kakao Open API를 연동한 이미지 검색 페이지 만들기

  • 4주차

    ● CRUD의 이해 - Frontend, Backend의 역할 이해하기 - 데이터 조회 기능 구현 - 데이터 입력, 수정, 삭제 기능 구현 ● Open Source Library 활용하기 - Animate, AOS - pageable - 사이드바 메뉴 구현하기 ● Open Source Library 활용하기 - filterizr 라이브러리 - 이미지 슬라이드 라이브러리 - rprogressbar 라이브러리 ● 클론코딩 세미프로젝트

3개월

웹페이지에서의 Javascript 활용

  • 1주차

    ● React.js 프레임워크 구조 파악하기 - 개발환경 구성 - npm과 yarn 이해하기 - React Component 구조 ● SPA(Single Page Application) 구조 이해하기 - React Router - QueryString 활용하기 - Path 파라미터 활용하기 ● JSX 표현식의 이해와 활용 - 조건분기 - 반복처리 ● 컴포넌트 속성 활용 - props - props의 기본값 설정 - props type 검사 ● Style 활용하기 - CSS와 CSS 모듈 - SCSS와 SCSS 모듈 - styledComponent

  • 2주차

    ● Layout 구성 Demo ● React Hook과 Event 처리 ● UI 구현하기 - 메뉴 구성 - 글 목록 구현하기 - 아코디언 컨텐츠 구현하기 ● Open Source Library 활용 - fslightbox - Slider / AOS - SweetAlert2 - Chartjs ● Axios 라이브러리 활용 Ajax 구현하기

  • 3주차

    ● AxiosHook 활용 Ajax 구현하기 - 타이타닉 탐승자 목록 Demo ● Axios Hook 활용 CRUD 구현 - 데이터 조회 및 검색 - 데이터 입력, 수정, 삭제˝ ● Redux 활용 컴포넌트 상태 관리 - 뉴스 글 목록 - 영화진흥위원회 OpenAPI 연동 ● Redux 기반 CRUD 구현하기 - 데이터 조회 및 검색 - 데이터 입력, 수정, 삭제 ● ReactQuery 활용 컴포넌트 상태 관리 - 카카오 OpenAPI 연동

  • 4주차

    ● ReactQuery 활용 CRUD 구현하기 - 데이터 조회 및 검색 - 데이터 입력, 수정, 삭제˝ ● React 프로젝트 빌드 및 배포 ● Github Page에 프로젝트 배포하기 ● 세미 프로젝트 - 각자 주제를 정해서 직접 구현해 보는 과정

4개월

React.js의 구조와 이해

  • 1주차

    ● Hello Next.js - Next.js 환경 구성 - Next.js Routing 구조 - React와의 차이점 ● 공통 레이아웃 구성하기 - app.js와 _document.js - SEO 대응하기 ● CSS 활용하기 - CSS 활용 - SCSS 활용 - StyledComponent 활용 ● Ajax 처리하기 - Axios와 Axios Hook 활용 ● Redux 활용 컴포넌트 상태 관리 - 뉴스 글 목록 - 영화진흥위원회 OpenAPI 연동

  • 2주차

    ● Redux 기반 CRUD 구현하기 - 데이터 조회 및 검색 - 데이터 입력, 수정, 삭제 ● ReactQuery 활용 컴포넌트 상태 관리 - 카카오 OpenAPI 연동˝ ● ReactQuery 활용 CRUD 구현하기 - 데이터 조회 및 검색 - 데이터 입력, 수정, 삭제 ● SSR (Server Side Rendering) - getServerSideprops - getStaticProps - getStaticPaths ● Fullstack 환경 구성하기 - Node.js (Express)와의 결합

  • 3주차

    ● 쇼핑몰 핵심 기능 제작 - 사이트 기본 구성 - 회원 가입 / 인증 기능 구현하기 - 상품 목록 / 상세 페이지 구현하기 - 장바구니 구현하기 - 상품 리뷰 구현하기

  • 4주차

    ● 포트폴리오 프로젝트

5개월

서버 사이드 랜더링을 위한 React

  • 1주차

    ● React Native 개발환경 구성하기 - iOS 환경 구성 - Android 환경 구성 ● React Native Component 구조와 JSX - 화면 레이아웃을 구성하는 원리 이해하기 ● React Native Component Props - 동적 컴포넌트를 구성하기 위한 파라미터 처리 기법 ● Styled Component - UI 레이아웃에 디자인을 적용하는 기법 ● Stack Navigation - 페이지를 구성하기 위한 네비게이션 구현 방법

  • 2주차

    ● Tab Navigation - 하나의 화면에 여러 개의 레이아웃을 포함시키기 위한 네비게이션 구현 방법 ● React Native Hook - Hook을 통한 화면과 컴포넌트의 상태 관리 기법 이해 ● Http Client - Axios를 기반으로 한 백엔드 시스템과의 통신 기법 ● Axios Hook - Axios Hook을 기반으로 한 백엔드 시스템과의 CRUD 연동 ● Redux - Redux를 기반으로 한 전역 상태관리 기법 이해하기

  • 3주차

    ● Redux CRUD - Redux를 기반으로 백엔드 시스템과 연동된 상태 관리 기법 이해하기˝ ● WebView 컴포넌트 - ReactNative와 React.js를 연동하여 동적 화면 구성하기˝ ● React Native App 빌드 및 배포 - App Store 및 Google Play Store에 배포를 위한 패키징 과정 익히기˝ ● 세미프로젝트 - News Viewer 만들기

  • 4주차

    ● 포트폴리오 프로젝트

6개월

React Native 기반 앱 개발

빠른 전화상담 신청

개인정보 수집동의 보기

수강생 인터뷰

더보기

실시간수강후기

더보기

권O윤수강생

수업을 듣기 전의 저는 파이썬이나 다른 컴퓨터 언어들에 대하여 제로베이스였던  상태였습니다. 걱정되는 마음으로 수업을 듣기 시작하였는데 결과적으로 보람쌤의 듣게 된것은 저에게 큰 행운이었습니다:) 수업을 들으며 제가 가장 좋았던 부분 3가지를 적어보겠습니다. 1. 첫번째는 연습문제를 이용하여 공부했던 것입니다. 선생님께서 예제를 풀어주신 후에 수강생들이 연습문제를 풀어 개념을 응용시키는 방법을 익힐 뿐만 아니라 각 언어에 필수적인 개념들을 빠르게 습득할 수 있었습니다. 직접 문제를 풀며 결과물을 보니 코딩 자체에 흥미가 높아지고 수업에 더 적극적으로 참여하려는 마음이 커졌던 것 같습니다.  2. 두번째는 강의 목차의 구성입니다. 보통의 책들과 강의 목록이 살짝 달랐는데 예시로 스트링 부분을 다른 변수들과 같이 배우지 않고 기본적인 큰 틀을 모두 배운 후 수업을 진행하셨습니다. 개인적으로 저에게는 이 방식이 잘 맞았습니다. 숫자와 문자를 함께 배웠다면 체계가 잡하지 않은 상태에서는 오히려 헷갈렸을 수도 있었을 것 같다는 생각이 듭니다. 3. 마지막으로 학생들과의 의사소통 입니다. 연습문제를 숙제로 내주실 때도 있는데 어렵거나 헷갈리는 부분들을 메일로 질문하면 항상 친절하게 답변을 해주셨습니다. 코딩을 처음 해보는 사람인지라 질문이 많았었는데 선생님 덕분에 자유로운 분위기 속에서 편하게 질문을 할 수 있었습니다. 그리고 현직에서 일을 하다가 오셔서 현실적인 조언들도 해주시고 개발자가 하는 일들을 설명해 주셔서 도움이 많이 되었습니다.  보람쌤의 강의내용 구성이나 방식이 저와는 정말 잘 맞아서 나중에 C언어도 선생님께 배울 생각입니다!

메가 선생님

더보기

기초프로그래밍

박상석 강사

SW특기자전형

정하영 강사

웹프로그래밍

신보람 강사

웹프로그래밍

이상덕 강사

프로그래밍, OA과정

김현수 강사

소프트웨어

박연미 강사

네트워크보안과정

배지훈 강사

소프트웨어

이서희 강사

웹프로그래밍

김지연 강사

웹개발

이세라 강사

빅데이터 사이언스

김진성 강사

안드로이드 프로젝트

안성은 강사

빅데이터 사이언스

서현경 강사

기초프로그래밍,서버

최미래 강사

프론트엔드 프로젝트

임창용 강사

IT입시 웹개발 프로젝트

김지예 강사

웹 개발 프로젝트

안병욱 강사

빅데이터 사이언스

박성환 강사

프론트엔드 프로젝트

이은정 강사

진로진학연구소

김영일 강사

간편 상담 / 수강료 문의

학과선택 희망하시는 학과를 선택해 주세요.
  • 100% 국비 지원
    과정
    K-Digital
    과정
인기과정 다른학과 희망 시 위 학과선택에서 클릭해 주세요.
기타과목

과목 입력 후 엔터키를 눌러주세요. (15자 이내)

희망교육과정
캠퍼스
이름
연락처
- -
문의사항
  • 개인정보 수집동의 보기

    • 1. 개인정보의 수집 목적 - 메가스터디아이티아카데미 사이트 내 서비스 제공 계약의 성립 및 유지 종료를 위한 본인 식별 및 실명확인, 가입의사 확인, 회원에 대한 고지 사항 전달 등 - 메가스터디아이티아카데미 사이트 내 서비스 제공을 위한 통합ID 제공, 고객센터 운영, 불량회원 부정이용 방지 및 비인가 사용방지, 이벤트 및 마케팅 기획관리, 서비스 개발을 위한 연구조사, 물품 등의 배송 등 - 메가스터디아이티아카데미 사이트 내 서비스 관련 각종 이벤트 및 행사 관련 정보안내를 위한 전화, SMS, 이메일, DM 발송 등의 마케팅 활동 등 - 당사 및 제휴사 상품서비스에 대한 제반 마케팅(대행포함) 활동 관련 전화, SMS, 이메일, DM 발송을 통한 마케팅, 판촉행사 및 이벤트, 사은행사 안내 등 2. 수집하는 개인정보 항목 [필수입력사항 ] - 성명, 아이디, 비밀번호, 이메일주소, 주소, 우편물수령지, 전화번호(휴대폰번호 포함),이메일주소, 생일 등 (i-PIN을 통한 신규가입의 경우 주민등록번호가 아닌 본인 확인 기관이 제공한 정보를 수집합니다.) [선택입력항목] - 이메일/SMS/전화/DM 수신동의 ,결혼 여부, 결혼기념일, 기타 기념일, 선호 브랜드 등 개인별 서비스 제공을 위해 필요한 항목 및 추가 입력 사항 [서비스 이용 또는 사업처리 과정에서 생성 수집되는 각종 거래 및 개인 성향 정보] - 서비스이용기록, 접속로그, 쿠키, 접속IP정보, 결제기록, 이용정지기록 등 단, 이용자의 기본적 인권 침해의 우려가 있는 민감한 개인정보(인종 및 민족, 사상 및 신조, 출신지 및 본적지, 정치적 성향 및 범죄기록, 건강상태 및 성생활 등)는 수집하지 않습니다. 3. 개인정보의 보유/이용기간 및 폐기 당사(패밀리 사이트 내)는 수집된 회원의 개인정보는 수집 목적 또는 제공 받은 목적이 달성되면 지체없이 파기함을 원칙으로 합니다. 다만, 다음 각 호의 경우 일정기간 동안 예외적으로 수집한 회원정보의 전부 또는 일부를 보관할 수 있습니다. - 고객요구사항 처리 및 A/S의 목적 : 수집한 회원정보를 회원탈퇴 후 30일간 보유 - 당사가 지정한 쿠폰 서비스의 임의적인 악용을 방지 하기 위한 목적 : 수집한 회원정보 중 회원의 기념일 쿠폰 사용여부에 관한 정보를 회원 탈퇴 후 1년 간 보유 - 회원 자격 상실의 경우 : 메가스터디아이티아카데미 사이트 내 부정 이용 및 타 회원의 추가적인 피해 방지를 위해 수집한 회원정보를 회원 자격 상실일로부터 2년간 보유 - 기타 당사 및 제휴사가 필요에 의해 별도로 동의를 득한 경우 : 별도 동의를 받은 범위 (회원정보 및 보유 기간) 내에서 보유 상기 조항에도 불구하고 상법 및 '전자상거래 등에서 소비자보호에 관한 법률'등 관련 법령의 규정에 의하여 다음과 같이 일정기간 보유해야 할 필요가 있을 경우에는 관련 법령이 정한 기간 또는 다음 각 호의 기간 동안 회원정보를 보유할 수 있습니다. - 계약 또는 청약철회 등에 관한 기록 : 5년 - 대금결제 및 재화등의 공급에 관한 기록 : 5년 - 소비자의 불만 또는 분쟁처리에 관한 기록 : 3년 개인정보를 파기할 때에는 아래와 같이 재생할 수 없는 방법을 사용하여 이를 삭제합니다. - 종이에 출력된 개인정보 : 분쇄기로 분쇄하거나 소각 - 전자적 파일 형태로 저장된 개인정보 : 기록을 재생할 수 없는 기술적 방법을 사용하여 삭제

Mega IT Academy Location전국지점안내

메가스터디 교육그룹, 메가스터디IT아카데미는 책임지는 교육을 원칙으로 하고 있습니다. 좋은 시설과 교육으로 수강생 여러분의 발걸음에 올바른 나침반이 되어 드리겠습니다.

List
  • 강남캠퍼스 위치안내

  • 주소

    서울특별시 강남구 강남대로94길 13, 삼경빌딩 1층~5층
  • 대표전화

    02-588-9991
  • 지하철 이용시

    [2호선] 강남역 11번출구,12번출구 2분거리