강남 이젠아카데미컴퓨터학원

프론트엔드 풀스택 (React, Node.js)

1차 개강일: 23년 06월 13일(화)

2차 개강일: 23년 06월 27일(화)

웹 콘텐츠
UX
UI
HTML
CSS
JavaScript
REACT
Node.js
프론트엔드
백엔드

바 로 가 기 바 로 가 기

교육기간: 정규 6개월 취준생/디자인 입문/초보자

수강료

국기과정 전액지원

실업자과정 최대100%지원

취업분야: 웹디자인, 웹퍼블리셔,
UI/UX 디자인

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

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

프론트엔드 및 Node.js로 서버단 관리까지!
UI UX 기획 및 디자인부터
프론트엔드(React) 및
백엔드(Node.js)개발까지!

모든 소프트웨어 업계에서 가장 핫한 단어 UX/UI

모바일 UI 화면 설계 : 디자인 트렌드를 반영하여, 좋은 UI/UX 디자인을 설계
프로토타이핑 : 디자인 툴을 사용한 프로토타이핑
리액트(React) : facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수
있으며 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.
Node.js : Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임으로
노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며,
서버를 실행하는 데 제일 많이 사용됩니다.

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

당신만의 특별한 프로젝트가 완성됩니다.

IT·Programming자바(JAVA) 웹 개발
(정보처리산업기사 취득)
발표회 및 수료식

자바 웹개발 프로그래밍 27기
수료를 축하드립니다.

수강생 만족도

4.7/5

자세히 보기
IT·Programming자바 안드로이드
웹&앱 개발자
발표회 및 수료식

자바 안드로이드 웹&앱 개발자 22기
수료를 축하드립니다.

수강생 만족도

4.5/5

자세히 보기
IT·Programming자바(JAVA) 웹프로그래밍
(정보처리산업기사 취득)
발표회 및 수료식

자바(JAVA) 웹프로그래밍 21기
수료를 축하드립니다.

수강생 만족도

4.4/5

자세히 보기
IT·ProgrammingAI인공지능활용
소프트웨어개발
발표회 및 수료식

AI인공지능활용 소프트웨어 개발 23기
수료를 축하드립니다.

수강생 만족도

4.6/5

자세히 보기
IT·ProgrammingOpenAPI활용 자바
안드로이드 웹&앱 개발
발표회 및 수료식

OpenAPI활용 자바 안드로이드웹&앱 개발 24기
수료를 축하드립니다.

수강생 만족도

4.5/5

자세히 보기

UI/UX Frontend

당신은 디자인과 프로그래밍
모두 가능한 경쟁력 있는
UI/UX 전문가로 거듭납니다.

기초부터 요즘 핫한 최신 기술까지 배우고
디자인 능력을 겸비한 프론트엔드 개발자로 성장!

선배에게 들어요!

웹디자이너가
하는일은?

대체로 광범위 하긴하지만 간단히 정리하면,
웹&모바일 사이트에 들어가는 모든 구성 요소를
작업한다. 네이버 블로그 또는 페이스북등 소셜관련해서도 작업하게 된다.
그리고 중소기업의 경우에는 웹 디자이너라도 오프라인쪽 작업들을 하게 된다.
예를 들어 브로슈어, 명함, 버스나 지하철 같은 랩핑광고 등 작업 분야가 다양하다.

웹퍼블리셔가
하는일은?

웹 퍼블리셔의 수행 직무는 웹디자이너, 웹개발자, 웹기획자 등과 웹사이트의 제작 및 진행방향 등에 대해 협업한다. 웹디자이너의 디자인 작업물을 Html,css,Javascript,jQuery 등을 이용해 웹 표준, 웹 접근성, 크로스 브라우징 등 원칙에 맞추어 코딩한다.

프론트엔드 개발자가
하는일은?

사용자 (Client 클라이언트) 가 직접 사용하는 화면의 개발을 말합니다. 실제 사용자들이 원활하게 서비스를 이용하기 위해 화면에 대한 내용 및 비지니스처리, 화면 효과등을 결국 서버 단의 개발을 제외한, 외적인 요소를 개발하는 직무를 통틀어 프론트 엔드라고 합니다.

퍼블리셔와 프론트엔드의
차이는 무엇인가요?

웹 퍼블리셔라는 직종은 우리나라에만 존재한다. 웹 퍼블리셔는 Html,css를 주로 다루고, Javascript,jQuery를 이용하여 화면 동작 제어를 한다. 여기서 더 나아가 데이터 연결 및 요청, 출력 업무등을 하는것을 프론트엔드 개발자가 하는 일이라고 역할이 구분된다. 명칭의 차이일 뿐, 퍼블리셔나 프론트엔드 개발자나 똑같은 클라이언트 단을 개발하는 직종이다. 다만 프론트엔드 개발자에게 요구되는 기술적 범위가 더욱 넓다.

웹 에이전시와
인하우스
어떤곳이 좋나요?

웹 에이전시의 장점으로는 다양한 경험을 할수 있고, 사회초년생이나 1-2년차 일때 다양한 주제로 작업을 하면서 본인이 잘 맞는 분야를 찾을수 있고, 포트폴리오가 굉장히 다양해진다. 단점으로는, 야근이나 주말 출근등으로 업무강도가 높은 편이고, 급여가 적은편인것 같다 인하우스의 경우 장기프로젝트등을 경험 할수 있고, 에이전시에 비해서 급여가 좋은편이고, 워라밸을 누릴수 있다. 하지만, 에이전시에 비해 회의가 많고, 개인적인 공부가 필요하다. 파트별로 전문성을 높여야하기 때문에 공부를 많이해야한다.

디자이너는
대학교 졸업?
전공 필수인가요?

컴퓨터학원 웹 디자인반 6개월반 정도를 이수하면, 신입 디자이너 정도 역량은 갖추어 진다고 본다. 현업에서 대부분 포토샵과 일러스트로 작업을 하기때문이다. 미대 전공 또는 학력과는 전혀 상관이 없다. 그렇다고 학원만 다녀서 취업이 된다는 소리는 아니고, 취업에서 가장 중요한 포트폴리오를 열심히 만들어야 한다.

예술감각이 없어도
웹디자이너
가능한가요?

예술 감각이 꼭 필수 조건은 아니라고 본다. 충분한 연습을 통해 감각을 익힐수 있다고 생각한다. 신입일때 감각이 없어도, 포토샵이라는 프로그램을 통해 벤치마킹을 하여, 변형해서 조금씩 작업 스킬을 업 시켰었다.

포트폴리오 어떻게 준비해야 하나요?

신입의 경우에는 가고 싶은 회사를 정하고, 가고 싶어 하는 회사의 분야에 따라 포트폴리오를 제작하는게 경쟁력이 있다. 예를들어 광고회사의 웹디자이너를 지원하게 된다면, 그 회사에서 광고하였던 프로모션 페이지를 리디자인 한다거나, 홈페이지의 개선사항들을 적용해서 포트폴리오를 완성한다면, 면접관에게 임팩트를 줄수 있어 취업의 문에 더 가까워 지지 않을까 싶다.

안녕하세요 :) 안상현강사님!
- x○x

짧은 기간이었지만 새로운 경험이었고 너무 도움이 되었습니다! 코딩하면 너무 딱딱하고 차갑고 어려운 이미지였는데, 이번 수업으로 코딩에 대한 생각이 바뀌었습니다 ㅎㅎ 일 때문에 어쩔 수 없이 시작한거였는데 생각보다 직접해보니, 너무 재밌어서 좀 더 배워보고싶은 생각이 들게 만드는 수업이었어요. 어렵기만 할 것 같은 내용을 이해하기 쉽게 맞춰주셔서 감사합니다! 정말 기억에 오래남는 수업이 될 것 같아요!!
안상현강사님 수강후기입니다.
- 전○정

안녕하세요 html/css 과정을 수강한 전연정입니다. UI UX 공부를하며 필요하다고 느껴져서 처음에는 반 강제적으로 수강하게 되었습니다. 제가 완전 문과체질이라 걱정이 정말 많이 되었고 코딩을 배운다는 것 자체가 엄청 큰 부담으로 다가왔습니다. 그러나 강사님의 명쾌한 강의 덕분에 비전공자도 쉽고 재미있게 따라갈 수 있었습니다. 제가 이런것도 할 수 있게 되다니 덕분에 제가 한층 더 성장한 느낌으로 뿌듯한 기분이 들고 자신감도 생겼습니다. 강의 준비에도 진심이신 것 같으시고, 삶을 살아가는 방식 자체가 열정이 넘치시고 끊임없이 성장하려는 모습을 보며 어떤 마음가짐으로 삶을 살아가야 할 지 다시 한 번 생각해보는 것도 제가 이 강의에서 부가적으로 얻어가는 부분인 것 같습니다. 항상 잘되시길 진심으로 기원드립니다.
안상현 강사님 UXUI(HTML,CSS) 과정 후기입니다.
- 원○원

전혀 다른 업종의 일을 하며 교육을 받아 막막하지 않을까 생각했는데, 태그의 뜻과 사용하는 의미를 잘 비유하여 설명해주셔서 이해하기 쉬웠습니다. 코드를 작성할 때도 작성할 수 있는 시간을 주셔서 생각해보고 좋은 답을 알려주셔서 좋았고, 특히 톡방으로 내용을 공유해주셔서 어디서든 복습할 수 있어서 특히 좋았습니다. 훌륭한 가르침 감사합니다.
강남 이젠 html/css 안상현 강사님 수강후기
- 김○오

대학교 복수전공/교환학생을 코딩 융합 관련으로 시도하고 싶어서 코딩 언어들을 알아보다가 홈페이지 제작이 재밌어보여서 시작하게 된 html/css 수업인데, 개인적으로 지금껏 들었던 컴퓨터 수업을 통틀어서 가장 성취감도 오르고 즐거웠던 수업이었던 것 같습니다. 아직 부족한 디자인 감각과 실력 때문에 실무에 가까운 홈페이지 제작을 하는 것은 쉽지 않겠지만, 수업 덕분에 선생님께 배운 내용들을 토대로 혼자 이것저것 시도해보는 발판이 될 것 같아요. 13번이라는 짧다면 짧은 수업 시간동안 많은 내용들을 너무 잘 알려주셔서 감사했고, 이 내용들을 꼭 복습하고 간직했다가 학교생활/교환학교 생활에서도 잘 써먹을 수 있을 것 같습니다. 당장 다음 수업은 함께할 수 없겠지만 혼자 html/css 깔짝거리면서 만져보다가 어려운 점이 있으면 꼭 찾아뵙겠습니다, 감사합니다!
선생님, 안녕하세요.
- N○D

안상현 강사님, 안녕하세요. 매일 수업 시간마다 빠르게 못 따라간 부분도 많은데 그래도 계속 듣고 수업 듣고 해서 많이 배우게 되었습니다. 항상 한사람한사람 친절하게 설명해 주셔서 너무 감사합니다. 중간중간 농담도 재미있었습니다 ㅎㅎ 쌤 흐흐 강아지 사랑 ㅎㅎ 벌써 마지막 수업이라니 아쉽지만, 쌤말대로 마무리도 잘하고 좋은 시작으로 다시 만나요 쌤 감사합니다.
자바스크립트 이젠 강남 수강후기
- 강○현

안상현 강사님께 바닐라 자바스크립트 주말반 수업 들었습니다! 처음에는 좀 어려웠는데 강사님께서 하나하나 자세하게 설명해주셨습니다. 두달동안 감사했습니다!
안상현 강사님 수강후기
- 김○

이해하기 쉽게 하나하나 자세히 설명해주셔서 어려웠던 부분에 대한 이해가 빨리 되었습니다. 자바스크립트에 관련된 다음 강의가 있다면 또 수강하고 싶네요 8주 동안 열심히 가르쳐 주셔서 너무 감사합니다~!
바닐라 자바스크립트 이젠 강남점 수강후기
- 이○경

바닐라 js 주말반 수업 안상현 강사님께 수업 들었습니다~ 처음에는 기초라도 잘 다져보자 하는 조금은 가벼운 마음으로 수강하게 되었는데 js 관련해서 재밌고 다양하게 잘 알려주셔서 기본 개념 뿐만 아니라 응용력도 기를 수 있던 좋은 시간이 되었던 것 같습니다! 그동안 열심히 수업 해주셔서 감사합니다! ^^
이젠강남 안상현 강사님 바닐라자바스크립트 과정 수강후기
- 차○호

안상현 선생님 안녕하세요 이번에 바닐라자바스크립트 과정 수강 한 차승호 입니다. 시간이 지나서 기억이 안날때는 집에서 강의 때 작성했던 파일들 보면서 복습했는데 주석으로 설명도 잘 적어주시고 코드도 필요한 부분들을 이해하기 쉽게 적어주셔서 많은 도움이 됐습니다. 가르쳐주신 내용을 발판으로 삼아 바닐라자바스크립트 공부를 계속 하면서 나아가 vue도 공부해보겠습니다 감사합니다
안상현 강사님 수강후기입니다.
- 김○진

올해 초부터 새로운 영역에 도전하면서 정말 아무것도 모르는 상태에서 수강을 시작해서 매주 일요일마다 하루종일 선생님 수업을 들으며 벌써 3개월여의 시간이 흘렀네요. 처음에는 매주 주말 하루를 통으로 수업을 듣는게 버겁고 길게 느껴졌는데, 지금 생각해보면 배우기 위해서 길었던 시간은 아니었던 것 같아요. 수업을 열심히 빠짐없이 들었지만, 사실 완벽히 모든걸 이해하진 못했어요. 그래도 하나하나 직접 작성하고 연습하게 도와주셨던 선생님 수업 덕에 처음에 비해 많은 성장이 있었다는 생각이 듭니다. 엄두도 안났던 것들이 그래도 이제는 좀 익숙해지고 좀더 복습하고 노력하면 다음단계로 넘어갈 수 있을 것 같다는 생각이 듭니다. 수업들으면서 작성한 제 파일들이 앞으로도 저한테 큰 재산이 될것 같아요. 감사합니다!

수강후기 더보기

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 서버 구축

웹&앱 프로그래밍 취업완성패스

웹&앱 프로그래밍 커리어패스

프론트엔드 풀스택 (React, Node.js)빠른 개강일06.13(화)

카톡상담

전화문의강남: 02)532-6500

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

국기·취준생 교육과정

일반·직장인 교육과정

일반·직장인 교육과정

일반·직장인 교육과정