프론트엔드 풀스택 (React, Node.js)
- 1차 개강일
- 23년 11월 28일(화)
- 2차 개강일
- 23년 12월 12일(화)
- 웹 콘텐츠
- UX
- UI
- HTML
- CSS
- JavaScript
- REACT
- Node.js
- 프론트엔드
- 백엔드

웹 콘텐츠의 기획 및 분석과
디자인과 프론트엔드 개발을 동시에!
스마트 웹콘텐츠 UI/UX 디자인 &
프론트엔드(React,node.js)란?

스마트 웹콘텐츠 개발에 필요한 UI 디자인과 프론트엔드(React,node.js)
언어를 배우며 다양한 스마트기기 플랫폼에 적용 가능한 웹 기반의 콘텐츠서비스를
기획, 분석, 설계, 구현,테스트, 배포 및 유지보수 할 수 있습니다.
Start now

- UI UX
- 사용자 리서치
- 정보구조
- 와이어프레임&프로토타입
- 비쥬얼디자인
- Photoshop, Figma
- FRONT-END
- HTML/CSS
- JavaScript
- React
- Node.JS
- Ajax / AngularJS
프론트엔드 및 Node.js로 서버단 관리까지!
UI UX 기획 및 디자인부터
프론트엔드(React) 및
백엔드(Node.js)개발까지!
모든 소프트웨어 업계에서 가장 핫한 단어 UX/UI
- 모바일 UI 화면 설계 : 디자인 트렌드를 반영하여, 좋은 UI/UX 디자인을 설계
- 프로토타이핑 : 디자인 툴을 사용한 프로토타이핑
- 리액트(React) : facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수
있으며 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다. - Node.js : Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임으로
노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며,
서버를 실행하는 데 제일 많이 사용됩니다.

- 산업수요를 반영한 구직자 맞춤형 실무교육 커리큘럼으로 진행됩니다.
- 모바일, PC용 웹 UI 최신 트렌드를 반영한 교육훈련을 진행합니다.
- 취업에 필요한 포트폴리오 제작 및 프로젝트를 학습합니다.
- 담당 훈련교사와 교육담당자, 취업상담사를 통해 월 1회 및 수시상담을 진행합니다.
- 전시회·공모전·워크샵 등 풍부한 현장경험 기회로 실무역량을 강화합니다.

- 웹 콘텐츠 기획
- 기초데이터 수집
- 아이디어 스케치
- 스토리보드 제작
- UI UX 디자인
- 포토샵 기초 / 피그마
- UI/UX 디자인 이론
- UI 구현
- 퍼블리싱
- HTML5/CSS3
- 자바/제이쿼리 기초활용
- React / Node.JS
- 애플리케이션
- 테스트 수행
- 배포
- 포트롤리오
- 모바일 디자인
- 메인 디자인
- 개인사이트 디자인
UI/UX Frontend 당신은 디자인과 프로그래밍
당신은 디자인과 프로그래밍
모두 가능한 경쟁력 있는
UI/UX 전문가로 거듭납니다.
기초부터 요즘 핫한 최신 기술까지 배우고
디자인 능력을 겸비한 프론트엔드 개발자로 성장!

관련 자격증 취득이 가능합니다.
수강후기
커리큘럼
- 1
개발자 환경 구축
- 운영체제의 이해
- 윈도우 설치 및 설정 방법
- 윈도우 파일 시스템 구조 파악하기
- CLI 환경 이해와 활용
- 사용자 계정 및 그룹 관리
- 파일, 디스크, 네트워크 관리
- 코딩을 위한 텍스트 편집기 종류
- 텍스트 편집기 기본 사용 방법 파악하기
- 텍스트 편집기 익스텐션 활용하기
개발 환경 운영 지원
- Git의 이해와 기본 명령어
- Github을 활용한 프로젝트 형상 관리
- 2
프로그래밍 언어 활용
- 변수, 상수, 데이터 타입, 연산자, 배열
- 프로그램 흐름 제어 (조건문, 반복문)
- 함수(기본함수, 익명함수, 화살표 함수)
- 객체지향 프로그래밍 (JSON,
Prototype, Class) - 클로저
- Javascript 기본 API 활용하기
(내장함수, 내장객체) - Promise, Async/Await
- XMLHttpRequsest 기반 Http Client
- 모듈과 패키지
- NPM 기반의 오픈소스 패키지 활용하기
- YARN 기반의 오픈소스 패키지
활용하기
- 3
SQL 작성 및 활용
데이터베이스 구현- 논리/물리 데이터 구조 이해하기
- 데이터 저장 구조와 데이터의 종류
- 데이터 조회 하기
- 데이터 입력, 수정, 삭제하기
- 데이터베이스 생성 및 테이블 설계하기
- 사용자 계정, 권한 관리하기
- JOIN, 서브쿼리, View
데이터 입출력 구현
- Database 연동 프로그래밍
- Javascript ORM
- 4
HTML, CSS(화면 구현)
- HTML을 활용한 시멘틱 웹 페이지 제작
- CSS를 활용한 반응형 웹 페이지 제작
- SCSS를 활용한 CSS 전처리
- 5
바닐라 스크립트
- 이벤트 처리
- Window 객체 ? 웹 브라우저 제어하기
- Document 객체 ? DOM 제어하기
- Image, Form, Screen, Navigator
객체 - Geolocation을 기반한 위치 정보 활용
- Cookie 데이터 저장 및 활용
- LocalStorage, SessionStorage
- Web SQL Database 활용
- 6
React.js / Next.js
스마트문화앱 구현
- React 환경 파악하기
- SPA 구조 이해하기
- JSX 표현법
- React 컴포넌트
- 스타일 적용하기
- Hook의 이해와 활용
- Event 처리
- Ajax 구현
- 클래스 기반 컴포넌트 살펴보기
- Redux를 활용한 컴포넌트 상태 관리
- 오픈소스 컴포넌트 활용하기
통합구현
- Server Side Rendering 이해
- Next.js 기본 구조
- 앱 기본 설정
- 웹 페이지 구성하기
- 컴포넌트 구성하기
- Ajax 구현
- 컴포넌트 상태 관리
스마트문화앱 테스트
- React Testing Library 기반 UI 테스트
- 7
Node.js (Express)
서버 프로그램 구현
- Node.js 기본 특성 이해하기
- 미들웨어의 이해와 활용
- 배치 스케쥴러
- Express 기반 HTTP 서버 구성하기
네트워크 프로그래밍 구현
- 파일 업로드, 메일 발송, 쿠키, 세션
- 사용자 인증 서버
인터페이스 구현
- Restful의 이해와 Restful API 서버 구축
- 마이크로 서비스의 이해와 구축
애플리케이션 테스트 수행
- Mocha 라이브러리를 활용한 Unit Test
- 8
Linux 서버 구축
응용 SW 기초 기술 활용
- Linux 운영체제 설치하기
- 사용자, 그룹 관리
- 파일, 디렉토리 관리
- VI 에디터
- 네트워크 설정 및 관리
- 쉘 환경 구성
- SSH 서버 구축
- FTP 서버 구축
- DATABASE 서버 구축
애플리케이션 배포
- Node.js 시스템 배포하기
- 9
프로젝트
요구사항 확인 및
화면/애플리케이션 설계- 팀 프로젝트
- 사용자, 그룹 관리
- 파일, 디렉토리 관리
- VI 에디터
- 네트워크 설정 및 관리
- 쉘 환경 구성
- SSH 서버 구축
- FTP 서버 구축
- DATABASE 서버 구축
웹&앱 프로그래밍
웹&앱 프로그래밍 취업완성패스
-
프론트엔드, 백엔드 그리고 배포(DevOps
포함) 등 서비스를 개발할 수 있는 교육백엔드 풀스택(JAVA,Spring)
-
웹 콘텐츠의 기획 및 분석과 디자인,
프론트엔드(풀스택) 개발을 동시에!프론트엔드 풀스택
(React, Node.js) -
현장 실무학습과 자격증 취득으로
웹 개발과 소프트웨어 설계까지정보처리 산업기사 과정평가
-
JAVA + CLOUD
독립적 자바 웹 프로그래밍AWS클라우드기반
자바 웹 개발자 -
스마트폰 대중화와 라이프 스타일을
주도하는 안드로이드 앱 (Android APP)안드로이드 앱
프로그래밍 -
꾸준한 인기 자바(JAVA),
웹&앱 개발자가 되는 필수 언어!자바 웹&앱 프로그래밍
-
웹개발 + 큐레이팅 기능을 더한
웹 서비스를 구현하는 교육큐레이팅 웹서비스
풀스택 개발 -
피그마를 활용한 UI UX 기획과
설계부터 프론트엔드 구현까지!UI UX 피그마
React.js -
웹개발 + 큐레이팅 기능을 더한
웹 서비스를 구현하는 교육자바기반 큐레이팅 풀스택 개발
-
프론트엔드, 백엔드 그리고 배포(DevOps
포함) 등 서비스를 개발할 수 있는 교육Java, Spring기반
풀스택 개발자 -
프론트엔드, 백엔드 기술을
활용하여 인공지능 풀스택 개발!인공지능 풀스택 개발
웹&앱 프로그래밍 커리어패스
-
다양한 콘텐츠 구현, 문제해결 능력을
높여, 경쟁력을 키우는 자바언어!자바프로그래밍
-
웹서버 모바일 위치기반 서버 등
구동가능한 실무기반 교육과정node.js
프론트엔드개발 -
자바스크립트 프레임 워크의 혁신~!
프론트엔드 개발자의 필수요소React.js
프론트엔드개발 -
Vue.js 설치 및 프로젝트 배포까지 -
Vue를 활용한 UI 컴포넌트 제작 과정Vue.js 프론트엔드개발
-
진입 장벽이 낮은 언어로 API 활용을
통해 Native Mobile App 개발React Native
모바일 앱 개발 -
급변하는 웹 트렌드에 맞는 언어
순수 자바스크립트, 바닐라JS바닐라
자바스크립트
국비혜택조회
원하시는 과정을 선택하시면 1:1 상담을 진행해드립니다.