[K-디지털 크레딧]_3기: 바로 써먹는 풀스택 기초 - 자바스크립트
    • 01
      시작하기에 앞서
    • [필독] K-디지털 크레딧 FAQ
      [필독] 과정 공지사항
      강의의 방향
      프로그래밍이란?
      구름IDE
    • 02
      OT
    • [필독] 공지사항
      구름EDU
      구름EDU 이론강의
      구름EDU 실습강의
    • 03
      1주차 HTML - 기초
    • 강의 목표
      HTML의 기본 구성
      기본적인 HTML 문서 구조
      Head와 Body
      기본적인 레이아웃
      정리
    • 04
      1주차 제목, 내용 관련 태그
    • 강의 목표
      제목과 본문 태그
      나누기 위한 태그
      글자와 관련된 태그
      정리
    • 05
      1주차 링크 태그
    • 강의 목표
      링크 태그란
      링크 태그의 속성
      웹사이트의 경로와 주소
      정리
    • 06
      1주차 멀티미디어 관련 태그
    • 강의 목표
      이미지 태그
      오디오와 비디오 태그
      유튜브 영상 삽입
      정리
    • 07
      1주차 입력 양식 태그
    • 강의 목표
      입력 양식(form)
      form 태그
      input 태그
      select 태그
      textarea 태그
      button 태그
      정리
    • 08
      1주차 테이블과 리스트
    • 강의 목표
      표(Table)
      목록(List)
      목록 태그의 속성
      정리
    • 09
      1주차 CSS - 기초
    • 강의 목표
      CSS의 의미와 구성 요소
      선택자(Selector)에 대하여
      CSS의 기본 단위
      CSS의 색상
      정리
    • 10
      1주차 선택자(Selector)
    • 강의 목표
      단순 선택자
      복합 선택자
      가상 클래스 선택자
      정리
    • 11
      2주차 Box 모델
    • 강의 목표
      박스(Box)모델
      content
      border
      padding과 margin
      정리
    • 12
      2주차 글자(Text) 관련 스타일
    • 강의 목표
      폰트 종류와 웹 폰트
      폰트의 크기와 형태
      텍스트 정렬
      정리
    • 13
      2주차 위치 정렬
    • 강의 목표
      block과 inline
      inline-block
      position
      float
      정리
    • 14
      2주차 위치 정렬 - flexbox
    • 강의 목표
      flexbox에 관하여
      flex container: 방향과 흐름
      flex container: 정렬1
      flex container: 정렬2
      flex container: 정렬3
      flex item
      정리
    • 15
      2주차 HTML&CSS 기본
    • 1강
      2강
      3강
      4강
    • 16
      2주차 CSS 심화 - 클래스 선택자
    • 1강
      2강
      3강
      4강
    • 17
      2주차 블럭과 인라인
    • 1강
      2강
      3강
      4강
    • 18
      2주차 CSS 타이포그래피
    • 1강
      2강
      3강
      4강
      5강
    • 19
      2주차 Float 속성으로 가로배치 1
    • 1강
      2강
      3강
      4강
    • 20
      3주차 위치 정렬 - grid 1
    • 강의 목표
      grid layout 기본
      grid container: template
      grid container: gap
      grid container: auto
      grid container: grid
      grid container: align & justify
      정리
    • 21
      3주차 위치 정렬 - grid 2
    • 강의 목표
      grid item: row, column
      grid item: area
      grid item: self
      정리
    • 22
      3주차 상속과 우선순위
    • 강의 목표
      상속
      우선순위
      정리
    • 23
      3주차 Float 속성으로 가로배치 2
    • 1강
      2강
      3강
      4강
      5강
    • 24
      3주차 Position 속성 입문
    • 1강
      2강
      3강
      4강
      5강
    • 25
      3주차 Position 속성 좀 더 다뤄보기
    • 1강
      2강
      3강
      4강
    • 26
      3주차 auto와 %, Negative Margins
    • 1강
      2강
      3강
      4강
      5강
    • 27
      3주차 반응형 사이드바 레이아웃
    • 1강
      2강
      3강
      4강
      5강
    • 28
      4주차 CSS Animation - transition
    • 시작하기 전에
      delay
      duration
      property
      timing-function
      transition
      정리
    • 29
      4주차 transform
    • 시작하기 전에
      scale
      rotate, translate
      skew, origin
      정리
    • 30
      4주차 keyframe
    • 시작하기 전에
      Keyframe의 시작
      animation과 관련된 프로퍼티_1
      animation과 관련된 프로퍼티_2
      animation과 관련된 프로퍼티_3
      Loading Spinner 만들기
      Loading Bar 만들기
      정리
    • 31
      4주차 JS Animation - DOM
    • 시작하기 전에
      DOM이 무엇이길래?
      DOM 접근 1
      DOM 접근 2
      DOM 조작하기 1: 요소 스타일
      DOM 조작하기 2: 요소 스타일 수정
      정리
    • 32
      4주차 Event
    • 시작하기 전에
      이벤트(Event)
      이벤트 핸들러(Event Handler)
      this와 Event 객체_1
      this와 Event 객체_2
      Prevent Default
      정리
    • 33
      4주차 Animation
    • 시작하기 전에
      Web Animations
      classList
      Transition Event_1
      Transition Event 2
      Animation Event
      Timer Function
      정리
    • 34
      4주차 float 기반의 그리드 시스템1
    • 1강
      2강
      3강
      4강
      5강
      6강
    • 35
      4주차 float 기반의 그리드 시스템2
    • 1강
      2강
      3강
      4강
      5강
    • 36
      4주차 모바일 우선 반응형 작업
    • 1강
      2강
      3강
      4강
      5강
    • 37
      5주차 JS 준비운동
    • JS 숲을 보고 시작하자
      개발자답게 사용하는 Chrome Browser_1
      개발자답게 사용하는 Chrome Browser_2
      JS를 움직이는 다양한 데이터, 자료형과 연산
      JS에게는 온 세상이 객체다_1. 이론
      JS에게는 온 세상이 객체다_2. 실습
      코드의 흐름을 제어하는 조건문과 반복문_1. 이론
      코드의 흐름을 제어하는 조건문과 반복문_2. 실습
      JS에서 만나는 함수_1. 이론
      JS에서 만나는 함수_2. 실습
      생성자 함수로 객체 찍어내기
      객체로서의 함수
    • 38
      5주차 프레임워크를 위한 JS
    • 쉬어가기1. 문법 학습의 함정
      스코프: 이 변수, 어디까지 쓸 수 있을까?
      this의 모든 것_1. 개요
      this의 모든 것_2. 상세
      DOM 가지고 놀기_1. goormIDE
      DOM 가지고 놀기_2. CLI에서 JS 실행하기
      DOM 가지고 놀기_3. getElementbyid
      DOM 가지고 놀기_4. HTML 태그의 속성 조작하기
      DOM 가지고 놀기_5. input 태그 다루기
      callbak 함수: 넌 좀 기다렸다 오렴
    • 39
      5주차 하나씩 살펴보는 ES6
    • 변수, 상황별로 나눠 쓰자
      문자열을 좀 더 쉽게 사용하는 템플릿 리터럴
      화살표 함수: 시간도 없는데 함수도 복잡하게 쓰나?
      배열 가지고 놀기_1. 배열의 정체와 길이
      배열 가지고 놀기_2. 요소 추가
      배열 가지고 놀기_3. 배열을 순회하는 두 가지 방법
      배열 가지고 놀기_4. 필터링, 마무리
      쉬어가기2. 코드 스타일
    • 40
      5주차 깊게 알아보는 ES6
    • 구조분해할당으로 똑똑하게 값 빼내기
      Spread와 Destructuring
      클래스로 세상만물 프로그래밍
      Class 실습
      모듈로 여러 파일에 나눠 작업하기
      예외 처리
      Promise Async Await
    • 41
      6주차 프레임워크 없이 CRUD 구현하기
    • Overview
      이번 프로젝트에서 쓰일 핵심 JS 개념
      초기 세팅
      데이터 정의_1
      데이터 정의_2
      테이블에 데이터 넣기
      버튼 만들기
      입력 행 만들기
      삭제 구현
      추가 구현
      수정하기
      save 구현
    • 42
      6주차 웹 게임 제작: 공 피하기
    • overview
      이번 프로젝트에서 쓰일 핵심 JS 개념
      환경설정
      데이터 정의
      마우스 좌표와 timer 함수
      시작 기능 만들기
      공 만들기_1
      공 만들기_2
      공 움직이기
      게임오버 점수판 만들기
      reset 기능과 프로젝트 마무리
    • 43
      6주차 JavaScript 크롤링: 뉴스와 멜론 차트
    • 이번 프로젝트에서 쓰일 핵심 JS 개념
      프로젝트 환경 세팅
      뉴스 기사 크롤링_1
      뉴스 기사 크롤링_2
      Melon Chart 크롤러_1
      Melon Chart 크롤러_2
    • 44
      6주차 크롬 확장 앱 만들기
    • Overview
      이번 프로젝트에서 쓰일 핵심 JS 개념
      Chrome Extension을 이루는 요소
      manifest.json
      로고 이미지 만들기
      기본 환경 세팅
      클릭시 새 탭에서 열기 구현
      popup html 구현
      DomContentLoaded 이벤트 리스너 등록 & 프로젝트 큰 그림 정리하기
      검색 기록에서 가장 많이 typed된 url 가져오기
      url-typed된 횟수 매핑
      최종 배열 만들기
      Chrome Extension 등록
    • 45
      6주차 자바스크립트 입문
    • 자바스크립트란?
      자바스크립트의 역사
      자바스크립트의 특징
      자바스크립트 엔진이란?
      실습 환경 구축 - 구름IDE
    • 46
      7주차 자바스크립트 문법
    • 기본 문법
      연산자
      데이터 타입
      조건문
      조건문 실습 - 양수 구별하기
      조건문 실습 - 자판기
      반복문
      반복문 실습 - 역순으로 출력하기
      함수
      함수 실습 - 제곱 값 출력하기
    • 47
      7주차 객체지향 자바스크립트
    • 객체지향이란?
      객체지향의 요소
      컨스트럭터(생성자)
      스코프와 호이스팅
      클로저
    • 48
      7주차 Node.js 소개와 설치
    • Node.js 란?
      이벤트 기반 비동기 방식
      Node.js 의 특징
      Node.js의 아키텍쳐
      Node.js 설치
      REPL 활용하기
    • 49
      7주차 기본 모듈과 Node.js 기초
    • 노드의 모듈 개념
      전역 객체 : Global
      OS 모듈
      Utility 모듈
      File System 모듈
      Event 모듈
      노드에서의 상속
    • 50
      7주차 확장모듈 - npm 활용하기
    • npm 소개 및 설치
      확장모듈 설치
      확장모듈 관리
      package.json
      확장모듈 - nodemon
    • 51
      7주차 주요 확장 모듈 - express
    • express 설치
      새 프로젝트
      내부 구성
      페이지 라우팅
      간단한 웹 페이지 이동
    • 52
      8주차 주요 확장 모듈 - express Pug
    • 표현방법 및 계층구조
      태그 ID, 클래스, 속성
      태그 콘텐츠
      자바스크립트와 CSS
      설치 및 예제
      Pug를 이용한 웹페이지 실습
    • 53
      8주차 주요 확장 모듈 - socket.io
    • 클라이언트/서버 통신
      Web Socket이란?
      이벤트 주고 받기
      socket.io를 이용한 채팅 구현 - 구현에 앞서
      socket.io를 이용한 채팅 구현 - 기본
      socket.io를 이용한 채팅 구현 - 추가 기능
      socket.io를 이용한 채팅 구현 - 도전 문제
    • 54
      8주차 실전 프로젝트 - 빙고 게임 만들기
    • 구현에 앞서
      빙고 게임 - 코드
      빙고 게임 - 설명
      빙고 게임 - 도전 문제
    • 55
      8주차 주요 확장 모듈 - mongoose
    • mongoDB란?
      mongoose 살펴보기
      온라인 메모장 만들기 - 구현에 앞서
      온라인 메모장 만들기 - 코드
      온라인 메모장 만들기 - 설명
      온라인 메모장 만들기 - 도전 문제
    • 56
      8주차 주요 확장 모듈 - Redis
    • Redis란?
      Redis 설치하기
      Redis 기본 사용 방법
      Publisher / Subscriber
    • 57
      8주차 실전 프로젝트 - 간단한 SNS 개발
    • 구현에 앞서
      SNS 개발 - passport.js를 이용한 구글 로그인 준비
      SNS 개발 - 코드
      SNS 개발 - 설명
      SNS 개발 - 키 값을 json 파일로 분리하기
      SNS 개발 - 도전 문제
      마무리
    [필독] 과정 공지사항
    01 시작하기에 앞서
    [필독] 과정 공지사항

    해당 과정은 공지와 수갱생 QnA에 슬랙을 사용합니다. 
    슬랙이 설치되어있지 않다면, 아래의 다운로드를 통해서 다운로드 받거나 검색을 통해서 슬랙을 다운로드 받아주세요.

    Window Download https://slack.com/intl/ko-kr/downloads/windows 

    Mac Download https://apps.apple.com/app/slack/id803453959 

    과정 시작 후 등록시 사용하였던 메일을 통해 슬랙 초대장을 보내드립니다. 초대장을 통해 K-digital Credit 슬랙으로 입장해주세요


    수료 기준 

    1. 강의 진도율 강좌의 진도율이 90% 이상일 경우 수료할 수 있습니다. 

    2. 과제종합  과제의 평균이 70% 이상일 경우 수료할 수 있습니다. 

    위의 두가지 기준모두 충족할 경우 과정을 수료합니다. 


    수강자 혜택

    슬랙 질문 채널을 사용할 경우 현직 개발자분들이 직접 질문에 답변을 해드립니다. 6주차까지 수료 기준 2가지를 충족한 수강생분들에게 '코딩테스트 모의고사'를 제공합니다. 

    ✔️모의고사의 경우 추가 공지사항으로 안내드립니다.

    8주차까지 수료 기준 2가지를 충족한 수강생분들에게 '수료증'을 발급합니다. 

    질문하기