QUICK
MENU

Javascript 풀스택

Javascript의 여러가지 라이브러리와 프레임워크를 활용한 풀스택 개발자로 거듭나기
Javascript는 객체 기반의 스크립트 프로그래밍 언어입니다. 수업 내에서 Javascript의 기초 문법 및 원리 그리고 웹표준에서의 역할을 배우게 되며, 더 나아가 서버와 통신을 하여 원하는 데이터를 알맞은 화면에 나타내는 수준까지 진행됩니다. 현재 대한민국 프론트엔드 개발에 많이 사용되는 기술인 React.js 라이브러리, Next.js 프레임워크, 더불어 Express.js, NoSQL까지 학습하고 본인만의 포트폴리오를 완성해보세요!
  • 교육기간

    6개월

  • 교육난이도

    입문~고급

  • 정원

    20명 내외

  • 전화상담

    02-2135-2942

    주말 · 공휴일 상담 및 접수가능
이런분들에게 추천합니다
자바스크립트를 통해 기초 HTML부터 동적 페이지제작, 서버단 구축을 원하시는 분들이라면 본 과정을 선택하시기 바랍니다.
자바스크립트는 웹페이지를 디자인하는 HTML, CSS 퍼블리싱과 접목해 웹페이지 이벤트 처리를 위한 언어로 사용되어왔습니다. 오늘날 자바스크립트는 더욱 고도화된 기법인 react, vue 등의 라이브러리를 활용하게 되었으며, node, next 등의 서버-DB연동 단까지도 그 영역이 확대되고 있습니다. 이른바 자바스크립트로 백엔드까지 풀스택을 구성할 수 있게 되어, javascript 를 기반으로 한 웹개발자 취업을 원하시는 분들이라면, 본 과정을 강력하게 추천합니다.
취업분야
풀스택은 페이지를 디자인하는 퍼블리싱과 서버단, DB연동까지를 아우르는 분야로서, 자바스크립트를 통해 홈페이지를 구축하는 전 과정을 학습하게 됩니다. 최근 웹 솔루션 업체는 전통적인 JSP-DB연동-Spring 활용에서 점차 JAVASCIRPT를 기반으로 한 풀스택 과정을 적용하고 있으며, 채용 시장에서도 JSP 개발자보다 JAVASCRIPT 개발자 채용 시장이 확대되고 있습니다.
커리큘럼안내
많은 프론트엔드 입문자들의 커다란 장벽의 하나인 javascript의 핵심만을 모아 활용 빈도가 높은 기술을 중점으로 교육 하고 있습니다.
  • HTML, CSS
    개발환경 구축
    - VS Code 설치

    HTML
    - 웹 환경 구축
    - 기본 구조와 여러가지 태그
    - 블록 / 인라인 / 인라인 블록 요소
    - form 태그
    - 클론 코딩을 위한 준비 (레이아웃 잡기)

    CSS
    - Selector
    - Cascading
    - Display, Position
    - overflow, z-index
    - 미디어 쿼리
    - 클론코딩 스타일 입히기
  • Javascript
    - Javascript의 역할
    - Node.js 설치
    - 식별자, 스코프, 연산자
    - 제어문
    - 함수(익명 함수 / 화살표 함수 / 콜백함수)
    - 객체란?
    - 객체(Array 객체)
    - forEach(), map(), filter()
    - 객체(Date / Math 객체)
    - DOM
    - HTML과 CSS를 제어하는 방법
    - 이벤트 함수의 원리와 실행 방법
    - 비동기 통신
    - API 활용
  • React.js (기초)
    - 환경구축
    - 기본 구조와 성능
    - React.js의 기본 용어 학습
    - JSX
    - 컴포넌트 / 변수 / 연산자
    - 컴포넌트 간의 데이터 전달
    - 컴포넌트의 반복
    - map(), key
    - 이벤트 함수
    - input 태그 입력 값 처리
    - 불변성과의 관계
    - useState() Hook 함수
    - checkbox
    - Spread 문법
  • React.js (심화)
    - useRef()를 통해 객체 가져오기
    - 컴포넌트의 라이프 사이클 메소드
    - Hooks
    - 순수 함수
    - useEffect / useMemo / useCallback
    - Custom Hooks
    - Context API
    - Redux
    - Action / Dispatch / Reducer / Store / Subscribe
    - Router
    - 다른 컴포넌트를 불러오는 SPA
    - 중첩된 Route
    - useNavigate
    - Redirect
    - 클론코딩 개인 프로젝트
  • Node.js | Express.js | NoSQL
    React.js
    - React 미들웨어

    Node.js
    - 서버 생성
    - Router 만들기
    - K6 성능 테스트
    2주차 Express.js
    - Express.js 프레임워크란
    - 게시판 CRUD 제작

    NoSQL
    - mongoDB
    - mongoose

    React.js와 연동하여 게시판 제작하기
    - 게시글 목록 보기
    - 게시글 작성 / 수정 / 삭제 / 조회
    - 댓글 목록 보기
    - 댓글 작성 / 수정 / 삭제

    Pagination
    - 게시판 페이징 처리
    - API 제작
  • Next.js
    Next.js
    - 프로젝트 기본 구조
    - TypeScript
    - SSR / CSR / SSG
    - Routing System
    - 정적 자원 및 메타데이터
    - 디렉터리 구조
    - 컴포넌트 / 유틸리티 / 라이브러리 / 스타일 / 정적 자원

    R