HTML,CSS 활용 웹페이지 제작

• 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 활용 클론코딩 세미 프로젝트

프로그래밍 언어로서의 Javascript

• 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) - 정규표현식 활용 문자열 검사 모듈 만들기

웹페이지에서의 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 라이브러리 ● 클론코딩 세미프로젝트

React.js의 구조와 이해

• 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에 프로젝트 배포하기 ● 세미 프로젝트 - 각자 주제를 정해서 직접 구현해 보는 과정

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

• 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주차

  ● 포트폴리오 프로젝트

React Native 기반 앱 개발

• 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주차

  ● 포트폴리오 프로젝트