Thumbnail
개발 · 프로그래밍 웹 개발

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지 대시보드

(5)
3개의 수강평 ∙  110명의 수강생
264,000원

월 52,800원

5개월 할부 시
지식공유자: 개발자의 품격
총 51개 수업 (26시간 26분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 자바스크립트에 대한 강의입니다. 이 강의는 지식공유자의 저서 <바닐라 자바스크립트>의 내용을 바탕으로 만들어진 강의입니다.

✍️
이런 걸
배워요!
자바스크립트 기초 구문
ES 최신 구문
Ajax, XMLHttpRequest, Fetch API
DOM 제어
CRUD 패턴 구현

순수 자바스크립트를 익히며
주도적인 개발자로 성장하기 ✨

'바닐라 자바스크립트' 저자 직강!

풀스택 웹 개발자 로드맵 🖥️

  • 본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 바닐라 자바스크립트에 대해 다루는 강의입니다.
  • 웹 개발 풀스택 코스는 HTML&CSS → 바닐라 자바스크립트 → 부트스트랩 → Vue.js → 데이터베이스 → Node.js → 포트폴리오까지 풀스택 웹 개발을 위한 전 과정을 포함하고 있습니다.
  • 웹 개발 풀스택 코스를 모두 수강하면 여러분은 웹 개발에 대한 기초뿐만 아니라 실무에 바로 적용할 수 있는 기술을 익히게 됩니다.

What is 바닐라 자바스크립트?

JavaScript logo and symbol, meaning, history, PNG

자바스크립트만 제대로 배우면
프런트엔드에서 백엔드까지
모든 프로그램을 구현할 수 있게 됩니다.

최근에는 대다수의 웹이 프론트엔드 리액트, 뷰, 앵귤러와 같은 프레임워크를 사용해서 개발되고 있습니다. 이러한 프론트엔트 프레임워크를 사용하지 않더라도 최소한 jQuery 같은 라이브러리를 통해서 개발의 편의성을 가져가고 있습니다.

잘 되어 있는 프런트엔드 프레임워크를 사용하면 개발 생산성을 향상할 수 있고, 일정 수준의 코드 품질을 보장받을 수 있습니다. 하지만 웹 개발자가 이런 프론트엔드 프레임워크와 오픈소스 라이브러리에만 의지해서 개발하다 보면, 어느 순간 외부 도움 없이는 웹 애플리케이션을 개발할 수 없는 상태에 이르게 되기도 합니다.

우리가 사용하고 있는 수많은 프런트엔드 프레임워크와 라이브러리도 순수 자바스크립트로 누군가가 개발해 놓은 것입니다. 그리고 지금 당장 대세이고 영원할 것 같은 리액트나 뷰 같은 프레임워크도 언제 외면받을지 모르고, 웹은 그 어떤 환경 보다 빠르게 발전하고 있기 때문에 앞으로도 무수히 많은 프레임워크와 라이브러리가 지속적으로 나올 것입니다.

이런 흐름 속에서 우리 개발자는 무엇에 집중해야 할까요? 그건 바로  순수 자바스크립트, 즉 바닐라 자바스크립트입니다. 어떠한 라이브러리나 프레임워크를 쓰지 않는 순수 자바스크립트를 '바닐라 자바스크립트'라고 부릅니다. 


자바스크립트, 왜 배워야 할까요?

JavaScript is Everywhere.

Node.js가 나오면서 자바스크립트는 더 이상 웹 브라우저에 종속된 언어가 아닙니다. 웹 애플리케이션은 물론이고 데스크톱 애플리케이션, 모바일 앱, 키오스크, 게임, 아두이노 같은 마이크로 컨트롤러까지 자바스크립트를 사용할 수 있는 분야는 점점 다양해지고 있어요.

자바스크립트 언어 하나를 잘 익히는 것만으로도 할 수 있는 게 점점 늘어나고 있어요. 그런데, 이 말은 자바스크립트를 예전에 웹 브라우저에서 HTML DOM을 핸들링하는 정도의 수준이 아닌 좀 더 고차원적인 코딩을 해야 한다는 뜻이기도 해요. 그래서, 자바스크립트를 제대로 배우고 제대로 사용할 수 있어야 해요.

자바스크립트로 할 수 있는 다양한 개발 분야


이 강의의 특징!

쉽고 자세하게
실무 응용 중심
예제 코드까지!
  • 자바스크립트의 기본 문법을 차근차근 알려드려요.
  • 자바스크립트 내장 함수의 기능뿐만 아니라, 실제 개발 실무에서 어떻게 적용되는지 알려드려요.
  • 기능 중심의 강의가 아니라, 용도 중심으로 진행돼 정확한 사용법을 익힐 수 있어요.
  • ES 최신 구문을 다룹니다.
  • 서버 통신을 위한 XMLHttpRequest, Fecth API를 배웁니다.
  • DOM을 직접 제어하는 방법을 배웁니다.
  • CRUD 패턴을 개발하는 방법을 배웁니다.
  • 모든 예제 코드는 깃허브를 통해 제공됩니다.

무엇을 배우나요?

  • 개발 IDE 툴로는 비주얼 스튜디오 코드(Visual Studio Code)를 사용합니다. 비주얼스튜디오코드를 이용한 개발 방법 및 유용한 확장 프로그램을 알게 됩니다.
  • 자바스크립트의 기초 문법에 대해 확실히 이해하게 됩니다.
  • 자바스크립트 개발자가 꼭 알아야 할 ES6 문법까지 익힐 수 있어요.
  • HTML DOM을 핸들링하기 위한 자바스크립트 사용법을 알 수 있습니다.

선수 지식을 확인하세요!

  • HTML에 대한 기본 지식이 있어야 해요.
  • CSS를 알아야 해요.
  • 본 강의를 수강하기 전에 [웹 개발 풀스택 코스 - HTML&CSS] 강의를 수강하는 것을 추천합니다.

웹 개발 풀스택 코스,

다른 강의도 함께 만나보세요!

1. [웹 개발 풀스택 코스 - HTML&CSS 기초]

  • 웹의 기초 언어인 HTML과 CSS를 차근차근 배워요.

2. [웹 개발 풀스택 코스 - 바닐라 자바스크립트] 현재 강의

  • 순수 자바스크립트를 제대로 익혀야 리드하는 개발자가 될 수 있어요.

3. [웹 개발 풀스택 코스 - 부트스트랩 기초]

  • 누구나 쉽게 멋진 디자인을 갖는 반응형 웹을 만들 수 있어요.

4. [웹 개발 풀스택 코스 - Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지]

  • 가장 쉽고 막강한 프론트엔드 프레임워크인 Vue.js를 익혀요.

5. [웹 개발 풀스택 코스 - 넷플릭스와 당근마켓 분석을 통해 배우는 데이터베이스 이해]

  • 넷플릭스, 당근마켓을 분석하면서 자연스럽게 데이터베이스를 설계하는 방법을 이해하게 돼요.

6. [웹 개발 풀스택 코스 - Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지]

  • 자바스크립트 언어로 백엔드까지 구현할 수 있습니다. Node.js면 가능합니다.

7. [웹 개발 풀스택 코스 - 포트폴리오]

  • 웹 개발 풀스택 코스를 통해 배운 모든 기술을 바탕으로 제품 판매 미니 웹을 개발합니다.

이 강의를 만든 사람은
누구일까요?

개발자의 품격

소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 24년 차 소프트웨어 개발자.
지식을 나누는 것을 좋아하고, 항상 새로운 기술을 익히는 것을 즐겨요.

국내외 60개가 넘는 글로벌 기업 ERP 시스템을 구축하는 컨설턴트 및 개발자로 활동하였고, 직접 개발한 소프트웨어를 국내는 물론 해외 유수의 기업에 판매한 경험 또한 가지고 있어요. IT 스타트업 대표이사이기도 해요.

개발자뿐만 아니라 UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전 과정에 대한 수많은 경험을 쌓았습니다. 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감으로 지식을 나누는 일을 하고 있어요.

더 알아볼까요?

[웹 개발 풀스택 코스] 시리즈 모아보기

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
웹 개발자가 되고 싶은 사람
자바스크립트 기초를 제대로 배우고 싶은 사람
📚
선수 지식,
필요할까요?
HTML
CSS

안녕하세요
개발자의 품격 입니다.
개발자의 품격의 썸네일

소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 24년차 소프트웨어 개발자.
지식을 나누는 것을 좋아하고 항상 새로운 기술을 익히는 것을 즐겨요.

국내외 60개가 넘는 글로벌 기업 ERP 시스템을 구축하는 컨설턴트 및 개발자로 활동하였고, 직접 개발한 소프트웨어를 국내는 물론 해외 유수의 기업에 판매를 한 경험 또한 가지고 있어요. IT스타트업 대표이사 이기도 해요.

개발자 뿐만 아니라, UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전과정에 대한 수많은 경험을 쌓았고, 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감을 갖고 지식 나눔에 일을 하고 있어요.

 

  • (현)주식회사 더그레잇 대표이사
  • (현)주식회사 썬슈어 CTO
  • (현)주식회사 리턴밸류 CTO
  • (현)팬임팩트코리아 유한회사 기술전문위원

 

이메일 - seungwon.go@gmail.com

커리큘럼 총 51 개 ˙ 26시간 26분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 자바스크립트 기초 구문
자바스크립트란 미리보기 16:33
자바스크립트 작성 위치 18:31
console 객체의 log 함수 06:41
변수 선언자 var, let, const 미리보기 38:17
기본 데이터 타입 31:43
데이터 타입 - Object 21:42
데이터 타입 - Array 16:05
64비트 부동소수점 34:27
연산자 36:41
조건문 36:21
반복문 01:03:44
함수 미리보기 44:35 [특강] 자바스크립트 메모리 관리 미리보기 23:18
섹션 1. 내장 함수
String 객체 내장 함수 미리보기 01:28:21
Number 객체 내장 함수 22:37
Array 객체 내장 함수 01:40:53
Date 객체 내장 함수 43:58
Set 객체 내장 함수 19:20
Map 객체 내장 함수 12:27
Math 객체 내장 함수 51:12
JSON 객체 내장 함수 16:00
window 객체 내장 함수 23:14
섹션 2. 자바스크립트 고급 구문
this 키워드 13:45
스코프(scope) 08:03
기본 함수 매개변수 09:36
나머지 매개변수 09:54
화살표 함수 16:08
템플릿 리터럴 06:35
객체 리터럴 구문 확장 08:04
스프레드 연산자 05:34
객체 구조 분해 할당 07:47
배열 구조 분해 할당 11:27
XMLHttpRequest와 json-server 56:44
Fetch API 27:34
async & await 11:27
모듈(module) 10:59
클래스(class) 19:55
오류처리(error) 16:47
엄격모드(strict mode) 07:42
정규표현식(Regular Expression) 57:43
섹션 3. DOM
DOM 요소 가져오기 34:46
DOM 속성 다루기 26:01
DOM 이벤트 다루기 01:49:49
DOM 요소 변경하기 29:42
Input Validity 26:20
섹션 4. CRUD 구현
CRUD 리스트 화면 29:16
CRUD 생성 화면 01:21:45
CRUD 상세 화면 20:47
CRUD 수정 화면 15:17
CRUD 멀티 생성 화면 48:10
심플 데이터 그리드 개발 01:32:08
강의 게시일 : 2023년 04월 11일 (마지막 업데이트일 : 2023년 05월 13일)
수강평 총 3개
수강생분들이 직접 작성하신 수강평입니다.
5
3개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
백경민 thumbnail
5
자바스크립트의 기본기를 충실히 다질 수 있어 좋네요
2023-10-19
최한결 thumbnail
5
강의 듣고 바닐라 자바스크립트 실력이 많이 향상됐어요. 만족합니다! 다음에는 nodejs 들으려고 하는데 기대되네요!
2024-01-16
이동겸 thumbnail
5
!!!!!!!!!!!!!
2024-02-21
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!