이젠아카데미컴퓨터학원

개발환경 및 팀프로젝트 환경 설정
(VS CODE/Git/GitHub)

• 프론트엔드 개념 및 개발 환경의 이해
• SSR(Server Side Rendering),
  CSR(Client Side Rendering)의
  차이점 이해
• VS CODE 설치 및 사용
• Git/GitHub의 개요
• Git 설치, Branch 관리, Request 협업
• GitHub의 저장소 생성과 관리
• GitHub의 이슈, 레퍼지토리, 위키

UX/UI 설계 (Figma)

• UX/UI 기본 개념
• 사용자 분석 및 UX 설계
• 인사이트 도출 및 워크플로우 제작
• 와이어프레임 제작
• UI 시스템 구축 및 설계
• 프로토타입 제작
• 사용성 테스트

미니프로젝트 1 (UX/UI) ★실전★

• OTT Service UX/UI 설계
  (Team Project)
• User research
• Persona / Journey map
• Workflow / Wireframe
• UX/UI Guide
• Prototype

프론트엔드 Level 1 (HTML/CSS)

• 웹 & 모바일 브라우저 이해
• HTML 구조 이해 및 기본 문법
• HTML 기본 태그 및 레이아웃 구조
• 시멘틱 태그와 메타데이터
• CSS 기본 속성
• 박스모델과 플렉스박스
• 반응형 웹디자인을 위한 미디어쿼리
• CSS를 활용한 웹&모바일 레이아웃 구현

프론트엔드 Level 2.1(JavaScript)

• javascript 기본 개념 / 동작 원리
• 변수, 데이터 타입, 연산자, 제어문,
  타입 변환, 객체, 함수, 스코프,
  전역 변수 개념
• 문서 객체 모델, 동기식 처리 모델,
  비동기식 처리 모델
• 이벤트 처리와 DOM API
• 외부 데이터 호출 라이브러리
• 객체지향 프로그래밍
• 정규표현식,
  ES6 함수의 추가 기능, 배열

프론트엔드 Level 2.2 (Typescript)

• Typescript 개요 및 문법
• Typescript의 정의와 장점
• Typescript의 기본 개념과 작성 방법
• Typescript의 자료형과 제네릭
• Typescript의 함수, 인터페이스,
  클래스, 모듈
• Typescript의 에러 처리와 제어 흐름

미니프로젝트 2
(프론트엔드개발) ★실전★

• OTT Service 웹/모바일 퍼블리싱
• HTML / CSS 활용 웹/모바일 퍼블리싱
• 문서내 동적 기능 구현을 위한
  Javascript 작성
• Javascript & Dom을 활용한 UI 구현
• Javascript를 활용한 애니메이션 UI 구현

프론트엔드 Level 3 (React/ReactNative)

• React/ReactNative의 이해
• React의 컴포넌트, 상태, 속성, 이벤트
• React의 JSX, 연산자, 조건부 렌더링
• React의 컴포넌트 생명주기,
  일반 컴포넌트와 상태가 있는 컴포넌트
• React router 작동 원리
• ReactNative의 컴포넌트,
  상태, 속성, 이벤트
• ReactNative의 컴포넌트 스타일, 레이아웃, 스크롤
• ReactNative의 네비게이션, 탭,
  슬라이드
• ReactNative의 애니메이션,
  인터폴레이션, 제스처
• ReactNative의 안드로이드, iOS 특징
• ReactNative의 데이터 저장,
  네트워크, 앱 접근

프론트엔드 Level 4 (Node.js)

• SPA(Single Page Application)
• Node.js
• Express 프레임워크를 활용한
  웹 서비스 구현: CRUD, Rest API,
  Database
• Mongoose + MongoDB
• 웹서비스 배포: AWS, Netlify

미니프로젝트 3
(SPA구현) ★실전★

• OTT Service 웹/모바일 프론트엔드 개발
• Webpack을 활용한 SPA 구현
• MVVM 패턴을 활용한 SPA 사이트 구현

클라우드 활용 (AWS 클라우드)

• AWS 인프라구조 이해
• AWS S3 이용한 아키텍처 설계
• AWS IAM, Organization 서비스 설계
• AWS Route53, ELB,
  EC2 AutoScaling 관리

생성형 AI 활용 (chatGPT)

• 생성형 AI(chatGPT)의 이해
• chatGPT 프롬프트 작성
• chatGPT 확장 프로그램
• chatGPT 활용1(아이디어 도출 방법
  및 목표 설정)
• chatGPT 활용2(프로젝트 기획서 제작)
• chatGPT 활용3(코딩 활용)

OTT Service 웹/모바일
프로젝트 1 ★실전★

• 1_1.Youtube Site 프로젝트 개발
  1. 프로젝트 기획 및 제작(chatGPT 활용),
  2. 웹/모바일 퍼블리싱(chatGPT 활용),
  3. Page 동적 가능 구현(Javascript / ChatGPT 활용),
  4. Express 프레임워크 활용 Server 구현,
  5. Router / URL Parameters 활용 Pagenation,
  6. MongoDB & Mongoose 활용
     DB 테이블 Setting


• 1_2.Tiktok SNS Service 프로젝트 개발
  1. 프로젝트 기획 및 제작(ChatGPT 활용),
  2. 웹/모바일 퍼블리싱(ChatGPT 활용),
  3. Page 동적 가능 구현(Javascript / ChatGPT 활용),
  4. Express 프레임워크 활용 Server 구현,
  5. Template Library, Pug 활용 MVP 구현,
  6. Shema 활용 Video Search 기능 구현

E-commerce Shopping mall
프로젝트 2 ★실전★

• 2_1.E-commerce Shopping mall 프로젝트 개발 (쿠팡)
  1. 프로젝트 기획 및 제작(chatGPT 활용),
  2. 웹/모바일 퍼블리싱(chatGPT 활용),
  3. Page 동적 가능 구현(Javascript / ChatGPT 활용),
  4. MongoDB & Mongoose 활용
     Product DB관리,
  5. Routes API & UI구현,
  6. Login Page & 회원
     Authentication 기능 개발,


• 2_2.E-commerce Shopping mall 프로젝트 개발 (11st)
  1. 프로젝트 기획 및 제작(chatGPT 활용),
  2. 웹/모바일 퍼블리싱(chatGPT 활용),
  3. Page 동적 가능 구현(Javascript / ChatGPT 활용),
  4. Private Route & Token verify 활용,
  5. 장바구니 상품정보 관리 (Redirect),
  6. Token 활용 Google, Git Hub 등 외부
     로그인 기능 구현